전체 글 (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... react로 쇼핑몰 만들기(5) - 상세페이지, 장바구니, MockAPI 상세페이지 데이터 생성하기 product.slice.js코드입니다. store폴더안의 index.js에 productSlice를 등록합니다. DetailPage폴더안의 index.jsx의 코드입니다. 상세페이지 UI 생성하기 左1) Loader.jsx의 코드입니다. 中, 右) Loader.module.scss의 코드입니다. DetailPage.module.scss의 코드입니다. DetailPage폴더안의 index.jsx의 추가 코드입니다. 장바구니 기능 생성하기 cart.slice.js의 변경 및 추가 코드입니다. 下1,2)는 cartSlice의 reducers부분입니다. 左) SignIn.jsx의 추가 코드입니다. 右) SignUp.jsx의 추가 코드입니다. 장바구니 페이지 생성하기 우선 src폴더 .. react로 쇼핑몰 만들기(4) - Product 불러오기 Product 데이터 가져오기(fake store api) 가짜 쇼핑몰 api 활용하기: https://fakestoreapi.com/ products.slice.js의 코드입니다. 해당 slice를 store폴더의 index.js에 등록합니다. 左) CardList.jsx의 코드입니다. 여기서 방금 productsSlice의 fetchProducts를 사용합니다. 右) CardList.module.scss의 코드입니다. CardList.jsx를 HomePage폴더의 index.jsx에 등록합니다. CardItem 컴포넌트 생성하기 左) cart.slice.js의 코드입니다. 右) 해당 slice를 store폴더의 index.js에 등록합니다. CardItem.jsx의 코드입니다. 상품을 장바구니에 담으.. react로 쇼핑몰 만들기(3) - Category 컴포넌트 이번 포스트에서 위와 같은 부분을 작업합니다. Redux 사용 준비 npm i react-redux 위 명령어를 통해 redux를 설치합니다. src폴더 안에 store폴더내 각각 slice.js파일을 만듭니다. 그리고 메인페이지인 index.js도 생성합니다. user.slice.js파일의 코드입니다. store폴더 안에 index.js의 코드입니다. 루트경로에 main.jsx파일의 변경코드입니다. SignIn.jsx와 SignUp.jsx파일의 추가 코드입니다. 홈페이지 생성하기 홈페이지는 위와 같은 구조로 이뤄집니다. HomePage폴더 안에 위와 같이 폴더를 생성 후 각 폴더 내 .jsx와 .module.scss파일을 생성합니다. Category 컴포넌트 생성하기 左) store폴더 안에 categ.. react로 쇼핑몰 만들기(2) - 로그인 및 회원가입 Login, Register 페이지 UI 생성하기 로그인 및 회원가입 UI 구성상 비슷함으로 같이 작업하겠습니다. LoginPage 및 RegisterPage 폴더입니다. 기본 index.jsx이외에 signin과 signup컴포넌트 생성했습니다. 이 둘 컴포넌트는 form을 작성할 예정입니다. LoginPage 및 RegisterPage의 .jsx파일입니다. SignIn 및 SignUp 컴포넌트의 .jsx파일입니다. components폴더안에 form의 jsx와 scss파일입니다. React Hook Form을 이용한 유효성 체크 npm install react-hook-form 위 명령어를 통해 form hook을 설치합니다. 유효성 검사 코드 작성시 되게 지저분할 수 있습니다. react hook .. react로 쇼핑몰 만들기(1) - layout 생성 세팅 준비 npm init vite 위 명령어로 vite를 설치합니다. JS를 사용할 예정입니다. npm install axios react-router-dom react-redux react-icons sass @reduxjs/toolkit react-loading-skeleton 위 명령어를 통해 필요한 모듈들을 설치합니다. 위 캡처처럼 폴더들을 만듭니다. components 세부 폴더 안에는 .jsx파일 및 .scss파일을 추가합니다. 각 scss파일은 module처럼 사용할 것입니다. 그래서 이름을 지어줄때는 xx.module.scss로 작성하세요. pages 세부 폴더 안에는 index.jsx파일을 추가합니다. react-router-dom 및 전역 스타일 적용하기 import { Browser.. Todo 앱 만들기 npx create-react-app ./ --template typescript npm install mobx mobx-react 위 명령어를 통해 typescript인 react과 mobx를 설치합니다. import { action, computed, makeObservable, observable } from 'mobx'; interface TodoItem { id: number; title: string; completed: boolean; } export default class TodoStore { todos: TodoItem[] = [] constructor() { makeObservable(this, { todos: observable, addTodo: action, toggleTodo: .. 카운트앱 만들기(2) - 데코레이터 사용 MobX 6 이전에는 observable, computed, action을 표시하기 위해 ES.next 데코레이터를 사용하도록 권장했습니다. 그러나 데코레이터는 현재 ES 표준이 아니며 표준화 과정에도 오랜 시간이 소요되고 있습니다. 또한 표준화되는 데코레이터는 기존의 시행되었던 방식과 다를 것으로 보입니다. MobX 6는 호환성을 위해 데코레이터에서 벗어나 makeObservable / makeAutoObservable을 사용할 것을 권장합니다. 그러나 기존의 많은 코드베이스와 온라인 문서 및 튜토리얼 자료에서 데코레이터를 사용하고 있습니다. observable, computed, action와 같이 makeObservable 의 주석으로 사용할 수 있는 것은 무엇이든 데코레이터로 사용할 수 있다는 것.. 이전 1 2 3 4 ··· 17 다음
