map 자료형에 객체값 담기
저번 포스팅에서는, map의 {key => value} 구조에서 value에 string 자료형이 들어갔었다.
이번에는 value에 객체형태의 값을 넣어보도록 한다.
방식은 똑같다.
let one = {
name : "name1"
}
let two = {
name : "name2"
}
let three = {
name : "name3"
}
let four = {
name : "name4"
}
// db 인스턴스 생성 / key, value 설정
db = new Map()
db.set(1, one)
db.set(2, two)
db.set(3, three)
db.set(4, four)예제
지금까지 배운 내용을 바탕으로 express와 map 자료형을 이용하여,
URL에서 입력된 key 값으로 객체값을 출력해보도록 하자.
const express = require("express")
const app = express()
app.listen(3000)
app.get('/:id' , function (req, res){
let {id} = req.params
id = parseInt(id)
console.log(db.get(id))
// map에서도, 없는 key값을 불러오면 undefined 반환한다.
if (db.get(id) == undefined){
res.json({message : "undefined"})
}
else {
let number = db.get(id) // db.get(id)가 이미 json 형식이기때문에 중괄호 사용x
product.id = id // id라는 key값을 새로만들고, 변수 id를 값으로 사용.
// product 값은 db의 value 값의 "주소"를 "참조"하는 것이므로, 원본(db)에도 영향을 미침.
// `product.id = id` 와 `product["id"] = id` 는 같은 의미.
res.json(product)
}
})let a = b에서, b가 값이 존재할 때,
a에게는 3가지 중 하나의 방식으로 값이 전달된다.
1) 참조
a 가 b의 "주소값"을 참조한다.
b의 값을 복사해서 독립적으로 가지는 것이 아니라, a에는 b가 가지고 있는 값에 대한 "주소"를 가지는 것이다. 이 경우에는, b의 값이 변경하고 난 뒤에 a를 출력해보면 변경된 b의 값을 출력하는 것을 확인할 수 있다.
2) 얕은 복사
얕은 복사는 좀 복잡한 개념을 가지고 있다.
몇몇은 복사해서 독립적인 값으로 사용하는데, 몇몇은 참조를 이용해서 주소값으로 이용한다. 대표적인 예시로, Object.assign() 메소드가 있다.
예시코드를 살펴보자.
const db = new Map()
db.set(1, {key1: {subKey: "value1"}}) // db = { 1 => {key1 : {subKey: "value1"}}}
obj_copied = Object.assign({id : 1} , db.get(1))
obj_copied.key1.subKey = 5
console.log('------------')
console.log('Object.assign')
console.log(obj_copied) // { id: 1, key1: { subKey: 5 } }
console.log('------------')
console.log('db')
console.log(db) // Map(1) { 1 => { key1: { subKey: 5 } } }
console.log('------------')최상위 속성은 복사하여 독립적으로 사용하는 것이 맞지만,
그 아래의 객체속성들은 참조하게 된다.
3) 깊은 복사
a에게 b의 값을 완전히 복사하여 독립적으로 사용하게 한다.
이 경우, b의 값이 변경되더라도, a에게 아무런 영향을 끼치지 않는다.
위의 예제는 "참조" 방법을 택했다.
메모리 효율은, 참조 > 얕은복사 > 깊은복사 순으로 효율이 좋다.
따라서 상황에 알맞는 복사 방법을 택하여 코드를 설계해야한다.
express-generator 맛보기
express의 공식홈페이지에 접속해보자.
npm에서 express를 검색해서, 공식홈페이지 링크를 타고 넘어와도 좋다.
공식 홈페이지의 메인화면을 보면, express의 특징에 대하여 간략하게 나와있고,
express는 flexible routing framework 라고 한다.
즉, 내가 구현하고 싶은 웹서비스에 필요한 모든 도구들이 모여있다고 생각하면 되겠다.
Getting started 를 눌러서 Express generator 의 설치방법을 볼 수 있다.
안내된 대로, 터미널에 npm install -g express-generator와 express 을 입력하여 모듈을 설치한다.
완료가 되면, 해당 위치에 패키지들이 설치된 것을 확인할 수 있다.
www 파일을 열어서 확인해보면,
우리가 포트번호를 어떻게 설정할 수 있었는지, http.createServer()를 이용하지 않고 express로 서버를 열 수 있었는지 알 수 있다.
generator를 사용하기 전에는, 우리는
const express = require('express')
const app = express()
app.listen(3000) 등 모든 코드를 일일히 작성하였다.
이러한 구조가 미리 작성되어 있는 것이 generator로,
express로 개발을 할 때, 일정한 구조를 제공해주는 모듈이라고 생각할 수 있다.
그동안 우리는 터미널에 node 파일명을 입력해서 .js 파일을 실행하였었는데,
generator를 이용할 때는, npm start 명령어를 이용한다.
처음 npm start를 이용해보면 모듈들이 없다는 오류메시지가 출력된다.
이 때 필요한 명령어가 npm install 이다.
이 명령어는 package.json의 dependencies 에 있는 모든 모듈들을 자동으로 설치해준다.
+) JS에서 함수를 표현하는 4가지 방법
Javascript에서는 함수를 다양한 방식으로 정의할 수 있다.
예제를 통해 살펴보자.
// # 1
function add1(x,y) {
return x + y ;
}
console.log(`add1 : ${add1(1,1)}`) // 2
// # 2
let add2 = function(x,y) {
return x + y
}
console.log(`add2 : ${add2(2,2)}`) // 4
// # 3 ( arrow function )
const add3 = (x,y) => {
return x + y
}
console.log(`add3 : ${add3(3,3)}`) // 6
// # 4
let add4 = (x, y) => x + y
console.log(`add4 : ${add4(4,4)}`) // 84개의 함수는 모두 같은 기능을 하는 함수이며, 표현식만 다를 뿐이다.
특히 콜백함수, 익명함수를 작성할 때 화살표 모양의 함수표현식이 자주 사용된다.
(x,y) => {} 에서 괄호 안은 매개변수를 의미하고, 중괄호는 어떤 기능을 수행할 지에 대해 작성하면 된다.
