React TIL 06

10 June, 2020 - React - 2 min read

React TIL 06

Cutting the summary

텍스트의 크기를 배경에 맞추기 위해 자바스크립트에서 가공해야 함
이때 Array 메서드를 사용하는데, 문자열은 배열과 마찬가지로 iterable이기 때문.
예를 들어 아래와 같다.

const example = 'This is string';
example.length; // 14
example.slice(0, 5); // "This "

배열과 같이 length를 구할 수 있으며 slice 등의 메서드를 활용하여 가공이 가능하다.
String.prototype.slice() - JavaScript | MDN
따라서 이를 통해 아래와 같이 활용이 가능하다.

<p className="movie_summary">{summary.slice(0,140)}</p>

Deploying to Github Pages

gh-pages 설치

npm i gh-pages
gh-pages를 통해 GitHub-page 도메인에 보여지도록 할 수 있다.

package.JSON 설정

이때 홈페이지 주소는 해당 레포 이름
script에 deploy와 predeploy 항목을 추가
- deploy에는 npm run build를 한 다음 build 폴더를 업로드
  - "gh-pages -d build
- predeploy에는 npm run build를 설정하여 deploy를 호출할 때마다 build가 되도록 함

{
"name":"movie_app_2019",
"version":"0.1.0",
"private":true,
"dependencies":{
"axios":"^0.19.0",
"gh-pages":"^2.1.1",
"prop-types":"^15.7.2",
"react":"^16.9.0",
"react-dom":"^16.9.0",
"react-scripts":"3.1.0"
},
"scripts":{
"start":"react-scriptsstart",
"build":"react-scriptsbuild",
"deploy":"gh-pages-dbuild",
"predeploy":"npmrunbuild"
},
"eslintConfig":{
"extends":"react-app"
},
"browserslist":{
"production":[
">0.2%",
"notdead",
"notop_miniall"
],
"development":[
"last1chromeversion",
"last1firefoxversion",
"last1safariversion"
]
},
"homepage":"http://www.codeameba.com/react-basic-with-nomadcoders"
}

deploy

npm run deploy를 하면 배포가 되는 것을 확인 할 수 있음
수정 후에는 deploy도 다시 해야 함
NOMFLIX