React-Redux Practice (To Do List App)
리액트-리덕스 연습 (투두리스트 앱 만들기)

💡 Project Outline
      프로젝트 개요

Practice Redux with React by making TO DO LIST App

투두리스트 앱 만들기로 리액트 & 리덕스 연습하기

📖 Index
      목차

Run this Project
프로젝트 실행

Project Introduction
프로젝트 소개

• Tech Stacks
  사용기술
• Implemented Features
  구현기능
• Directory Structure
  폴더구조
• Reasons for using this packages
  패키지 사용 근거

Retrospect
회고

• Learning
  배운 것
• Want to fix
  고치고 싶은 것
• What I think i need to study more
  더 공부해야 한다고 생각하는 것

⚙ Run This Project
      프로젝트 실행

• Just Click This Link => Go To App

• 링크를 클릭하세요 => 바로가기

If you want Edit Code
코드 수정을 원하신다면

follow this :
아래 내용을 참조하세요

# open cmd & clone code / 명령창 실행 & 클론 코드
git clone "https://github.com/JAENY007/react-redux.git"

# install package / 패키지 설치
npm i

# run code / 코드 실행
npm start

🛠 Project Introduction
      프로젝트 소개

🖥 Tech Stacks
      사용기술

🕹 Implemented features
      구현 기능

• Main Page / 메인 페이지

• SignUp / 회원가입

• SignIn / 로그인

• Get To Do List / 투두리스트 가져오기

• Create To Do / 투두리스트 만들기

• Update To Do / 투두리스트 수정하기

• Delete To Do / 투두리스트 지우기

• User Page / 유저 페이지

• Update User Info / 개인정보 수정

• Upload User Avatar(Image) / 유저 이미지 업로드

• Delete User Avatar(Image) / 유저 이미지 삭제

• Delete User Account / 회원탈퇴(유저 삭제)

---

📁 Directory Structure
      폴더 구조

src
├─app.component
│  ├─buttons
│  └─icons
├─app.feature
│  ├─myPage
│  └─todo
├─app.layout
├─pages
├─root.modules
│  ├─api
│  └─query
├─root.store
│  ├─action
│  ├─constant
│  └─reducer
└─root.styled

• All Folder names use camelCase
  폴더명은 모두 camelCase로 생성

• pages : Page Component folder with routing processing
  라우팅 처리가 되어있는 페이지 컴포넌트 폴더

• root folders in App are root.{name} / app.{name}
  app내의 root폴더

• Global used modules, CSS, state management store // root.modules / root.styled / root.store
  전역에서 사용할 모듈, CSS, 상태관리 저장소

• Common folder of App // app.feature / app.layout / app.components
  app 의 공통 사용 폴더 입니다

• Separation of folder structure by feature
  기능별로 폴더구조 분리

  • screen/Screen~.tsx : Screen entry point used by one feature
    하나의 기능에서 사용되는 화면 시작점
  • component/ : A component containing business logic used in a single feature
    하나의 기능에서 사용되는 비즈니스 로직이 담긴 컴포넌트
  • query/ : React-Query module Functions(e.g. useQuery, useMutation)
    useQuery, useMutation 등 react-Query 모듈 함수
  • app.feature/{feature}/ ~ constant, store, module, hook add as needed
    필요 시 추가

Naming Convention
네이밍 컨벤션

• Components(컴포넌트) : PascalCase
• modules, constants(모듈함수, 상수) : camelCase
• CSS ClassNames(CSS 클래스) : kebab-case

---

🎨 Reasons for using this packages (Librarys etc)
      패키지 사용 근거(라이브러리 등)

• CRA : Create-React-App
  For build faster react app
  빠른 앱 빌드를 위해 사용

• React & React-Router-Dom
  For build Single-Page-Application
  SPA 앱 빌드를 위해 사용

• Axios & React-Query
  For server state management : Axios for instance, React-Query for CRUD
  서버 상태관리를 위해 사용 : Axios는 인스턴스 생성, React-Query는 데이터 CRUD를 위해 사용

• Styled-Components
  For CSS management per component
  컴포넌트 단위의 CSS 관리를 위해 사용

• Vercel
  For Deploy the app
  앱 배포를 위해 사용

---

🏷 Retrospect
      회고

Learning
  배운 것

• React로 앱만들기!
• Vercel로 배포!

Want to fix
  고치고 싶은 것

• 이제 시작이다!
• 아직 아무것도 안함

What i think i need to study more
  더 공부해야 한다고 생각하는 것

• 모든 기술을 다 잘 알고 사용해야 한다!