오늘의 진도
#4 MAKING THE MOVIE APP(#4.3~#4.5)
#5 CONCLUSIONS(#5.1~
#4.3 Adding Genres
genres 추가하기
Movie.js 파일에 propTypes를 추가시킨다.(array형태)
App.js 파일에 genres={movie.genres} 추가(이걸 해야 보임)
javascript를 쓰면서 class를 사용하면 component class에 의해 혼란스러우므로 <section class = >등 했던 것들을 모두 className으로 수정해줘야 함⬇
물론 Movie.js 파일에서도 수정해줘야 함⬇
map은 두 개의 인자를 넘겨줌 ➡ 1. 현재의 item 2. item number
➡ map.(genre, index) 이름은 index 말고도 itemnumber 등 짓고싶은 이름으로 가능
#4.4 Styles Timelapse
그냥 css 파일 만들길래 코드만 따고 skip
#4.5 Cutting the summary
➡ 들쭉 날쭉한 텍스트의 길이를 동일하게 자르는 것이 목표
➡ 하는 방법
<p className="movie__summary">{summary.slice(0, 180)}...</p>이렇게 slice를 이용하면 180자 이후에는 ...로 표시할 수 있음
#5 CONCLUSIONS
#5.1 Deploying to Github Pages
목표: 코드를 cloud에 업로드하기
-
(먼저 gh-pages(github에 업로드하는 것을 허가해주는 모듈) 설치) npm install gh-pages
(gh-pages는 이 웹사이트를 github의 gigub page 도메인에 나타나게 해줌. github가 static 웹 사이트 / HTML / CSS / Javascript 를 무료로 제공함.) -
package.json 파일에 가서
2_1. (여기서 주의할 것 username을 소문자로 적어야함) "homepage": "https://[my github username].github.io/[the name of my project in github]" 추가,
2_2. 그리고 npm start를 멈추고 npm run start를 실행 ➡ build 파일이 생성됨
2_3. 같은 파일의 "scripts" 안에 "deploy": "gh-pages -d build",
"predeploy": "npm run build"npm은 predeploy를 먼저 호출하게 되어있음. 그러면 predeploy는 npm run build를 실행함. 그러면 build는 build script를 호출함. 그리고 그 script는 folder를 반환함. 완료되면 predeploy 종료.
그러고 deploy는 gh-pages를 호출하고 build 폴더를 업로드 함.즉, deploy는 build 폴더를 upload하고 build 폴더를 얻는 방법은 npm run build를 실행시키는 것. predeploy는 deploy를 실행시키면 자동으로 호출.
2_4. 다시 npm run deploy를 실행해보기
(아, 실행시키기 전에 deploy와 predeploy의 deploy가 일치한지 확인. 이름이 같아야 pre의미가 있음)
➡ 이렇게 잘 작동되는 것을 확인
아직 이름이 이렇게 React App임
이거는 public/index.html에 가서 Movie App으로 바꾸어주고
업데이트 하기위해 npm run deploy를 다시 실행!
➡ 수정 완료
#5.1 Are we done?
더 이상 state를 갖기 위해 class component를 가질 필요가 없음(react hook이라는 것 때문. 새로운 개념이기 때문에 가르치지 않음)
이 강의에서 가르칠 내용을 다 배우긴 배운 것 같은데 약간 속성으로 듣기도 했고 뭔가 정신없이 지나간 기분,,? 제대로 들은게 맞나 싶기도 하고,,
다른 API를 활용해서 웹 페이지를 만들어보려 하는데 엄두가 안난다😿
