백엔드 기초 3-9 ~ 4-2 (map, express, 화살표 함수)

3 나에게 Express란?

3-8 자바스크립트 Map(String)

1️⃣ Map이란?

• 아래는 데이터베이스의 Table인데 Map 또한 비슷한 형태를 띄고 있음
  
• Map또한 key:value로 이루어진 데이터의 집합이라고 보면 됨

2️⃣ Map 사용해보기

let db = new Map()
db.set(1, "NoteBook") // 키(id)로 밸류를 찾을 수 있는 한 쌍을 저장함
db.set(2, "Cup")
db.set(3, "Chair") 

console.log(db)
console.log(db.get(1)) // get을 쓰면 매개변수()가 꼭 필요함
console.log(db.get(2))
console.log(db.get(3)) // 밸류값을 하나씩 꺼내서 사용할 수 있음

// 키:밸류 쌍으로 저장하지만, 저장 결과를 보면 : 대신 =>를 사용

• 신입사원이 꼭 알아야 하는 데이터 베이스
  

3️⃣ Map 고도화 해보기

• map 객체를 생성하고 로그로 출력을 확인해 보자

let db = new Map()
db.set(1, "NoteBook") // 키(id)로 밸류를 찾을 수 있는 한 쌍을 저장함
db.set(2, "Cup")
db.set(3, "Chair") 
db.set("3", "FakeChair")

console.log(db)
console.log(db.get(1)) // get을 쓰면 매개변수()가 꼭 필요함
console.log(db.get(2))
console.log(db.get(3)) // 밸류값을 하나씩 꺼내서 사용할 수 있음
console.log(db.get("3")) // db에서는 문자열 숫자를 정수로 인식하지 않음 주의해야 함 

// 키:밸류 쌍으로 저장하지만, 저장 결과를 보면 : 대신 =>를 사용

• Map을 express에 연결해서 api를 받아오는 것을 확인해보면 특징들을 알 수 있음

const express = require('express')
const app = express()
app.listen(1234) 

app.get('/:id', function (req, res) { // 코드를 작성할 때 id 값을 받을 경우

  let {id} = req.params // 원래 {id} 변수를 const로 지정하였으나 뒤에서 id를 정수로 변경하게 되어 let으로 선언
  console.log(id) // id 값을 받을 경우 id 값이 잘 들어오는지 테스트 먼저 해야함
  id = parseInt(id) // db에서는 문자열 숫자를 정수로 인식하지 않으므로 "숫자" -> 정수

  if (db.get(id) == undefined){ // 이전에 배운 여러객체들과는 다르게 if문 없이 사용도 가능하지만, db에 존재하지 않는 id의 예외처리를 위해 if else문 작성
    res.json({
      message : "없는 상품이네영"
    })
  } else {
    res.json({ // 웹페이지 뒤에서 받아오는 id 값을 그대로 표출하고 get으로 그대로 가져오니 코드가 간단해짐
      id : id,
      productName : db.get(id)
    }) 
  }
})


let db = new Map()
db.set(1, "NoteBook") 
db.set(2, "Cup")
db.set(3, "Chair") 

---

3-9 Map object

1️⃣ Map을 Table처럼 만들어보자

• Value값을 문자열로만 저장하는 것이 아닌 테이블 형태로 더 많은 데이터를 담아볼 수 있음
  

• Map에 문자열만 저장하는 것이 아닌 객체처럼 여러 값들을 저장하면 됨
  

• 방법은 쉬운 편 그냥 객체를 만들면 됨

let db = new Map()

let notebook = {
  productName : "NoteBook",
  price : 2000000
}

let cup = {
  productName : "Cup",
  price : 7000
}

let chair = {
  productName : "Chair",
  price : 100000
}

let poster = {
  productName : "Poster",
  price : 20000
}

db.set(1, notebook) // 문자열이었던 것들도 변수로 변경해줌
db.set(2, cup)
db.set(3, chair) 
db.set(4, poster)

2️⃣ Express + 객체

• express와 객체를 합쳐 연동하여 표출해보자(Express와 Map의 연동은 db 연동과 비슷함)

const express = require('express')
const app = express()
app.listen(1234) 

app.get('/:id', function (req, res) { 
  let {id} = req.params
  id = parseInt(id)
  res.json(db.get(id)) // db.get(id) 자체가 키:밸류이기 떄문에 {}로 양식을 만들지 않아도 됨
})

let db = new Map()
let notebook = {
  productName : "NoteBook",
  price : 2000000
}

let cup = {
  productName : "Cup",
  price : 7000
}

let chair = {
  productName : "Chair",
  price : 100000
}

let poster = {
  productName : "Poster",
  price : 20000
}

db.set(1, notebook) 
db.set(2, cup)
db.set(3, chair) 
db.set(4, poster)

• map 객체를 좀 더 간편하게 사용하고 객체를 추가하는 법

app.get('/:id', function (req, res) { 

  let {id} = req.params
  id = parseInt(id) // "숫자" -> 정수

  if (db.get(id) == undefined){
    res.json({
      message : "없는 상품이네영"
    })
  } else {
    product = db.get(id) // 상품이라는 변수처럼 선언이 가능함
    product.id = id // 객체를 이런식으로 추가할 수 있음
    product["id"] = id // 배열처럼 대괄호로 추가해도 됨
    res.json(product) // 위에서 db에서 가져오는 id를 product로 선언하여 간편해짐
  }
})

• 객체가 잘 나온 것을 확인할 수 있음
• 키:밸류의 쌍을 가진 자료는 앞뒤 순서가 중요하지 않음, 어차피 json데이터를 전달 받은 프론트엔드는 키값에 따라 밸류를 찾기 때문임

3️⃣ express + map + 객체 추가 실습 : 유튜버

// express 모듈 세팅
const express = require('express')
const app = express()
app.listen(2223)

// 데이터 세팅
let youtuber1 = {
  title : "조코딩",
  sub : "609k",
  videonum : "111개"
}

let youtuber2 = {
  title : "침착맨",
  sub : "2270k",
  videonum : "6600개"
}

let youtuber3 = {
  title : "아무개",
  sub : "300k",
  videonum : "50개"
}

let db = new Map()
db.set(1, youtuber1)
db.set(2, youtuber2)
db.set(3, youtuber3)


// REST api 설계
app.get('/youtuber/:id', function (req, res){
  let {id} = req.params
  id = parseInt(id) // id를 그냥 쓰면 숫자가 아닌 문자열로 받기 때문에 정수로 바꿔줌


  const youtuber = db.get(id) // youtuber 로 db.get을 정리하여 중복을 없앰(가독성 증가)
  if (youtuber == undefined) {
    res.json({
      message : "정보를 찾을 수 없습니다"
    })
  } else {
    res.json(youtuber)
  }

})

---

4 Express에게 집착해보기

4-1 Express 이해하기

1️⃣ express 구조 이해해보기

• 복잡한 기능을 하는 거 같은데 코드는 간단하게 짜여짐 express는 어떤 모듈일까? : http에서 복잡하게 적었던 내용을 간결히 만들어준 모듈
  

• 각각의 모듈은 어딘가에 따로 구축이 되어있고 npm은 이를 모아둔 인스톨러(express는 홈페이지가 따로 있음 https://expressjs.com)

• Express는 웹 서비스를 만드는데 필요한 기본적인 것들을 틀 안에 담아둔 것
  

• 이전에 배운 프레임 워크의 개념
  

• Express의 예재 : 포트넘버 지정과 함께 화살표 콜백함수로 콘솔로그를 찍어주는 함수를 전달함
  

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

• 아래와 같은 결과를 확인할 수 있음
  
  

• 어플리케이션 골격을 신속하게 작성한다는 것은, express로 하나의 프로젝트를 하기 위해서 기본적인 골격을 만들어 준다는 것
  

• 실습을 위해 새 폴더를 생성
  

• 만약 전역(-g) 설치 과정에서 에러가 발생할 경우, 'sudo'로 강제 설치

  sudo npm install express-generator -g

• express 명령어로 패키지 설치 완료
  

2️⃣ WWW, app.js 흝어보기

• bin의 WWW은 무엇일까? : 여러가지 모듈이 내제되어 있음
  
• 이 중 핵심적인 모듈은

var app = require('../app');
var debug = require('debug')('express-base:server'); // 콘솔창에 디버그 로그를 찍어줌
var http = require('http');

var port = normalizePort(process.env.PORT || '3000'); 
app.set('port', port);// 포트를 설정할 수 있는 모듈, 기본은 3000이지만 우리가 바꾸는 대로 사용이 가능함

var server = http.createServer(app); // create server를 안해도 되게 만들어준 모듈

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이라는 메서드에 프로젝트 추가 세팅을 해주는 내용
app.set('view engine', 'jade'); // 뷰 엔진에 대한 내용은 추후 리액트(프론트엔드)에서 다루게 될 것

app.use(logger('dev')); // express는 http 모듈을 기반으로 여러가지 모듈을 감싸 만든 편한 모듈인데 http를 제외한 다른 모듈을 '미들 모듈'이라 함 app.use가 미들 모듈에 해당
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

module.exports = app; // 이를 통해 미들 모듈을 다른 js에서 쓸 수 있도록 모듈화를 해줌

3️⃣ generator 돌려보기

• generator 는 무엇인가? 프로젝트는 다른 사람들과 같이 만들기 떄문에 app.js를 만들 때 아래와 같이 우리가 직접 만들기 보다는 express의 app.js를 사용하는 것이 좋음

const express = require('express')
const app = express()
const port = 1234

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

• Express가 잘 돌아가는 지 확인하기 위해 app.js를 실행해줌, 실행이 안된다면 npm start로 터미널에서 실행
  

---

4-2 자바스크립트 함수의 종류

1️⃣ 화살표 함수는?

• 아래 함수의 4종류는 모두 같은 의미임

function add1 (x,y) { // 함수의 기본 틀
  return x+y
}

let add2 = function (x,y) { // 함수의 모듈화를 위해 변수를 익명함수로 선언
  return x+y
}

const add3 = (x,y) => { // 화살표 함수의 표현 방식
return x+y
}

const add4 = (x,y) => x+y // 화살표 함수는 더 축약할 수 있음