Node.js, React 익히기 - 1(시작)

Node.js는 자바스크립트를 서버사이드에서 사용할 수 있게 해주는 플랫폼으로서, 자바스크립트 런타임이다. 그리고 Node.js를 통한 어플리케이션을 도와주는 Express.js가 있다. React는 웹 어플리케이션 개발에 사용되는 프레임워크로, 프론트 엔드 사이드에서 사용된다.

우선 필자도 개발하고 싶은 서비스가 있기에, 이를 만들기 위해서는 리액트를 공부해야할 필요성이 있다고 생각했고 인프런 강의 중 Node.js와 React를 함께 다루는 강의가 있어 같이 공부해보려 한다.

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의

강의는 위의 John Ahn님의 강의를 들었다.

지금까지도 적극적인 활동으로 강의를 올려주시고 계셔서 아마 리액트를 공부할 때 자주 들을 것 같다(리액트 후 바로 리액트 네이티브 공부도 시작해야하지만)

 

자, 시작해보면 우선 Node.js가 설치되어 있는지 터미널을 키고 확인해준다. Node -v 명령어를 통해서 버전정보가 출력되면 설치되어 있는 것이고, 아직 설치되어있지 않으면 Node 명령어를 알아먹을 수 없다는 리턴을 준다. 

 

Node.js 다운로드

Node.js가 안깔려있으면 Node.js 홈페이지로 이동, 다운로드 받아주도록 한다.

https://nodejs.org/ko/

Node.js

안정적이고 신뢰도가 높은 버전을 다운받아주고 다시 node -v해주면 버전정보가 뜨는 것을 볼 수 있다.

18.12.1 버전을 받았다

이후 document 폴더에 boiler-plate 폴더를 생성해줬고, 여기에 npm init을 해주면 된다, npm이 뭘까?

다른 블로거 분의 설명을 좀 가져왔다.

"이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있습니다."

https://m.blog.naver.com/magnking/220961896609

[JavaScript] npm이란?

npm 생성을 하려면 우리 프로젝트 폴더에서 npm init 해주면 된다.

이후 나오는 질문들에 죄다 엔터를 치면 기본값이 들어가는데 나는 author에만 내 nickname을 적어주고, 나머지는 다 엔터쳐서 설정을 완료했다.

이후 VScode로 해당 폴더를 열어보면

이렇게 우리가 아까 엔터를 마구 친 패키지 정보가 있다.

BoilerPlate 폴더에 index.js 파일을 하나 만들어주자. 백엔드 서버 시작 시 가장 먼서 사용하는 파일이기에 만들어줘야한다.

이제 express.js을 다운받자.

npm install express --save

를 터미널에 명령어로 쳐주면 다운이 실행된다

그렇게 해주고 나서 위의 사진을 보면, 이전에는 없었던 dependencies가 생겼고 그 내부에 express와 버전이 추가된 것을 볼 수 있다. 명령어 --save의 결과인데, 잘 설치된 것이다.

 

그렇다면 express.js의 예시를 가져와서 한번 실행해보자. https://expressjs.com/ko/starter/hello-world.html

Express "Hello World" 예제

에서 helloworld 예제 부분을 긁어서 index.js에 복붙만 해보면 된다

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

코드를 설명하자면, 아까 다운받은 express 모듈을 가져와서(줄 : 1) function을 실행해 새로운 express app을 만들고(줄 : 2) 포트를 설정 후, app.get 부분에서 루트 디렉토리('/')에 오면 "Hello World!"가 출력되도록 해준 것이다. 이후 port에서 app을 실행하는 것이다.

그리고 package.json으로 이동하여 script 부분에

"start": "node index.js",

를 한줄 추가해준다.

"scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

이렇게 되게

이후 npm run start를 해주면, 해당 start 스크립트(node index.js)가 run 다음 start부분에 들어와 실행된다.

http://localhost:3000

들어가면, helloworld가 출력되는 것을 알 수 있다.

 

MongoDB 설정

강의에서는 몽고DB를 사용할 것이기 때문에, 따라서 한번 설정해주도록 하자.

Create Cluster에서

shared - AWS - Singapore에서 free tier가 제공되는 데이터베이스를 생성했다.

이제, 몽고DB에 유저를 생성해야 하는데 데이터베이스의 connect 버튼을 눌러주면 된다. 거기다가 유저명과 password를 설정해주고 확인을 누르면 database user가 생성된다.

그리고 Current IP Address를 connection IP address로 추가해줬다. 이후 choose a connection method를 눌러주면 된다.

그리고 connect your application을 누르고, 

이 창이 나오면 저 (2)부분에 해당하는 connection string을 복사해서 우선 우리 소스코드 아무곳에나 복붙시켜놓아준다.

 

Mongoose 다운로드

Mongoose는 MongoDB를 더 편하게 사용할 수 있게끔 도와주는 툴이라고 생각하면 되는데, 다운로드 받아줘야한다.

터미널에서

npm install mongoose --save

 

그러고 나면 아까와 마찬가지로 dependencies에 mongoose가 추가된 것을 확인할 수 있다.

 

이제 어플리케이션과 MongoDB를 연결하는데 

const mongoose = require('mongoose')
mongoose.connect('mongodb+srv://seunghwan:<password>@atlascluster.scdh2ae.mongodb.net/?retryWrites=true&w=majority'
).then(() => console.log("MongoDB Connected..."))
  .catch(err => console.log(err))

위와 같이 mongoose.connect 에서 인자로 아까 복사한 connection string을 넘겨 함수를 실행할 수 있게 하면 된다.

그리고 connect에서 넘겨주는 connection string에서 <password> 부분에 아까 설정한 자신의 패스워드를 넣어줘야한다. 넣어주면 되겠다. 그리고 만약 패스워드에 !, @, #와 같은 특수부호가 있다면 '%<아스키코드 16진수 번호>'로 해당부분만 바꾸어 넣어줘야 한다, 그렇지 않으면 에러가 출력된다.

그리고 만약 잘 실행이 된다면 MongoDB가 연결되었다는 console log를 찍게하고, 아니라면 err를 찍도록 한다

이후, npm run start

connected가 뜨는 걸 보니 잘 실행되는것 같다. 어플리케이션에 잘 연결된 것이다.

 

MongoDB Model & Schema 만들기

 

아마 이전에 데이터베이스를 만들어 봤거나 이론적으로 배운 사람들은 알텐데 스키마라고 하는것은 데이터베이스에 들어갈 정보의 틀을 말한다. 그리고 그러한 스키마들을 감싸주는 것이 모델이라고 생각하면 되겠다. DB가 있으려면 이러한 모델과 스키마는 있어야 하기에 생성해주어야 한다.

우리 프로그램 폴더에 models라는 이름으로 폴더를 하나 생성해주고 그 안에 User.js 라는 이름의 파일을 하나 생성해준다.

<User.js>

const mongoose = require('mongoose');

const userSchema = mongoose.Schema({
    name: {
        type: String,
        maxlength: 50
    },
    email: {
        type: String,
        trim: true, // 트림 - 즉, 사이사이 공간 자동으로 없애줌
        unique: true
    },
    password: {
        type: String,
        minlength:5
    },
    lastname: {
        type: String,
        maxlength: 50
        },
    role:{ // 관리자, 유저 모드 구별위함 
        type: Number, // 유저 - 0 / 관리자 - 1 이런 식
        default: 0
    },
    image:{
        image: String,
        token:{
            type: String// 유효성 관리 가능
        },
        tokenExp:{
            type: Number // 토큰 사용기간 지정
        }
    }
})

 const User = mongoose.model('User', userSchema)
 // 유저라는 모델이 userSchema 스키마를 감싼다
 module.exports = {User}
 // 다른 파일에서도 유저 모델이 사용될 수 있게 export 해준다

내부 스키마를 생성해줬다, column으로 name, email, password, lastname, role, image를 준 것이다. 그리고 모델 명 User로 userSchema를 감싸준 User를 생성, User 모델이 다른 파일에서도 사용될 수 있도록 module.exports 해주었다.

 

그리고 이쯤에서 git으로 로컬과 remote 레포지토리를 생성해서 github에 연동시켜주었다.

혹시 방법을 원한다면 누가 썼는지는 모르지만 성의없게 작성된 아래 글을 참고하면 되겠다.

https://minddokddok.tistory.com/52

Github repository와 local 연결하기

 

Node.js(Server) - HTML(Client) 소통설정

을 해야하는데, 다음 글에서 계속 연재하도록 하겠다.