Developjik's React BoilerPlate with Airbnb Code Style

1. 프로젝트 소개
2. 프로젝트 주요 기술
3. 프로젝트에 활용 된 Backend Server
4. 프로젝트 기능 및 구현
5. 프로젝트 구조
6. 프로젝트 스크린샷
7. 프로젝트 설치 및 실행

1. 프로젝트 소개 🚀

• 개요 : boilerplate
• 주제 : React BoilerPlate
• 기간 : 2021.08 ~ 2021.09

2. 프로젝트 주요 기술

• react
• react-router- dom
• redux + react-redux + redux-persist
• react-cookie
• axios
• emailjs-com
• react-responsive
• material ui

3. 프로젝트에 활용된 backend server

• nest.js + postgresql 로 이루어진 Backend Server Backend Server Git Backend Server

4. 프로젝트 기능 및 구현

• /signIn (로그인 페이지)

  1. 사용자는 ID, Password 입력 후 Login 버튼 Click
  2. axios를 통해 요청하여 Backend Server의 Postgresql DB와 일치하는지 검사 후 accessToken(1시간 제한), User Data 반환
  3. 반환된 accessToken은 cookie에 1시간 동안 저장, User Data는 Redux Store에 저장
  • ※ 로그인한 경우 접근 불가
  
  

• /signUp (회원가입 페이지)

  1. 사용자는 정보 입력 후 Register 버튼 Click
  2. axios를 통해 요청하여 Backend Server의 Postgresql DB에 저장
  • ※ 로그인한 경우 접근 불가
  
  

• /contact (개발자에게 이메일 보낼 수 있는 페이지)

  1. 사용자는 정보 입력 후 제출 버튼 Click
  2. emailjs-com을 활용하여 개발자에게 메일 가능
  • ※ 로그인 한 경우만 접근 가능
  
  

• /info (회원 정보 페이지)

  • 회원 정보 보여주는 페이지
  • ※ 로그인 한 경우만 접근 가능
  
  

• 잘못된 경로

  • 404 Page Not Found 구현
  
  

• LogOut Button Click 한 경우

  • cookie 정보 삭제 + redux 안의 user 정보 삭제
  
  

• max-width:600px 이하

  • Navigation Menu => Toggle Menu로 변경

• Dark Mode
  • Toggle 클릭시 Dark Mode 적용 가능

• redux Persist
  • refresh 해도 redux-persist를 활용해 Session Stoarage에 저장하여 유지

5. 프로젝트 구조

├── public
│   ├── favicon.ico
│   └── index.html
├── src
    ├── App.jsx
    ├── Components
    │   ├── Contact
    │   │   └── ContactForm.jsx
    │   ├── Footer
    │   │   └── Footer.jsx
    │   ├── Header
    │   │   ├── Menu.css
    │   │   ├── Menu.jsx
    │   │   ├── Navigator.css
    │   │   └── Navigator.jsx
    │   └── Login
    │       ├── SignInForm.jsx
    │       └── SignUpForm.jsx
    ├── bgImg
    │   └── NotFoundBg.png
    ├── cookie
    │   └── cookie.jsx
    ├── index.jsx
    ├── modules
    │   ├── index.js
    │   └── user.js
    └── routes
        ├── AuthRoute.jsx
        ├── Contact
        │   └── Contact.jsx
        ├── Home
        │   └── Home.jsx
        ├── Login
        │   ├── SignIn.jsx
        │   └── SignUp.jsx
        ├── NoAuthRoute.jsx
        ├── NotFound
        │   ├── NotFound.css
        │   └── NotFound.jsx
        └── UserInfo
            └── Info.jsx

6. 프로젝트 스크린샷

[1] React BoilerPlate Main Page(No Login) ✨

[1-1] React BoilerPlate Menu(No Login) ✨

[1-2] React BoilerPlate Menu(Login) ✨

[1-2] React BoilerPlate Mobile Toggle Menu ✨

[2] React BoilerPlate SignIn Page ✨

[4] React BoilerPlate SignUp Page ✨

[5] React BoilerPlate Contact Page ✨

[6] React BoilerPlate Info Page ✨

[7] React BoilerPlate 404 Page ✨

[8] React BoilerPlate Dark Mode✨

7. 프로젝트 설치 및 실행

1. Git Clone

git clone https://github.com/developjik/React-boilerplate.git

2. 프로젝트 패키지 설치

yarn install

3. 프로젝트 실행

yarn start