감으로 코딩하던 내가 알고 코딩할 때까지

express 서버 프레임워크를 사용하지 않고 개발하는 방법

express와 같이 자바스크립트 파일에서 작성

const http = require('http');

// http에서는 createServer 함수에 req, res를 파라미터로 받는 콜백함수를 생성
const app = createServer((req, res) => {
  console.log(req.url); // 서버에서 접속하는 경로를 console.log에 출력
});

app.listen(3001, () => {
  console.log('http로 가동된 서버');
});

  - 터미널에 'node app.js' 입력하여 서버 가동

   - 주소창에 'localhost:3001'을 입력하면 위에 로딩되는 것이 뜨면 서버가 열린 것

  - req.url을 console.log에 출력하도록 했으므로 처음 localhost에 들어가면 가장 첫 루트인 '/'가 console에 출력됨

  - 이후 'localhost:3001/login'을 주소창에 입력하면 /login의 경로 출력

  - req.url이 서버의 각 루트 경로를 가져오는 것을 이용하여 각 경로의 화면을 설정할 수 있음

// console.log(req.url); 대신 아래의 코드 입력

// 브라우저에서 한글(utf-8)로 응답해야한다고 알려주기
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});

if (req.url === '/'){
  res.end('이곳은 루트입니다.'); // express에서는 res.send()였지만 http에서는 res.end()로 사용
}
else if (req.url === '/login'){
  res.end('이곳은 로그인 화면입니다.');
}

  - express와 다르게 if문으로 각 경로에 대해 응답을 작성해야하므로 지저분해짐

  - 따라서 express를 쓰는 것이 훨씬 편리

1) express라는 작업 폴더 생성 후 자바스크립트 파일 하나 생성(서버의 중심 파일)

"use strict"

// require를 사용하여 express 모듈 다운
const express = require('express')

// app 변수에 express를 실행시켜 넣어주기
const app = express();

// PORT 번호 설정, PORT는 배가 들어가는 항구에 여러 선착장이 있듯 서버에 존재하는 여러 개의 장소
const PORT = 3000;

// listen 명령어로 서버 띄우기(3000번 포트로 열기)
app.listen(PORT, ()=>{
  console.log('서버 가동') // 서버 콘솔에는 간단하게 '서버 가동'이라는 문장 띄우며 서버 오픈
});

2) express라는 서버 프레임워크 사용

3) npm(node package manager)을 통해 express 모듈 설치

  - 터미널에 'npm init' 입력 후 'Is this OK? (yes)' 나올 때까지 엔터(전부 기본값으로 설치)

  - 설치 완료후 터미널에 'npm install express --save' 입력

  - 설치 완료하면 작업 폴더에 node_modules폴더와 package.json(npm으로 설치한 모듈들 관리해주는 메모장), package-lock.json(모듈에 대해 더 자세히 적힌 메모장)파일이 생성됨

  - 그러면 node 명령어를 통해 서버 가동 준비 완료

4) 터미널에 node 명령어는 자바스크립트 파일을 v8엔진을 사용해 코드를 해석해달라는 명령어

  - 터미널에 'node app.js' 입력하면 '서버 가동'이 출력되며 서버 오픈

  - 주소창에 'localhost:3000' 입력하면 열린 서버창 오픈

  - 윈도우에 'Cannot Get /'은 루트 경로를 찾을 수 없다는 의미

5) 루트 만들어주기

// 위에서 작성한 코드에서 app.listen 전에 아래의 코드 삽입

// 브라우저에서 '/'루트로 요청이 들어오면
// req 변수로 요청을 받고(어떤 요청인지는 아직 해석 x)
// res 변수로 어떤 응답을 할 지 결정('여기는 루트입니다'라는 문장 보내기로 응답)
app.get('/', (req, res) => {
  res.send('여기는 루트입니다.');
});

// 브라우저에서 '/login'루트로 요청이 들어오면
// req 변수로 요청을 받고(어떤 요청인지는 아직 해석 x)
// res 변수로 어떤 응답을 할 지 결정('여기는 로그인 화면입니다'라는 문장 보내기로 응답)
app.get('/login', (req, res) => {
  res.send('여기는 로그인 화면입니다.');
});

  - 이후에 주소창에 'localhost:3000'을 치면

  - 'localhost:3000/login'을 치면