jhdev-code 님의 블로그 jhdev-code 님의 블로그

기존 상세 페이지는 레이아웃을 만들 때 재사용을 고려하지 않고 만들었다. 그래서 상세 페이지 코드만 1700줄까지 길어서, 하나의 컴포넌트에 하나의 기능만 관리를 할 수 있도록 분리를 했다. 어떻게 분리를 할지 교보문고 사이트에 들어가서 생각을 해봤는데, 시계 방향으로 설명을 하면, ReviewSecetion - 컨테이너 컴포넌트ReviewHeader - 리뷰 작성글과, 리뷰 작성 버튼을 관리하는 컴포넌트ReviewBox - 리뷰 작성을 한 후, 적용이 되는 컴포넌트ReviewList, noReviews - 리뷰 작성한 걸 볼 수 있는 컴포넌트ReviewModal - 리뷰 작성 누르면 나오는 컴포넌트위의 설명처럼 이런식으로 진행을 했다. 기존에는 한 파일에서 관리를 하다 보니깐 너무 쉬웠는데,..

아래는 실제 교보문고 리뷰 등록 버튼을 누르면 나오는 모달이다.    처음에는 교보문고처럼 top : 10685px 같은 위칩값을 따라 했다.화면에서 모달이 보이지 않아, 리뷰 작성 버튼이 안되는 줄 알고, log를 찍어 봤는데, 콘솔에선 렌더링은 되고 있었지만,화면에서 보이지 않았다. 교보문고에서 왜 10685 값을 사용을 했는지 알고 싶어서, 구글링을 해보니, 이거는 jQuery 방식이라는 것을 알아버렸다. 모듈 만든 CSS position: fixed, | display: flex , | justify-content: center | align-items: center 이 설정으로 하면 스크롤 위치와 상관없이항상 가운데에 고정된 모달을 만들 수 있다는 것을 알아버렸당. ( ͡° ͜ʖ ͡°)  아래는..

아래는 실제 교보문고 상세 페이지다.  상세 페이지 클론코딩 하면서 생긴 문제점.. 실제 교보문고 처럼 만들고 싶었는데, 기존 타입에는 discount 타입이 없고, 책 가격은 number 타입이여서, 숫자에 쉼표를 어떻게 넣을지, 원가에서 할인을 해서, 할인율로 보여주는 방법을 고민을 했었다. 기존 Mock 데이터는 아래처럼 되어 있었다.`export interface Book { id: number; title: string; author: string; accumulation: number; content: string; price: number; period: string; delivery: string; image: string; commen..

기존 메인 리스트, 썸네일은 하드 코딩으로 되어 있었다. 이번에는 더미 데이터를 가지고 캐러셀을 구현을 해봤다.   만들면서 생겼던 에러  버튼을 누르면 썸네일 리스트가 메인 리스트로 변경이 되게 하고 싶었는데,  메인 리스트 부분에서 {books.slice(currentIndex,currentIndex + itemsPerPage).map((book) => 을 사용을 하면서 첫 번째 섬네일 이미지 옆에 메인 리스트 이미지가 나오게 됐다.. 해결 방법 : li 태그에 키 값으로 단일 객체를 전달을 해서 해결을 했다.    캐러셀 useState를 사용을 해서 라이브러리 없이 구현을 해봤다. 썸네일 리스트를 기준으로 버튼을 누르면, 메인 리스트로 출력이 되도록 구현을 했다.

교보문고 마이 페이지  교보문고 마이페이지를 만들고 있는데, 사이드바는 금방 만들었지만..  버튼의 위치가 문제였다.. ㅠㅠ 프로필 옆에 있는 버튼들이 계속 아래쪽으로 내려가는 문제가 발생을햇다.교보문고 사이트와 비교해도 똑같이 값을 줬는데, 레이아웃 클론코딩에서는 계속 아래에 있었다. 태그를 하나 빼먹었는지, 숫자를 잘못 적었는지 하나하나 살펴봤다.  부모 요소 display 속성 차이 때문에 버튼의 위치가 어긋난 것이였다.  display : block; width , height 값을 계속 바꾸면서 확인을 했었다. ㅠㅠ 결국 contents에 있는 태그랑 선이 딱 맞게 되어서, 너무 행복했다...  지금은 레이아웃만 클론코딩을 하고 있지만, 얼렁 끝내서 빨리 프론트에서 할 수 있는 기능을 다 해보고..

프로젝트를 시작한 계기인프런에서 제로초님의 Next.js 강의를 들었는데, 너무 멋있어서 나도 저렇게 만들고 싶다는 생각이 들어 클론코딩을 시작을 하게 됐다.  교보문고 선정 이유 교보문고를 클론코딩을 한 사례가 없기도 하고, 옛날에 교보문고에서 책을 자주 구매를 했고, eBook을 통해 책도 자주 읽기 때문에 선택을 하게 됐다.  기술 스택 이번 프로젝트에서는 백엔드 없이 중심으로 구현을 했다.  현재 사용한 기술 스택 Framework : Next.js 15 (App Router 사용)Styling : CSS ModuleLanguage :  TypeScriptState Management : ZustandAuthentication: Auth.js(Next.Auth) ( 카카오 로그인)   위의 이미..

reaquest memoization 과 data cacheNext.js 13부터 **서버 컴포넌트(Server Components)**가 도입되면서 프론트 서버의 부담이 크게 증가했다. 캐싱 전략을 적절히 활용하지 않으면 프론트 서버가 과부하될 수 있기 때문에, 다양한 캐싱 기법을 적용하여 최적화하는 것이 중요하다. Next.js에서는 프론트 서버의 부담을 줄이기 위해 여러 가지 캐싱 전략을 제공한다.(1) Router Cache (라우터 캐시)클라이언트에서 실행되는 유일한 캐시브라우저의 메모리에 저장되며, 페이지 이동 시 불필요한 요청을 줄여준다.페이지를 다시 로드하거나 새로고침하면 캐시가 사라진다.(2) Full Route Cache (풀 라우터 캐시)서버에서 전체 페이지의 HTML과 RSC Pay..

백엔드 서버 세팅하기백엔드 개발을 시작하기 위해 Node.js와 PostgreSQL을 설치를 해주면 된다. 옵션이 4개가 있는데 위에서 부터 차례대로 설명을 하자면PostgreSQL Server : PostgreSQL의 핵심 데이터베이스 서버이고, 이 서버가 있어야 데이터베이스를 생성하고, 데이터를 저장하고, SQL을 실행할 수 있다. pgAdmin4 : 웹 기반 GUI 툴이다. SQL 쿼리를 실행하고 데이터베이스 객체를 관리할 수 있고, CLI가 익숙하지 않은 경우, GUI 환경에서 편하게 작업할 수 있도록 도와준다. (강의에서도 체크를 하라고 얘기를 했다.)Stack Builder : PostgreSQL용 추가 확장 기능 및 패키지를 설치하느 ㄴ도구이다. Command Line Tools : psql..