리액트로 영화 추천 웹페이지 만들기!!

css에 대한 설명이 거의 없어서 따라치는 정도의 수준이었지만 안드로이드 스튜디오에서 xml로 디자인을 해본 경험이 있어서 왠만한건 이런거구나.. 하고 넘어갈 수 있어서 다행!!

 

 

(css 파일은 깃허브에서 nomadcoders/movie_app 참고해주세요!)

우선 ...으로 저 긴 문장들 줄이는 패키지가 계속 설치가 안되어서 일단은 그 부분은 생략하고 만들었다.ㅜㅠㅜㅠ 그리고 VSCode에서 지금까지 만들었던 것을 빌드하면 터미널 창에 어떻게 만들어야 하는지 자세하게 뜬다!

 

movie_app 루트 폴더에서 package.json은 다음과 같이 변경해주면 된다.

{
  "name": "movie_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "homepage" : "http://jm1224k.github.io/movie_app",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

 

우선!

"homepage" : "http://jm1224k.github.io/movie_app",

얘를 먼저 적어주고 npm build를 터미널에서 입력한다. 그러면 지금까지 만든 파일이 최적화되고, 빌드된다!

(여기서 jm1224k / movie_app은 본인 아이디와 깃에서 생성한 레포 이름을 적어주시면 됩니다.)

 

그러면 터미널 창에서

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

이 두 줄을 script 안에 적으라고 뜬다. 그러면 적어주고 저장한 후 다시 빌드해주고, npm run deploy인가..? 아무튼 또 명령어를 입력하라고 나온다. 근데 난 잘 안되어가지구..

그냥 빌드된 폴더를 깃에 gh-pages라는 이름의 브랜치로 올렸다. 그래도 됨. ㅇㅇ.

 

그러면 이렇게 우리가 원하는 웹페이지가 나온다!!!

http://jm1224k.github.io/movie_app

Movie App

 

올리는게 젤 오래걸림 ㅠㅠ