전체 글 (166) 썸네일형 리스트형 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: .. 이전 1 2 3 4 5 6 ··· 56 다음
