Front-end To Do List

[JaeHyup0504]

개발환경

• VScode 설치 - Prettier: 코드 자동 정렬 도구, ESLint: 자바스크립트 문법 유효성 검사 도구
• node.js : Jabascript 런타임. Babel, Webpack 등의 모듈을 가지고 있음
• npm : Node Package Manager. Node.js의 패키지를 관리
• React 개발환경 구축 : npx create-react-app : create-react-app으로 프로젝트를 생성하면 Babel이나 Webpack 등이 자동으로 설정 됨.
• Debugger 설정 : VScode의 디버그 환경 설정을 진행하여, Chrome을 기본 구성으로 추가
• 라우터 설정 : npm i react-router react-router-dom
• axios 설치 : cmd에서 파일경로를 리액트 프로젝트에 맞춘후 npm i axios , 설치 완료 후 HTTP request가 필요한 컴포넌트에 import axios from 'axios'; 적기.
• 스타일컴포넌트 : npm i styled-components

구현

1. App Page

• App.js Page 컴포넌트 영역 잡기
• App.js Page에 들어가는 컴포넌트 작성
  • Header.js Component : 버튼 링크 연결, 드롭다운 메뉴 작성
  • Footer.js Component :
• App.js Page 완성

2. Main Page

• Main.js Page 컴포넌트 영역 잡기
• Main.js Page에 들어가는 컴포넌트 작성
  • Genre.js Component
  • MovieList.js Component
  • Loading.js Component
• Main.js Page 완성

3. MainMovieDetail Page

• MainMovieDetail.js Page 컴포넌트 영역 잡기

• MainMovieDetail.js Page에 들어가는 컴포넌트 작성

  • MovieDetail.js Componenet (조건: 내가작성, 다른사람작성)
  • Comments.js Componenet

• MainMovieDetail.js Page 완성

• MyMovieDetail Page 컴포넌트 영역 잡기

• MyMovieDetail.js Page에 들어가는 컴포넌트 작성

  • Profile.js Component 작성

• MyMovieDetail.js Page 완성

4. MyPage Page

• MyMovie.js Page 컴포넌트 영역 잡기

• MyMovie.js Page 완성

• MyPage Page 컴포넌트 영역 잡기

• MyPage.js Page에 들어가는 컴포넌트 작성

  • MyPage Component 작성

• MyPage.js Page 완성

5. SignUp Page

• SignUp.js Page 컴포넌트 영역 잡기
• SignUp.js Page에 들어가는 컴포넌트 작성
  • SignUp.js Component 작성
• SignUp.js Page 완성

6. Posting Page

• Posting Page 컴포넌트 영역 잡기
• Posting Page에 들어가는 컴포넌트 작성
  • Posting Component 작성
• Posting Page 완성

7. Login Page

• Login Page 컴포넌트 영역 잡기
• Login Page에 들어가는 컴포넌트 작성
  • Login Component 작성
• Login Page 완성

8. CSS

• css 페이지 공통