Developer_52

https://reactjs.org/docs/hello-world.html에서 react에 대해 공부하고 정리해본다. State and Lifecycle. State는 props와 유사하지만, 공개되지 않고 component에 의해 완전히 제어된다. State를 사용하려고 하면 우선 사용하려고 하는 위치의 component를 Class로 변환해야 사용이 가능하다. Class로 변환하는데는 다음과 같은 단계로 변환할 수가 있다. 1. React.Component 를 확장하는 동일한 이름의 ES6 class를 생성한다. 2. render() 라고 불리는 빈 method를 component 안에 추가한다. 3. component 함수의 내용을 render() method 안으로 옮긴다. 4. render() ..

JavaScript 2019. 11. 5. 00:34

https://reactjs.org/docs/hello-world.html에서 react에 대해 공부하고 정리해본다. Element Rendering. element는 React에서 가장 작은 단위다. element는 화면에 표시할 내용을 아래와 같이 나타낸다. const element = Hello, world React 엘리먼트는 일반 객체이며, 쉽게 생성할 수 있다. React DOM은 React element가 DOM에 맞게 element를 바꿔준다. HTML에 가 있다고 할 때, 이 안에 들어가는 element들을 React DOM이 관리를 한다. 이때 HTML의 를 “root DOM” node라고 부른다. React로 구현이 되는 Application은 보통 하나의 루트 DOM 노드가 있다. ..

카테고리 없음 2019. 10. 29. 22:57

https://reactjs.org/docs/hello-world.html에서 react에 대해 공부하고 정리해본다. React에서 사용하는 태그 문법은 문자열이나 HTML이라고 부르기엔 좀 애매하다. React에서는 이벤트가 처리되는 방식과 시간에 따라 상태(state)가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등의 rendering 로직이 다른 사용자 인터페이스와 연결이 되게 해준다. const name = ‘ martin Han ’; const element = Hello, {name} ; ReactDOM.render( element, document.getElementById(‘root’) ); 위와 같이 쓰여진 선언은 JSX라고 하며 JavaScript를 확장한 문법이다. J..

JavaScript 2019. 10. 29. 22:39

보통 컴퓨터를 사용하는 이유는 정보를 주고 받기 위해서이다. 컴퓨터에서 정보를 얻기 위해서 우리는 구글이나, 다음, 네이버등을 이용하기 위해 인터넷 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등의 Web Browser를 사용한다. Browser란 정보를 검색하는데 사용하는 응용 프로그램이다. 브라우저는 팀 버너스 리가 처음으로 제안을 해 만들어 졌다 (Nexus [ 구) 월드 와이드 웹(WWW)]). 우리는 이러한 Browser를 통해서 구글, 다음 등의 서버에 들어가게 된다. Server란 정보를 내보내 주는 저장소(컴퓨터)이다. Server의 종류에는 도메인 Server, 메일 Server, 웹 Server, 이미지 Server등 다양하다. 컴퓨터에서 도메인과 관련된 정보를 주면 도메인서버, 이..

JavaScript 2019. 10. 29. 22:34

Tree 구조는 Graph Data Structure의 한 종류다. JavaScript에서 object(객체)는 Tree 구조와 매우 유사하다. Tree구조란 어떤 것인지, Binary Search Tree는 무엇인지에 대해 알아보자 우선적으로 Graph와 Tree에 대해 비교를 해보면 아래와 같다. Tree Data Structure는 node로 이루어진 구조로서, 하나의 root node를 가진다. root node는 0개 이상의 child node를 가지고 있으며 그 child 또한 0개 이상의 child node를 가진다. 이러한 과정을 통해 나무 모양의 구조로 나타나는 특징이 있다. node들은 서로 edge로 연결되어 구성되며 tree 구조에서는 cycle이 존재하지 않는다. tree 구조는 ..

JavaScript 2019. 10. 29. 22:29

이번 story에서는 Data Structure 중에서 Graph Data Structure에 대해서 이야기를 해보려고 한다. Graph Data Structure는 지도나 지하철노선, 전기회로 등에 이용될 수가 있다. Graph Data Structure는 수학적인 모형들을 Data Structure로 표현할 수가 있다. 우선 아래의 그림을 통해서 수학적 모형을 확인해보면, 위의 그림을 보면, 각각의 꼭지점들(A, B, C, D, E)가 있고 그것들을 연결하는 모서리가 있다(AB, AD, AE, BC, CD) Graph Data Structure 는 하나의 쌍(V, E)을 세트로 구성하고 있다. V에는 각각의 정점들(vertices)의 노드정보들을 저장하고 있고 E에는 V에 들어가 있는 vertices..

JavaScript 2019. 10. 29. 21:24

Data를 저장하고자 할 때, 저장 및 처리하는 방식에 따라 다양한 자료구조 방식을 가질 수가 있다. 그 중에서 Stack, Queue 그리고 Linked List에 대해서 정리해 보려고 한다. Stack은 Data를 저장할 때 (아래의 책 사진처럼) 순서대로 쌓아올린다고 생각하면 편하다. Data들을 순서대로 쌓아올렸으니 처리를 할 때는 마지막에 쌓아 올린 것(빨간색 책)부터 처리를 해야한다. Stack은 저장을 마지막으로 한거 부터 처리해야 된다. 책을 볼 때 맨 위에 올려진 책부터 순서대로 보고 난 뒤에 가장 먼저 놓아둔 노란 책을 볼 수 있듯이(노란책이나 파란책은 위에 책들이 막고 있어서 펼칠 수 없는 것을 생각하면 좋을 것 같다.)Stack은 처음 저장한 Data를 처리하기 위해서는 그 후에 저..

JavaScript 2019. 10. 29. 21:20