[ 웹 풀사이클 데브코스 TIL ] 4주차 Day 5 - REST API 디자인 및 구현

객체를 만들어 보자

let db = new Map();

let notebook = {
    productName : "Notebook",
    price : 2000000
}
let cup = {
    productName : "Cup",
    price : 3000
}
let chair = {
    productName : "Chair",
    price : 2000000
}
let poster = {
    productName : "Poster",
    price : 2000000
}

db.set(1, notebook) // 키로 밸류를 찾을 수 있는 한 쌍을 저장
db.set(2, cup)
db.set(3, chair)
db.set(4, poster)

이름이 db인 새로운 Map객체를 생성하고, db.set()메서드로 키-값 쌍을 추가 해 줍니다

+ 추가로 객체가 Map에 할당되는 방식을 찾아봤는데요, 만들어 놓은 객체의 실제 복사본이 Map에 저장되는 것이 아니라
객체를 참조 하는 것입니다!
db.set(1, notebook) 은 notebook 객체의 참조를 Map에 저장하기 때문에, db.get(1)을 호출하면 저장된 객체의 참조가 반환됩니다(ؑᵒᵕؑ̇ᵒ)◞✧ 

 

객체에 데이터(속성) 를 추가하는 방법

product.id = id

id값이 존재한다면, product에 db.get(id)를 담아서 화면에 productName, price를 뿌려줬어요.

근데 여기에 id 값도 추가 하고 싶다면!! 
product.id = id 한줄을 추가하면 됩니다. ==> 점 표기법

 

다른 방법도 있는데요, 

product["id"] = id

==> 대괄호 표기법

간단하게 id가 추가됩니다

 

그 외에도 Object.assign()을 사용한 객체 속성 추가 

Object.assign(product, { id: id });

Spread 문법 (...)

product = {...product , id: id};

 

🥲 express 설치 오류 해결... 🥲

이제는 오류가 안생기면 섭섭할 지경인데요, 

npm install express-generator -g

이 명령어를 입력하니까 경고만 뜨길래 당연히 설치가 제대로 된 줄 알았어요

아니나 다를까 ㅎㅎ? 

express를 입력하니까 

zsh: command not found: express

요게 떴습니다..

일단은 node.js버전을 최신으로 다운받고, npm update도 하고.. 

 

그래도 안되는 여러분들 !  터미널에 

npm list -g express-generator

를 입력해서 'express-generator'가 설치되어 있는지 확인하세요 !

 

음 일단 설치는 되어있네요, 그렇다면 다음으로 환경 변수 설정을 확인 해 볼게요.

echo $PATH

저는 시스템 PATH에 express-generator의 설치 경로가 포함되어 있지 않아서 설치 경로를 추가 해 줬습니다!

export PATH=~/.npm-global/bin:$PATH

이렇게..

 

성공 🥲

 

 

 

자바스크립트에서 함수를 선언하는 4가지 방법  ?

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

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

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

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

화살표 함수를 사용하는 이유가 뭘까?

눈으로 봤을때는 기존에 함수를 선언하는 방식보다 확연하게 짧은 것을 확인 할 수 있습니다 🙂

 

그렇다면 기능적인 면에서 일반 함수보다 뛰어난 점이 있을까요?

화살표 함수는 this 바인딩 문제를 방지 할 수 있습니다.

 

일반 함수의 경우, 함수가 호출될 때 this는 호출 방식에 따라 동적으로 결정되기 때문에 , 원하지 않는 객체를 가리킬 수 있습니다.
(특히 콜백 함수로 사용될 경우)

 

화살표 함수의 경우, 자체로 this를 생성하지 않고, 외부범위의 this를 그대로 사용하기 때문에 함수가 선언된 곳에 따라 this가 다르게 결정 되는 것이 아니라 함수가 정의된 범위 내에서 this를 상속받아 사용합니다!

 

예를들어

function Counter() {
  this.count = 0;

  setInterval(function() {
    this.count++; // this가 Counter 객체를 가리키지 않음
    console.log(this.count); // NaN 또는 오류 발생
  }, 1000);
}

const counter = new Counter();

위 코드의 경우 this가 전역 객체를 가리키고, Counter 객체의 count 속성을 가리키지 않아서 오류가 발생합니다!

 

function Counter(){
	this.count = 0;
    
    setInterval(() => {
    this.count++; // this가 Counter 객체를 가리킴
    console.log(this.count); // 1초마다 카운트 증가
    }, 1000);
}

const counter = new Counter();

 

 

상황에 따라 적절하게 함수를 사용하면 훨씬 가독성 좋은 코드를 작성 할 수 있을 것 같아요 (๑•̀∀•́ฅ ✧
오늘 하루도 고생하셨습니다 ㅎㅎ