async() : 비동기 방식. await() ~ : ~ 할 때까지 기다려라. [ES6 에서 나온 새로운 개념인가보다]
yts에서 영화 정보 가져올 때 팁 : json파일에서 가져오는 데이터를 잘 정리하면 간편하게 사용 가능
1. 단순하지만 접근하기에 복잡한 타입
2. 설정을 해두면 접근이 용이함
자 이제.. 가져온 movies 정보를 state의 movies 에 담아서 출력해볼까? wow 잘 된다!
api 를 통해 얻어오는 데이터에 보니 sorting by rating 옵션을 먹일 수 있겠다 (평점 좋은 순으로 보여주기 위해)
api 가져오기 위해 Movie.js 를 만들고 propTypes를 설정하는 부분에서 오류났는데 대소문자 구분이 정말 중요한거같다.....
온갖 css 를 먹여서 아래의 화면까지 도출했다. 주요 항목들에 대해서 정리해보자.
| 속성 | 내용 | 속성값 | 비고 |
| box-sizing | 박스 크기 어떤 것 기준으로 계산할지 정하는 속성 | content-box : 콘텐트 영역 기준으로 크기 정하기 border-box : 테두리 기준으로 크기 정하기 initial : 기본값으로 설정 inherit : 부모 요소의 속성값 상속받기 |
|
| margin | 바깥쪽 여백 | 10px 등 | |
| padding | 안쪽 여백 | 10px 등 | |
| font-family | 글꼴 정하는 속성 | font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 |
|
| justify-content | 플렉스 요소의 수평 방향 정렬방식 | flex-start (기본값) : 요소의 정렬 상태를 왼쪽으로 설정 flex-end : 요소의 정렬 상태를 오른쪽으로 설정 center : 요소의 정렬 상태를 가운데로 설정 space-between : 요소와 요소사이의 간격을 왼쪽과 오른쪽을 기준으로 설정 space-around : 가운데 기준으로 설정 inherit : 부모에게 상속받음 |
|
| align-items | 플렉스 요소의 수직 방향 정렬방식 | stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다. flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다. center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치됩니다. |
|
| flex-wrap | 요소의 넓이가 부모 넓이보다 클 때 다음줄로 넘길지 정하는 속성 | nowrap(기본값) : 부모 넓이에 맞게 자동 축소 wrap : 총 넓이가 부모 넓이보다 크면 다음줄로 줄바꿈 wrap-reverse : 줄바꿈 하는 요소들을 역순으로 배열 inherit : 부모에게 상속받음 |
|
| border-radius | 박스 테두리 직각/둥글게 등을 조절하는 속성 |
총 8가지 속성이 있는데 보통 같은 값으로 쓰게되는 경우 5px 등으로 표현 |
|
| box-shadow | 그림자 효과를 만드는 속성 | none | x-position y-position blur spread color | inset | initial | inheritnone : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수) blur : 그림자를 흐릿하게 만듭니다. 값이 클 수록 더욱 흐려집니다. spread : 양수면 그림자를 확장하고, 음수면 축소합니다. color : 그림자 색을 정합니다. inset : 그림자를 요소의 안쪽에 만듭니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
|
| position | 태그들의 위치를 결정하는 속성 | relative : 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용. top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절 absolute, fixed, static 등이 있다 |
|
| list-style | 목록의 머리글 표시하는 속성 | none : 머리글을 표시하지 않는다. disc : 검은색 바탕의 원을 표시한다. circle : 비어 있는 원을 표시한다. decimal : 숫자를 표시한다. lower-roman : 소문자 로마자를 표시한다. upper-roman : 대문자 로마자를 표시한다. lower-alpha : 영문 소문자를 표시한다. upper-alpha : 영문 대문자를 표시한다. |
css로 페이지를 꾸민 영화 목록 웹사이트 화면
이제 gh-pages를 이용하여 cloud에 올려보자. (설치하고 올리면 github가 무료 웹사이트를 제공해준다.)
package.json에 homepage 추가해주기 : https://user_name.github.io/project_name
☞ gh-pages가 github에 업로드하는 것을 허가해주는 모듈이다.
package.json > scripts 에 deploy, predeploy 추가해주기
참고 : npm run build를 하면 build 후에 project 폴더 안에 build 폴더가 생성된다. 만들어진 build 폴더를 gh-pages에 업로드 하는 것!
🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸 중요! 🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸🌸
자, 이제 완성된 나의 웹사이트에 접속해보자.
댓글