[Netflix] Header, Router 기능 구현

2021. 9. 8. 13:02·Project/Netflix [React + Hooks]
반응형

결과

Header 부분을 완성 하였다.

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

createGlobalStyle로 GlobalStyle을 설정하였다.

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

 

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

절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위..

shin1303.tistory.com

 

홈 화면


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

Contribute to ssc9811/scflix-hook development by creating an account on GitHub.

github.com

 

반응형
저작자표시 비영리 변경금지 (새창열림)
'Project/Netflix [React + Hooks]' 카테고리의 다른 글
  • [Netflix] Star Rating 구현
  • [Netflix] Detail Page 구현 / 상세 내용 출력
  • [Netflix] [ 홈 / TV 프로그램 / 영화 ] Page에 데이터 출력
  • [Netflix / Clone] 프로젝트 계획 및 목표
꾸매코더
꾸매코더
웹 / 앱 개발자
  • 꾸매코더
    꾸매코딩
    꾸매코더
  • 전체
    오늘
    어제
    • 분류 전체보기 (96)
      • JavaScript (18)
        • Deep Dive (0)
      • React (5)
      • React-Native (9)
      • CSS (3)
      • TypeScript (1)
      • CS (10)
      • GitHub (4)
      • Clone Coding (15)
        • Kakaotalk [HTML + CSS] (10)
        • Momentum [JavaScript] (5)
      • Project (30)
        • Timer Project (14)
        • Netflix [React + Hooks] (12)
        • ToDoList [React-Native] (4)
      • 회고 (1)
  • 링크

    • Github
  • hELLO· Designed By정상우.v4.10.3
꾸매코더
[Netflix] Header, Router 기능 구현
상단으로

티스토리툴바