[Node.js] 백엔드 맛보기 | 1강-4강 Note

Node.js 로그인 & 백엔드

- node에서 제공되는 모듈로 가동함

- Express라는 서버프레임 워크로 사용하고 서버 띄워보기

- mvc패턴: 모델, 컨트롤러, 뷰는 어떻게 구성하는지 다뤄볼거임 + 프론트까지 

- body parser라는 모듈을 사용하여 실제 클라이언트에서 요청한 데이터를 서버에서 파싱하여 어떻게 데이터를 처리할 수 있는지  까지 다뤄볼 것임

---

 

- 앞으로 수업에서 다룰 개괄적인 내용  

데이터베이스에  연결하기 전에는 서버 코드안에서 가지고 있고,   브라우저에게 응답하는 서버는 웹서버

또 데이터 베이스와 연결을 해서 조금 더 동적으로 클라이언트에게 요청해주는 서버는 와쓰임

로그인 기능 만들기 : " use strict" <-js엄격하게 코딩하겠다는 의미

front-end: 오픈소스 사용해보기

NPM으로 서버 띄우기: 패키지 json 활용 , 라이센스는 뭔지, dependencies와 devDependencies차이는 뭔지도 알아볼 예정

morgan: 클라이언트의 요청 정보를 콘솔에 기록 

DB접속:AWS가상 서버를 대여해서 접속할 예정 

DB연동하기 GUI로 접속 : mySQL Workbdnch 사용

노드와 mysql 연동: 컨트롤러 파일안에 선언

Refactoring(최적화)- 모델을 어떻게 구축하면 되는지

TDD (Test Driven Developement)

 

설계-> 테스트(코드작성) ->개발

(코드작성) 

설계↔테스트(코드작성) ->개발

 

 

---

1. 개발환경 셋팅

[Node.js] 백엔드 맛보기 | 개발환경 세팅 - YouTube 

• 비주얼 스튜디오 설치
• 깃 설치
• node.js 설치

 

설치후 확인하여보기

• cmd에서 node입력하여 잘 설치되어 있는지 확인

node.js잘 설치되어있다고 나옴

 

• git입력하여 잘 설치되어 있는 지 확인

git 잘 설치되어 있다고 나오는 화면

---

 

express 로 서버 띄워보기 (1) 작업환경 셋팅

[Node.js] 백엔드 맛보기 | express로 서버 띄워보기 - YouTube

이제 Visual Studio 에서 login-lecture 라는 폴더를 만들어서 서버 띄우는 작업을 따라할 예정이다. 그러기 위해서 첫 째, 폴더명이 login-lecture를 만들어야 한다. 일반적으로 만들 듯이 마우스 오른쪽- 새 폴더 눌러서 원하는 위치에 폴더를 만들 수 도 있지만, cmd 창에서 명령어로 폴더를 만드는 방법인 것.

작업 디렉토리 구조

 

 

우리밋님 영상과 같이 login-lecture 라는 폴더를 만들기

+) 폴더를 만들 때, 폴더명은 소문자로만 하고, - (하이픈)으로 연결하는 것이 관례임

 

명령어를 보면, 일단 바탕화면인 Desktop:바탕화면으로 이동한 후 cd 후 본인의 바탕화면 경로 붙여넣기

나의 경우에는 아래와 같아서

1. C:\Users\User\OneDrive\바탕 화면 로 이동[ cd C:\Users\User\OneDrive\바탕 화면 ]

 

 

 

2. node라는 폴더를 만들고 [ mkdir node]

3. node폴더로 이동(cd node)  여기서 다시 login-lecture폴더를 만든다 [ mkdir login-lecture ]

4. 이 폴더에서 작업하기 위하여 login-lecture폴더로 이동 [ cd login-lecture ]

5. 비주얼 스튜디오 바로 열기 [ code .  ] ←code 띄어쓰기 후 . (쩜)임 .

    편하게 열기 위함이고 직접 비주얼 스튜디오를 클릭해서 열어도 똑같음

 

비주얼스튜디오- 폴더명 작업환경 똑같이 만들어 놓기

 

---

 

express 로 서버 띄워보기 (2)서버 가동

서버 가동시키기 코드

 

 

 

const express= require("express");

const app = express();

 

app.listen(3000, function () {

    console.log("서버 가동");

});

• 비주얼 스튜디오에서 app.js 파일을 만든 후

위의 코드 입력

 

• 위의 터미널탭에서 새 터미널을 열어준 뒤,

터미널에서 창에서 

명령어 pwd 를 입력하면 현재 디렉토리 경로가 나옴/ 참고로 pwd는 print working directory의 약어
.

.

.

Error: Cannot find module 'express' 
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'C:\\Users\\User\\OneDrive\\바탕 화면\\node\\login-lecture\\app.js' ]
}
↑ 이런 에러코드가 뜨는데 (놀라지 말것, 안깔려있기 때문에 당연히 뜨는것이라 함)

 

• Node.js v18.12.1
  PS C:\Users\User\OneDrive\바탕 화면\node\login-lecture> npm install express --save
   npm install express --save 와 같은 명령어로 익스프레스를 설치해 준다. 

설치가 된 후, node app.js 입력한 후 지정해주었던 로컬호스트 3000번을 열어본다.

그럼 아래와 같이 뜨는 것을 확인 할 수 있음. 

 

localhost:3000 확인했을 때 이렇게 뜬다면, 서버가 익스프레스로 잘 연결된 것!

 

 

 

• 이제 Can get 할 수 있도록 루트경로를 만들어 줄 것임

 

app. get ("/", (req, res) => {

    res.send("여기는 루트입니다.");

});

app. get ("/login", (req, res) => {

    res.send("여기는 로그인 화면입니다.");

});

 

 

• 위와 같은 코드를 중간에 삽입(오른쪽이미지 참고)
• 위와 같이 코드 추가 후 터미널에서 서버 껐다 켜야함(ctrl+ c)
• node app.js 입력후 로컬호스트로 확인해 줌

 

로컬호스트로3000  들어가서 경로에 맞게 확인했을 때 아래와 같이 뜨면 연결 성공

localhost:3000 지정메세지 잘 뜸(서버 연결 성공)                            localhost:3000/login 지정메세지 잘 뜸(서버 연결 성공)

 

---

 

+) http로 서버 띄워보기 (espress를 왜 써야하는지 직접 체감하여 보기 위함)

 

[Node.js] 백엔드 맛보기 | http로 서버 띄워보기 - YouTube

 

const http = require("http");

const app = http.createServer((req, res) => {

    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });

   

    if (req.url === "/") {

        res.end("여기는 루트입니다.");

    } else if (req.url === "/login") {

        res.end("여기는 로그인 화면입니다.");

    }

});

app.listen(3001, () => {

    console.log("http로 가동된 서버입니다.");

})

 

• 위와 같이 코드 입력 (확실히 express로 할 때보다 복잡)

 

• 서버 껐다(ctrl + c) 다시 켜기

콘솔에 출력되는 화면

 

• 확인봤을 때, 아래와 같이 뜨면 서버연결 성공

http로 로컬호스트3001 연결성공