[2024 Node.js 스터디] 김수아 #4주차 "Node.js 6,7,9장"

●ch6

서버 제작 과정에서의 불편함 해소하고 편의기능 추가한 웹 서버 프레임워크, 익스프레스

▶6.1_익스프레스 프로젝트 시작하기

하나의 폴더 생성

그 폴더 안에 package.json생성 후 코드작성

npm start 입력후 localhost3000에 접속해 확인

▶6.2_자주 사용하는 미들웨어

미들웨어는 익스프레스의 핵심이다

요청과 응답의 중간(middle)에 위치하여 미들웨어라 불린다

미들웨어는 요청과 응답을 조작해 기능을 추가하거나 나쁜 요청을 걸러내기도 한다

 

  morgan

morgan 연결 후 localhost:3000에 다시 접속해보면 기존 로그 외에 추가적인 로그를 볼 수 있다

요청과 응답에 대한 정보를 콘솔에 기록

app.use(morgan('dev')); //미들웨어 사용하기

인수로 dev외에 combined, common, short, tiny 등 넣을 수 있다

 

  static

정적인 파일들을 제공하는 라우터 역할을 한다

기본적으로 제공되기에 따로 설치 필요하지 않다

expree 객체 안에서 꺼내 장착하면 된다

app.use('요청경로', express.static('실제경로'));
app.use('/', express.static(path.join(__dirname, 'public')));

 

  body-parser

요청의 본문에 있는 데이터를 해석해서 req.body객체로 만들어준다

폼 데이터나 AJAX요청의 데이터를 처리한다

단, 이미지, 동영상, 파일과 같은 멀티파트 데이터는 처리하지 못한다ㅏ. 

(이 경우에! multer 모듈 사용하면 된다)

app.use(expree.json());
app.use(expredd.urlencoded({extended: false}));

 

  cookie-parser

요청에 동봉된 쿠키를 해석해 req.cookies객체로 만든다

parseCookies함수와 기능이 비슷하다

app.use(cookieParser(비밀키));

 

  express-session

세션 관리용 미들웨어다

로그인 등의 이유로 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용하다!

세션은 사용자별로  req.session객체 안에 유지된다

 

  multer

이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어다

멀티파트 형식이란 다음과 같이 enctype이 multipart/ forn-data인 폼을 통해 업로드하는 데이터 형식

storage 속성에는 어디에(destination) 어떤 이름으로(filename) 저장할지를 넣음

destination과 filename 함수의 req 매개변수에는 요청에 대한 정보가, 

file 객체에는 업로드한 파일에 대한 정보가 있음

 

▶6.3_Router 객체로 라우팅 분리하기

익스프레스를 사용하면 라우팅을 깔끔하게 관리 가능index.js와 user.js를 작성후 app.use를 통해 app.js와 연결라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 next함수 사용(next('route'))

▶6.4_ req, res객체 살펴보기

req 객체

req.app	req 객체를 통해 app객체에 접근할 수 있음
req.body	body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체
req.cookies	cookie-parser 미들웨어가 만드는 요청의 본문을 해석한 객체
req.ip	요청의 ip 주소가 담김
req.params	라우트 매개변수에 대한 정보가 담긴 객체
req.query	퀴리스트링에 대한 정보가 담긴 객체
req.signedCookies	서명된 쿠키들은 req.cookies 대신 여기에 담김
req.get(헤더 이름)	헤더의 갑을 가져오고 싶을 때 사용하는 메서드

 

res 객체

res.app	res 객체를 통해 app객체에 접근할 수 있음
res.cookie(키, 값, 옵션)	쿠키를 설정하는 메서드
res.clearCookie(키, 값, 옵션)	쿠키를 제거하는 메서드
res.end()	데이터 없이 응답을 보냄
res.json(JSON)	JSON 형식의 응답을 보냄
res.locals	하나의 요청 안에서 미들웨어 간에 데이터를 전달하고 싶을 때 사용하는 메서드
res.redirect(주소)	리다이렉트할 주소와 함께 응답을 보냄
res.render(뷰, 데이터)	템플릿 엔진을 렌더링해서 응답할 때 사용하는 메서드
res.send(데이터)	데이터와 함께 응답을 보냄
res.sendFile(경로)	경로에 위치한 파일을 응답

 

▶6.5_템플릿 엔진 사용하기

템플릿 엔진은 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 해준다. 따라서 기존 HTML과는 문법이 다르고 자바스크립트의 문법이 있기도 하다.

 

  퍼그(제이드)

퍼그는 문법이 간단하고 쉬워서 코드 양이 줄어들기 때문에 인기가 많다~

HTML 표현~

=> 기존 HTML과 다르게 화살괄호<>와 닫는 태그가 없음

=> 탭 또는 스페이스로만 태그의 부모 자식 관계를 규명

=> HTML div태그인 경우 div 문자 생략 가능

=> 에디터에서 텍스트를 여러줄 입력하고 싶다면 파이프(|) 삽입

=> 태그뒤에 .을 붙임으로 CSS또는 자바스크립트 코드 작성 가능

 

반복문~

=> HTML과 다르게 반복문 사용 가능

 

include~

=> 다른 퍼그나 HTML 파일 넣을 수 있음

 

  넌적스

퍼그의 HTML문법 변화에 적응하기 힘든 이들에게 적합한 템플릿 엔진

파이어폭스를 만든 모질라에서 만들었다

HTML 문법을 그대로 사용하되 추가로 자바스크립트 문법을 사용할 수 있고, 파이썬의 템플릿 엔진인 Twig와 문법이 상당히 유사

HTML 문법을 그대로 사용변수는 {{  }}로 감쌈

내부에 변수 사용가능 (변수를 선언할 때는 {% set 변수 = '값' %}를 사용)

HTML을 이스케이프하고 싶지 않다면 {{ 변수 | safe }}를 사용

넌적스에서는 {% %}안에 반복문 같은 특수한 문 사용

 

●ch7

 지금껏 모든 데이터를 변수에 저장했다

서버가 종료되면 메모리가 정리되면서 저장했던 데이터도 사라져버린다 

이를 방지하기 위해선~?~? 데이터베이스를 사용해야 한다

 

▶7.1_ 데이터베이스란? 

데이터베이스는 관련성을 가지며 중복 없는 데이터들의 집합이다

이러한 데이터베이스를 관리하는 시스템을 DBMS라 부른다 

보통 서버의 하드 디스크나 SSD 등의 저장 매체에 데이터를 저장한다

서버에 데이터베이스를 올리면 여러 사람이 동시에 사용할 수 있다

DBMS 중에서 RDBMS가 가장 많이 사용되는데 이는 관계형 DBMS로 SQL언어를 사용해 관리한다

 

▶7.2_ MySQL 설치하기

운영체제에 맞는 설치법으로 알맞게 해주세요

 

▶7.3_ 워크벤치 설치하기

콘솔로는 데이터를 한눈에 보기에 무리가 있는데 워크벤치라는 프로그램을 사용하면

데이터베이스 내부에 저장된 데이터를 시각적으로 관리할 수 있어서 편리하다!!

하지만,, 

꼮 필수적인건 아니고 콘솔로도 동일한 작업이 가능하다는거~

이 또한 운영체제에 알맞는 방법을 택해서 해보시길

 

▶7.4_ 데이터베이스 및 테이블 생성하기

MySQL을 설치했다면 이제 데이터베이스를 생성할 수 있다. MySQL프롬프트를 진행하자

1) 데이터베이스 생성하기

2) 테이블 생성하기

 

▶7.5_ CRUD작업하기

Create

Read

Update

Delete

데이터베이스에서 많이 수행하는 네 가지 작업이다

방법만 익혀도 웬만한 프로그램은 다 만들 수 있을정도로 이 작업은 많이 사용된다

SQL문 위주로 진행한다 이에 익숙하지 않다면 워크벤치로 진행하라

 

▶7.6_ 시퀄라이즈 사용하기

노드에서 MySQL 데이터베이스에 접속했을 때 이 작업을 쉽게 하도록 도와주는 라이브러리, 시퀄라이즈

시퀄라이즈는 OBM으로 분류된다 

OBM은 자바스크립트 객체와 데이터베이스의 릴레이션을 매핑해주는 도구다 

시퀄라이즈는 MySQL외에도 다양한 다른 데이트베이스도 함께 쓸 수 있으며

문법이 어느정도 호환되기에 프로젝트를 전환할 때도 편리하다

 

●ch9

익스프레스로 SNS서비스 만들기

지금껏 배운 내용으로 실제 웹 서비스 제작해본다

로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 등의 기능이 있는 NodeBird앱 만들어보쟈앙

 

▶9.1 프로젝트 구조 갖추기

1) nodebird 폴더 생성

2) package.json 생성

(npm init 명령어를 콘솔에서 호출하거나 직접 만들어라)

3) 시퀄라이즈 설치

(NoSQL대신 관계형 데이터베이스인 SQL을 데이터베이스로 사용할 것이다)

4) 필요한 폴더들 생성

5) npm 패키지들 설치하고, app.js 작성

(템플릿 엔진은 넌적스 엔진을 사용한다)

(라우터 생성하고, 404 응답 미들웨어.에러 처리 미들웨어, 앱을 8001번 포트에 연결)

6) 기본적인 라우터와 템플릿 엔진 생성

7) 컨트롤러(controllers폴더) 생성 --> 미들웨어 중 하나, 코드를 편하게 관리 가능

8) 클라이언트 코드 생성 (html, css)

9) npm start로 서버 실행

 

▶9.2 데이터베이스 세팅하기

- MySQL과 시퀄라이즈로 데이터베이스 설정

1) models 폴더 안에 js파일 생성 (사용자 정보를 저장하는 모델)

2) 생성된 모델 시퀄라이즈에 등록

3) 모델을 시퀄라이즈 객체에 연결

4) 모델 간의 관계를 associate 함수 내에 정의

5) 생성한 모델을 데이터베이스 및 서버에 연결

6) npx sequelize db:create 명령어를 통해 데이터베이스 생성