시작하며...중급 프로젝트에서 Toast 를 react-toastify 라이브러리와 Styled Components 를 사용해서 커스텀하여 사용하였다. 그러나 간혈적으로 토스트가 생기지 않고 갑자기 다른 곳에서 생기는 등(?) 이상한 현상이 발생하였다.주강사님께 여쭤보니깐 아마 Next.js Hydration 에러인 것 같다고 해서 Context 를 사용해서 구현해 보라고 피드백을 주셨다. 당시에 토스트를 다시 구현할 시간이 없어서 나중에 기회가 되면 직접 Toast 컴포넌트를 구현하고 싶었는데,마침 이번 프로젝트에서 Jotai 라는 상태 관리 라이브러리를 사용하여 직접 구현하게 되었다. 구현하기참고로 나는 토스트가 스택처럼 여러 개 쌓이는 걸 별로 안 좋아한다..그리고 다른 팀원분도 토스트가 쌓이지 않..

시작하며...이번 프로젝트에서 게시물의 좋아요/취소 기능을 구현하는데, 백엔드 API 가 느려 응답을 기다리기까지 과정이 사용자 관점에서 좋지 않다는 단점을 발견하였다. 그러나 실제 SNS 에서는 네트워크 속도가 느려도 좋아요/취소 기능이 바로바로 반영이 되는 것을 볼 수 있다. 그래서 이를 보고 좋아요 버튼을 누르면 클라이언트 측에 좋아요가 바로 반영되는 기능을 구현하려고 한다. 이러한 기능을 구현하기 위해 TanStack Query 의 Optimistic Updates 를 사용하여 좋아요 기능을 구현하였다.  Optimistic UpdatesOptimistic Updates 란?단어 뜻 그대로 낙관적인 업데이트 라는 뜻이다. 서버 요청 시 클라이언트 측에서 UI 를 업데이트를 될 거라고 낙관적으로 가..

시작하며..."우주윗미" 프로젝트 개발을 다 마치고 리팩토링 기간 때, Lighthouse 를 돌려봤는데 74, 64 라는 처참한 결과가 나왔다 😅 오히려 좋아 웹 사이트의 성능을 개선할 수 있는 좋은 기회인데 완전 럭키비키자낭~🤭🍀 그래서 성능을 개선하기 위해 적용한 내용이나 수정한 내용에 대한 여정을 글로 작성하게 되었다. (참고로 dev 환경 아니고 빌드환경에서 시크릿 모드창을 켜서 Lighthouse 돌렸다.) 자유게시판 페이지 - 성능 개선하기 📈1. 데이터 패칭 CSR → SSR 로 변경CSR 은 브라우저에서 자바스크립트가 실행돼야 페이지에 내용이 렌더링이 되는 방식이다. 그래서 초기 로딩 시간이 길다. 반면 SSR 은 서버에서 HTML 을 완성하여 클라이언트한테 전달하는 방식으로 서버..

시작하며...이번 프로젝트에서 TanStack Query 의 useInfiniteQuery 를 사용해서 댓글 무한 스크롤 기능을 구현했다. 그래서 무한 스크롤 기능을 구현하는 것도 처음이고, useInfiniteQuery 를 사용하는 것도 처음이라 댓글 무한 스크롤을 구현한 과정에 대한 내용을 기록하기 위해 글을 작성하게 되었다. [공식문서] useInfiniteQuery | TanStack Query React DocsThis ad helps to keep us from burning out and rage-quitting OSS just *that* much more, so chill. 😉tanstack.com 구현하기 앞서...내가 구현할 댓글 무한 스크롤은 백엔드 서버에서 cursor 값을 사용..

시작하며...길고도 짧았던 6개월 간의 코드잇 스프린트 여정이 이번 주 마침내 막을 내렸다... 🥹이 기간 동안 많은 경험을 통해 성장하며, 내 삶에 있어서 기억에 남는 일 중 하나일 것이다.오늘은 그 6개월을 돌아보며, 지난 기간 "나"라는 사람에 대해 깊이 생각해 보고 무엇을 얻게 되었는지 글로 작성하게 되었다.(코드잇 관련 내용은 별로 없고, 혹시라도 코드잇 스프린트가 궁금하면 파트별 회고랑 프로젝트 회고 보는 거 추천해요.)  왜 프론트엔드 개발자?? 왜 코드잇 스프린트?? 👀프론트엔드 개발자를 선택한 이유나는 원래 웹 개발과는 거리가 멀었다.  임베디드 전공자로 하드웨어와 회로, C언어 같은 로우레벨 분야를 주로 공부했으며, HTML이라는 단어조차 3학년 2학기에 처음 접했다.  그동안 나는..

시작하며...드디어 코드잇 스프린트의 마지막 프로젝트인 "심화 프로젝트"를 마쳤다.  이번 프로젝트는 이전 프로젝트들과 달리 약 6주간 진행되었고, 지난 기간을 돌아보며 프로젝트를 구현하는 동안 나는 어떤 고민과 결정을 거쳐 프로젝트를 완성했는지 정리하기 위해 회고를 작성하게 되었다. 프로젝트 깃허브 링크 https://github.com/sprint6-part4-team3/WouldYouWithMe GitHub - sprint6-part4-team3/WouldYouWithMe: 팀원을 모집하여 함께 스터디 투두리스트 관리하는 서비스팀원을 모집하여 함께 스터디 투두리스트 관리하는 서비스. Contribute to sprint6-part4-team3/WouldYouWithMe development by c..

시작하며...이번 프로젝트에서 자유게시판(모집게시판)을 구현하게 되었다.  게시물 상세페이지에 "목록으로" 버튼이 있는데이를 눌렀을 때, 주소의 param 값이 유지되기 위해 router.back() 을 사용하여 구현하였다. 그러나!!! 게시물 상세페이지를 다른 페이지에서 주소창으로 들어오면 router.back() 이 원하는 의도대로 동작하지 않게 된다. 😭얘 때문에 그냥 "/boards?page=0" 으로 보낼 수도 없어 고민이 많았다.. 🤔 그래서 이전에 접근했던 페이지를 저장해 가면서 이전 페이지를 확인하여 동작하는 방식을 선택하였다. 이전 페이지 저장하기어디에 저장할까?이전 페이지 정보를 어디에 저장할 지 많은 고민을 했다.로컬 스토리지세션 스토리지Jotai쿠키 등등.....각 저장소의 장단..