노드 리액트 기초 - 1st Day

이번 웹 프로젝트는 노드와 리액트에 대한 지식이 없는 상태에서 시작하기에, 유튜브에 있는 John Ahn님의 노드 리액트 기초 강의를 보며 공부하게 되었다.

강의는 NodeJs와 Express와 같이 기본적으로 필요한 플랫폼 및 프레임워크를 설치하는 내용으로 시작한다.

 

Express.js App 생성

index.js에서 기본적인 express 앱을 생성한다.

const express = require('express');

const app = express();

const port = 5000;


app.get('/', (req, res) => {  //루트 디렉터리에 오면 Hello World 출력

  res.send('Hello World!')
  
})


app.listen(port, () => {

  console.log(`Server Listening on http://localhost:${port}`)
  
})

↓참고 사이트

https://expressjs.com/en/starter/hello-world.html

 

"scripts": {

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

그리고나서 package.json에 script부분에 "start": "node index.js" 를 추가한다.

 

Hello World!

터미널 창에 npm run start를 입력하여 앱을 실행시키면, localhost:5000에 Hello World!가 출력되는 것을 확인할 수 있다.

 

 

MongoDB 연동

그 뒤에 MongoDB 계정을 생성하고 Mongoose를 설치하여 App과 MongoDB를 연동한다.

const config = require('./config/key');

const mongoose = require('mongoose');


mongoose.connect(config.mongoURI, {

    useNewUrlParser: true, useUnifiedTopology: true, 
    
    useCreateIndex: true, useFindAndModify: false
    
}).then(() => console.log('MongoDB Connected...'))

.catch(err => console.log(err))

mongoURI에는 내 계정 아이디와 비밀번호가 포함되어 있기 때문에 파일에 따로 저장하여 불러와야한다.

그리고 해당 파일을 .gitignore에 추가해야 나중에 github에 올릴 때 그 파일을 제외시킬 수 있다. 

 

유저 스키마 생성

DB연동이 되면, User.js에 다음과 같이 유저 스키마를 작성한다.

const mongoose = require('mongoose');

const userSchema = mongoose.Schema({
    name: {
        type: String,
        maxlength: 50
    },
    email: {
        type: String, 
        trim: true, 
        unique: 1
    },
    password: {
        type: String,
        minlength: 5
    },
    id: {
        type: String,
        maxlength: 50
    },
    role: { //관리자 or 일반 유저
        type: Number,
        default: 0
    },
    image: String, 
    token: {
        type: String
    },
    tokenExp: { 
        type: Number
    }
})

const User = mongoose.model('User', userSchema)

module.exports = { User }

 

↓John Ahn님의 노드 리액트 기초 강의 유튜브 링크

https://www.youtube.com/watch?v=fgoMqmNKE18&list=PL9a7QRYt5fqkZC9jc7jntD1WuAogjo_9T

노드 리액트 기초 강의