((TIL)) 프리온보딩 백엔드 사전스터디 : Node.js 1

intro

• kakao oauth2 개념 정리하기
• 노드 세션 2번까지 시청하기
• 인스타그램 진행하던 프로젝트 READ, UPDATE, DELETE 기능 구현하기

노드 프로젝트 초기 셋팅은 지난달에만 20번 넘게 해봤다.. 두달배웠다고 장고 전문가는 아닌데 장고와 전혀 다른식의 동작방식이 이해하기 참 어려웠다. 1차 프로젝트 리빌딩도, 솔직히 다른 사람 코드를 보면서 따라쳤을 뿐, 왜 그런 코드가 필요하고 컨트롤이 아닌 서비스에서 작성해야하는지 정확히 몰랐다. 그래서 개념정리를 하기 위해 인스타그램을 혼자 만들고 있었는데 하길 잘했다 싶다.

전문적이진 아니지만.. 그래도 API를 만들 수 있다는 자신감이 생겼다. 오늘부터는 프리온보딩 백엔드를 위한 노드 영상이 주어졌다. 내가 몰랐던 ORM 개념이 등장하고 또 어려워지겠지! 일단 게시글 CRUD까지 기능구현완료했으니 인스타그램은 제껴두고, 해당 영상 잘 따라가야겠다!!

오늘 그 영상을 보며 Node.js를 공부하는데, 처음 본 문법을 발견했다. map과 . . . 은 도대체 뭘까 

app.get('/posts', (req, res) => {
    const postsWithUserName = posts.map((post) => {
        const user = users.find((user) => post.userId === user.id);

        return {
            ...post,
            userName : user.name
        }
    })
    res.json({ data : postsWithUserName })
})

 

map

map은 콜백함수를 각각의 요소에 대해 한번씩 순서대로 불러서 그 함수의 반환값으로 새로운 배열을 만든다.

    arr.map(callback(currentValue[, index[, array]])[, thisArg])

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

...(dot dot dot, three dots)

1. Rest Operator

객체나 배열에 대입하고 남은 나머지값을 변수에 할당할 때 사용한다.

const test = { name : '코딩', age : 3, gender : '여', address : '서울시'};
const { name, age, ...rest} = test;

console.log({ name, age, ...rest} ) // { name: '코딩', age: 3, gender: '여', address: '서울시' }
console.log(rest)   // { gender: '여', address: '서울시' }

2. spread operator

객체 혹은 배열의 값을 합치거나 복사할 때 사용한다.

function myFunc(a, b, ...params) { 
  console.log(a);
  console.log(b);
  console.log(params);
}

const inputs = ["가", "나", "a", "b", "c"];
myFunc(...inputs); 
// "가"
// "나"
// ["a", "b", "c"]

const apple = ['Banana', 'Tomate', 'Apple'];
const drink = ['smoothie', 'juice', 'milk'];

const menu = [...apple, 'waffle', ...drink];

console.log(menu); 
// 'Banana', 'Tomate', 'Apple', 'waffle', 'smoothie', 'juice', 'milk'