https://github.com/dinomoon/movie_app
Nomad Coders - ReactJS로 영화 웹 서비스 만들기 https://dinomoon.github.io/movie_app/
https://github.com/dinomoon/movie_app
nomadcoders react
Last synced: 2 months ago
JSON representation
Nomad Coders - ReactJS로 영화 웹 서비스 만들기 https://dinomoon.github.io/movie_app/
- Host: GitHub
- URL: https://github.com/dinomoon/movie_app
- Owner: dinomoon
- Created: 2020-06-25T09:31:55.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T21:54:59.000Z (over 3 years ago)
- Last Synced: 2025-06-12T06:48:25.521Z (12 months ago)
- Topics: nomadcoders, react
- Language: JavaScript
- Homepage:
- Size: 1.96 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactJS로 영화 웹 서비스 만들기
### How does React work?
### Creating your first React component
- component는 html을 반환하는 함수다.
- javascript와 html사이의 조합을 jsx라고 한다.
- component는 반드시 대문자로 시작해야한다.
- react application은 하나의 component만 렌더링 할 수 있다. 그래서 component안에 component를 넣어야 한다.
### Reusable Components with JSX + Props
### Dynamic Component Generation
- map함수
### Protection with PropTypes
- npm i prop-types
- prop의 타입 등등을 미리 적어 놓음으로써 에러를 예방할 수 있다.
### Class Components and State
- 동적으로 데이터를 다루기 위해서는 Prop이 아니라 State를 사용해야한다.
- 그런데 State를 사용하기 위해서는 App을 function이 아니라 class로 사용해야한다.
### All you need to know about State
- State의 값을 변경하려면 setState를 사용해야한다. 그냥 바꾸면 render가 일어나지 않아서 변경이 안된다.
- setState를 부르면 State의 값이 변경되고 다시 render한다.
- react에서 제공하는 current를 이용해 State값을 바꾸는 것이 성능에 좋다.
### Component Life Cycle
- Mounting: constructor(), render(), componentDidMount()
- Updating: ~, render(), componentDidUpdate()
- UnMounting: componentWillUnmount()
### Planning the Movie Component
- Life Cycle을 이용해서 movie를 모두 fetch하면 영화를 보여주게 하기
### Fetching Movies from API
- axios
- yts (불법사이트..?)
### Rendering the Movies
### Styling the movies
### Adding Genres
### CSS and cutting the summary
- {summary.slice(0, 180)}...
### Deploying to Github pages
- npm i gh-pages
- "homepage": "https://dinomoon.github.io/movie_app"
- 반드시 소문자!
- "deploy": "gh-pages -d build"
- "predeploy": "npm run build"
### Getting ready for the Router
### Building the Router
- npm i react-router-dom
### Building the Navigation
- a, href
- Link, to
### Sharing Props Between Routes
- Link에 state를 담아서 보낼 수 있다.
### Redirecting