Enjoy Programming

이번엔.. 그동안 계속 알아봐야지 하던 useContext를 조금 알아보자. 먼저 프론트엔드 개발을 하며 상태관리는 필연적인 요소이다. 어떻게 하면 더 직관적으로 상태를 소실하지 않고 여러 컴포넌트에서 잘 사용 할 수 있을까.. 필자는 현재 apollo 를 사용하다 보니 redux를 사용하지않고 캐싱을 주된 store로 이용하고 있다. 그런데 이게 좀 어렵긴 하다. fragment를 해주고 cache를 modify하는 작업들이 뭔가 쉽진 않다. 이게 backend에서 어떻게 schema를 구성해주느냐에 따라서도 영향을 미치기 때문에.. 일단 현재 필자가 사용하는 apollo caching을 한번보면 먼저 graphql서버로부터 유저의 프로필을 받아오는 hook을 하나 만들어서 통신을 한다. fetchPo..

프로젝트가 타이트 해서 개발하느라 블로그를 오랜만에 작성한다.. 틈틈히 하려고 하는데 ㅠㅠ 아직 skill이 부족한 탓이지.. 오늘 포스팅은 현재 프로젝트에서 겪은 이슈중 하나인 firebase idtoken이 1시간이 만료인 터라 background에서 주기적으로 refresh를 해줘야 하는 문제가 있었다.. 먼저 맡겼었던 외주쪽은 아에 해결을 못하고 그냥 백에서 인증하라고 했었다가.. 결국 외주와의 관계를 끊었다.. (뭐 이것 뿐만이 아닌 베타를 위해 외주를 맡겼는데 베타테스트도 못할 정도로 마무리를 해놔서 결국 필자가 진행하고 있는 프로젝트로 런칭을 가기로 결정이 났다) 자 본론으로 들어가서 해결한 방법만 빠르게 기술하자. 현재 로직은 이렇다. graphql 서버에서 firebase custom t..

현재 프로젝트 진행 중 apollo client를 이용하여 back의 graphql 서버와 pubsub을 구현 중인데.. 아오 해결이 잘안된다.. 왜 useSubscription은 caching이 안되고 사라지는 것일까.. 진행중.. 정리 후 다시 포스팅

project 진행중 인증 유효시간을 구현중 문제가 생겼다... 시간 state를 로컬스토리지에서 사용하려고 window.localStorage를 사용하려고 했는데 이게 왠걸 useEffect안에서는 사용이 되는데 state안에서는 사용이 안되는 것이다;;; 검색을 해보니 nextjs에서는 먼저 server side가 랜더링되고 그 이후 client side가 랜더링 된다. 당연히 server side에는 window객체가 없다. 그래서 window 나 document 객체는 componentDidMount 내에서 실행해 줘야 하는 것이었다. 그래서 useEffect에서는 발동을 하지만 먼저 선언해버리면 안되는 것이었다. 자 해결을 해보자... 여러가지 시도를 하던중.. 아직 nextjs는 제대로 문서를..

오랜만의 포스팅이다 이제 다시 포스팅을 짬짬이 조금씩이라도 해보려한다. 현재 react 프로젝트를 진행중이라 react에 관한 포스팅을 기재한다. 자 react는 virtual Dom을 사용한다. 뭐가 좋은가 virtrual DOM을 브라우저의 memory에 올려 브라우저의 Dom을 변경하기 전에 이전 v-dom과 현재의 v-dom을 비교해서 바뀐 최소 부분만 반영을 한다. 그러니 랜더링 과정이 최소로 이루어지고 이를 자식 노드까지 반복한다. 모든 비교가 끝나면 Dom Tree에 반영! 비교하는 Elem이 바뀐 경우 이전 v-dom을 제거하게 된다. (컴포넌트 윌 언마운트, useEffect 정리) 이때 모든 자식들도 제거되고 재생성 된다. elem이 같다면 prop을 수정한 뒤 자식들의 노드를 비교한다..