체대출신 코더의 개발자 성장기

1. 비동기적인 활동(Fetch,Ajax)등은 컴포넌트의 랜더링이 끝난다음(자바스크립트 스택에서 이뤄지는 일), 비동기 큐에서 들어온 순서대로 일을 처리한다. 따라서 CompoundDidMount 의 순서에 비동기적인 활동을 실행시켜주어야 한다. 2. 리액트 컴포넌트의 생명주기 중에서 setState는 다음에 무조건 리 랜더링이 일어나게 된다. 따라서 랜더메소드 내부에서 setState를 실행하게되면 setState => render => setState => render 이 반복적으로 일어나기 때문에, StackOverFlow가 일어나게 된다. 3. 검색을 위해 리액트를 사용하기위해 상위State에서 하위 State로 property를 내려줄때는 하위에서 검색해 받은 value값을 상위 컴포넌트로 올려..

1. state state는 풀이하면 '상태'라는 뜻이다. 그러면 React에서의 state는 무슨 상태를 의미일까? 이전 블로깅에서는 component를 상류와 하류 props는 상류에서 하류로 전달되는 물들이라고 비유했다. state는 현재 componenet의 '상태'. 즉, 고유하게 가지고 있는 인자이다. 설명이 모호한가..? 그렇다면 상류에서 하류로 가는 길목마다 댐이 하나씩 있다고 상상해보자 댐에서 하류로 물길(prop)을 내리기전 고여있는 물의 '상태'를 state에 비유할 수 있겠다. 댐이 누군가에 의해 수동적으로 열리기 전 까지는 물의 양이 변하지 않는 것 처럼 state의 상태는 현재의 컴포넌트가 가진 고유한 특성이므로 누군가 바꿔주기 전 까지는 바꿔줄 수 없다. 만약, 바꿔주고 싶다면..

어느새 3주차를 달리고 있다. 그동안 개발물들은 직접적으로 HTML이나 CSS에 손을 대서 작업을 했었지만, 페이스북에서 '너넨 코딩이나 해' 라며 프론트엔드에 적합한 언어를 개발했는데, 그것이 바로 오늘부터 4일간 나와 동고동락할 "React"이다. 잠깐 만져봤지만 참 유용하고 재미난 친구이다. 하지만, 프로그래밍 언어를 처음 배울때의 기분이 새록새록 나고 있다. (어려워...) 숙제 겸 복습 겸, React의 중요 키워드인 component, props, state, life-cycle에 대해서 간단히 알아보자. 1. 컴포넌트 컴포넌트는 하나의 "커스터 마이징 된 HTML태그"이다. 보통 HTML문서는 아래와 같이 사용한다. Hello 하지만 저걸 Hello라는 태그로 만들고 싶으면 React에서는 ..

그동안 다뤄온 자료구조형태는 데이터를 찾기위해 끝단의 데이터를 빼주면서 찾거나(스택,큐), 해당데이터를 찾을때까지 데이터를 비교하면서 찾아다니거나(연결 리스트), 위에서 아래로 혹은 돌면서 자식 노드들을 살펴보거나(트리,B-트리) 의 방식을 이용했는데 저장에는 좋은방식들 일수도있겠지만, 데이터를 찾는데 시간이 걸린다는 단점이 있었다. 하지만 우리 핸드폰 내의 전화번호부처럼 글자순으로 데이터가 잘 정리되있다면 어떨까? 데이터를 훨씬 빨리 찾을 수 있지 않을까? 1. Hash Table 이란? 해쉬테이블은 데이터를 해쉬함수를 이용해 배열의 인덱스로 변환하여, 환산된 인덱스의 배열방에 데이터들을 담는 것을 의미한다. 배열의 인덱스로 데이터를 가져오는것은 컴퓨터가 가장 쉽게 처리 할 수 있는 일이기 때문에, 데..

세상에는 너무나도 많은 관계가 존재한다. 사람과 사람의 관계에서도 짝사랑같은 일방적인 관계가 있는 반면, 커플들처럼 양방향적인 관계또한 있다. 또한 인생에는 너무나도 많은 갈림길이 존재한다. 점심식사를 고를때도 중식,한식,일식 ... 그안에서도 짜장면,짬뽕,돼지불백,스시 등 등.. 머릿속이 터질것 같은 이러한 고민들을 컴퓨터로 정리 할 수 있다. 바로 그래프를 통해서 말이다. 1. 그래프란? 그래프는 단순히 노드와 그 노드들을 연결하는 엣지를 모아놓은 것이다. 그 모음으로 실제 세계의 현상이나 사물 표현하는데 주로 사용한다. 그래프로 다음과 같이 사물들간의 관계와, 순서를 표현할 수 있다. 2. 용어.. 어디서 들어봤는데.. 노드, 엣지.. 어디서 많이 봤던 용어 아닌가? 그렇다 트리에서 나온 용어이다...

1. B-트리란? 기존의 트리는 1개의 노드에 1개의 데이터를 저장할 수 있었다면, B-트리는 1개의 노드에 여러가지의 데이터를 지니고 있다. 이는 많은 정보를 더더욱 효율적으로 저장할 수 있으며 노드의 가지의 수와 높이가 기존의 트리구조보다 현저하게 적어질 수 있도록 해준다. 2. 노드의 가지수가 적어지면 안좋은거 아닌가? B-트리는 앞서 말했다시피 하나의 노드에 많은 정보를 담고 있다. 이는 간선의 높이를 동일하게 만들어준다. 기존 트리구조는 데이터를 하나만 담고 있었기에, 원하는 데이터를 찾기 위해서는 데이터를 찾고 다음 데이터로 이동하는 과정을 계속 거쳐야 했지만 B-Tree는 하나의 노드안에 여러개의 데이터를 담고 있기 때문에 다음 노드로 이동하는 과정을 많이 줄일 수 있다. 따라서 다음노드를 ..

1. 트리 구조의 정의 시험기간 공부 할 때, 아무런 계획도 없이 책을 처음부터 시험범위까지 본다면 과연 머리에 다 들어올까?? 엄청 똑똑한 사람이 아니면 힘들지 않을까? 보통 책을 보면 목차가 나뉘어져있다. 목차는 단원 - 주제 - 내용으로 나뉘어져 있고, 갯수만 보자면 1단원 안에 여러개의 주제들이 있고 그 주제들은 여러개의 내용들로 나뉘어져 있다. 이런 방식으로 공부하면, 마구잡이로 정리하는 것 보다는 머릿속에 정리되어서 남는다. 이러한 데이터 정리방식이 컴퓨터의 자료구조에도 있다면 어떨까? 자료를 분류하고 다시 가져오는데 효율적이지 않을까?? 이러한 데이터 정리 방식을 '트리구조'라고 칭한다. 그리고 상하관계가 있는 형태를 '계층'이 있는 자료구조 형태라고 한다. 2. 트리 구조를 왜 사용할까? ..

나는 오늘 처음으로 서울에 상경했다. 패스트파이브 성수점에 가고싶은데 지하철이랑 버스는 어떻게 타야할지 모르겠고.. 저 많은 건물들 중 뭐가 패스트파이브인지 알아야 한단 말인가.. 결국 길거리를 지나다니는 행인 분 들한테 물어보기로 했다. (강변역 도착) 나 : 저기 혹시 패스트파이브가려면 어디로 가야하죠..? 행인 1 : 아 그 성수역에 있는거요? 그럼 일단 성수역에 가셔야 하는데, XX번 버스타시고 기사님한테 어디서 내려야 할지 물어보세요 (버스 탑승) 나 : 저 혹시 서울이 처음이라 그런데.. 성수역 가려면 어디서 내려야 하죠? 버스기사 : 3정거장 뒤에 내리세요~~ (버스 하차) 나 : 저 혹시 패스트파이브가 어디에요? 행인 2 : 앞으로 쭉 걸어가다 보시면 될거에요! (패스트 파이브 도착) 1...