이번주를 돌아보며... 트러블 슈팅 Batch Update 문제: 육안으로는 input 컴포넌트에 아무것도 입력되는 것 같아보이지 않았고 콘솔값을 찍어보면 두번재 setState에 의해 한 글자씩만 입력이 되었다. 그리고 테스트를 위해 setState를 한번 실행하도록 두번째 setState를 주석처리하면 콘솔에는 업데이트 전 state가 출력이 된다. 원인: 비동기인 setState의 특성을 잘 몰랐고 같은 setState 함수가 붙어있을 때 묶어서 한번만 업데이트 되는 Batch Update에 의해 발생하였다. 해결: 이러한 문제점을 해결하기 위해 setState 함수를 ()=>({}) 형태의 함수형 업데이트 방식으로 변경하였고 기대하는 방향대로 input값 입력이 실행되었다. Narrowing 문제: 타입 에러 발생 원인 : 해당 코드에서 타입이 예를 들면 보통 string과 null을 동반하는 Union 타입인 경우가 많았는데 값으로 null 타

a = b === c firebase 로그인 유지 로그인 페이지 측에서 Login 함수에 setPersistence(auth, browserSessionPersistence)를 사용하면 로그인 성공시 session 스토리지에 session 인증정보가 저장되도록 하였다. 그리고 각 페이지에 useEffect와 auth.onAuthStateChanged()로 마운트 시 로그인 여부에 따라 로그인 state가 바뀌도록 하고, state에 따라 jsx단에서 보이는 요소들이 다르도록 삼항 연산자로 구현해보았다. 그리고 로그인 이후 다른 페이지에서 새로고침하면 ![](https://velog.velcdn.com/images/dwg2022/post/11ddf5e2-9644-46cc-8cc7-75fc14

오늘 새로 배운 것 무한 스크롤 구현 onEndReachedThreshold 얼마나 먼저 미리 fetch 할 것인지 설정 onEndReached 실제로 fetch를 해주는 함수 무한스크롤을 간단하게 구현할 수 있도록 해주는 useinfiniteQuery는 인자로 쿼리 키, fetcher 함수, 옵션 객체를 받는다. 새로고침을 하거나 처음 컴포넌트가 마운트 됐을 때 fetcher 함수가 실행되는데, fetcher 함수는 pageParam을 담은 객체를 매개변수로 넘겨주며 fetch 요청을 한다. 그리고 옵션에 getNextPageParam에서 lastPage의 page가 총 page 수보다 적은 동안 lastPage의 page는 +1을 해서 return을 해준다. 리턴 값은 pageParam으로 들어간다. 이 결과값으로 pageParams와 해당 페이지 내부의 정보를 담은 pages 라는 각각 배열 형태의 속성을 가진 객체를 data로 받게 된다.

일주일을 돌아보며... 주말에 리액트 최적화하는 훅에 대해 좀 살펴봤다. 일단 지금은 클래스형이 아닌 함수형 컴포넌트로 훅스 이용해서 구현하고 있는데 클래스형으로는 아직 구현 안해봐서 잘 모르겠지만 일단 배운 것에서 기억나는 부분은, 리액트는 자신의 state가 업데이트 될 때마다 다시 렌더링된다. 그렇기 때문에 새로운 메모리 주소를 참조(변수의 초기화)하는데 useMemo나 useCallback 훅의 원리는 다시 랜더링 해도 메모리에 최초에 생성된 함수 주소를 메모이제이션(이미 계산해놓은 값을 메모리에 저장해놓고 필요할 때마다 꺼내서 재사용하는 것)하도록 하는 원리로 다시 계산을 하지 않고 이미 계산한 값을 재사용함으로써 코드의 효율성을 높이는 것 같다. 물론 이를 사용함으로써 렌더링 결과를 저장하기 위해 잡아두는 메모리가 있기에 굳이 사용하지 않아도 되는 곳에 사용하면 오히려 성능에 역효과가 있을 수 있어서 자주 변경되는 부분이나 복잡한 로직을 처리해야하는 필요한 곳에

일주일을 돌아보며... 프로필 사진을 작성한 글에 추가 또는 업데이트해주려는 과정에서 막힌 오류 아직 redux toolkit에 대한 이해가 부족하다보니 자주 만나게 되는 오류이다. 프로젝트 기간이 짧아서 일단 필수기능을 구현하는데에도 빠듯하다보니 툴킷을 완전 이해하고 적용하고 있지는 않은 것 같다. Slice라는데 왜 하필 slice?라는 개념도 뭔가 와닿지 않고 기능 구현을 빨리 해야하는데 결국 많은 에러들을 해결하는데는 이런 개념을 이해하고 기능 구현을 하는 것이 본질적인 해결책이라는 생각이 들었다. 이번 프로젝트는 시간이 부족하여 많은 기능을 구현하지 못해도 프로젝트가 끝나면 redux에 대해 좀 깊이 공부해봐야겠다는 생각이 계속 든다. 또 정말 많이 만나는 에러 중에는 이게 있는데 &&, || 연산자로 처리해주거나 옵셔널 체이닝을 사용하는데 옵셔널 체이닝을 너무 남발하는 것은 좋지 않다고 어디서 본 것 같아서 꼭 필요할 때만 사용하려고 한다. 이제 댓글 기능

일주일을 돌아보며 주중에 todolist를 redux로 구현해보고 구현해보고 싶었던 기능 중 하나인 모달창도 추가해보고 했던 것 같다. 앞으로 서버와 DB에 연결할 것을 염두해두고 axios같은 미들웨어를 추가해보기도 하였다. 그리고 프론트엔드 테크트리 로드맵을 확인하면서 현재 내가 어느부분들을 배웠고 앞으로 어떤 부분들을 배워야하는지 확인하는 시간을 가졌다. 돌아오는 주에도 앞으로 서버와의 통신과 DB연동을 염두해두고 이런 부분들을 좀더 심화학습해야할 예정이고 특히 프로젝트도 목요일부터 시작이니 JSON, 프로미스, 비동기 같은 개념을 좀 빡세게 공부해야할 듯하다.

일주일을 돌아보며... 리액트 redux에 대해 공부하고 개인과제를 하면서 흐름은 어느정도 알겠는데... useState가 기능했던 부분을 redux로 대체하려고 하니 payload를 dispatch할 action에 인자로 넣어주었더니 렌더링이 안되고 setState에 인자로 넣어 props로 받으면 되고... 화면에 렌더링이 안되고 콘솔로 값을 확인하면 원하는 값이 넘어오지도 않고 디버깅해서 세부적으로 원인을 찾아보려고 하면 내가 쓴 코드 말고 추측컨데 리액트 패키지에 있는 파일로 타고 들어가서 내용을 도무지 이해할 수가 없고... 아니 값은 다르게 넘어와도 렌더링은 될 수 있는 거 아닌가? 뭐가 문제인지 모르겠다. 사실 내가 뭘 몰라서 놓치고 있어서 이런 문제가 발생하는지도 잘 모르겠다. 어제까지도 해결해보려고 하다가 막힌 상태이다. 아무래도 이번주중에 한번 질문도 해보고 다른 클론코딩 영상도 좀 참고해야할 듯 하다. 어제 위에

일주일을 돌아보며... 이번주는 정신없이 모던 자바스크립트 내용들 읽어보고 자바스크립트의 전반적인 개념을 쭉 훑어봤다. 내용이 방대해서 한번 쭉 읽어본 것 가지고는 기억나거나 이해되는 게 많지 않아 앞으로도 계속 반복적으로 읽어야할 것 같다는 생각이 든다. 그리고 이때까지는 개발자 도구에서 한줄 한줄씩 실행해보는 디버그 기능을 사용해보지 않았는데 저번에 튜터님이 내가 질문했던 부분에 대해서 분석하실 때 디버그 기능을 활용하셨던 것을 보면 분명 원인을 파악하는데 꼭 다룰 줄 알아야하는 부분인 것 같다. 알고보니 콜 스택도 여기서 볼 수 있었다. 실행컨텍스트와 클로져를 이해하는데 활용하면 도움이 될 것 같다. 돌아오는 주에는 본격적으로 리액트를 좀 학습할 계획이다. 아쉬운 점 모던 자바스크립트를 예전에 진작에 읽어보지 않았던 게 좀 후회되지만 그래도 지금부터라도 읽으면 된다고 생각한다. 잘한 점 앞으로의 일정과 향후 개발 업무에 사용하기 위해 맥북을 새로 장만해서

일주일을 돌아보며.. 프로그램 2차 프로젝트 기간이 이제 마무리되고 월요일에 발표회와 함께 끝나게 된다. 이번 프로젝트에서 나느 프로필 변경 부분의 간단한 display on/off 기능부터 드롭다운 부분에 DB에 저장된 이미지, 계정, 닉네임 정보 출력, 검색 기능을 구현했다. 좋아요 기능도 구현해보려고 시도했으나 토글과 서로 다른 계정에서 좋아요를 누르는 경우 db에 정보를 더해주는 부분을 어떻게 구현해야할지 감이 오지 않아 이번에는 구현하지 못했다. 파이어베이스로 프로젝트를 하는데 공식문서를 읽어봐도 이해가 잘되지 않아 해결이 쉽지 않았던 것 같다. 아쉬운 점 프로젝트에서 필수 기능 외 추가 기능을 직접 구현해내지 못한 점이다. 거기에 좋아요 기능도 포함되어 있고 팔로우, 팔로워 기능, 댓글 기능, 북마크, 비밀번호 찾기 기능 등이 있었는데 이런 것들은 다음 프로젝트 때 기회가 있다면 한번 구현해보고 싶다. 잘한 점 그래도 구현해보려고 했던 기능 중에 검색

일주일을 돌아보며.. 프로그램기초 주간이 끝나고 2차 프로젝트 기간에 돌입했다. 거의 강의듣고 알고리즘 개념 배우는데 시간을 보낸 것 같다. 별일 없이 지나가나 싶었는데 화요일 늦저녁부터 몸상태가 좋지 않더니 결국 코로나 확진자가 되어 수요일은 거의 공부하지 못했고 쉬면서 회복하는 시간을 가졌다. 목요일부터는 그나마 조금 상태가 나아져서 모든 일정은 소화했으나 개인공부에 온전히 집중하지는 못했던 것 같다. 어제 프로젝트를 통해서 크게 프론트 2명/백엔드 3명으로 역할을 나누기로 했다. 나는 백엔드에 포함이 되었다. 프론트, 백엔드라고 했지만 백엔드는 이미 firebase가 알아서 하기 때문에 내가 할거는 main.js와 router.js에서 html로 화면에 잘 뿌려지게 연결하는 역할인 것 같다. 담당하게된 파트는 웹페이지 탑바 맨 우측에 프로필 이미지를 출력하고 이를 클릭하면 나타나는 프로필 창에 프로필 이미지 출력, 닉네임과 계정 이메일 정보 출력, 프로필 변경과 로그아

일주일을 돌아보며.. 자료구조 알고리즘 진도나가는데 한주를 보냈었다. 개념은 어느정도 알겠으나 막상 코드로 구현하라고 하니 머리도 잘 안돌아가고 문제를 스스로 풀려고하니 어떤 알고리즘을 쓰고 어떤 식으로 코드를 짜야할지 막막했던 것 같다. 재귀함수는 그래도 탈출조건 걸어주는 거 하며 어느 정도 익숙한 감이 있는데 해쉬 테이블이나 힙 정렬 같은 거는 좀 어려운 거 같다.. 아쉬운 점 아직 알고리즘 기본 코드 구현과 문제풀이하기에 어렵다는 점이다. 그만큼 공부가 부족하기도 했고 집중하지 못했던 한주였던 것 같다. 잘한 점 일단 DP까지 진도라도 나가면서 앞으로 깊이 공부할 부분들을 쭉 훑어본 점이다. 그나마 링크드 리스트랑 이진 탐색은 TIL을 작성하면서 코드를 좀 자세히 봐서 조금 더 관련 문제들을 풀어보면서 공부하면 괜찮을 거 같다. 돌아오는 금요일부터 다시 팀 프로젝트를 들어갈텐데 그전까지 알고리즘 공부를 좀 해놓아야할 것 같다.

일주일을 돌아보며.. 개강 주여서 첫날부터 발제 내용들을 파악하고 팀 미니프로젝트를 하느라 정신없이 보냈던 한주였다. 첫 팀 프로젝트였던만큼 우여곡절을 겪고 마지막 금요일 발표회를 하면서 다음 프로젝트를 하게 되면 적용해보고 싶은 기능들도 많았고 중간중간 튜터님들의 피드백 시간도 유익했던 것 같다. 아쉬운 점 프로젝트 중반까지는 목표한 API 기능을 구현하는데 문제없이 순조롭게 진행되었다가 댓글 card에 비밀번호 input 기능을 추가하면서 문제가 발생했고 이를 초기에 인지하지 못했었다. 프로젝트 막바지에 조장님을 통해 문제점을 인식했고 이를 해결하기 위해 계속 여러 시도를 했었지만 빨리 해결해야한다는 조급한 마음에 머리가 잘 돌아가지 않았고 결국 발표당일에 이 기능은 미완성으로 남게 되었다. 다음부터는 조금더 구현한 기능을 좀더 꼼꼼하게 검증하고 넘어가야될 것 같고 그래도 혹시나 나는 발견 못할수도 있으니 이번처럼 팀원과 함께 검증하는 과정을 앞으로도 가져야겠다고 생