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

class네임을 이벤트로 쓰지말것 css적용시 힘듦 데이터 관리를 더 세분화 시킨 항목으로 관리할수있도록 설계할것 setState해주는 메소드는 같은기능이면 최대한 재사용할것 효율적. 네이밍을 넓은 범위로 지어 재사용및 가독성 좋게 만들려고 노력하기 리액트 내에서 state를 변경시켜주는 메서드들이 있다. 하드코딩이 필요한 순간이 있으면 최대한 하지 않는쪽으로 생각해보고 그전에 하드코딩을 하지 않도록 설계를 꼼꼼히 할것(그림,글) 발표전 말할순서를 정하고 천천히 진행하니 잘 정리 되었다는 피드백을 받았음

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에서는 ..

화,수,목 3일동안 N-Queens 라는 알고리즘 스프린트를 진행했다. 게임 룰은 다음과 같다. 1) N * N 의 체스판에 N개의 룩을 놓아야 한다. 2) N* N 의 체스판에 N개의 퀸을 놓아야 한다. 룩은 수평,수직으로만 움직일 수 있고 퀸은 수평,수직,대각선으로 이동이 가능하다. 1번과 2번의 경우의 수를 각 각 모두 구해야 하는데 룩과 퀸의 이동범위가 달라 꽤 애를 먹었다. 어렵기로 유명한 알고리즘 문제이지만, 그동안 꼬아서 푸는 문제를 푸는데 재미가 붙어서 '나 혼자 엄청 독창적인 생각을 하고 말거야' 라는 생각을 가지고 스프린트에 임했던 것 같다. 처음에 알고리즘을 풀기전 주어진 메소드들을 페어와 직접 작성해보는 시간이 있었는데, 우리는 처음 속도는 남들보다 느렸지만,, 디버깅을 꼼꼼히 그리..

자바스크립트라는 언어는 본디 '프로토타입'기반의 언어이다. 상위 클래스의 물건들을 상속받아 자신의 것 처럼 쓸 수 있었던 '클래스'기반의 언어와는 다르게 자바스크립트는 태생부터 '상속'이라고 명시된 기능은 존재하지 않는다. 하지만, __proto__를 이용한다면 상속의 기능을 구현 할 수가 있다. 1. 어떻게 상속이 가능해지는데? 상속을 학습하기 전에 앞서, 상속은 기본적으로 아무것도없이 이뤄 질 수 없기 때문에 무언가를 상속 할 수 있는 기본적인 틀을 생성해줘야한다. 자바스크립트에서 누군가를 생성하는 것이 "constructure(생성자)"의 획득을 통해 가능해지는데, 이는 new키워드를 통해 만들어진 모든 것에 주어진다. var changeStr = new String(); var changeObj ..

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

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