♥ [프론트엔드 심화]상태 관리와 비동기 처리-React / ts : Task App(1)

프로젝트 초기 설정 및 폴더

방법 1

$ npx create-react-app

 

방법2

npm init vite
Project name: ./
Select a framework: > React  //리액트 선택 
Select a variant: > TypeScript //타입스크립트 선택

npm i

>>생성 완료

시작하기

  //package.json파일에 debug파트에 "dev라고 되어 있음"
  
  "scripts": {
    "dev": "vite",
    
 
//터미널
npm run dev

 

 

구조 생성

src 폴더 구조 안내

src 폴더 구조 설명src 폴더 안에는 다음과 같은 하위 폴더들을 만든다:화면을 구성하는 모든 UI 컴포넌트를 모아두는 공간이다.
이 폴더에는 다음과 같은 주요 컴포넌트를 넣는다:

• ActionButton
• DropDownForm
• BoardList
• SideForm
• List
• ListContainer
• LoggerModal
• ModalEdit
• Task

🔹 hooks/🔹 store/

• reducer/: 여러 상태를 처리하는 리듀서를 관리하는 폴더
• slices/: 로그인, 모달 등 기능별 상태를 나눈 slice들을 관리하는 폴더
• index.ts: 루트 리듀서를 설정하는 진입 파일

🔹 types/

• • TypeScript에서 사용하는 공통 타입 정의를 모아두는 폴더이다.
    여러 컴포넌트와 로직에서 일관된 타입을 사용하도록 도와준다.
  • 컴포넌트 간 상태를 효과적으로 관리하기 위해 Redux 상태 관리를 적용한다.
    구조는 다음과 같이 나눈다:
  • 프로젝트에서 반복적으로 사용되는 로직을 커스텀 훅으로 만들어 이 폴더에 정리한다.
  • 🔹 components/
  • src 폴더는 각 기능별로 코드를 나눠서 관리하기 쉽게 구성한다.

✅ 개발자 도구 여는 방법
단축키:Ctrl + Shift + I

 

패키지 설치

사용 라이브러리 요약

• @reduxjs/toolkit & redux
  👉 Redux를 더 쉽게 사용할 수 있도록 도와주는 도구이다.
  복잡한 액션과 리듀서를 간단하게 만들 수 있도록 해준다.
• clsx
  👉 조건에 따라 클래스 이름을 깔끔하게 조합할 수 있게 해주는 도구이다.
  (예: isActive일 때만 특정 클래스를 추가하도록 할 때 사용한다)
• @vanilla-extract/css, @vanilla-extract/css-utils, @vanilla-extract/vite-plugin
  👉 TypeScript 파일에서 CSS를 작성할 수 있게 해주는 도구이다.
  Vite로 빌드할 때 자동으로 적용되며, 스타일을 타입 안전하게 관리할 수 있도록 해준다.
• react-icons
  👉 다양한 아이콘을 React 컴포넌트처럼 사용할 수 있게 해주는 도구이다.
  Font Awesome, Material Icons 등 여러 아이콘 모음을 한 번에 사용할 수 있도록 해준다.
• uuid
  👉 고유한 ID를 자동으로 생성해주는 도구이다.
  리스트나 객체에 유니크한 키가 필요할 때 유용하게 사용할 수 있다.
• react-beautiful-dnd
  👉 드래그 앤 드롭 기능을 쉽게 구현할 수 있게 해주는 도구이다.
  하지만 현재는 사용하지 않기로 결정하였다.

 

Board 데이터 및 타입 생성

// store/slices/boardsSlice.ts
import { createSlice } from "@reduxjs/toolkit";
import { Iboard } from "../../types";

type TBoardState = {
    modalActive : boolean;
    boardArray : Iboard[]
}
const initialState : TBoardState = {
    modalActive: false,
    boardArray: [
        {
            boardId: 'board-0',
            boardName: '첫번째 게시물',
            lists: [
                {
                    listId: 'list-0',
                    listName: 'list 1',
                    tasks: [
                        {
                            taskId: "task-0",
                            taskName: "task 1",
                            taskDescription: "description",
                            taskOwner: "choi"
                        },
                        {
                            taskId: "task-1",
                            taskName: "task 2",
                            taskDescription: "description",
                            taskOwner: "choi"
                        }
                    ]
                },
                {
                    listId: 'list-1',
                    listName: 'list 2',
                    tasks: [
                        {
                            taskId: "task-2",
                            taskName: "task 3",
                            taskDescription: "description",
                            taskOwner: "choi"
                        }
                    ]
                }
            ]
        }
    ]
};

const boardSlice = createSlice({
    name: "board",
    initialState,
    reducers: {
        // reducer 함수 추가 예정
    }
});

export const boardReducer = boardSlice.reducer;

// store/reducer/reducer.ts

/타입스크립트에서 추론을 못하면 타입 지정을 직접 해줘야한다.