전체 글 (166) 썸네일형 리스트형 NextJS Next JS란? React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다. react로 개발할 때 SPA을 이용하며 CSR(Client Side Rendering)을 하기때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)부분입니다. CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출될 일이 없습니다. 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하여 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있게 됩니다. react에서도 SSR을 지원하기에 굉장히 복잡하기때문.. react로 쇼핑앱 만들기(7) - NavCartBlock, NotFoundPage NavCartBlock 컴포넌트 생성하기 components폴더 안에 header폴더안에 nav폴더안에 위와 같이 nav-cart-block, nav-cart-list, nav-cart-item을 각각 생성합니다. NavCartBlock.jsx와 .module.scss의 코드입니다. NavCartList.jsx와 .module.scss의 코드입니다. NavCartItem.jsx와 .module.scss의 코드입니다. Nav.jsx의 추가 코드입니다. NotFoundPage 생성하기 NotFoundPage.jsx와 .module.scss 코드입니다. react로 쇼핑몰 만들기(6) - Nav, Order Nav 컴포넌트 기능 생성 Nav.jsx의 추가 코드 및 변경된 UI입니다. user정보 있을 시 logout icon을 보여주고, 해당 icon을 클릭하면 로그인 icon보여줍니다. Nav.jsx의 추가 코드입니다. 장바구니에 담긴 products가 0개보다 많으면 NavBar의 cart icon에 숫자 표시를 해줍니다. Order 페이지 생성 order.slice.js의 코드입니다. store폴더에 index.js의 추가코드입니다. 방금 작성한 orderSlice를 등록하려는 겁니다. OrderPage의 index.jsx의 코드입니다. 여기서 OrderPage 폴더 안에 기존에 존재한 index.jsx말고 order-list폴더 생성 후, 안에 order-item폴더도 생성합니다. OrderList... 이전 1 2 3 4 ··· 56 다음
