시작하며...이번 프로젝트에서 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 ..

시작하며...분명 Automatically delete head branches 옵션을 선택하여 PR 을 올려 merge 가 되었을 때, 해당 브랜치가 삭제되도록 설정하였다.그러나 merge 가 되었음에도 불구하고 브랜치가 삭제되지 않는 현상을 발견하였다. 문제 해결하기해당 문제에 대해 의문이 있었는데 다행히 이 문제를 해결할 수 있었다! 결론은 내 문제 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ  바로 Branch Protection Rules 때문이었다! Branch Protection Rules 설정PR 을 올릴 때 2명 이상한테 Approve 를 받아야 merge 될 수 있도록 규칙을 설정하였다. 여기서 문제였다! 특정 브랜치에 merge 될 때 그 특정 브랜치의 패턴을 입력해야 한다. 그래서 처음엔 모든 브랜치에 적..

시작하며...이전 프로젝트에서 Menu 와 DropDown 컴포넌트를 구현하였다. 그러나 공통 컴포넌트라는 성격과 거리가 멀었다. 그래서 이번 프로젝트에서 DropDown 공통 컴포넌트를 범용성이 좋게 만들기 위해 컴파운드(Compound) 패턴으로 만들게 되었다!  컴파운드(Compound) 패턴컴파운드 패턴이란?컴파운드 패턴이란 무엇일까? 컴파운드 패턴React에서 복잡한 컴포넌트를 효율적으로 관리하고 재사용성을 높이기 위한 디자인 패턴DropDown 이나 Select 등 컴포넌트를 여러 작은 컴포넌트로 분리하여 부모/자식 관계로 이루어진 컴포넌트를 독립적이면서 통합되어 하나의 컴포넌트처럼 사용할 수 있게 만드는 디자인 패턴 중 하나이다. 장점유연성 증가가독성 증가유지보수성 증가재사용성 향상컴포넌트 ..

시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다.  해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

1. K번째 수https://school.programmers.co.kr/learn/courses/30/lessons/42748 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이slice 를 사용하여 item[0] 번째부터 item[1] 까지 자른 후, sort 를 사용하여 오름차순 정렬을 하고 item[2] 번째에 있는 수를 반환하였다.function solution(array, commands) { return commands.map((item)=>{ return array.slice(item[0]-1,item[1]).sor..

1. 같은 숫자는 싫어https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이이미 푼 문제인데 나는 filter 를 사용하여, 앞에 있는 숫자와 같을 경우 해당 숫자를 필터링하여 연속으로 중복된 수를 제거하였다.function solution(arr) { return arr.filter((item,idx) => item !==arr[idx-1]);}1-2. 다른 사람 풀이나와 같은 방식으로 해결하였다.function solution(a..