npm init하고 버전을 0.0.1로 최소한의 버전을 사용 -> 버전을 더 많이 쓰기 위해서

SQlize 관련된 것 3개의 라이브러이 다운

npm i sequelize mysql2 sequelize-cli

mysql2: Node와 MySQL DB를 연결해주는 드라이버

SQLize 초반 세팅

npx sequelize init

nodebird 폴더 구조

Public: 프론트에서 가져다 쓸 이미또는 css 자바스크립트 html 정적리소스 passport: 로그인을 도와줄 라이브러리 views: 넌적스 화면 routes: 라우터드을 담당 .env: 설정 파일

익스프레스 관련 라이브러리 설치

npm i express cookie-parser express-session morgan multer dotenv nunjucks

개발용 서버

npm i -D nodemon

app.js

메인 파일

const express = require('express');
const cookieParser = require('cookie-parser');
const morgan = require('morgan');
const path = require('path');
const session = require('express-session');
const nunjucks = require('nunjucks');
const dotenv = require('dotenv');

dotenv.config();
const pageRouter = require('./routes/page');

const app = express();
app.set('port', process.env.PORT || 8001);
app.set('view engine', 'html');
nunjucks.configure('views', {
  express: app,
  watch: true,
});

app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
}));

app.use('/', pageRouter);

app.use((req, res, next) => {
  const error =  new Error(`${req.method} ${req.url} 라우터가 없습니다.`);
  error.status = 404;
  next(error);
});

app.use((err, req, res, next) => {
  res.locals.message = err.message;
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기중');
});

데이터베이스 세팅하기

모델 기본 구성방식

const Sequelize = require('sequelize');

class User extends Sequelize.Model {
  static initiate(sequelize) {

  }

  static associate(db) {
}

module.exports = User;

post.js: 게시글 hashta.js: 해시태그 user.js

passport 세팅 및 회원가입 만들기

app.use(passport.intialize());

반드시 express session 아래에 작성해야 함

패스포트에 필요한 미들웨어 하고 따로 패스포트 설정을 해야 한다.

middelswares/index.js

exports.isLoggedIn = (req, res, next) => {
    if (req.isAuthenticated()) {
      next();
    } else {
      res.status(403).send('로그인 필요');
    }
  };

패스포트 통해서 로그인 했으면 다음으로 넘어가고 패스포트 통해서 로그인 안 했으면 로그인해라

passport로 이메일 로그인 만들기

serializeUser는 사용자 정보 객체에서 아이디만 추려 세션에 저장하는 것 deserializeUser는 세션에 저장한 아이디를 통해 사용자 정보 객체를 불러오는 것

1. /auth/login 라우터를 통해 로그인 요청이 들어옴
2. 라우터에서 passport.authenticate 메서드 호출
3. 로그인 전략(LocalStrategy) 수행
4. 로그인 성공 시 사용자 정보 객체와 함께 req.login 호출
5. req.login 메서드가 passport.serializeUser 호출
6. req.session에 사용자 아이디만 저장해서 세션 생성
7. express session에 설정한 대로 브라우저에 connect.sid 세션 쿠키 전송
8. 로그인 완료

데이터베이스란

지금까지는 데이터를 서버 메모리에 저장했음

• 서버를 재시작하면 데이터 사라져버림 -> 영구적으로 저장할 공간 필요

MySQL 관계형 데이터베이스 사용

• 데이터베이스: 관련성을 가지며 중복이 없는 데이터들의 집합
• DBMS: 데이터베이스를 관리하는 시스템
• RDBMS: 관계형 데이터베이스를 관리하는 시스템
• 서버의 하드 디스크나 SSD 등의 저장 매체에 데이터를 저장
• 서버 종류 여부와 상관 없이 데이터를 계속 사용할 수 있음
• 여러 사람이 동시에 접근할 수 있고, 권한을 따로 줄 수 있음

mysql, 워크벤치 설치하기

공식사이트

https://dev.mysql.com/downloads/installer/

Choosing s Setup Type -> Custom

Selecct Products and Features -> server, workbench 추가

테이블 만들기

데이터베이스 생성하기

콘솔에서 MySQL 프롬프트에 접속

• CREATE SCHEMA node.js;로 nodejs 데이터베이스 생성
• use nodejs;로 생성한 데이터베이스 선택

테이블 생성하기

MySQL 프롬프트에서 테이블 생성

• CREATE TABLE [데이터베이스명.테이블명]으로 테이블 생성
• 사용자 정보를 저장하는 테이블

컬럼과 로우

나이, 결혼 여부, 성별같은 정보가 컬럼

실제로 들어가는 데이터는 로우

컬럼 옵션들

id INT NOT NULL AUTO_INCREMENT

• INT: 정수 자료형입니다.
• VARCHAR: 문자열 자료형입니다. 가변 길이입니다.
• TEXT: 문자열 자료형입니다. 고정 길이가 아닙니다.
• DATETIME: 날짜와 시간을 나타내는 자료형입니다.
• TINYINT: 정수 자료형입니다. -128에서 127까지 저장할 수 있습니다.
• NOT NULL: 빈 값을 허용하지 않습니다.
• AUTO_INCREMENT: 숫자 자료형인 경우 다음 로우가 저장될 때 자동으로 1씩 증가합니다.
• UNSIGNED: 0과 양수만 허용합니다.
• ZEROFILL: 숫자의 자리 수가 고정된 경우 빈 자리에 0을 채웁니다.
• DEFAULT now(): 날짜 컬럼의 기본값을 현재 시간으로 설정합니다.

칼럼의 옵션들

댓글 테이블 저장하기

commments 테이블 생성

외래키(foreign key)

댓글 테이블은 사용자 테이블과 관계가 있음(사용자가 댓글을 달기 때문)

• FOREIGN KEY (컬럼명) REFERENCES 데이터베이스.테이블명 (컬럼)
• FOREIGN KEY (commenter) REFERENCES nodejs.users (id)
• 댓글 테이블에는 commenter 컬럼이 생기고 사용자 테이블의 id값이 저장됨
• ON DELETE CASCADE, ON UPDATE CASCADE
• 사용자 테이블의 로우가 지워지고 수정될 때 댓글 테이블의 연관된 로우들도 같이 지워지고 수정됨
• 데이터를 일치시키기 위해 사용하는 옵션(CASCADE 대신 SET NULL과 NO ACTION도 있음)

테이블 목록보기

CRUD 작업하기

CRUD

Create, Read, Update, Delete의 두문자어

• 데이터베이스에서 많이 하는 작업 4가지

Create

INSERT INTO 테이블(컬럼명들) VALUES(값들)

Read

SELECT 컬럼 FROM 테이블명

• SELECT * 은 모든 컬럼을 선택한다는 의미

  SELECT * FROM nodejs.users;

• 컬럼만 따로 추리는 것도 가능

  SELECT name, married FROM nodejs.users;

Read 옵션들

WHERE로 조건을 주어 선택가능

• AND로 여러가지 조건을 동시에 만족하는 것을 찾음

  SELECT name, age FROM nodejs.users WHERE married = 1 AND age > 30l;

• OR로 여러가지 조건 중 하나 이상을 만족하는 것을 찾음

  SELECT id, name FROM nodejs.users WHERE married = 0 OR age > 30;

  ORDER BY로 특정 컬럼 값 순서대로 정렬 가능

• DESC는 내림차순, ASC는 오름차순

  SELECT id, name FROM nodejs.users ORDER BY age DESC;

LIMIT, OFFSET

LIMIT으로 조회할 개수 제한

SELECT id, name FROM nodejs.users ORDER BY age DESC LIMIT 1;

OFFSET으로 앞의 로우들 스킵 가능(OFFSET 2면 세 번째 것부터 찾음)

SELECT id, name FROM nodejs.users ORDER BY age DESC LIMIT 1 OFFSET 1;

Update

데이터베이스에 있는 데이터를 수정하는 작업

• UPDATE 테이블명 SET 컬럼 = 새값 WHERE 조건

  UPDATE nodejs.users SET comment = '바꿀 내용' WHERE id = 2;

Delete

데이터베이스에 있는 데이터를 삭제하는 작업

• DELETE FROM 테이블명 WHERE 조건

  DELETE FROM nodejs.users WHERE id = 2;

시퀄라이즈 사용하기

시퀄라이즈 ORM

MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리

• ORM: Object Relational Mapping: 객체와 데이터를 매핑(1대1 짝지음)
• MySQL 외에도 다른 RDB(Maria, Postgre, SQLite, MSSQL)와도 호환됨
• 자바스크립트 문법으로 데이터베이스 조작 가능

시퀄라이즈 예제: https://github.com/zerocho/nodejs-book/tree/master/ch7/7.6/learn-sequelize

• 프로젝트 세팅 후, 콘솔을 통해 경로로 이동한 후 package.json 작성

시퀄라이즈 CLI 사용하기

시퀄라이즈 명령어 사용하기 위해 sequelize-cli 설치

• mysql2는 MySQL DB가 아닌 드라이버(Node.js와 MySQL을 이어주는 역할)

  $ npm i express morgan nunjucks sequelize sequelize-cli mysql2
  $ npm i-D nodemon

  npx sequelize init으로 시퀄라이즈 구조 생성

  $ npx sequelize init

modes/index.js 수정

다음과 같이 수정

• require(../config/config) 설정 로딩
• new Sequelize(옵션들...)로 DB와 연결 가능

MySQL 연결하기

app.js 작성

• sequelize.sync로 연결

연결 테스트하기

npm start로 실행해서 SELECT 1+1 AS RESULT가 나오면 연결 성공

시퀄라이즈 모델 만들기

모델 옵션들

시퀄라이즈 모델의 자료형은 MySQL의 자료형과 조금 다름

define 메서드의 세 번째 인자는 테이블 옵션

알겠습니다. 사진 속 글자를 똑같이 적어 보겠습니다.

• timestamps: true면 createdAt(생성 시간), updatedAt(수정 시간) 컬럼을 자동으로 만듦
• 예제에서는 직접 created_at 컬럼을 만들었으므로 false로 함
• paranoid 옵션은 true면 deletedAt(삭제 시간) 컬럼을 만듦, 로우 복구를 위해 완전히 삭제하지 않고 deletedAt에 표시해둠
• underscored 옵션은 캐멀케이스로 생성되는 컬럼을 스네이크케이스로 생성
• modelName은 모델 이름, tableName 옵션은 테이블 이름을 설정
• charset과 collate는 한글 설정을 위해 필요(이모티콘 넣으려면 utf8mb4)

댓글 모델 생성하기

comment.js 생성

댓글 모델 활성화하기

index.js에 모델 연결

• init으로 sequelize와 연결
• associate로 관계 설정

  const Sequelize = require('sequelize');
  const User = require('./user');
  const Comment = require('./comment');
  

db.sequelize = sequelize; db.User = User; db.Comment = Comment;

User.init(sequelize); Comment.init(sequelize);

User.associate(db); Comment.associate(db);

module.exports = db;

---

## 테이블 관계 이해하기
### 관계 정의하기
#### users 모델과 comments 모델 간의 관계를 정의

- 1:N 관계 (사용자 한 명이 댓글 여러 개 작성)
- 시퀄라이즈에서는 1:N 관계를 has Many로 표현(사용자.hasMany(댓글))
- 반대의 입장에서는 belongsTo(댓글.belongsTo(사용자))
- belongsTo가 있는 테이블에 컬럼이 생김(댓글 테이블에 commenter 컬럼)

### 1대1 관계
#### 1대1 관계
- 예) 사용자 테이블과 사용자 정보 테이블

db.User.hasOne(db.Info, { foreignKey: 'UserId', sourcekey: 'id' }); db.Info.belongsTo(db.User, { foreignkey: 'UserId', targetKey: 'id' });

### N대N 관계
#### 다대다 관계
- 예) 게시글과 해시태그 테이블
- 하나의 게시글이 여러 개의 해시태그를 가질 수 있고 하나의 해시태그가 여러 개의 게시글을 가질 수 있음
- DB 특성상 다대다 관계는 중간 테이블이 생김

db.Post.belongsToMany(db.Hashtag, { through: 'PostHashtag' }); db.Hashtag.belongsToMany(db.Post, { through: 'PostHashtag' });

---


## 관계 쿼리 알아보기
### 관계 쿼리
#### 결과값이 자바스크립트 객체임

const user = await User.fingOne({}); console.log(user.nick); // 사용자 닉네임

#### include JOIN 과 비슷한 기능 수행 가능(관계 있는 것 엮을 수 있음)

const user = await User.findOne({

include: [{

    model: Comment,

}]

});

console.log(user.Comments); // 사용자 댓글

#### 다대다 모델은 다음과 같이 접근 가능

db.sequelize.models.PostHashtag

#### get+모델명으로 관계 있는 데이터 로딩 가능

const user = await User.findOne({}); const comments = await user.getComments(); console.log(comments); // 사용자 댓글

#### as로 모델명 변경 가능

// 관계를 설정할 때 as로 등록 db.User.hasMany(db.comment, { foreignkey: 'commenter', sourcekey: 'id', as: 'Answers' }); // 쿼리할 때는 const user = await User.findOne({}); const comments = await user.getAnswers(); console.log(comments); // 사용자 댓글

#### include나 관계 쿼리 메서드에도 where나 attributes

const user = await User.findOne({ include: [{ model: Comment, where: { id: 1, }, attributes: ['id'], }], });

// 또는

const comments = await user.getComments({ where: { id: 1, }, attributes: ['id'], });

#### 생성 쿼리

const user = await User.findOne({}); const comment = await Comment.create(); await user.addComment(comment); // 또는 await user.addComment(comment.id);

#### 여러 개를 추가할 때는 배열로 추가 가능

const user = await User.findOne({}); const comment1 = await Comment.create(); const comment2 = await Comment.create(); await user.addComment([comment1, comment2]);

#### 수정은 set+모델명, 삭제는 remove+모델명

### raw 쿼리
#### 직접 SQL을 쓸 수 있음

const [result, metadata] = await sequelize.query("SELECT * from comments"); console.log(result);

---

## 시퀄라이즈 쿼리 알아보기
### 시퀄라이즈 쿼리 알아보기
#### 윗 줄이 SQL문, 아랫 줄은 시퀄라이즈 쿼리(자바스크립트)
- 특수한 기능들인 경우 Sequelize.Op의 연산자 사용(gt, or 등)
#### 수정

UPDATE nodejs.users SET comment='48' WHERE id = 2; User.update({ comment: '바꿀 내용', }, { where: { id: 2 }, });

#### 삭제

DELETE FROM nodejs.users WHERE id = 2; User.destroy({ where: { id: 2 }, });

---

## 시퀄라이즈 실습하기
### 쿼리 수행하기
#### users 라우터
- get, post, delete, patch 같은 요청에 대한 라우터 연결
- 데이터는 JSON 형식으로 응답
- comments 라우터도 마찬가지

### comments 라우터

const express = require('express'); const { User, Comment } = require('../models');

const router = express.Router();

router.post('/', async (req, res, next) => { try { const comment = await Comment.create({ commenter: req.body.id, comment: req.body.comment, });

res.status(201).json(comment);

} catch (err) { console.error(err); next(err); } });

router.patch('/:id', async (req, res, next) => { try { const result = await Comment.update({ comment: req.body.comment, }, { where: { id: req.params.id } });

res.json(result);

} catch (err) { console.error(err); next(err); } });

router.delete('/:id', async (req, res, next) => { try { const result = await Comment.destroy({ where: { id: req.params.id } });

res.json(result);

} catch (err) { console.error(err); next(err); } });

module.exports = router;

```

서버 접속하기

npm start로 서버 시작

• localhost:3000 으로 접속하면 시퀄라이즈가 수행하는 SQL문이 콘솔에 찍힘

Express 소개

http 모듈로 웹 서버를 만들 때 코드가 보기 좋지 않고, 확장성도 떨어짐

• 프레임워크로 해결
• 대표적인 것이 Express(익스프레스), Koa(코아), Hapi(하피)
• 코드 관리도 용이하고 편의성이 많이 높아짐

package.json 만들기

직접 만들거나 npm init 명령어 생성

• nodemon이 소스 코드 변경 시 서버를 재시작해줌

app.js 작성하기

서버 구동의 핵심이 되는 파일

• app.set('port', 포트)로 서버가 실행될 포트 지정
• app.get('주소', 라우터)로 GET 요청이 올 때 어떤 동작을 할지 지정
• app.listen('포트', 콜백)으로 몇 번 포트에서 서버를 실행할지 지정

express로 html 서빙하기

const express = require("express");
const path = require("path");

const app = express();
app.set("port", process.env.PORT || 3000);

app.get("/", (req, res) => {
  // res.send('Hello, Express');
  res.sendFile(path.join(__dirname, "/index.html"));
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기 중");
});

미들웨어 사용하기

Node.js Express의 미들웨어는 웹 애플리케이션의 요청과 응답을 처리하는 중간 단계의 함수이다.

미들웨어는 Express 애플리케이션의 요청 처리 프로세스에서 요청과 응답 객체에 대한 조작 및 처리를 수행하는 역할을 한다.

미들웨어를 사용하여 요청 처리를 여러 단계로 나누고, 각 단계에서 필요한 작업을 수행할 수 있다.

app.use((req, res, next) => {
    console.log('모든 요청에 실행하고 싶어요');
    next();
})

app.get('*', (req, res) => {
  res.send('hello everybody');
});

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.post('/', (req, res) => {
  res.send('hello express!');
});

// app.js
const express = require('express');
const app = express();

app.get('/category/javascript', (req, res) => {
  res.send('hello javascript');
});

app.get('/category/:name', (req, res) => {
  res.send('hello wildcard');
});

app.get('/about', (req, res) => {
  res.send('hello express');
});

app.get('*', (req, res) => {
  res.send('hello everybody');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

미들웨어 특성 이해하기

const express = require('express');
const path = require('path');

const app = express();

app.set('port', process.env.PORT || 3000);

app.use((req, res, next) => {
  console.log('1 요청에 실행하고싶어요');
  next();
});

app.get('/', (req, res) => {
  // res.sendFile(path.join(__dirname, 'index.html'));
  res.setHeader('Content-Type', 'text/html');
  res.status(200).send('.');
});

app.post('/', (req, res) => {
  res.send('hello express!');
});

next 활용법

next는 Express 미들웨어 함수에서 다음 미들웨어 함수를 호출하기 위한 콜백 함수이다.

Express 미들웨어는 요청과 응답 객체를 조작하고 다음 미들웨어 함수로 제어를 전달할 수 있다. 이때 next 함수를 사용하여 다음 미들웨어 함수를 호출한다.

morgan, bodyParser, cookieParser

Morgan:

morgan은 Express 애플리케이션의 HTTP 요청 로깅을 도와주는 미들웨어이다. 이를 사용하면 서버에 들어오는 요청에 대한 정보(메서드, URL, 상태 코드, 응답 시간 등)를 쉽게 로깅할 수 있다.

개발 및 디버깅 시에 유용하며, 클라이언트의 요청과 서버의 응답을 추적하는 데 도움이 된다.

Body-Parser:

body-parser는 클라이언트에서 전송된 HTTP 요청의 본문(body)을 파싱하는 역할을 한다.

HTTP POST 요청이나 PUT 요청과 같이 요청 본문에 데이터를 담아 보낼 때, 이 데이터를 파싱하여 JavaScript 객체로 변환해준다. 이렇게 파싱된 데이터를 Express 애플리케이션에서 사용할 수 있다.

Cookie-Parser:

cookie-parser는 클라이언트에서 전송된 쿠키를 파싱하는 역할을 한다.

쿠키는 클라이언트와 서버 간의 상태를 유지할 때 사용되며, 이를 파싱하여 JavaScript 객체로 변환해준다. 이후 Express 애플리케이션에서 파싱된 쿠키 데이터를 사용할 수 있다.

npm이란

Node Package Manager

• 노드의 패키지 매니저

• 다른 사람들이 만든 소스 코드들을 모아둔 저장소

• 남의 코드를 사용하여 프로그래밍 가능

• 이미 있는 기능을 다시 구현할 필요가 없어 효율적

• 오픈 소스 생태계를 구성중

• 패키지: npm에 업로드된 노드 모듈

• 모듈이 다른 모듈을 사용할 수 있듯 패키지도 다른 패키지를 사용할 수 있음

• 의존 관계라고 부름

package.json

현재 프로젝트에 대한 정보와 사용 중인 패키지에 대한 정보를 담은 파일

• 같은 패키지ㅏ도 버전별로 기능이 다를 수 있으므로 버전을 기록해두어야 함
• 동일한 버전을 설치하지 않으면 문제가 생길 수 있음
• 노드 프로젝트 시작 전 package.json부터 만들고 시작함(npm init)

package.json 속성들

• name: 패키지의 이름입니다.
• version: 패키지의 버전입니다.
• description: 프로젝트 설명입니다.
• main: 실행 파일 경로입니다. 이 파일은 Node.js에서 프로젝트를 실행할 때 실행됩니다.
• scripts: 프로젝트에서 사용할 수 있는 명령어 목록입니다.
• repository: Git 저장소 주소입니다.
• keywords: 키워드입니다. 이 키워드를 사용하여 프로젝트를 검 색 할 수 있습니다.
• license: 라이선스입니다.

npm 스크립트

npm init이 완료되면 폴더에 package.json이 생성됨

npm run [스크립트명]으로 스트립트 실행

패키지 설치하기

express 설치하기

npm install express

package.json에 기록됨(dependencies에 express 이름과 버전 추가됨)

// package.json
{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index"
  },
  "author": "ZeroCho",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.5"
  }
}

서버와 클라이언트

서버와 클라이언트의 관계

• 클라이언트가 서버로 요청(request)을 보냄
• 서버는 요청을 처리
• 처리 후 클라이언트로 응답(response)을 보냄

노드로 http 서버 만들기

http 요청에 응답하는 노드 서버

• createServer로 요청 이벤트에 대기
• req 객체는 요청에 관한 정보가, res 객체는 응답에 관한 정보가 담겨 있음

localhost와 포트

localhost는 컴퓨터 내부 주소

• 외부에서는 접근 불가능

포트는 서버 내에서 프로세스르 구분하는 번호

• 기본적으로 http 서버는 80번 포트 사용(생략가능, https는 443)
• 예) www.gitbut.com:80 -> www.github.com
• 다른 포트로 데이터베이스나 다른 서버 동시에 연결 가능

fs로 HTML 파일 읽어 제공하기

server2.js

REST API 서버 만들기

REST API

서버에 요청을 보낼 때는 주소를 통해 요청의 내용을 표현

• /index.html이면 index.html을 보내달라는 뜻
• 항상 html을 요구할 필요는 없음
• 서버가 이해하기 쉬운 주소가 좋음

REST API(Respresentational State Transfer)

• 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법
• /user이면 사용자 정보에 관한 정보를 요청하는 것
• /post면 게시글에 관련된 자원을 요청하는 것

HTTP 요청 메서드

• GET: 서버 자원을 가져오라고 할 때 사용
• POST: 서버에 자원을 새로 등록하고자 할 때 사용(또는 뭘 써야할지 애매할 때)
• PUT: 서버의 자원을 요청에 들어있는 자원으로 치환하고자 할 때 사용
• PATCH: 서버 자원의 일부만 수정하고자 할 때 사용
• DELETE: 서버의 자원ㅇ르 삭제하고자 할 때 사용

HTTP 프로토콜

클라이언트가 누구든 서버와 HTTP 프로토콜로 소통 가능

• ios, 안드로이드, 웹이 모두 같은 주소로 요청 보낼 수 있음
• 서버와 클라이언트으 ㅣ분리

RESTful

• REST API를 사용한 주소 체계를 이용하는 서버
• GET / user는 사용자를 조회하는 요청, POST /user 사용자를 등록하는 요청

REST 서버 만들기

GitHub 저장소(https://github.com/zerocho/nodejs-book) ch4 소스 창조

restServer.js에 주목

• GET 메서드에서 /, /about 요청 주소는 페이지를 요청하는 것이므로 HTML 파일을 읽어서 전송합니다. AJAX 요청을 처리하는 /users에서는 users 데이터를 전송합니다. JSON 형식으로 보내기 위해 JSON.stringify를 해주었습니다. 그 외의 GET 요청은 CSS JS 파일을 요청하는 것이므로 찾아서 보내주고, 없다면 404 NOT FOUND 에러를 응답합니다.

• POST와 PUT 메서드는 클라이언트로부터 데이터를 받으므로 특별한 처리가 필요합니다. req.on('data', 콜백)과 req.on('end', 콜백) 부분인데요. 3.6.2절의 버퍼와 스트림에서 배웠던 readStream 입니다. readStream으로 요청과 같이 들어오는 요청 본문을 받을 수 있습니다. 단, 문자열이므로 JSON으로 만드는 JSON.parse 과정이 한 번 필요합니다.

• DELETE 메서드로 요청이 오면 주소에 들어 있는 키에 해당하는 사용자를 제거합니다.

• 해당하는 주소가 없을 경우 404 NOT FOUND 에러를 응답합니다.

POST, PUT, DELETE 요청 보내기

REST 서버 실행하기

localhost:8085에 접속

콘솔 $ node restServer 8085번 포트에서 서버 대기 중입니다.

REST 요청 확인하기

개발자도구(F12) Network 탭에서 요청 내용 실시간 확인 가능

• Name은 요청 주소, Method는 요청 메서드, Status는 HTTP 응답 코드
• Protocol은 HTTP 프로토콜, Type은 요청 종류(xhr은 AJAX 요청)

add1, add2, add3, add4는 같은 기능을 하는 함수

• add2: add1을 화살표 함수로 나타낼 수 있음
• add3: 함수의 본문이 return만 있는 경우 return 생략
• add4: return이 생략된 함수의 본문을 소괄호로 감싸줄 수 있음
• not1과 no2도 같은 기능을 함(매개변수 하나일 때 괄호 생략)

화살표 함수가 기존 function() {}을 대체하는 건 아님(this가 달라짐)

• logFriends 메서드의 this 값에 주목
• forEach의 function의 this와 logFriends의 this는 다름
• that이라는 중간 변수를 이용해서 logFriends의 this를 전달

forEach의 인자로 화살표 함수가 들어간 간 것에 주목

• forEach의 화살표함수의 this와 logFriends의 this가 같아짐
• 화살표 함수는 자신을 포함하는 함수의 this를 물려받음
• 물려받고 싶지 않을 때: function() {}을 사용

promise, async/await

콜백 헬이라고 불리는 지저분한 자바스크립트 코드의 해결책

• 프로미스: 내용의 실행은 되었지만 결과를 아직 반환하지 않은 객체
• Then을 붙이면 결과를 반환함
• 실행이 완료되지 않았으면 완료된 후에 Then 내부함수가 실행됨
• Resolvef(성공리턴값) -> then으로 연결
• Reject(실패리턴값) -> catch로 연결
• Finally 부분은 무조거 실행됨

콜백 패턴(3중첩)을 프로미스로 바꾸는 예제

findOne, save 메서드가 프로미스를 지원한다고 가정

Promise.resolve(성공리턴값): 바로 resolve하는 프로미스

Promise.reject(실패리턴값): 바로 reject하는 프로미스

Promise.all(배열): 여러 개의 프로미스를 동시에 실행

• 하나라도 실패하면 catch로 감
• allSettled로 실패한 것만 추려낼 수 있음

async/await

이전 챕터의 프로미스 패턴 코드

• Async/await으로 한 번 더 축약 가능

async function의 도입

• 변수 = await 프로미스인 경우 프로미스가 resolve된 값이 변수에 저장
• 변수 await 값인 경우 그 값이 변수에 저장

화살표 함수도 async/await 가능

Async 함수는 항상 promise를 반환(return)

• Then이나 await을 붙일 수 있음

for await of

노드 10부터 지원

for await(변수 of 프로미스 배열)

• resolve된 프로미스가 변수에 담겨 나옴
• await을 사용하기 때문에 async 함수 안에서 해야함

REPL

프롬프트가 > 모양으로 바뀌면, 자바스크립트 코드 입력 입력한 값의 결과값이 바로 출력됨

JS 파일을 만들어 실행하기

자바스크립트 파일을 만들어 통째로 코드를 실행하는 방법

• 아무 폴더(디렉터리)에서 helloWorld.js를 만들기
• node [자바스크립트 파일 경로]로 실행
• 실행 결과값이 출력굄

CommonJS 모듈 시스템

모듈

노드는 자바스크립트 코드를 모듈로 만들 수 있음

• 모듈: 특정한 기능을 하는 함수나 변수들의 집합
• 모듈로 만들면 여러 프로그램에서 재사용

모듈 만들어보기

같은 폴더 내에 var.js, func.js, index.js 만들기

• 파일 끝에 module.exports로 모듈로 만들 값을 지정
• 다른 파일에서 require(파일 경로)로 그 모듈의 내용 가져올 수 있음

파일 간의 모듈 관계

node index로 실행

• const{ odd, even } 부분은 module.exports를 구조분해 할당한 것임

Node.js

: 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임

노드는 서버가 아님

• 서버의 역할도 수행할 수 있는 자바스크립트 런타임
• 노드로 자바스크립트로 작성된 서버를 실행할 수 있음
• 서버 실행을 위해 필요한 http/https/htpp2 모듈을 제공

런타인: 특정언어로 만든 프로그램들을 실행할 수 있게 해주는 가상 머신(크롬의 V8 엔진 사용)의 상태

노드의 특성

이벤트가 발생할 때 미리 저장해둔 작업을 수행하는 방식

이벤트의 예: 클릭, 네트워크 요청, 타이머 이벤트 리스너: 이벤트를 등록하는 함수 콜백 함수: 이벤트가 발생했을 때 실행될 함수

논블로킹 I/O

논블로킹: 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고, 나중에 오래 걸리는 함수를 실행

블로킹을 하면 코드가 순서대로 실행되고 논블로킹이면 코드가 순서대로 실행되지 않을 수도 있다

프로세스 vs 스레드

프로세스: 운영체제에서 할당하는 작업의 단위, 프로세스 간 자원 공유X 스레드: 프로세스 내에서 실행되는 작업의 단위, 부모 프로세스 자원 공유

싱글 스레드

싱글 스레드라 주어진 일을 하나밖에 처리하지 못함

• 프로그래밍 난이도가 쉽고, CPU, 메모리 자원 적게 사용

멀티스레드 모델과의 비교

싱글 스레드 모델을 에러를 처리하지 못하는 경우 멈춤 멀티 스레드 모델은 에러 발생 시 새로운 스레드를 생성하여 극복

서버로서의 노드

서버: 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램

클라이언트: 서버에 요청을 보내는 주체(브라웢, 데스크탑 프로그램, 모바일 앱, 다른 서버에 요청을 보내는 서버)

노드 != 서버 But, 노드는 서버를 구성할 수 있게 하는 모듈을 제공

노드 서버의 장단점

장점: 멀티 스레드 방식에 비해 컴퓨터 자원을 적게 사용함 I/O 작업이 많은 서버로 적합 멀티 스레드 방식보다 쉬움웹 서버가 내장되어 있음 자바스크립트를 사용함 JSON 형식과 호환하기 쉬움

단점: 싱글 스레드라서 CPU 코어를 하나만 사용함 CPU 작업이 많은 서버로는 부적합 하나뿐인 스레드가 멈추지 않도록 관리해야 함 서버 규모가 커졌을 때 서버를 관리하기 어려움 어중간한 성능

서버외의 노드

자바스크립트 런타임이기 때문에 용도가 서버에만 한정되지 않음

웹, 모바일, 데스크탑 애플리케이션에도 사용

• 웹 프레잌워크: Angular, React, Vue, Meteor 등
• 모바일 앱 프레임워크: React Native
• 데스크탑 개발 도구: Electron(Atom, Slack, VSCode, Discord등 제작)

노드, VS code 설치하기

노드 설치

https://nodejs.org/en LTS는 안정적인 버전(3년)

vs code 설치

https://code.visualstudio.com/download

while: 조건식이 만족하면 중괄호에 둘러싸인 코드를 반복 실행한다.

while( /*조건식*/ ){
    /* 반복 실행될 코드 */
}

do while문

do while:반복을 할질 말지 반복문 마지막에 검사한다. 즉 반복문 한번은 실행하고 더 반복을 할지 말지는 코드를 보고 결정

do{
    /* 반복 실행될 코드 */
}while( /*조건식*/ );

for문

for: 특정 횟수만큼 반복하거나 배열과 같은 데이터 구조의 요소를 반복적으로 처리할 수 있다

var sum = 0;
for( var i = 0 ; i < 5 ; i++ ){
    sum = sum + i;
}

for in문

for in: 객체의 열거 가능한 속성을 반복적으로 순회하고 처리하는 데 사용되는 반복문 객체 내의 모든 속성을 열거하고 값을 출력하는 반복문

for

var property_list = Object.keys(obj);

for( var i=0 ; i<property_list.length ; i++ ){
    var propertyName = property_list[i];
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

for in

for( var propertyName in obj ){
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

변수의 scope

scope: 변수와 함수가 접근 가능한 범위를 나타내는 개념

변수의 scope는 function의 scope를 따른다 -> 객체(변수)는 선언된 함수 안에서만 접근이 가능하다

변수의 shadowing

shadowing: 동일한 이름의 변수나 함수가 여러 스코프에서 사용되는 경우 바깥 스코프의 변수나 함수를 가려버리는 현상

function name
    //한 함수 안에서만 값이 유지되는 변수
    var in_function_var;
}

    //여러 함수에서 값이 유지되면서 사용되는 변수
    var out_function_var;

method, this

method: 객체 속성의 값으로써 함수가 들어갈 때

this: 함수가 불렸을 때 어떤 객체 바인드된 속성으로써 불렸는지 알려준다

일반적임 함수를 호출할 때, 해당 함수 내부에서 사용된 this는 전역객체(브라우저의 경우 window객체)에 바인딩 된다.

메서드를 호출할 때 this의 값은 인스턴스화 된 객체(해당 메서드를 호출한 객체)를 참조한다.

closure (클로저)

함수와 함수가 선언될 때 environment로 구성

function makeCounterFunction(initVal){
    var count = initVal;
    function Increase(){
        count++;
        console.log(count);
    }
    return Increase;
}

var counter1 = makeCounterFunction(0);
var counter2 = makeCounterFunction(10);

배열: 값 즉 element가 연속된 저장 공간 여러개의 값을 저장하고 인덱스를 이용해 접근할 수 있다.

빈배열 초기화된 배열 element에는 어떤 자료형이든 저장될 수 있다

배열의 길이는 .length를 사용

대괄호 안에 인덱스를 사용해서 배열의 element 접근 arr[index]

배열 사용하기

push(): 배열의 끝에 하나 이상의 요소를 추가, 배열의 길이를 반환

pop(): 배열의 마지막 요소를 제거하고 반환

shift(): 배열의 첫 번째 요소를 제거하고 반환

unshift(): 배열의 맨 앞에 하나 이상의 요소를 추가

reverse(): 배열의 순서를 거꾸로 뒤집기

sort(): 배열의 요소를 기본적으로 문자열로 변환한 후 유니코드 코드 포인트 값 순서로 정렬

arr1.concat(arr2) : arr1과 arr2 붙임

arr.indexOf(element) : arr에서 element가 있는 첫 위치를 검색

arr.lastIndexOf(element) : arr에서 element가 있는 마지막 위치를 검색

split(): 문자열을 특정 구분자를 기준으로 나누어 배열로 반환

주석

주석: 프로그래밍 코드 내에 설명을 추가하거나 임시로 코드를 비활성화하기 위해 사용되는 텍스트

한 줄 주석: //를 사용하여 한 줄 주석을 작성

여러 줄 주석: /*로 시작하여 */로 끝나는 여러 줄 주석을 작성할 수 있다

if문

if: 주어진 조건이 true인 경우 특정 코드 블록을 실행하고 조건이 false인 경우 다른 코드 블록이 실행되도록 프로그램의 흐름을 제어한다

switch문

switch: 특정 변수나 표현식의 값을 검사하고 그 값에 따라 여러 다른 코드 블록 중 하나를 실행

break: case 블록 내에서 코드를 실행한 후 break 문을 사용하여 switch 문을 빠져나온다. break를 사용하지 않으면 해당 case 이후의 모든 코드가 실행된다

default: 어떤 case 절에도 해당하지 않을 때 실행할 코드를 정의

Arithmetic(산술), Operator(연상자) a+b a-b

++: 변수의 값을 증가시키는 연산자 --: 변수의 값을 감소시키는 연산자

var a = 5;
var result1 = a++; // 후위 증가 연산자 사용
console.log(result1); // 출력: 5
console.log(a); // 출력: 6

var b = 5;
let result2 = ++b; // 전위 증가 연산자 사용
console.log(result2); // 출력: 6
console.log(b); // 출력: 6

Math.pow(A,b); // A의 B승
Math.sqrt(A); // A의 제곱근
MAth.random(); // 0~1 사이의 임의의 난수를 발생

함수 사용하기

함수를 '호출' 한다

console.log("콘솔에 로그를 남기는 함수");

함수 선언

function 함수이름(파라미터1, 파라미터2){
    /*
        실행될 코드
    */
    return 반환값;
}

관계연산자

Relational(관계), Operator(연산자)

논리연산자

Logical(논리), Operator(연산자)

AND(&&): 두 피연산자가 모두 true인 경우에만 true를 나타내는 이항연산자

OR(||): 두 피연산자가 하나라도 true인 경우 true를 나타내는 이항연산자

NOT(!): 피연산자가 true인 경우 false를, false인 경우 true를 나타내는 단항연산자

연산자 우선순위

String 이어붙이기

.length: 문자열 내 문자의 개수를 나타낸다

.concat: 현재 문자열과 다른 문자열을 결합하여 새로운 문자열을 생성한다

+(str + str) : 더하기 연산자를 사용하여 문자열을 연결할 수 있다

String 다루기

특정 위치의 문자열 알아내기

1. 문자열에서 지정한 인덱스 위치에 있는 문자를 반환한다 (0부터 시작)

2. 대괄호 []를 사용하여 문자열에서 특정 인덱스 위치에 있는 문자를 가져올 수 있다 (0부터 시작)

부분문자열 구하기

substring(): 문자열 내에서 지정된 시작 인덱스와 종료 인덱스 사이의 문자열 부분을 추출

substr(): 문자열 내에서 지정된 시작 인덱스부터 지정된 길이 만큼의 문자열 부분을 추출

문자열 탐색하기

indexOf(str): 문자열에서 특정 문자열 str이 처음으로 나타나는 위치의 인덱스를 반환 *str을 찾을 수 없으면 -1을 반환

lastIndexOf(str) :메서드는 문자열에서 특정 문자열 str이 마지막으로 나타나는 위치의 인덱스를 반환 *str을 찾을 수 없으면 -1을 반환

lecture05.js

 var height=prompt("키를 입력해 주세요");
 console.log(height, typeof(height));

 var height_int = pareInt(height);
 console.log(height_int, typeof(height_int));

 var height_float = parseFloat(height);
 console.log(height_float, typeof(height_float));

parseInt: 문자열을 정수로 변환 parseFloat: 문자열을 실수로 변환

String

string: 텍스트 데이터를 나타내는 데이터 타입 "쌍따옴표"와 '따옴표' 모두 문자열 표현 가능

Escape Character: 쌍따옴표나 따옴표를 작성하려면 앞뒤로 '' 사용 역슬래시를 사용하려면 알뒤로 '\' 사용

syntaxError: 잘못된 문법이라서 발생하는 에러

Object

object: 다양한 데이터 유형을 포함할 수 있는 복합 데이터 타입

객체 생성: 객체는 중괄호 {}를 사용하여 생성, 속성을 콜론(:)으로 연결하여 정의

속성: 객체는 이름(키)과 해당 값을 가지는 속성의 집합으로 구성

속성 접근: 객체의 속성에 접근할 때는 점(.) 표기법 또는 대괄호([]) 표기법을 사용

undefined와 null

아무것도 저장되어 있지 않는 무의 상태

undefined: 변수나 속성이 선언되었지만 아무런 값도 할당되지 않았을 때 나타나는 값

null: 명시적으로 값이 없음을 나타내는 비어있는 상태

서브라임 텍스트 에디터 www.sublimetext.com

index.html

<html>
    <head>
        <meata charset="utf-8">
    </head>
    <body>
        This is a basic HTML page
    </body>
</html>

lecture01.js

alert("Hello Javascript");

브라우저에 경고메시지 출력

Developer Console 사용하기

console.log: 메세지를 출력하는 함수

lecture02.js

console.log("Hello developer console");
console.log("2");
console.log("3");

프로그램의 실행 순서는 순차적으로 실행된다. 콘솔에서 명령어를 직접 실행할 수 있다.

변수 선언과 초기화

변수: 정보를 저장해 주는 곳 초기화: 변수를 선언하고 처음으로 변수의 값을 저장하는 작업 변수 저장: ex) a=10;

변수의 활용

prompt: 사용자가 입력한 것을 저장

var name = prompt("이름을 입력해 주세요.");
console.log(name, "님 환영합니다.");

기본 자료형

자료형: 변수에 저장할 수 있는 값의 종류(Type)

typeof: 괄호 뒤의 변수가 어떤 자료형인지 알려주는 명령

• Medium Editor 를 사용하여 WYSIWYG를 통해 게시글 작성할 수 있도록 만들어보기

WYSIWYG

게시판 기능 중 하나

텍스트를 좀 더 굵게하거나 크게하거나 글을 쓸 때 좀 더 풍부하게 해주기

Medium Editor github: https://github.com/yabwe/medium-editor

Demo : https://yabwe.github.io/medium-editor/

articleapp/forms.py

class ArticleCreationForm(ModelForm):
    content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable'}))

    class Meta:
        model = Article
        fields = ['title', 'image', 'project', 'content']

For the latest version:

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

instantiate a new MediumEditor object:

<script>var editor = new MediumEditor('.editable');</script>

• 장고에서 제공하는 DB Query를 위한 기능, Field Lookup을 사용하여 사용자가 구독한 게시판의 게시글만 볼 수 있는 구독페이지를 만들어보기

filter

들어가는 조건들은 AND function이다

OR와 WHERE func을 사용하기 위해서는

1. Find user Subscripted projects
2. Find articles in projects

SQL문은 위 처럼 사용

여러가지 Field LookUps이 있음

• RedirectView 기반의 구독 시스템, 즉 SubscribeApp을 만들기

RedirectView 사용하는 이유

구독버튼을 누를 때 따로 입력창이 중간에 없어도 요청받자마자 처리할 수 있게 하기 위해

projectapp/views.py

    def get_context_data(selfself, **kwargs):
        project = self.object
        user = self.request.user

        if user.is_authenticated:
            subscription = Subscription.objects.filter(user=user, project=project)
        object_list = Article.objects.filter(project=self.get_object())
        return super(ProjectDetailView, self).get_context_data(object_list=object_list,
                                                               subscription=subscription
                                                                **kwargs)

template에서 subscription을 통해서 구독 정보가 있는지 없는지 확인할 수 있음

• Project와 Article을 연결하는 작업, 그리고 MultipleObjectMixin 을 이용해서 ProjectApp 의 Detail 페이지를 마무리 하고, 같은 방식으로 AccountApp 의 디테일 페이지도 수정한다

댓글을 만들면선 for문을 돌 때 target_article에 foreignkey로 연결되어 있는 comment를 all로 불러와서 for문으로 돌리기

하지만 무조건 다 가져오는 것 문제고 복잡도를 높이는 것도 문제 여러가지 작업을 하고 싶을 땐 한계가 있음

해결을 위해 In View Using Mixin를 사용

여러가지 오브젝트를 다룰 수 있게 만들어주는 mixin이다

projectapp/views.py

class ProfileDetailView(DetailView, MultipleObjectMixin):
    model = Project
    context_object_name = 'target_project'
    template_name = 'projectapp/detail.html'

    paginate_by = 25

    def get_context_data(selfself, **kwargs):
        object_list = Article.objects.filter(project=self.get_object())
        return super(ProjectDetailView, self).get_context_data(object_list=object_list, **kwargs)

• 게시판에 해당하는 projectapp을 구현

projectapp 만들고 update와 delete는 따로 admin이 가능하도록 설정하고 따로 하진 않을 것임

a:hover {
  color: black;  
}

어떤 요소에 마우스를 올렸을 때 어떤 행동을 할 건지를 설정해주는 값

• 모바일 기기로 직접 우리가 만든 사이트를 접속하여 모바일에서 실제로 보여지는 화면이 어떤지 확인해보고, 반응형 레이아웃을 위한 설정을 다루기.

모바일 앱으로 접속 python manage.py runserver = 127.0.0.1:8000

 python manage.py runserver 0.0.0.0:8080

templates/head.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

모바일 디바이스 설정

static/base.css

@media screen and (max-width:500px) {
    html{
        font-size: 13px;
    }
}

screen 사이즈가 500이하로 떨어지면 html 안에 있는 font-size를 16px 13px로 작아짐

• View 파트를 수정하지 않고 template 내에서 for 문을 통해 댓글을 시각화 하는 작업 및 CommentApp 나머지 부분을 마무리한다.

commetapp/migrations/views.py

class CommentCreateView(CreateView):
    model = Comment
    form_class = CommentCreationForm
    template_name = 'commentapp/create.html'


    def form_valid(self, form):

        temp_comment = form.save(commit=False)
        temp_comment.article = Article.objects.get(pk=self.request.POST['article_pk'])
        temp_comment.writter = self.request.user
        temp_comment.save()
        return super().form_valid(form)

    def get_success_url(self):
        return reverse('articleapp:detail', kwargs={'pk': self.object.article.pk})



@method_decorator(comment_ownership_required, 'get')
@method_decorator(comment_ownership_required, 'post')

class CommentDeleteView(DeleteView):
    model = Comment
    context_object_name = 'target_comment'
    template_name = 'commentapp/delete.html'

    def get_success_url(self):
        return reverse('articleapp:detail', kwargs={'pk': self.object.article.pk})

commentapp/templates/detail.thml

<div style="border: 1px solid; text-align: left; padding: 4%; margin: 1rem 0; bogrder-radius: 1rem;
            border-color: #bbb;">
    <div>
        <strong>
            {{ comment.writer.profile.nickname }}
        </strong>
        &nbsp&nbsp&nbsp
        {{ comment.created_at }}
    </div>
    <div style="margin: 1rem 0;">
        {{ comment.content }}
    </div>
    {% if comment.writter == user %}
    <div style="text-align: right">
        <a href="{% url 'commentapp:delete' pk=comment.pk %}"\\
            class="btn btn-danger rounded-pill">
            Delete
        </a>

    </div>
    {% endif %}