[클론코딩] 무비앱 시리즈 #2 ~ #3

인프런 무료 강의 무비앱 시리즈

#2

1. Boiler-plate 이용

https://github.com/jaewonhimnae/boilerplate-mern-stack

GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX

Download ZIP 클릭

압축 풀기

 

2. visual studio code에서 진행

client/server

node.js가 깔려있는지 확인하려면 terminal에서 

node -v

를 입력하면 된다. 난 깔려있음

package.json 파일을 보면

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.24.1",
    "axios": "^0.19.2",
    "formik": "^1.5.8",
    "moment": "^2.24.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-icons": "^3.7.0",
    "react-redux": "^7.1.0-rc.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.4.1",
    "redux": "^4.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "yup": "^0.27.0",
    "core-js": "^3.6.4",
    "react-app-polyfill": "^1.0.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "http-proxy-middleware": "^1.0.3"
  }
}

이와 같이 되어있는데 개발할 때 필요한 라이브러리?를 다운받아줘야 된다

그래서 terminal 창에다 npm install을 해주었다

npm install

그랬더니 오류가 났다

엥

커뮤니티를 찾아보니 bcrypt에서 오류가 났다고 한다

npm install bcryptjs --save

이 코드로 바꿔주니 오류 없이 잘 실행되었다

client 폴더로 가서는 npm install로 해줬는데도 잘 됐다

 

3. mongodb 연결

server 폴더에 있는 config 폴더에 들어가면

두 개의 파일이 있다. 여기서 dev.js 파일을 또 생성해준다

dev.js에다가 prod.js 파일에 있는 소스 코드를 복붙 해주고 mongoURI에 있는 정보를 비워둔다

 

그 다음 mongoDB를 들어간다

https://www.mongodb.com/ 

MongoDB | Build Faster. Build Smarter.

회원가입 하고 cluster를 만들어준다. 딱 보면 create라고 초록색 창이 있음

 

shared로 해야한다. 돈 내기 싫으면

그렇게 만들고 나서

 Connect를 누른다.

 

Connect your application 클릭

저 application code 복사

복사한 코드를 아까 비워뒀던 mongoURI에 붙여넣기 해준다

user은 방금 설정했던 나의 아이디(?),

password에 있는 건 방금 설정했던 비밀번호를 그대로 넣으면 된다

module.exports = {
  mongoURI:'mongodb+srv://user:password@atlascluster.khbfh.mongodb.net/?retryWrites=true&w=majority'
}

 

일단 끝

 

---

#3

API를 이용하여 정보를 제공하기 때문에  API를 알아보자

API을 사용하려면 API key를 받아야 한다

 

1. API key 받기

영화 정보를 받아올 사이트에 들어간다

https://www.themoviedb.org 

The Movie Database (TMDB)

회원가입 해주고(이메일 인증까지 해야함)

설정 클릭

API 클릭

대충 씀(하나라도 안쓰면 안해준다ㅠ)

그럼 생성 완

맨 위에 있는 API 키(v3 auth)을 사용해줄 것이다.

 

2. 자주 쓰는 URL 상수 설정하기

영화를 최신순으로 가져오거나, 정보를 가져오거나, 리뷰를 가져오거나, 트렌드를 가져올 수도 있다

이 링크들이 다 아래에 있는 링크로 시작이 된다

https://api.themoviedb.org/3/ 

그래서 저 링크를 많이 쓸 예정이므로 상수로 설정한다

 

영화의 포스터 이미지를 가져올 때는

https://image.tmdb.org/t/p/ 

까지 공통이기 때문에 저것도 마찬가지로 상수로 설정한다

 

boilerplate 폴더에 들어가서

client-src-components-Config.js

Config.js에 들어간다. 

그럼 추가적으로

export const API_URL = 'https://api.themoviedb.org/3/'
export const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/'

써주면 앞으로 모든 코드에서 갖다 쓸 수 있다

귀찮게 URL을 일일이 안써도 된다

 

끝