TIL

다 잘 동작하는데 색상에 관련된 css만 안되는 이유를 모르겠다...

다음주부터 시작하는 본격적인 개발에 앞서 마지막으로 주어지는 최후의 주말을 하루 앞둔 금요일~ 부족한 부분이 많은데 주말에 좀 많이 채워넣어야겠다오늘 한 일1. 코드 컨벤션, github rules 정하기2. 프로젝트 세팅 논의 조금3. 모델 체크

튜터님과의 아침 회의@ 튜터님:1. 모바일 first로 작업 했으면2. 모바일 뷰로 한 페이지가 나오면, 그 데스크톱 뷰가 와이어프레임 수준으로는 나왔으면뒤늦게 모바일 버전이 데스크톱 버전으로 할 때 호환이 안되는 경우가 있을 수 있음=> 이번 프로젝트는 보통 데스크톱을 우선시 하여 개발하던 이전과 다르게 모바일을 우선시 하여 개발하게 되었다. 처음 해보는 방식이라 익숙치 않아도 이 방법의 장점이 부각될 수 있었으면 좋겠다! 오후 회의디자이너님이 가져오신 IA와 레퍼런스 보면서 기능 논의하는 시간을 가졌다. 확실히 추상적으로 머릿속에 있는 아이디어만으로 서로의 의견을 나누는 것 보다, 무언가 시각적으로 볼 게 있으니 좀 더 명확한 의사결정을 내릴 수 있었다.

오늘의 기능 개선: 재배치 버튼 추가기존의 재배치 기능은 리스트에서 드래그를 통해 이루어졌는데, 자칫 클릭하다가도 의도치 않게 위치가 수정될 수 있어 '재배치' 버튼을 만들어 해당 버튼 활성화 상태에서만 위치를 수정할 수 있게 변경하였다.

오늘 한 일알고리즘 코드카타 풀이 수업심화프로젝트 발제기획 및 디자인챌린지반 수업SSR을 활용한 SUPABASE 로그인/회원가입 기능벌써 최종 프로젝트 이전 마지막 프로젝트!  준비한 기획이 우연찮게 선정되어 진행되었는데, 내배캠 참여 이전에 조금 생각만 해본 구성이 이제는 간단해보여서 뭔가 뿌듯하다.  한 줄 정리 : 모임이 끝나고 후기를 전할 수 있는 롤링페이퍼 프로젝트기획 의도 : 어떤 모임을 마치고 소감은 듣고 싶은데, 막상 부탁하기 어려울 때! 어땠어?를 사용해보는건 어떨까요?(팀플을 마치고, 회의를 마치고, 어떤 모임을 마치고)

Next.js에서 데이터 로딩 상태를 표현하기 위한 방법으로 loading.tsx와 suspense를 적용해 보기로 했다. 🍀 도입배경Toss의 SLASH21의 '프론트엔드 웹 서비스에서 우아하기 비동기 처리하기'라는 세션을 보고 인상 깊은 내용이 있어 적용해보고자 했다. 로딩과 에러 상태를 매 페이지마다 useState나 useQuery문 등으로 관리하기에는 비효율적인 것 같아 부분적으로 Suspense와 ErrorBoundary를 사용하면 코드의 중복도 줄이고 로직도 이해하기 편해지지 않을까?라는 생각으로 개인 프로젝트 때 도입해 보았다. 🔥 하지만 실패와 실패...Next.js 14에는 클라이언트 사이드일 경우 로딩 상태를 감지하여 loading.tsx의 내용을 보여주는 내부 기능이 탑재되어 있..

더 좋은 코드를 만들어 보려고 시작한 suspense 기능이 생각보다 많은 시행착오를 동반했고, 3일간의 사투 끝에 해결방법을 알게 되었다.. 최종적으로는 useSuspenseQuery와 dynamic의 조합으로 성공했으나, 아직 해결못한 부분이 남아있어 내일 포스팅에 합쳐서 기재할 예정

기존 PokemonList의 로딩 상태를 해당 컴포넌트 내에서 처리하는 게 아닌, 컴포넌트에서는 성공한 사례만 남기고 로딩이나 에러는 외부로 위임하기 위해 분리작업 중에 suspense를 사용하는데 도저히 작동하지 않는다...새벽 4시가 넘어서야 원인을 찾았다(하루 종일 구글링만...) 의 동작시점Suspense는 컴포넌트 렌더링 시점에 작동하는데, useEffect는 컴포넌트 마운트 시점에 동작한다. 때문에 useEffect 내에서 fetch가 이미 다 이루어졌기 때문에 Suspense가 이를 감지하지 못했던 것이었다. 드디어 원인을 알았으니 내일은 해결방법을 모색해서 꼭 해결되면 좋겠다. 더불어 공부하면 할수록 React 생명주기에 대한 공부가 더 필요하단걸 절실히 체감중인데, 최종 프로젝트 전에 시..