practice-react-app's People
practice-react-app's Issues
ReactJS로 영화 웹 서비스 만들기
📌 전체 저장소
📌 To Do List
- commit : #
- 직접 state를 수정하지 않음, modifier 함수를 사용하고 그 함수가 대신 수정해주는 역할
- map 함수는 하나의 array에 있는 item을 내가 원하는걸로 변경하는 역할을 하고 새로운 array로 return 해줌
📌 Coin Tracker
- commit : #
- 앱 action : 페이지가 로드되면 로딩 메세지가 뜨고, 코인 정보가 나열되면 로딩 메세지는 사라지고 코인 리스트 UI 노출
- useState를 사용해서 코인 API 호출이 1번만 되도록 & loading UI가 렌더링 최초 1회만 동작하도록
- 강의 이후 챌린지 : 코인 select 후 내가 입력한 금액(달러)로 얼마의 코인을 살 수 있는지 계산하는 기능 추가
📌 Movie App
- commit : #
- 앱 action : 영화 정보를 보여주고, 연결되는 링크 제공해서 더 많은 정보 제공하는 페이지 제작
key
는 React에서만 map 안에서 컴포넌트들을 render할 때 사용함- 특정 타입의 행렬 정의시 arrayOf #
genres: PropTypes.arrayOf(PropTypes.string).isRequired
react-router
- 페이지 전환시 사용
- 이제 페이지 / route 별로 생각해보자
routes/Home.js
: 영화 전체 리스트를 보여주는 페이지routes/Detail.js
: 클릭시 영화의 상세 정보를 보여주는 페이지components/MovieApp.js
: 위의 router를 render- router은 URL을 보고 있는 컴포넌트이고 내가 보고 있는 URL에 따라 해당하는 컴포넌트를 보여줌
Router
<Router>
<Switch>
<Route path='/movie'>
<Detail />
</Route>
<Route path='/'>
<Home />
</Route>
</Switch>
</Router>
- Router 안에 들어가는건 우리가 유저에게 보여주고 싶은 것들
- url의 생김새가 다름
Browser Router
- 보통의 웹사이트처럼 생김
Hash Router
- url 뒤에 항상 #을 붙임, 그래서 보통 BrowserRouter 사용
Switch
- 한번에 하나의 Route만 렌더링되기 위해서 Switch 사용
- url 이 path에 있으면 해당 Home 컴포넌트를 렌더링해줌
- specific한 path 순서대로 사용한다
- Route(url)를 찾아서 해당 컴포넌트를 렌더링해줌
페이지 이동
- Home의 영화 정보들을 클릭하면 해당하는 Detail 컴포넌트로 보여지도록 하기 위해서는 ?
- Vanilla적인 생각이라면.. 각각의 영화 정보를 a 링크로 변경하고 클릭시
/movie
로 이동하도록 했겠지? -> 하지만 이러면 페이지 전체가 reload 되어버림, 그럼 React를 쓰는 의미가 없잖아? -> Link를 사용하자 !!!
Link
- 브라우저 새로고참 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트
Dynamic URL
- Dynamic URL ? : URL에 변수를 넣을 수 있음 (
/movie/123
) - 변수를 보낼 때는
:
를 사용하자, 아니면 해당 경로로 인식됨 /movie/:id
: /movie/123 경로로 이동/movie/id
: 말그대로 /movie/id 경로로 이동
useParams()
// in Detail 컴포넌트
const x = useParams(); // {id: '12345'}
- url에 오는 변수가 어떤 값인지 알아야 해당 변수값을 가지고 요청 등의 작업을 수행 가능 -> React Router가 url에 있는 값을 반환해주는 useParams 함수를 제공
/movie/:id
URL 이동시 Router가 Detail 컴포넌트를 렌더링해주고 있으며, Detail 컴포넌트에서 useParams 함수를 사용해서 id 값을 알 수 있음
📌 Publishing
// 1. package.json에 아래처럼 추가
"homepage": "https://{GithubID}.github.io/{저장소 코드가 반영되어있는 repo Name}"
// 2. package.json에 scripts 추가
// npm run deploy시 predeploy로 build가 실행되고 gh-pages로 build 폴더를 위에 설정한 웹사이트에 반영함
"scripts": {
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
}
- github pages에 publish
gh-pages
: 결과물을 github pages에 배포할 수 있도록 해주는 패키지- 반영되는데 시간이 조금 걸림
package.json - scripts
build
: build scripts 실행시 개발한 코드의 production ready code를 생성 가능- 실행 후에 build 폴더에 압축된 최적화된 브라우저가 이해할 수 있는 js 코드가 생성됨
새로고침시 404 Not Found Error
📌 이슈
- localhost에서는
localhost:3000/practice-react-app/todolist
에서 새로고침 시에 문제없이 새로고침되지만, https://beecomci.github.io/practice-react-app/todolist
Github Pages에서 새로고침시에 404 Not Found Error가 반환됨
📌 원인
- Github Pages는 HTML5
pushState
History API를 사용하는router(BrowserRouter)
를 지원하지 않음pushState
API는 페이지를 reload하지 않고 주소만 변경할 때 사용하는 방식으로 SPA에서 많이 사용되는 API
https://beecomci.github.io/practice-react-app/movieapp/1234
에서/movieapp/1234
와 같은 프론트엔드 경로(route)에 대해 Github Pages 서버에서는 아무것도 모르기 때문에 404 Error를 반환함
📌 해결 방안
- 참고 문서
- 프로젝트에서 채택한 방안은 2번 방안
1. HashRouter 사용
HashRouter
란 현재 페이지 경로 뒤에#
을 붙여서#
뒤의 내용 변경에는 reload가 되지 않도록 하는 방식window.location.hash
를 파싱해서 사용하며#
뒤의 경로는 클라이언트에서만 알 수 있음- 사용 방식은 BrowserRouter와 동일
2. index.html로 redirect 꼼수
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build",
"predeploy": "npm run build && cp build/index.html build/404.html"
},
- Github Pages가 404 응답을 처리할 때
index.html
페이지로 redirect하도록 트릭 사용 - 프로젝트를 deploy(배포)하기 전에 -> predeploy시에 빌드시
index.html
을404.html
로 복사해서 옮김으로서 404 페이지를 index 페이지로 잡아서 라우팅 시키는 방법
3. 서버에서 route 설정
- 이건 Githup Pages로 호스팅하는 경우가 아닐 때 사용하는 방법
- 사용하는 서버(express, Apache...)에서
index.html
페이지를 제공해서/practice-react-app/*
요청에 응답할 수 있도록 설정해야 함 (위 2번 꼼수와 비슷한 정석적인 방법?) -> 서버가 알 수 없는 경로에 대해서 index 페이지를 제공 - 참고 문서
📌 그럼 진짜 404 상황일 때는?
<Route path="/*" component={NotFound} />
<Switch>
내부 맨 마지막에 위의 Route에서 훑어도 없는/*
path에 들어온다면 없는 페이지임을 노출
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.