fpzmfks 님의 블로그

오늘은 리액트 심화 강의를 처음부터 끝까지 완주했다. 동기/비동기, json server, axios, tanstack query, zustand, 지연(throttling, debounce, lodash), 인증인가(쿠키, 세션, 토큰), tailwind, 반응형 웹에 대해 배웠다.  먼저 tailwind는 css 라이브러리로 className으로 css를 설정할 수 있는 기능이었고, 반응형 웹은 대충 알고 있기도 했고, 일단 설명만 들었다.  지연 (throttling, debounce, lodash) 에 대해서도 전에 챌린지반에서 들어서 어느정도 알고 있었는데, 직접 코드를 짜본 적은 없어서 실습을 하면서 설명을 듣게 되어 구조를 좀 이해하게 된 것 같다.  json server는 서버 데이터를 임..

오늘은 프로젝트를 완전히 마무리하며 배포와 제출, 회고를 했다.  그리고 로컬 환경과 배포 환경에서 생기는 오류가 다르다는 것을 깨닫게 되었다... 배포환경에서는 isLogin state가 초기화되는 것으로 인한 오류가 생기면 얄짤없이 404가 뜨고 뒤로가기를 눌러도 바로 정상환경으로 돌아오지 않는다... 이건 현재 환경에서 내가 할 수 있는 최선이라서 튜터님도 딱히 지적을 하시진 않은 것 같은데, 나중에 이런 것들도 핸들링하는 것들을 배운다고 생각하니 두려워졌다. 그래도 이런것들을 할 줄 아는 것이 개발자의 필수요구사항일테니 열심히 해보아야겠다.  그리고 팀내에서 KPT를 한 것을 올리고 오늘의 TIL를 마치겠다. 앞으로는 나 개인의 코드리딩 능력에도 신경을 써야할 것이다.  Keep팀내에서 소통하면서..

오늘은 style 적용 등의 디자인적 요소들을 손보고 프로젝트를 거의 마무리했다. 또한 나는 개발보고서를 작성하는 역할을 맡아서 다른 팀원들로부터 의견이나 코드 프로세스 정리 같은 것들을 받아와서 자료를 작성했는데, 몇몇 것들은 나도 겪은 어려움이라 이해할 수 있었지만 대부분의 로직은 이해하기 힘들었다. 코드리딩 실력이 아직 부족하다는 것을 절절히 느꼈다.  오늘은 할 말은 거의 없고, 개발보고서를 작성하면서 정리한 자료들을 블로그에도 기록해두도록 하겠다.  내가 작성한 코드의 로직 프로젝트 수행 경과 -트러블슈팅 -로그인/회원가입문제 : 프로젝트를 새로고침하면 자동으로 로그아웃이 되는 문제가 생겼다.새로고침 시 isLogin 값을 포함한 온갖 상태값들이 초기화되기 때문에 일어난 문제였다.supabase..

오늘과 주말동안에는 또 많은 일이 있었다... 3일 차에 로그인/회원가입 기능을 구현하면서 로그인한 사용자의 정보를 상태값으로 저장해주는 것도 같이 했는데, 내가 만든 로직이 굉장히 허술했기 때문에 계속 이런저런 문제가 생겼다. 그래서 스프레드 연산자, onAuthStateChange, supabase.from().select().eq('id',loginId) 등등을 활용하여 로그인 기능을 보완했다.  먼저 스프레드 연산자는 얕은 복사를 통해 useContext로 전달되는 상태값이 변질되지 않도록 1차로 방어막을 친 것이다. 이로 인해 리렌더링이 좀 일어나더라도 로그인 사용자 정보가 담긴 상태값이 잘 전달되는 것을 확인할 수 있었다. 또 이것과 회원가입 기능 구현 과정에서 supabase에 있는 사용자정..

오늘도 또 새하얗게 불태우며 로그인 기능과 supabase auth, 로그인 상태에 따른 페이지 접근에 관해 코드를 짰다.  supabase auth와 로그인 기능은 어제 오후부터 오늘 오전까지 계속해서 나를 골치아프게 했는데, 어찌저찌 해결은 되었다. 관련 기능을 이미 일부 구현하신 다른 조 팀원 분이 알려주셨는데, supabase의 로그인 기능과 supabase auth을 사용하기 위해서는 supabase authentication에 접근하여 user정보 테이블을 생성할 수 있어야 했다. 이 supabase authentication이야말로 로그인 기능 로직이 적용되는 부분이었던 것이다.  다만 이 supabase authentication 내의 정보 중에서는 email, 암호화된 password, ..

오늘은 오전에 튜터님께 데이터 세팅에 대한 지도를 받아서 오후에 팀장님이 프로젝트를 세팅한 것을 토대로 프로젝트를 본격적으로 시작했다.  나는 로그인/회원가입 기능을 맡았는데, 별 생각없이 supabase에 데이터를 저장하는 것보다 편할 것 같아서 먼저 미리 세팅된 유저 정보를 기반으로 로그인 기능을 구현했다.  그런데 잇따른 오류와 튜터님의 피드백을 받고 내가 로그인 기능을 아주 크게 얕봤다는 것을 깨달았다. 더불어 내가 코드를 잘못 작성해놓고 간단한 기능은 구현되었다며 다른 팀원들에게 코드를 공유했다는 것도... 먼저 내가 잘못 작성한 로그인 기능과 수정한 로그인 기능을 비교해보겠다. 아래는 잘못된 코드이다. for문 안에 if문을 넣고 break하여 유효성검사를 하고 있는데, 이러면 영원히 for문..

어제 오늘은 useSyncExternalStore을 사용해보고 그에 대한 챌린지반 강의를 들었다. useSyncExternalStore란 useState나 contextAPI처럼 상태를 관리하는 기능으로, 그 중에서도 외부 API를 구독하는 데에 특화되어 있는 hook이다. 또다른 이 훅의 특징은  React Concurrent Feature라는 '동시성'을 활용한다는 것이다.  언급한 외부 API 구독과 동시성은 이 hook에서 서로 긴밀하게 연결되어 있다.  우선 외부 API를 구독하여 데이터를 받아오면 딜레이가 발생하기 쉽다. 이러한 딜레이를 방지하기 위해 쓰로틀링(실행 횟수를 줄임)과 디바운스(가장 마지막 요청이 실행됨)를 사용하여 의도적 지연을 일으켰지만 이러한 방식은 결국 일정 시간 기다려야 ..

오늘은 팀 회의와 피그마를 통해 프로젝트의 틀을 잡고, 튜터님께 피드백을 받았다.  우리 팀의 뉴스 피드 프로젝트의 컨셉은 '코드 질문방'으로 어떤 이용자가 코드에 대한 질문 게시글을 올리면 다른 이용자가 그에 대한 댓글을 다는 식이다. 나는 잘 모르지만 컨셉을 제안한 팀원의 말로는 stact flow라는 실제 웹사이트에서 따왔다고 한다.  먼저 기본적으로 이번 뉴스 피드 팀프로젝트는회원가입/로그인 페이지게시물 리스트 메인 페이지마이페이지의 구성을 가져야 한다.  그에 더해서 우리 팀에서는 댓글 기능프로필 이미지게시물 추가/수정 페이지검색 기능position:fixed로 모든 페이지에서 나타나는 헤더와 푸터를 구현하기로 하였다.  일단 이렇게 회의를 정리하고 저녁 이후 튜터님께 피드백을 받으니,반드시 필..

오늘은 미완성이나마 Router 만들기 과제를 마쳤다. 그리고 useSyncExternalStore 사용하기 과제를 받았다... 과연 챌린지반인지 점점 과제가 어려워져서 개인과제를 진작 마치지 않았으면 어쩔 뻔 했는지 모르겠다. 오늘은 아티클을 읽으면서 과제를 하는데, 기존에 배운 것 중에도 아티클 내에도 없는 것으로 코드를 완성해야되어서 한참을 고민을 하다가 타임아웃을 받은 참이다.  어쩔 수 없는 일이니만큼 나중에 질문시간을 활용해서 답을 찾을 수 있으면 좋을 것이다. 다만 주요 목표인 Router 만들기 자체는 성공했기 때문에 오늘 이렇게 글을 쓸 수 있게 되었다.  아래가 가장 핵심적인 함수가 담긴 객체를 반환하는 Router 함수이다. fragment를 인자로 받아서 경로를 변경하는 naviga..

과제도 다 끝내고, 제출까지 했으니 오늘은 챌린지반 과제로 시간을 모두 보냈다. 이전에 하던 과제는 오전 중에 비교적 빠르게 완료할 수 있었는데, 오늘 새로 제시된 과제가 또 굉장히 어려워서(혹은 디버깅을 하지 못해서) 시간이 많이 지났다. 채 완료하지 못한 오늘의 과제는 내일 다루기로 하고, 이번에는 지난 번 과제인 'reducer 만들기'를 정리해볼까 한다.  먼저 리듀서의 형태부터 소개하도록 하겠다. 아래가 리듀서이다. state와 action을 인자로 가져와서action 객체의 type 값에 따라state를 변환하여 저장한다. export const initialState = [];export const todoReducer = (state, action) => { switch (action.t..