Next.js로 와이즐리 구현하기

Next.js에서 제안하는 데이터를 가져오는(Data Fetching) 방법들서비스를 구현하면서 실제 사용할 때 다시 다룰 예정임기본 CSS예제를 제공하고,Tailwind CSS를 적용하는 방법에 대해 기술해 놓은것을확인할 수 있다.(넥스트 진영에서 추천하는 CSS F

리액트를 사용한지 오래되어 가물가물 하기도 하여..최근 새로운 버전(13)이 출시된 Next.js를 사용하여 심플한 서비스를 구축해보고자 합니다.next.js 공식사이트를 접속합니다.https://nextjs.org/매우 다양한 서비스들이 Next.js를 기반

와이즐리의 기본 레이아웃은 아래와 같습니다.HeaderBottom NavigationFooter

next/image 이미지 최적화 넥스트에서 next/image를 제공함 기존 HTML 를 더 개선하였음 -> 퍼포먼스 개선(장치별로 올바른 사이즈의 이미지를 제공) -> Cumulative Layout Shift 방지(뒤늦게 로딩되면서 기존 레이아웃을 예상치

추천 상품 리스트 페이지 작업이 끝났습니다. 이제 해당 페이지의 노출될 상품의 리스트를 서버를 통해 가져와야 하는데요. 아래처럼 아주 심플하게 3개의 API가 필요해 보입니다 장바구니 조회 API(현재 내 장바구니에 담긴 상품의 개수) 메인 배너(캐루셀)에 노출시

와이즐리 기존 사이트 헤더는 원래 fix이고컨텐츠는 헤더가 차지하는 부분만큼 여백을 주엇음하지만 여기서는 그게 고려되지 않아서스크롤 위치에 따라 헤더의 포지션 속성을 변경하려함헤더 스크롤 이벤트

이번 포스팅은 레퍼런스 사이트와 유사하게 장바구니 페이지를 구현하고비교해보고자 합니다.먼저 UI를 구현하였습니다.Tailwind를 사용하다보니 점점 자주 사용하는 클래스명이 암기되면서빠른 UI구현이 가능해집니다.또한 Tailwind에서 제공하는 가이드를 어느정도 참고하