잡동구리들

Frontend 초기 세팅에 이어서 이번엔 Backend 초기 세팅!

1. npm 초기화 및 .gitignore 설정

  a. npm 초기화

npm init --yes (--yes or -y : npm 초기화시에 물어보는 여러 질문들을 넘기는 명령어)

--yes(-y) 명령어를 입력하면 아래 사진과 같이 가장 기본적인 내용만 package.json에 담기게 된다.

  b. .gitignore 설정

      아래 사진과 같이 gitignore.io 사이트에서 키워드를 넣고 Create 한 후 나온 텍스트로 .gitignore 파일 생성

2. 필요한 패키지 설치

패키지는 개인, 팀 별로 천차 만별일테니 참고만.

a. devDependencies

    1. npm i @babel/core @babel/node @babel/preset-env --save-dev(node가 이해할 수 있는 문법으로 변경)
    2. npm i eslint-config-prettier --save-dev(eslint-config-prettier : prettier와 충돌할 설정들을 비활성화)
    3. npm i eslint-plugin-prettier --save-dev(eslint-plugin-prettier : eslint에 prettier의 포매팅 기능을 추가)
    4. npm i nodemon --save-dev(nodemon : 코드 수정 시 자동으로 서버 재시작)

    5. npm i prettier-plugin-prisma --save-dev(prettier-plugin-prisma : prisma 사용 시 prettier 기능 적용)

    6. npm i prisma --save-dev(prisma : 데이터베이스에 대한 접근을 쉽게 하도록 도와주는 소프트웨어)
b. dependencies
    1. npm i @prisma/client --save(@prisma/client : prisma를 이용하여 DB 제어)
    2. npm i bcrypt --save(bcrypt : 암호화 관련 패키지)
    3. npm i cors --save(cors : 브라우저에서 다른 출처의 리소스를 공유)

    4. npm i dotenv --save(dotenv : .env 파일로부터 환경 변수를 읽어 들임)

    5. npm i express --save(express : Node.js 웹 애플리케이션 프레임워크)

    6. npm i jsonwebtoken --save(jsonwebtoken : 유저 정보가 담긴 JSON 데이터를 암호화해서 클라이언트와 서버 간 전달 가능)

최종적으로 설치된 패키지(package.json)

3.  환경 설정

환경 설정 역시 개인, 팀 별로 다를 테니 참고만.

a. .babelrc 설정 및 package.json script 수정(start 추가)

// .babelrc
{ "presets": ["@babel/preset-env"] }

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js --exec babel-node" // 추가
  },

b. .env 설정

.env는 환경변수 파일로 key = value 형태로서 변수로 설정된 key에 해당하는 값을 process.evn.key 형태로 사용이 가능하다.

// .env
DATABASE_URL="mysql://USERNAME:PASSWORD@localhost:3306/DB_NAME" // mysql 사용

PORT = 8080

SECRET = testproject // jsonwebtoken 검증시 필요

c. .eslintrc 파일 생성

// .eslintrc
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module"
  },

  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jest/globals": true
  },

  "plugins": ["jest"] // TDD용
}

d. .prettierrc 파일 생성

// .prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

4. 폴더 설정

Layered Pattern을 적용하여 아래와 같이 폴더 생성

5. server.js 생성

import http from 'http';
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
// import { PrismaClient } from '@prisma/client';

dotenv.config(); // dotevn 라이브러리 사용
// const prisma = new PrismaClient();

import routes from './routes';

const PORT = process.env.PORT;

const app = express();

// middleware
app.use(cors());
app.use(express.json());

// route
app.use(routes);

// server test
app.use('/ping', (req, res) => {
  return res.status(200).json({ message: 'pong' });
});

// create server
const server = http.createServer(app);

// run my server
const serverStart = async () => {
  try {
    server.listen(PORT, () => {
      console.log(`server is listening on PORT ${PORT}`);
    });
  } catch (error) {
    console.log(error);
    // await prisma.$disconnect();
  }
};

serverStart();

6. DB 생성 및 연결

a. prisma 초기 세팅

npx prisma init

b. DB 연결

// prisma/schema.prisma
datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

// .env
DATABASE_URL="mysql://USERNAME:PASSWORD@localhost:3306/DB_NAME" // '3.환경설정' 내용과 동일

c. prisma 모델 생성 

prisma/schema.prisma 수정이 완료된 후, 아래 명령어 실행.

npx prisma migrate dev --name init // 작성된 prisma 모델을 .env에 연결된 로컬 DB에 만들어준다.

생성된 마이그레이션 파일이 DB에 적용되었는지 확인.

d. prisma client 생성

prisma로 DB를 제어하기 위해 client가 필요.

npx prisma generate

7. 최종 결과물

위와 같이 초기 설정을 해서 나온 결과물은 아래 그림과 같다. 코드는 아래 gitghub에서 확인 가능!

https://github.com/quark4904/test-project-back

오류 1

"SyntaxError: Unexpected token k in JSON at position 6" 에러

발생 원인 및 해결 : JSON 데이터를 만들때 맨 마지막 값에 콤마(,)가 들어가 있으면 발생 ==> 콤마(,) 제거로 해결

오류 2

"SyntaxError: Unexpected token } in JSON at position 99" 에러

발생 원인 및 해결 : JSON 데이터를 만들때 키값이 쌍따옴표("")로 감싸져 있지 않으면 발생  ==> 쌍따옴표("") 추가로 해결

response는 어떠한 작업을 요청한 곳에 무엇인가를 돌려주는 역할을 한다. 

app.get('/', (req, res) => {
  res.send()
  res.json({ message: "'I'm Jason Mraz." })
  res.end()
})

• res.send() : 정보를 돌려보내 주는 가장 기본적인 역할을 수행한다. 
• res.json() : 정보를 돌려보내긴하는데, json 형태로 바꿔서 돌려준다.
• res.end() : 주로 서버가 작동을 안하거나 오류가 있을 경우, 특정 문구를 나타내고 응답을 종료하고자 할 때 사용된다.

Node.js의 http 모듈과 express 프레임워크로 server를 생성하는 방법중 가장 큰 차이점은 바로...

routing과 modularization(모듈화)이다. 

앱이나 웹의 규모가 커지면 커질수록 코드는 복잡해 질수밖에 없는데 라우팅이나 모듈을 사용하지 않을 경우, 아래 코드와 같이 조건문으로 분기해서 다른 로직을 처리하게끔 해주어야 한다. 

const http = require('http')
const { sendPosts } = require('./sendPosts')

const server = http.createServer((req, res) => {
  const { url, method } = req
  res.setHeader('Content-Type', 'application/json')

  if (url === '/') return res.send({ message: '/ endpoint' })
  if (url === '/signup' && method === 'POS') return res.end(JSON.stringify({ message: '회원가입 완료!' }))
  if (url === '/login' && method === 'POST') return res.end(JSON.stringify({ message: '로그인 완료!' }))
  if (url === '/products' && method === 'GET') return sendPosts(res)

  res.send(JSON.stringify({ message: 'this response answers to every request' }))
})

server.listen(8080, () => { console.log('server is listening on PORT 8000')})

하지만 express 프레임 워크를 쓴다면, 아래와 같이 조금 더 간결하게 코드를 구성할 수 있게 된다. 

const http = require('http')
const express = require('express')
const { sendPosts } = require('./postings')

const app = express()
app.use(express.json())

app.get('/', (req, res) => {
  res.json({ message: '/ endpoint' })
})

app.post('/signup', handleSignUp) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', handleLogin) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣는다.
app.get('/products', sendPosts)

const server = http.createServer(app)

server.listen(8000, () => {
  console.log('server is listening on PORT 8000')
})