1회차 : https://www.catch.co.kr/CatchCafe/ProgramView/346
2회차 FrontEnd 개발 실습 : https://www.catch.co.kr/CatchCafe/ProgramView/352
- Node.js 설치
- Yarn 설치
- Visual Studio Code 설치
- Create-react-app 설치
- react app 실행해보기
yarn start
- github에서 repository 생성
- 생성한 프로젝트 경로에서 명령어 입력
> git init
> git add .
> git commit -m "initial commit"
> git remote add origin {remote repository 주소}
> git push origin master
initial commit 이후에는 git add, git commit, git push
3개의 명령어로 작업물 업데이트
- Home, MoveDetail, MovieList 3개의 페이지를 생성
- 서버에서 데이터를 불러와 MovieList 페이지에서 뿌려주기
map과 <img> 태그
를 활용해 불러온 데이터를 이미지로 예쁘게 뿌려주기
🌱REST API와 swagger
- API란? 응용프로그램에서 데이터를 주고받기 위한 방법 (마치...햄버거를 주문하는 키오스크)
- REST API란? 네트워크 상에서 클라이언트와 서버가 통신하는 방법 중 하나, http url을 통해 자원(Resouce)를 명시하고, http method를 통해(C:POST, R:GET, U:PUT, D:DELETE) 자원에 대한 행위를 적용
- swagger? API document를 자동으로 웹페이지로 만들어주는 툴
🌱react-router-dom
참고 블로그 react-router 는 써드파티 라이브러리로 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.
🌱superagent
superagent github API 호출을 위한 라이브러리
- css 파일 생성
- index.js 에서 css파일 import
- html에 className 설정하고 css 적용
- CSS 수직 중앙 정렬 - 기억해
flex, align-items, justify-content
- a태그 클릭한 링크 css 고치기 - css 가상요소 visited 활용하기
-
영화 정보 추가
제목, 포스터, 예매율, 예매율 순위 외에도 개봉일, 장르, 배우, 감독, 런타임 정보 추가 -
개봉일 형식 - moment.js
본래 2004-11-18T15:00:00.000Z
이런 형식으로 나오던 정보를 moment.js를 사용해 예쁘게 출력되도록 함
- 장르, 배우 배열 출력시 콤마(,) 붙이기
array.map((item, index) => ((index ? ', ': '') + item))
혹은 css 가상요소 ::before
나 ::after
를 사용하는 방법도 있음