1. react-router-dom
이번 영상에서는 react-router-dom 사용법에 대해 배울거야
곧 알게 되겠지만, 아주, 아주, 엄청, 쉬울거야
알겠지? react-router-dom을 사용하기 위해서는
우선 몇가지를 import 해야 해
튜토리얼에서 요것들을 복사해서
여기에 붙여넣고
Link는 지워줘. 나중에 다룰거야, 알겠지?
BrowserRouter를 import 해 올거야
라우터에는 두 가지 종류가 있는데
하나는 Hash Router고
다른 하나는 Browser Router야
우린 둘 다 살펴볼거니까 걱정하지 말고. 알겠지?
여기에 Router 컴포넌트를 만들어줄게
정말 간단하지
누군가 만들어 놓은 컴포넌트를 그냥 사용하기만 하면 되는 거야. 아주 쉽지
그 다음에는 Switch를 사용해
Switch가 하는 일은
Route를 찾는건데
Route는 여기 이 URL을 의미해
알겠지? 그리고 Route를 찾으면 컴포넌트를 렌더링해
그게 전부야
얼마나 간단해
실행되는 걸 보면 이해가 더 잘 될거야
여기로 와서
Route를 써줘
알겠지? 그리고 여기 Route 안에다가 컴포넌트를 써줄거야
오케이? 예를 들어서, 우리는 2개의 Route를 만들건데
하나는 유저가 홈화면으로 갈때 사용할 Route야
알겠지? 그건 바로~
이거야
이게 바로 홈화면으로 간다는 의미야. 알겠지?
그럼 우리는 path="/"라고 해주면
끝이야
유저가 이 경로에 있으면, 우리는 Home Route를 렌더링 해줄거야
그리고 그건 우리 이미 만들어뒀지
완전 간단하지?
이 Home 함수를 import 하기만 하면, 끝이야!
여기에 Home이라고 적어주고
(위와 같이 작성)
그럼 끝났어
우리는 여기서 Router를 만들고
그리고 그 안에 Route를 만들어줬어
그리고 누군가 우리 웹사이트의 "/" url에 있다면
우리는 Home 컴포넌트를 보여줄거야
아주 쉽지 않아?
너무, 너무, 쉽지
그치? 이게 되는지 한 번 보자
여기로 와서, 그리고...
이렇게 해줘 ("/movies/123" 삭제)
짜잔! 여기 보이지? 된다. 봐봐!
아주 잘되는구만! 끝!
정말 간단하지 않니? 너무 심플해!
아주 쉽고 말야
그렇지?
아주 쿨하고, 엄청 심플하고, 너무 쉬워
좋아, 이거 봐
뾰로롱
이제 우리는
React.js 에게
url 마다 정확히 우리가 원하는걸 보여달라고 말할 수 있어
Movie도 동일하게 해주자
여기로 와서 Route를 열고
좋아. Route를 닫아주고
그리고 여기에 Detail을 import 해오자
h1 하나만 들어있는 이거 말이야
알겠지? 자, 여기에 Detail을 써주고
좋아
path는 "/movie"라고 써주자
알겠지? 그럼 됐어
여기로 오면, 우리는 Home 화면에 있고
Home 화면에는 Home 컴포넌트를 렌더링 하고 있어
loading이랑 기타등등을 포함하지
이제 "/movie"로 가보면
보이지? Detail이 나왔어!
얼마나 쉬워
너무 간단해!
그치? 아주, 아주 쉬워!
우리는 알맞은 컴포넌트를 잘 import 하기만 하면 돼. 그럼 된거야!
아주 간단해
Brower Router랑 다른 하나의 차이점에 대해 궁금할텐데
차이점은 URL의 생김새에 있어
Browser Router에서 URL은 여러분이 예상하는 대로 생겼어. 보통의 웹사이트처럼 말이야
그렇지? 아주 쉬워
만약 다른 Router 종류인, HashRouter를 사용한다면
여기 보이는 것처럼 조금 다르게 생겼을거야
여기 뒤에 뭔가를 덧붙여
그 다음에 /movie가 붙는거지
알겠지? 아주 작은 차이점이 있어
대부분은 Browser Router를 사용해. 뒤에 이 #를 붙이고 싶지 않으니까 말야
오케이? 이게 다야. 좋아
전체적으로 빠르게 복습해볼까
우리는 react-router-dom을 설치했지
react-router-dom은 아주아주 쿨한 컴포넌트들의 모음집이야
알겠지?
첫번째 컴포넌트는 Router였어
Router를 먼저 렌더링 해주고
그 안에 들어가는건 우리가 유저에게 보여주고 싶은 것들이야
유저가 있는 url에 따라서 말이야
여기에 Swtich 컴포넌트를 넣어준 이유는
한 번에 하나의 Route만 렌더링 하기 위해서야
알겠지? React Router에서는 네가 원한다면 두개의 Route를 한번에 렌더링할 수 있거든
우리는 한 번에 Route 하나만 렌더링 되기를 원해. 그렇지?
우리가 Switch 컴포넌트를 사용하는 이유야
그리고 나머지 여기에 있는 것들은
공식 문서의 튜토리얼을 따라했어. 아주 쉽거든
여기 보면 about을 위한 url이 있고, 여기서는 About 컴포넌트를 보여주고
users url은 Users 컴포넌트를 보여주고
home url은 Home 컴포넌트를 보여줄거야
우리의 경우에는 url이 두 개지
하나는 home url 이고, Home 컴포넌트를 보여줘
Home 컴포넌트는 loading이랑 movies 등을 포함해서 만들었던 컴포넌트였고 말이야
그리고 누군가 /movie로 간다면
Detail 화면을 보여주지
그렇지?
이제 보여주고 싶은 건
한 Route에서 다른 Route로 이동하는 방법이야
유저가 영화 제목을 클릭하면 Detail 스크린으로 가게 하고 싶거든
아마 이렇게 생각하고 있을 수도 있는데
Movie.js로 가서
h2 안에다가 a 태그를 넣어서 link를 만들면 될거라고 말이야
단순 HTML이었다면 이렇게 했을거야
"/movie"로 간다고 해보자
우리가 아주 잘 알고 있는거지
여기를 클릭하면 이동하게 되는거 말이야
문제는, 이게 되긴 하지만
페이지 전체가 다시 실행 된다는거야
영화 제목을 클릭하면, 화면 전체가 재실행 되는걸 볼 수 있어
우린 React.js를 사용하고 있고, 재실행하는 걸 피하고 싶어
희소식은, 정확히 이걸 위해 존재하는 컴포넌트가 있다는거야
그리고 그 컴포넌트는 Link라고 해
Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트야
Link는 네가 원하는 곳 어디에든 사용할 수 있어
우리는 movie 컴포넌트 안에서 사용할거야
react-router-dom에서 Link를 import 해오고
a href=""를 사용하는 대신에
Link to=""를 사용할거야
이렇게
Link to
(위와 같이 작성)
그럼 다 됐어
이제 여기로 와보면
보다시피 링크가 생겼고
이걸 클릭하면
Detail 화면으로 넘어가지만
브라우저가 새로고침되지는 않아
다시 한 번 해보자
다시 보여줄게
영화 제목을 클릭하면
이동은 했는데, 새로고침 되지 안 않았어
아주아주 멋져. 이러면 되게 빠르게 반응하는 것처럼 보이거든
알겠지?
좋아
방금 한 걸 빠르게 다시 복습해보자
이전에는 App 컴포넌트가 모든 걸 다 하고 있었어
그 다음에는 App 컴포넌트에 만들었던 모든 로직을 별개의 장소로 옮겼어
Home이라는 별개의 컴포넌트로 옮겼지
Home에는 기존에 만들었던걸 복붙했어. 그렇지?
어려울거 하나 없었어
그리고 Detail 컴포넌트를 만들었지. 일단 자리를 좀 차지하고 있으라고
그리고 App.js에 있던 모든 걸 삭제하고
이걸로 대신 채워넣었어
이제 여기서 우리는 react-router-dom의 컴포넌트를 가져다 쓰고 있어
이 컴포넌트들이 하는 일은
여기 url을 바라보고 있는거야
url이 바뀌면
어떤 걸 보여줄지 결정해
그렇지? 그리고 이걸 설정하는 건 아주 쉬웠어
제공된 Route 컴포넌트를 사용해서
유저가 "/movie" path에 있다면 Detail 컴포넌트를 보여주라고 하기만 하면 됐지
유저가 "/"(home) path에 있다면 Home 컴포넌트를 보여주라 하고 말이야
그리고 그게 바로 여기서 일어나고 있는 일이지
/movie 경로에 오니까
Detail 컴포넌트를 보여주고 있어
"Detail"만 딱 있지
그리고 movie로 다시 가보면, 아니 미안. home으로 가보면
home 경로로 돌아가면 Home 컴포넌트가 실행돼
Home은 모든 영화를 보여주는 컴포넌트였어
알겠지?
여기 보이는 것처럼, 아주 이해하기 쉬워
React.js가 작동하는 방식이랑 컴포넌트가 생긴 모습 때문에
기억하기 아주 쉬워
Route를 만들면 그 안에 넣어준게 렌더링 되는거야
알겠지? 이게 다야
다른 Route를 만들 수도 있지
예를 들어, 여기에 Route 그리고 path="/hello"를 해줘
당연히 여기서 Route 를 닫아줘야 하고
여기에는 h1 안에 Hello를 넣어줘
이제 여러분은 이건 유저가 "/hello" 경로에 올때에만 렌더링 될거라는 걸 알지
해보자
url에 /hello라고 쓰면
이거 봐봐. Hello
얼마나 쉬워!
Route 안에 컴포넌트를 넣어주기만 하면 돼
그럼 React Router가 해당 경로일때에 그 컴포넌트를 보여줄거야
끝!
다음 영상에서는
다이나믹(동적) url을 어떻게 만드는지 알아볼거야
왜냐면 여기 이 "movie"는 아무런 정보도 넘겨주고 있지 않거든
그 대신 난 movie로 가면 movie id를 얻고 싶어
2. Parameters
- https://github.com/Daniel-Jeon/for-react/commit/2ba8dd10b93215fb3116047d95c25caf70127936
React Router는 다이나믹(동적) url을 지원해주기도 해
다이나믹하다는 건 url에 변수를 넣을 수 있다는 의미야
이렇게 하거나, 혹은 어떻게 하든지
네가 원하는 대로 말이야, 알겠지?
이 변수를 넣어주기 위해서는
유저가 "/movie "경로로 와서
여기에 id를 적으면
Detail 을 보여주도록 할거야
알겠지? 새로고침을 하면
여기 보이는 것처럼, 유저가 movie로 가서
id를 입력하면 Detail을 보여주는 거지
알겠지? 이렇게 하면 아주, 아주 좋아
왜냐하면 이렇게 되면 Movie 컴포넌트에서
유저를 "/movie/변수"의 경로로 보낼 수 있기 때문이야
":" 을 쓰는게 아주 중요해
이걸 안 쓰고 그냥 이렇게 둬버리면
유저를 "/movie/id"로 보내버리게 돼
말 그대로 텍스트 "id"로 말이야
우린 그게 아니라 "/ : id" 이걸 원해
이렇게 쓰면
이게 1, 2, 3, 4, 5, 6 혹은 네가 원하는 무엇이든 될 수 있어
알겠지? 아주 간단하고, 아주 쉬워
알겠지? 좋아
자, 이렇게 해주자고. 짜잔
오케이. 이렇게 되면, Movie 컴포넌트에 id가 필요하게 되지
이렇게, 그렇지?
근데 Movie 컴포넌트에서는 props로 id를 받고 있지 않아
그 말은 Movie 컴포넌트의 부모 요소를 살펴봐야 한다는 건데
그건 바로 여기 있는 Home 이지
Home이 바로 Movie 컴포넌트를 렌더링하는 녀석이고
Home이 id를 넘겨주고 있지 않아
(위와 같이 작성)
자 이제 Movie가 prop 으로 id를 받고 있어
그렇다면 여기서 id을 넘겨받을 수 있지
그렇지? propTypes를 설정해주자
(위와 같이 작성)
이건 number 일거고
필수(required)야
이건 전부 object 였어. 기억나?
컴포넌트를 렌더링 한다는 건
실질적으로는 함수를 불러오는거였지
여기보면
우리는 Movie 함수를 호출해서
그 안에 이런 식으로 object 들을 전부 넘겨주고 있는 거야
props는 object 일 뿐이고, 우리는 그걸 열어서 item을 꺼내 쓰는 거라는 걸 기억해
이렇게 되면 url을 더 좋게 만들 수 있지
(위와 같이 작성)
한번 보자
Loading... 이 나오고
그 다음 화면으로 넘어와서
이제 영화 제목을 클릭하면 /movie/ 다음에 이 영화의 id(34015)가 나와
짱이지
여기 화면에는 Detail이 렌더링 되고 말이야
아주 좋아
다시 돌아가면, Loading...이 나오고
또 다른걸 클릭해보면, 짜잔
여전히 Detail 화면이 뜨는데
이젠 url에 id가 함께 나와
이게 앞으로 아주 아주 유용할거야
알겠지?
자 이제 우리가 배울건
여기에 오는 id 값이 뭔지 알아내는 거야
이걸 어떻게 알 수 있을까?
이걸 알면 아주 유용할거야, 그치?
왜냐하면 여기에 어떤 id가 오는지 알면
이 url에 요청을 보낼 수 있기 때문이야
이 url은 id값을 요구하거든
그치?
그러니까 우리는 여기 오는 id가 뭔지 알아야 해
알겠지? 우린 여기에 id를 위한 자리를 마련해줬어
React Router한테 여기 오는 id값이 뭔지 알고 싶다고 말하고 있는 거야
url의 이 부분에 오는 값이 뭔지 확인하는 건 사실 아주 아주 쉬워
예를 들어서, 여기 Home으로 가보면
useState 함수를 이렇게 사용하고 있어
또 React Router에서 제공하는 함수가 있어
url에 있는 값을 반환해주는 함수야
특히, 변경되는 값을 말이야
url에 있는 변수값. 아주 쉬워
우리는 useParams라는 함수를 불러오기만 하면 돼
(위와 같이 작성)
이제 이 useParams이라는 함수를 써보자
(위와 같이 작성)
뭘 반환해주는지 확인해보자
빠밤! 여기 봐봐!
id를 받아왔어
얼마나 쉬워!
이보다 더 쉬울 순 없지
다시 한번 해보자. Home으로 와서
홈 화면에서 첫번째 영화제목을 눌러볼게
뾰로롱
url에는 34015이 있고
콘솔에도 똑같은 번호가 있어
그리고 React Router는 내가 Route에 써둔 변수명을 그대로 사용하고 있어
그래서 만약 내가 여기에 chillitomato라고 쓰면
이게 바로 내가 받게 될 변수의 이름이 되는거야
그래서 여기 Detail.js에서
console.log(x)를 하면
콘솔에 parameters가 찍히고, 그게 chillitomato 지
아주 아주 간단해
우리는 React Router에 이 url이 변수를 받을거라고 말해주기만 하면 돼
그 다음엔 Detail 화면에서
useParams 라는 함수를 사용하는 거야
이 함수를 사용하면 React Router는 바로 이 변수의 값을 넘겨줘
세상 쉬운 방법이지
여기에 id라고 했던걸 기억한다면
여기로 와서
중괄호 안에 id라고 해주면 돼
그럼 다 됐어
여기로 와서
여기 있네, 요기
이게 우리의 id 인거야
그럼 이제 남은건 우리가 받은 id를 가지고
API에 요청을 보내는 것만 남은 것 같아
이제 필요한 건 다 갖췄거든!
다 가졌어, 진짜로!
홈화면으로 와서, 제목을 클릭하면, id를 받게 되고
이제 우리는 컴포넌트가 처음 mount 할때에만
코드를 실행시키는 방법도 알고 있어, 그렇지?
이전에 우리는 이 id값이 뭔지 몰랐는데
이제는 알아
바로 여기 있지
그리고 이게 바로 우리가 공략해야 할 url 이야
앞에 이런 url이 있고, 그 담에는 movie_id, 그리고 id값이 와
자, 한번 해보자!
여기로 와서. 짜잔
그리고 useEffect를 써줄거야
좋아, 그리고 어떠한 것에도 간섭받지 않도록 해줄거야
(위와 같이 작성)
이 url을 공략할거고
id 부분을 이렇게 수정해줘
(위와 같이 작성)
좋아. 그럼 다 됐어
근데 await는 async 함수 내부에 있지 않으면 사용할 수 없어
그래서 이걸 옮겨줄건데
이걸 getMovie 함수라고 해두고
여기에 function 혹은 const getMovie를 만들어주자
그리고 이걸 async 함수로 만들어줘
그럼 끝이야. 다음으로 넘어가자
이제 이걸 console.log 해보자
좋아. 되는지 한번 볼게
이제 뭘 할거냐면...와우 엄청 빠르네
여기 있어. 하!
돌아가서 다시 해보자
이제 여기 Gintama를 클릭해볼거야
여기를 클릭하면 Detail 화면으로 넘어가고
여기 id가 있으니까
이 url을 공략할 수 있고
그렇다면 이 데이터는 Gintama 영화에 대한 거겠지
이거야
여기 title 이 있어, 봐봐
완벽해
실행되고 있어!
영화들이 렌더링 됐고
제목을 클릭하면
id가 있는 페이지로 가게 돼
React Router는 아주 똑똑한 녀석이라
여기서 id값을 찾아올 수 있었어
id을 알고 있으니까 API로부터 정보를 fetch 해올 수 있었지
이제 더 많은 영화 정보를 보여줄 수 있게 되었어
이제 네 차례야!
이제 네가 이걸 마무리 할 시간이야
지금 Detail 스크린에는 로딩이나 다른 것들이 아무것도 없어
Home에 해줬던 loading을
Detail에 해주는 것도 좋은 생각인 것 같아
그리고 movie 가 State에 있지 않아
지금은 API에서 json을 받아와서 아무것도 안 하고 있어
그냥 json을 콘솔에서 확인만 하고 있지
그러니까 그 json을 State에 넣어주면 어떨까?
그럼 여기에 영화의 상세 정보들을 보여줄 수 있을 거야
알겠지? 그럼 끝난 거야
이제 React.js는 다 배웠어
보다시피, 몇 가지만 배우면 그 다음에는 다 똑같아
state, setState, useEffect가 전부야. 그럼 끝!
그 다음에는 그냥 html이랑 그걸 예쁘게 만드는게 다야
props에 대해 배웠고
propTypes도 배웠고
그게 다였어
이게 멋진 앱을 만들기 위한 전부야
이걸 배우는데 오래 걸리지 않았어
꽤 쉬웠고
코드도 꽤 괜찮은 것 같아
난 특히 Detail.js가 마음에 들어
이 useParams 함수는 너무 귀여운 것 같아
우리한테 url의 상세정보를 알려주는 녀석이었지
아주 나이스해. 보다시피 좀 대박이지. 그냥 함수인데 말야
함수 하나만 불러오면 네가 원하는걸 가져올 수 있어
아주 좋아. 오케이?
자, 모두들
나는 여기서 끝낼게
이제 스스로 이 여정을 이어나갈 시간이 되었어
이제 너는 이 다음에 해야 하는 무엇이든 다 할 수 있어
loading을 넣을 수도 있고
movies를 state에 올릴 수도 있고
그 영화를 여기에 보여줄 수도 있어
Navigation Bar를 만들어서
홈이나 about페이지 같은걸 메뉴에 넣을 수도 있어
이제 Link를 만드는 법도 아니까
아마도? ...그럴걸?
이걸로 코드 챌린지를 해보면 좋을 것 같아
나는 여기까지!
이 강의를 봐줘서 고맙고
다음 영상은
우리가 만든 이 아름다운 결과물을 어떻게
github pages에 올리는지에 대한 작은 보너스 영상이 될거야
Command 하나로 말이지
3. Publishing
이제 이 아름다운 결과물을 github pages에 deploy 할거야
CSS는 카메라 없이 할거야
CSS를 확인하고 싶다면
이 영상 상단에 있는 github 링크를 들어가보길 바래
CSS는 같이 하지 않아도 될 것 같아
그냥 CSS고, CSS는 모두가 싫어해
그러니까 괜찮아 (답정너)
이제 gh-pages라는 아주 나이스한 툴을 설치할건데
이렇게 npm i gh-pages를 해줘
알겠지? gh-pages란
결과물을 github pages에 업로드 할 수 있게 해주는 나이스한 패키지야
github pages는 github 에서 제공하는 무료 서비스인데
네가 html, css, javascript를 올리면
그걸 웹사이트로 만들어서 전세계에 무료로 배포해줘
좋은 도메인도 가지게 되고 말이야. 알겠지?
가장 먼저 해야 할건 package.json에 있는 scripts를 확인하는거야
package.json에는 build라는 script가 있어
이 script를 실행하면 우리 웹사이트의 production ready code를 생성하게 돼
production ready란 코드가 압축되고 모든게 최적화 된다는 의미야
이렇게 build를 실행시키면, npm run build
시간이 좀 걸릴거야
압축하고, 최적화하는 등 모든걸 해야 하니까 말이야
이게 실행이 되고 나면 여기 "build" 라는 폴더가 생겨. 그렇지?
아주 요상한 javascript로 가득하지
이 자바스크립트를 봐봐
코드가 압축된 거야
여기 있는 게 다 압축된 거야
얼마나 이상한가 한 번 봐봐
이것봐! 압축됐어
봐봐, 엄청 못 생겼지
여기 어딘가에
우리가 만들었던 props 가 있어
coverImg, title, summary
보다시피 우리가 만든 코드 같은게 여기 있는데
잘려있기도 하고
여기 useState도 있고
이상하지?
아무튼, 이거봐! 이게 Movie야!
이게 바로 Movie를 렌더링하는거야
map을 돌려서 영화가 나오는데, O가 movie인가봐
이게 props들이고... 봐봐
아주 이상하잖아
미친 거 같아
이게 바로 브라우저가 이해할 수 있는 코드야
아주, 아주, 아주 최적화 되어있어
알겠지? 이게 바로 build 명령어를 실행하면 나오는 결과야
이제 이건 끝났어. 좋아
이제 이걸 GitHub Pages에 push 해야해
push 하기 전에
네가 해야할 건 package.json으로 가서
여기 마지막으로 온 다음
,(콤마)를 먼저 찍어주고
"homepage" 라고 적어줘
그 다음에는 내가 하는 걸 따라하면 돼
"https"를 써준 다음에
첫번째로는 네 GitHub username을 써줘
그 다음에는 github.io라고 쓰는거야
그리고 나서는 코드가 들어있는 github repository를 써줘
아직 repository가 없다면 생성하고 (푸시하고) 그런것들을 해주고
나의 경우에는 git remote -v를 실행해보면
내 repository의 이름은 react-for-beginners라는 걸 확인할 수 있어
좋아. 이렇게만 해주면 돼
,(콤마) 다음에 "homepage"를 써주고
그 다음에는 https://
네 github username 을 써주고
github.io
마지막으로는 이 코드가 들어있는 github repository 이름을 써주면 돼
이게 다야. 이렇게만 해주면 돼. 알겠지?
첫번째 단계였고 두번째 단계는
다른 script를 하나 만들어줄건데
deploy라는 거야
deploy가 하는 일은 우리가 방금 설치한 gh-pages를 실행시키고
"build"라는 디렉토리를 가져가는거야
여기에 "build"라고 적어줘
근데 나는 먼저 build를 하고 난 다음에 deploy를 해야 한다는걸 기억하고 싶지 않기 때문에
predeploy command 를 만들어 줄거야
그럼 내가 deploy를 실행시키면
predeploy가 자동으로 먼저 실행이 되고
predeploy는 npm run build를 실행시켜
알겠지? 한번 보여줄게
여기 있는 build 폴더를 삭제할거야
바이바이
그 다음에 deploy 를 실행할거야
deploy를 실행하면 Node.js가 predeploy를 먼저 실행시킬거야
그럼 한번 npm run deploy를 해보자
여기 보이는 것처럼, 먼저 predeploy가 실행되고
아이고, 오마이갓
predeploy는 npm run build를 실행시키고
npm run build는 react-scripts build를 실행시키고
여기 있는거 말이야
그럼 이게 아주 최적화된 것들을 만들어낼거고
그게 끝이 나면 gh-pages -d build가 실행돼
이게 하는 일은 gh-pages가 build 폴더를
여기에 적어놓은 이 웹사이트에 업로드하도록 하는거야
이제 이 url을 클릭하고
조금 기다려야 해
왜냐면 이게 빨리 되진 않거든
조금 걸려
웹사이트가 업데이트 된걸 보려면 5분정도 걸려. 알겠지?
그러니까 웹사이트가 보이지 않더라도 걱정하지마
조금만 기다리면 돼
알겠지? url도 아주 쉽게 생겼어
여기는 nomadcoders 지만 네 github username 가 있겠지?
github.io 그리고 프로젝트(repository)의 이름으로 이루어져 있지
그럼 끝이야
이게 전부야
알겠지? 이 상태로 조금 더 기다릴건데
한 2분 정도 있다가 돌아와서
어떻게 됐는지 보여줄게
좋아, 모두들
이. 것. 봐!
우린 지금 nomadcoders.github.io/react-for-beginners 에 와 있어
그리고 우리 Movie App이 나왔지
아~주 잘 나오고 있어
영화 제목을 클릭하면? 짜잔
이것도 되고 있고
물론 나는 Detail 화면은 꾸미지 않았어
네가 할 수 있을거라고 믿어, 알겠지?
그럼 끝났어, 모두들! 우리가 해냈어!
이제 우리 웹사이트를 deploy까지 했어
얼마나 멋져!
아주 아주 쉬웠어
우리가 한건 homepage를 적어주고, script 두개를 만들어준 것 뿐이야
deploy랑 predeploy
다음에 네가 뭔가를 수정하고 업데이트를 하고 싶다면
npm run deploy만 하면 돼
그럼 자동으로 프로젝트가 build 되고
이전에 봤던 이상한 것들이 만들어지면서
그 폴더가 GitHub Pages에 push 될거야
오케이? 만약 변화가 바로 반영이 되지 않더라도
걱정하지마. Github pages 는 무료라서
업데이트하는데 시간이 좀 걸리곤 해
