[Netflix] Header, Router 기능 구현

결과

Header 부분을 완성 하였다.

[ 홈 / TV 프로그램 / 영화 ]로 분류 하였고 각각 Router를 이용해 경로를 지정해주었다.

createGlobalStyle로 GlobalStyle을 설정하였다.

jsconfig.json을 사용하여 절대경로로 지정하였다.

[JavaScript] import (상대경로 → 절대경로) path 설정 방법

 

홈 화면

---

Header

npm i styled-components 라이브러리를 이용하여 CSS 적용

[ 홈 / TV 프로그램 / 영화 ]에 각각 Link 와 Route를 지정

withRouter를 통해 현재 위치에 opacity를 설정하여 보기 쉽도록 설정

 

Home

Tv

Movie

 

---

Router

npm i react-router-dom 라이브러리를 이용

Router.js 파일과 Routes 폴더로 분리

 

Directory

---

GlobalStyle

npm i styled-components 라이브러리의 기능중 createGlobalStyle을 사용하여 GlobalStyle을 지정

npm i styled-reset으로 css 초기화 

 

---

코드

https://github.com/ssc9811/scflix-hook

GitHub - ssc9811/scflix-hook