4. 개발 환경 세팅

🔷 개발환경

⭐Tech Stack: 백엔드 기술 스택
1. 웹 프레임워크 - Node.js의 대표적인 웹 프레임워크인 Express를 이용합니다.
2. 패키지 매니저 - npm 을 이용합니다.
3. 모듈 시스템 - ES6 부터 도입 된 모듈 시스템(ESModule, type: "module")을 이용합니다.

 

🔹 새로운 폴더에 프로젝트 만들기

# 프로젝트 시작
npm init -y

# express socket.io 설치
npm install express socket.io
npm install -D nodemon prettier

# prettier nodemon 설치
npm install -D nodemon prettier

🔹

// package.json에 추가
  
  "type": "module",
  "scripts": {
    "dev" : "nodemon src sever.js",

🔹 .prettierrc 코드

// .prettierrc

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "trailingComma": "all",
    "printWidth": 100,
    "arrowParens": "always",
    "orderedImports": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false
  }

 

🔹 readme.md파일을 꼭 만드세요

 

🔹 main을 app.js로 바꾸기

첫번 째 접속 포인트

 

// ./scr/app.js

🔹import { createServer } from 'http';

시스템 상의 node.js가 다운로드받아져 있는 거라 현재 이 프로젝트 내에서는 찾을 수 없는 내용입니다.

하지만 기본적으로 다 깔려있어서 Node.js가 당영히 가지고 있는 모듈이라 Intellij에서 지원해주는 기능입니다.

활성화 시켜주어야 합니다.(안해도 되던데...?)

 

URL 인코딩을 자동으로 바디파싱 해줌

// ./src/app.js
import express from 'express';
//'http'는 시스템 상의 node.js가 다운로드받아져 있습니다.
import { createServer, Server } from 'http';

const app = express();
const server = createServer(app);

const PORT = 3000;

app.use(express.json());
// URL 인코딩을 자동으로 바디파싱 해줌
app.use(express.urlencoded({ extended: false }));

server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

 

🔹 서버 테스트

※ 127.0.0.1은 컴퓨터 네트워크에서 로컬호스트를 가리키는 특별한 IP 주소입니다.

// test 기본url로 'Hello World!' string을 뿌리기
app.get('/', (req, res) => {
    res.send('Hello World!');
});

🔹기본 express 세팅

import express from 'express';
//'http'는 시스템 상의 node.js가 다운로드받아져 있는 것
import { createServer, Server } from 'http';

const app = express();
const server = createServer(app);

const PORT = 3000;

app.use(express.json());
// URL 인코딩을 자동으로 바디파싱 해줌
app.use(express.urlencoded({ extended: false }));

// test 기본url로 'Hello World!' string을 뿌리기
app.get('/', (req, res) => {
    res.send('Hello World!');
});

server.listen(PORT, () => {
    console.log('example');
    console.log(`Server is running on port ${PORT}`);
});

 

🔷 socket.io 세팅

폴더 이름이 init인 이유 : 서버가 실행될 때 이 안의 내용이 항상 호출되어 함께 실행된다.

// ./src/init/socket.js

// socket.io 라이브러리 사용
// socket.io에서 Server를 가져와 SocketIO라는 이름으로 사용하겠습니다.
// as는 이름을 바꿀 수 있습니다. SQL에서 컬럼이름 바꿔서 보여주기 같은 것
import { Server as SocketIO } from 'socket.io';

const initSocket = (server) => {
    // SocketIO 서버 생성
    const io = new SocketIO();
    // io.attach로 서버에 연결
    // 여기에서 server는 app.js의 서버
    io.attach(server);
};

export default initSocket;

app.js에 추가

import initSocket from './init/socket.js';

// socketIO 와 연결
initSocket(server);

 

 

 

 

 

 

 

 

 

Node,js

Express

websocket

로만 로직 작성하기

db는 다음시간에

학습

🔷🔹🟦

문자티콘 : https://xn--yq5bk9r.com/blog/emoji-lock

 

---

 

---

 

---

---

 

---

숙제

 

---

※ 요약

◆

 

※ 기억할 것

◆

 

※Tip

◆