프로그래머스 풀스택 14

백엔드 기초: Node.js + Express 기본(5)

🌊 map object

💫 String만 담던 Map

💫 <실습>

🌊 express + 객체

💫 <실습>

product = db.get(id)
product["id"] = id // product.id = id

• id는 뒤에 있어도 상관없음!!(순서는 중요X)
  
• json 데이터를 전달받는 프론트엔드는 어차피 키값을 통해 데이터를 찾아서 상관이 없다!
  
  

🌊 express + map + 객체 추가 실습

💫 <실습>

🌊 express 구조 이해

💫 express 구조 이해

• express(편리한 모듈) = http 모듈 + @ / http보다 간결!
  
• 웹 프레임워크 = 내가 만들고 싶은 웹 서비스를 구현하는 데 필요한 모든 일을 틀 안에서 할 수 있는 것!!!
  
• npm install express-generator -g 을 통해 express의 기본 구조를 생성함!

💫 <Hello World 실습>

💫 <express generator로 생성한 폴더>
💫 <www 뜯어보기>

💫 www 파일에서 모듈을 가져오는 부분!

var app = require('../app');
var debug = require('debug')('express-base:server');
var http = require('http');

• debug : 콘솔창에 로그를 찍어주는 모듈
  
  

💫 www 파일에서 포트 설정 부분!

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

💫 www 파일에서 서버가 http에서 생성 부분!

var server = http.createServer(app);

💫 www 파일에서 포트, 에러 설정 부분!

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

• 포트로 리슨을 하고 / 에러가 나거나 이벤트 발생시 리슨 맵핑.
  
  —————- 💫 <app.js 뜯어보기>
  

var app = express();

• express 모듈을 직접 불러다가 app에다가 미리 담아둠!
  
  

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

• app.set 메소드에 이 프로젝트 셋팅 ~~이거 해두자(추가셋팅) / 우리가 수정할 경우는 잘 없음!
  
  

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

• 미들웨어(http 외 모듈)
  
  

module.exports = app;

• 다른 곳에서 사용할 수 있게 모듈화!
  
  

🌊 generator 돌려보기

• 프로젝트 규모가 커질수록 한땀 한땀 app.js을 작성하기엔 힘드니까
  
• 프로젝트의 기본적인 틀을 마련해줄 수 있는 express(프레임워크)를 통해 app.js을 사용하게 됨
  

npm install 을 하면 프로젝트 내에서 사용되는 필요한 dependencies을 다운받음!

💫 <index.js 뜯어보기>

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

• express 모듈을 가져오고
  
• router를 심어둠(분기처리)
  
• index라는 문자열을 렌더링해서 보낸다는 뜻!
  

💫 <실행>

• 이 화면은 views 폴더의 index.jade, error.jade로 만들어졌다고 생각하면 됨!!
  
  

🌊 자바스크립트 함수 4가지 종류

function add1(x, y) {
    return x + y
}

• 기본 형태
  
  

let add2 = function(x,y) {
    return x + y
}

• 모듈화
  
  

const add3 = (x,y) => {
    return x + y
} 

• function의 역할을 하는 =>(화살표 함수 arrow function)
  
  

var add4 = (x,y) => x + y

• 매우 축약된 형태
  
  

• 로그를 찍으면 다 같은 결과임을 알 수 있음!
  
  

🌊 느낀 점(YWT)

Y 일을 통해 명확히 알게 되었거나 이해한 부분(한 일)에 대해 정리 :
express의 파일 구조(www, app.js) / 자바스크립트의 함수 4가지 종류

W 배운 점과 시사점 :
map object 다시 찾아서 정리하기!

T 응용하여 배운 것을 어디에 어떻게 적용할지:
서버를 짤 때 효율적으로 짤 수 있도록 함!