시작하며...드디어 코드잇 스프린트의 마지막 프로젝트인 "심화 프로젝트"를 마쳤다.  이번 프로젝트는 이전 프로젝트들과 달리 약 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쿠키 등등.....각 저장소의 장단..

시작하며...지난 기초, 중급 프로젝트에서 캐러셀을 라이브러리를 사용하여 구현하였다. 그때 회고를 보면 나중에는 라이브러리가 아닌 직접 구현해보고 싶다고 글을 적었었다.그런데 마침 이번 프로젝트에서도 캐러셀을 구현해야 될 기회가 생겨 직접 구현하게 되었다. 캐러셀을 구현한 결과는 아래와 같고, 이를 구현하기까지의 과정을 작성하려고 한다. 💪💪💪  무한 캐러셀 원리?카드가 4개가 있는 무한 캐러셀을 만들었다. 마지막 카드에서 첫 번째 카드로 이동할 때 자연스럽게 오른쪽으로 넘어가면서 1번 인덱스로 가야 한다.이를 어떻게 구현해야 될까? 이를 그림으로 표현해 보았다. 마지막 카드(4번 이미지)에서 오른쪽으로 넘어가면 첫 번째 카드(1번 이미지)를 복사한 카드를 바로 오른쪽에 두어 자연스럽게 넘어가는 것..

(제목에는 Next.js 붙였지만 딱히 Next.js 에 관한 내용없음) 시작하며...이번 프로젝트에서 베타 테스트를 진행하면서 사용자들의 의견을 받았다. 그중에서 게시판 페이지에 조회수 기능이 있었으면 좋겠다는 의견이 있었다. 그런데 백엔드 API 요청을 새로 못하는 상황이기 때문에, 고민을 하다가 Firebase 를 사용하기로 했다.(그리고 나도 조회수 기능 구현하면 좋을 것 같다는 생각이 있었음) 그리고 Firebase 를 선택한 이유는 작년 졸업작품에서 React Native + Firebase 로 어플리케이션을 만들면서 Firebase 의 다양한 기능을 사용해 봤고 익숙하기 때문에 러닝커브가 낮아 빠른 시간내에 구현할 수 있을 것 같기 때문이었다. 세팅하기Firebase 에서 FireStore ..

시작하며...이번 프로젝트에서 직접 사용자들의 피드백을 받는 베타 테스트를 진행하기로 했다. 유저들의 피드백을 구글폼이나 디스코드로 받으려고 했는데 일단 접근성이 낮고 유저 입장에서는 귀찮을 거 같다는 우려가 있었다. 좀 더 간편한 방법으로 유저들이 피드백을 줄 수 있는 방법이 없을까? 하고 여러 사이트를 돌아다니면서 본 결과 "채널톡" 을 운영하는 것을 보게 되었다. 그래서 "채널톡" 을 프로젝트에 구현하게 되었고 이를 적용한 방법에 대해 글을 작성하게 되었다. 채널톡 적용하기공식문서채널톡 공식문서에 적용하는 방법이 자세히 적혀있다.https://developers.channel.io/reference/web-quickstart-kr#single-page-application 시작하기이 문서에서는 Ja..

시작하며...이번 프로젝트에서 Next.js App Router 를 사용하면서 TanStack Query 를 사용하기로 했다. 그런데 Next.js 에서는 데이터 패칭을 할 땐 Server Sider Rendering 을 사용하는데 이걸 TanStack query 와 함께 사용하는 방법이 없을까? 하고 찾아보다가 공식문서에서 이에 관한 내용을 발견하였다. Advanced Server Rendering | TanStack Query React DocsWelcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.j..

시작하며...게시물 수정 페이지 같은 경우 해당 게시글을 작성한 사용자만 수정이 가능하다. 그래서 작성자에게만 수정 버튼이  렌더링 되지만 만약 그렇지 않은 사용자가 주소창을 통해 강제로 수정 페이지로 이동하였을 때, 해당 게시글의 작성자가 아니면 접근을 하지 못하게 막아야 된다. Next.js Server Side Rendering 에서 이를 구현하는 방법에 대해 알아볼 것이다. 구현 방식현재 로그인한 유저의 user id 와 게시물을 작성한 user id 를 비교해서, 다르면 not found 페이지로 이동시킨다. 로컬 스토리지서버 사이드 렌더링은 서버에서 페이지를 렌더링하며, 브라우저 API 인 document, window 등 객체에 접근할 수 없다. 그래서 로컬 스토리지 같은 경우 브라우저에서 ..

시작하며...이번 프로젝트에서 Storybook 을 사용하게 되었다. 그런데 공통 컴포넌트를 만들고 Storybook 을 작성한 후 Pull Request 를 올렸을 때, 리뷰어들을 Storybook 에 반영된 것을 바로 시각적으로 확인할 수 없다. 그래서 이를 해결하기 위해 GitHub Action 을 사용하여 Storybook 을 Chromatic 배포를 하여 PR 을 올릴 때, 미리 보기 배포 주소를 보여주는 것을 구현하였다.  Chromatic 배포Storybook 은 Chromatic 을 사용하여 배포를 할 수 있다. Visual testing & review for web user interfacesChromatic scans every possible UI state across browse..

1. 최소직사각형https://school.programmers.co.kr/learn/courses/30/lessons/86491 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이먼저 정렬을 하여 긴 쪽과 짧은 쪽을 구분하였고, 각각 긴 쪽과 짧은 쪽의 최대값을 result 배열에 넣어 두 값을 곱해 결과를 반환했다.function solution(sizes) { let result = [0, 0] sizes.map((item)=>{ item.sort((a,b)=>b-a) if(result[0]  2. 모의고사..

시작하며...Tailwind CSS 를 사용하면 기본적으로 rem 단위로 동작한다. 만약 조금 더 섬세하게 px 단위로 크기를 조절하고 싶은 경우에는 아래 코드처럼 사용하게 된다.  그런데 개발자 도구에 들어가서 보게 되면 어떤건 rem 단위, 어떤건 px 단위 이렇게 혼합되어 있는 것을 볼 수 있다.  그래서 이러한 문제를 해결하여 px 단위로 작성하되, 실제 적용되는 건 rem 단위인 pxr 를 사용해보려고 한다. pxr 단위사실 Tailwind 를 사용하면서 위에와 같은 문제를 겪고 있었고 해결을 하고 싶었다. 그런데 지금 멘토님께서 pxr 단위라는 것을 알려주셔서 위에 문제를 해결할 수 있을 거 같아 이번 프로젝트에 적용하게 되었다! 관련 아티클팀원분이 카카오페이지에서 Tailwind 에 pxr ..