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 호출을 위한 라이브러리

실습 내용

1. css 파일 생성
2. index.js 에서 css파일 import
3. html에 className 설정하고 css 적용

1. CSS 수직 중앙 정렬 - 기억해 flex, align-items, justify-content

참고 블로그

2. a태그 클릭한 링크 css 고치기 - css 가상요소 visited 활용하기

css 가상요소란?

1. 영화 정보 추가
   제목, 포스터, 예매율, 예매율 순위 외에도 개봉일, 장르, 배우, 감독, 런타임 정보 추가

2. 개봉일 형식 - moment.js

moment.js document

본래 2004-11-18T15:00:00.000Z 이런 형식으로 나오던 정보를 moment.js를 사용해 예쁘게 출력되도록 함

3. 장르, 배우 배열 출력시 콤마(,) 붙이기

array.map((item, index) => ((index ? ', ': '') + item))

혹은 css 가상요소 ::before나 ::after를 사용하는 방법도 있음