Enjoy Programming

하 마음이 좀 이제 낫다... 본디 겁 없이 살아 온 사람인지라 솔직히 공부하면서 재미있고 이상하게 계속 들여다 보게 되고 더 배우고 싶고 그런 분야여서 그런지 그냥 무작정 공부한 것 같다. 작년 7월 부터 지금까지 약 1년의 시간이지만 진로를 제대로 정하고 공부를 한건 3개월 조금 넘게 한거같다. 7월부터 시작한 국비는 솔직히 시간을 아깝게 썼다는 생각은 있다. 처음 국비 학원에 웹개발을 배우기 위해 문에 들어섰을 때가 생각난다. 웹개발 백엔드를 배우고 싶다고 무작정 갔는데 상담사왈.. 어렵습니다. 전공도 아니셨고 코딩도 처음 접해보시고.. 그러니 웹디부터 시작해서 올라가세요라고.. 맞는 말이다. 근데.. 몇일 뒤 다시 찾았을 때 갑자기 웹개발자 과정이 아닌 전혀 다른 인공지능과 라이다를 활용한 국비 ..

이번에 프론트엔드 면접을 보며 절실히 느끼고 또한 코드를 작성하면서 그리고 여러 것을 배우면서 느꼈던 원리에대한 이해의 부재가 얼마나 큰지 와닿았고 더 나은 코드 더 좋은 프로그래밍을 하기 위해 처음 자바스크립트 책을 샀다. 검색도 해보고 알아보고 했는데 이게 책이 상당히 두껍긴 하지만 많은 사람들이 추천하고 현재에 머물지 않고 앞으로 나아가기 위해 도움이 될 수 있겠다 판단해서 오늘 바로 송도로 달려가서 사왔다. 왜 이리 재고가 없는 것이냐;; 동네랑 청라 검단 몇 군데를 전화했는데 전부없었다.. 인터넷가는 4만500원 송도 교보문고에 재고 확인해보니 1권이 딱 !!!! 오케이 바로 건너가서 샀다 45000원... ㅋㅋㅋ 톨비에 기름값까지 5만원에 샀네;; 그러니 더 열심히 공부하고 내 것으로 만들자 ..

dispatch와 getState를 할 수 있으니 이제 subscribe를 해줘야하는 건가? 구독해서 렌더링 해줘야 한다. 컴포넌트 하나를 더 만들어보자. 그냥 렌더링 될 todo list 컴포넌트이다. 이 컴포넌트가 받아야할 prop은 이미 text인것을 알기에 text를 넣어주고 랜더링 해준다. 이제 홈컴포넌트에서 각 text를 넣어주면 된다. spread를 사용해 보내줬다. 위 코드는 익숙한 방식으로 풀어보면 요렇게 되겠다. 이렇게 todo가 넘어가고 destructure로 {text}만 받는 구조. 자 그럼 생각해보자 home 컴포넌트는 이미 connect를 연결해서 state와 dispatch를 해줬다. home은 state도 필요했고 dispatch도 필요했으니 mapState와 mapDisp..

어제 포스팅에 이어 react-redux를 더 해본다. 어제 포스팅에서는 connect()를 사용해 컴포넌트에 getState()하는 방법을 알아봤다. mapStateToProps.. 어쩌구 다시 읽어보자. 이번에는 중요한 dispatch하는 방법을 알아보자. 공식 문서를 읽어보자. 일반적으로 mapDispatchToProps라고 부른다고 한다. connect()의 두번째 파라미터로 이 파라미터는 객체나 함수이거나 또는 제공되지 않을 수 도 있다고 한다. 그리고 위처럼 connect(mapState, mapDispatch) 의 형태로 써주면되는데 만약 mapState를 안할거라면 null로 바꿔주면 된다. 그리고 만약 mapDispatch를 함수로 정의 했다면 최대 두개의 파라미터를 부를 수 있다고 한다..

자 바닐라 redux를 사용해 봤으니 react에서 redux를 사용해본다. 초기 설정은 거의 동일하다. redux는 깔려있으니 필요한 react-redux를 설치해주자. 그리고 Store.js를 만들어서 동일하게 todo를 관리할 store를 만들어주고 store를 export시켜준다. 어딘가에서 써야하니까. 이제 react-redux를 사용할 차례이다. 이전 포스팅에서 subscribe를 썻었다. store의 변화를 감지해야하니까. 변화가 있으면 app을 다시 rendering해야하는데 react에서는 rendering이 전체로 일어나는게 아니고 변화가 있는 부분만 rerendering된다. 무슨차이지?... 변화만 있는 부분만 재랜더링 해도 되지않나? 생각이 들지만 진행해보자. 자 이제 store를..

전 포스팅에 이어 오늘은 redux를 이용해 todo리스트를 만들어보자. 그에 앞서 redux의 중요한 세가지 룰을 알아보자 먼저 Single Source of Truth Redux는 앱의 state를 위해 단 하나의 store를 이용한다. 모든 state가 한곳에 있기 때문에 이렇게 부른다. store의 데이터 구조는 nested된 구조로 이루어져 있다. 자바스크립트 객체로써 {{{{},{},{}},{}}} 이렇게 정리되어 있다. 두번째로 state는 read-only이다. 절대로 직접 mutate하면 안된다. state를 변경하기 위해서는 action을 통해 dispatch되어야 한다. 이말인 즉슨 예를 들어 state가 배열이라면 새로운 값이 들어올때 기존 배열을 push같은 메서드를 이용해 변경해..