Enjoy Programming

지금 진행 중인 project가 크게 typescript , nextjs, graphql, apollo client를 사용해 진행중이다. 생각보다 nextjs와 apollo client에서 많이 막히게 된다.. 기본적으로 둘에대한 국내 reference가 별로 없다. 전부 stackoverflow또는 해외 it community가 전부이다. 근데 검색하고 하다보면 역시 공식문서가 짱이다.. 그렇게 생각하고 공식문서를 열심히 보면 또 extends된 기능들이나 공식문서 만으로는 해결이 안되는 문제들이 많다.. ㅠㅠ 첫번째로 최근에 경험 했던 간단한 에러를 살펴보겠다. 먼저 필자는 공식문서에 나온 apollo:codegen을 기본적으로 사용하고 있고 부가적으로 graphql-codegen도 사용중에 있다. ..

자 바닐라 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같은 메서드를 이용해 변경해..

앞선 포스팅에 이어 socket.io를 이용해 콘솔창에 메세지를 주고받는 것을 해보자. 역시 중요한 것은 socket과 on(), emit(), broadcast.emit()의 역할만 잘 이해하고 있으면 된다. 우선 클라이언트 측에서 메세지를 보내는 함수를 하나 작성한다. sendMsg 라는 함수에 msg라는 파라미터를 받게 되면 socket.emit을 통해 Msg라는 이벤트를 발생시키고 msg파라미터를 받아 전송한다. 그리고 메세지를 전송한 클라이언트의 콘솔창에 메세지를 띄워준다. 마찬가지로 받는 클라이언트 측의 메세지를 출력하는 함수를 작성하고 받아보자 이 함수도 클라이언트측에서 작성된다. callback함수인 handleMsgNoti에 data를 받는데 이는 위에 작성한 msg가 된다. 그리고 받은..

드디어 다음 포스팅을 한다..;; 이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면. 이번에는 props를 전달해보자. 이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아 이를 출력하는 코드를 짜보면 먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter props를 전달해준다. 이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로 props의 타입을 정해준다. prop-types에서 정해주는것처럼 그리고서 Number: React.FunctionComponent 로 명명해서 이 컴포넌트가 react의 fu..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat Array.prototype.flat() - JavaScript | MDN flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다. developer.mozilla.org Array.flay() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다. 구문 const newArr = arr.flat([depth]); depth는 중첩 배열 구조를 평탄화할때 사용할 값, 기본값은 1이다. 반환 값은 하위 배열을 이어붙인 새로운 배열 depth의 기본값은 1이고 in..