• 강의 / 과제
• 알고리즘 문제 풀기
• WIL 4개 작성 해보기
• 코어 자바스크립트 스터디 참여
• 사이드 프로젝트 v2배포
• 타입 스크립트 스터디 개설

🚩 진행한 것

강의듣기

• React

과제

• React 네비게이션 만들기

스터디 참여하기

• 코어자바스크립트 스터디 (1회독을 완료하고 2회독을 하기로 했다)
• 타입스크립트 스터디 개설 (주 1회 참여)

사이드 프로젝트 v2 배포

• 스터디원들과 함께 v2를 무사히 배포했다

🚩 못한 것

1. WIL 작성하기

작성해야 하는데... 정리하는데 시간이 오래 걸리니까 작성을 계속 미루게 된다. 이제는 시간이 있을때 조금씩 해봐야 겠다.

🚩 9월 목표

• 팀 프로젝트
• 타입스크립트 스터디
• 코어 자바스크립트 스터디(2회독)
• 이력서 스터디
• 사이드 프로젝트 v3 개발

git hub에서 생성한 Issue가 PR시 종료되게 하려면close ${이슈번호} 를 붙이면 자동으로 Close되지만 이것은 default(main) 브랜치에서만 적용이 가능했다. 이런 문제를 해결하고 싶어 방법을 찾다가 git action을 사용해서 자동화 하는 방법이 있어 소개해보려고 한다.

git action 스크립트

name: Close associated issue

on:
  pull_request:
    branches:
      - dev
    types:
      - closed

jobs:
  close-issue:
    runs-on: ubuntu-latest
    steps:
    - name: Close associated issue
      run: |
        PR_NUMBER=${{ github.event.pull_request.number }}
        PR_URL="https://api.github.com/repos/${{ github.repository }}/pulls/$PR_NUMBER"
        PR_BODY=$(curl -s -H "Authorization: token ${{ secrets.ACTION_TOKEN }}" $PR_URL | jq -r '.body')
        ISSUE_NUMBER=$(echo $PR_BODY | grep -oE "close #[0-9]+" | tr -d 'close #')
        if [[ ! -z "$ISSUE_NUMBER" ]]; then
          curl -s -H "Authorization: token ${{ secrets.ACTION_TOKEN }}" -X PATCH "https://api.github.com/repos/${{ github.repository }}/issues/$ISSUE_NUMBER" -d '{"state": "closed"}'
        fi
      shell: bash

PR_NUMBER

Git hub api를 사용해 PR 이슈 번호를 가져온다.

PR_URL

PR 내용을 가져온다

PR_BODY

PR 내용에서 Body값을 가져온다

ISSUE_NUMBER

정규 표현식을 사용해 body에서 close #${이슈번호}를 가져온다

이슈 번호가 있는 경우 이슈의 상태를 close한다.

${{secrets.ACTION_TOKEN }}

Git secrets token이 필요하다.

코드

깃 주소

사용해 보기

워크 플로우 생성시 Marketplace에서 Automation Issue Closed 검색

🚩 7월 목표

• 강의/과제
• 알고리즘 문제 풀기
• 테스트 주도 개발 읽기
• TIL 15개 작성 해보기
• 스터디 참여하기
• 사이드 프로젝트 참여

🚩 진행한 것

강의듣기

• JavaScript 심화
• CSS
• Vue

과제

• Notion 클론 코딩
• 고양이 사진첩 만들기
• CSS 클론 페이지

테스트 주도 개발(TDD) 읽기

7장 까지 읽었다. 블로그에 정리해야하는데 언제 정리하지?...

스터디 참여하기

• 코어자바스크립트 스터디 (4장 콜백 까지 완료)

사이드 프로젝트 참여

• 리엑트를 사용해서 개발진행 중(8/4일 배포예정)

🚩 못한 것

1. TIL 작성하기

작성해야 하는데... 정리하는데 시간이 오래 걸리니까 작성을 계속 미루게 된다. 아무래도 TIL은 어려울 거 같고 WIL을 작성해 봐야겠다.

2. 알고리즘 문제 풀기

알고리즘... 해야지 8월은 아침마다 하루 1문제씩 풀어봐야겠다.

🚩 8월 목표

• 강의 / 과제
• 알고리즘 문제 풀기
• 테스트 주도 개발 완독하기
• WIL 4개 작성 해보기
• 코어 자바스크립트 스터디 참여
• 사이드 프로젝트 배포

CallBack 함수란?

함수를 호출할때 함수 인자로 다른 함수를 넘겨주어 내부에서 콜백함수를 실행시키는 방식 입니다.

ex) 예제 코드

var newArr = [10,20,30].map(function (currentValue,index){
  console.log(currentValue,index);
  return currentValue + 5;
});

제어권

var count = 0;
var clear = function () {
  if(++count > 4) clearInterval(timer);
}
var timer = setInterval(clear, 300)

setInterval함수를 호출할때 clear는 setInterval 내부에서 cbFunc는 함수는 0.3초마다 반복해서 수행이 된다.

이를 통해 clear함수의 제어권과 호출은 setInterval에 있음을 알 수 있다.

인자

예제2)map

var newArr = [10,20,30].map(function (currentValue,index){
  console.log(currentValue,index);
  return currentValue + 5;
});

위의 코드에서 map 함수의 콜백함수를 호출하기 위해서는 map메서드에서 정의된 인자와 순서가 있다.

제어권을 넘겨받은 코드(map)는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가진다.

this

setTimeout(function() {console.log(this);}, 300) //window

[1,2,3,4,5].forEach(function(x) {
  console.log(this)                                //window
})

document.body.innerHtml += `<button id="a">클릭</button>`;
document.body.querySelector('#a').addEventListener('click', function(e) {
  console.log(this, e);    //button
});

콜백함수도 함수이기 때문에 this는 기본적으로 전역객체를 참조하지만 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다.

콜백 함수는 함수다

//1
var obj = {
  vals: [1, 2, 3],
  logValues: function (v, i) {
    console.log(this, v, i)
  }
}
obj.logValues(1, 2) // {vals: [1, 2, 3], logValues: f} 1 2
//2
[4, 5, 6].forEach(obj.logValues) // Window  {...} 4 0

콜백 함수도 함수이기 때문에 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 ‘함수’로서 호출된다.

1) obj 객체의 logValues는 메서드로 정의된다. 따라서 this는 object를 가르킨다. 2) obj 객체의 logValues는 메서드는 forEach에 의해 콜백이 함수로서 호출이 된다. 이때 별도로 this를 지정하지 않았으므로 함수 내부에서의 this는 전역객체를 바라본다.

콜백 함수 내부의 this에 다른 값 바인딩 하기

객체의 메서드를 콜백 함수로 전달한 경우 메서드는 해당 객체를 this로 바라볼 수 없게 된다. 객체의 메서드가 객체를 바라보게하고 싶다면 다음과 같은 방법을 사용한다.

1. 클로저 사용

   var obj1 = {
   name: 'obj1',
   func: function() {
    var    self = this;
    return function() {
      console.log(self.name)
    };
   }
   } 
   var callback = obj1.func();
   setTimeout(callback,1000)

   func메서드 내부에서 self에 this를 담고 클로저를 사용해서 this를 구현한 예제입니다.(현재는 비추천하는 방식)

2. 객체자체를 호출

   var obj1 = {
   name: 'obj1',
   func: function() {
    console.log(obj1.name)
   }
   }
   setTimeout(obj1.func, 1000)

   func 메서드에서 객체를 직접 명시해서 호출하는 방식이다. 간결하고 직관적 이지만 재사용성이 떨어지게 된다.

3. 객체복사 및 call메서드 사용

   var obj1 = {
   name: 'obj1',
   func: function() {
    var    self = this;
    return function() {
      console.log(self.name)
    };
   }
   } 
   var obj2 = {
   name: 'obj2',
   func: obj1.func
   }
   var callback2 = obj2.func();
   setTimeout(callback2,1000);
   

var obj3 = {name: 'obj3'}; var callback3 = obj1.func.call(obj3); setTimeout(callback3,1000);

해당 방법은 obj1의 func함수를 재사용 할때 해당 함수가 재사용할 객체를 바라보게 하는 방법이다. obj2의 경우는 obj1에서 self를 통해 this를 설정해 obj1의 name이 출력된다.

이를 해결하기 위해 **call**를 사용해 this를 obj3을 가르키도록 우회하였다. 

4. bind 함수 사용
```javascript
var obj1 = {
  name: 'obj1',
  func: function() {
    console.log(this.name);
  }
}
setTimeout(obj1.func.bind(obj1),1000);

var obj2 = { name: 'obj2' }
setTimeout(obj1.func.bind(obj2),1000);

바인드 함수를 사용해 this를 지정해주는 방법이다. 위의 클로저보다 훨씬 코드의 가독성이 올라갔다.

콜백지옥

콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상으로, 자바스크립트에서 흔히 발생하는 문제이다.

주로 이벤트 처리나 서버 통신과 같이 비동기적인 작업을 수쟁하기 위해 이런 형태가 자주 등장한다.

콜백지옥의 예시

setTimeout(
  function (name) {
    var coffeeList = name
    console.log(coffeeList)

    setTimeout(
      function (name) {
        coffeeList += ', ' + name
        console.log(coffeeList)

        setTimeout(
          function (name) {
            coffeeList += ', ' + name
            console.log(coffeeList)
            setTimeout(
              function (name) {
                coffeeList += ', ' + name
                console.log(coffeeList)
              },
              500,
              '에스프레소',
            )
          },
          500,
          '카페라떼',
        )
      },
      500,
      '카페모카',
    )
  },
  500,
  '아메리카노',
)

해결방법

1. 기명함수로 전환

   var coffeeList = "";
   

var addEspresso = function (name) { coffeeList = name; console.log(coffeeList); setTimeout(addAmericano, 500, "아메리카노"); };

var addAmericano = function (name) { coffeeList += ", " + name; console.log(coffeeList); setTimeout(addMocha, 500, "카페모카"); };

var addMocha = function (name) { coffeeList += ", " + name; console.log(coffeeList); setTimeout(addLatte, 500, "카페라떼"); };

var addLatte = function (name) { coffeeList += ", " + name; console.log(coffeeList); };

setTimeout(addEspresso, 500, "에스프레소");

이 방식의 코드는 함수 선언과 함수 호출만 구분할 수 있다면 위에서부터 아래로 순서대로 읽어내려갈 수 있어 가독성이 높다. 또한 변수를 최상단으로 끌어올림으로써 외부에 노출되는 문제가 있지만 즉시 실행 함수 등으로 감싸면 간단히 해결된다.

하지만 코드명을 일일이 따라다녀야 하고 일회성 함수를 전부 변수에 할당하는 것은 효율적이지는 않은 코드다.

2. 비동기 작업의 동기적 표현 - Promise
```javascript
var addCoffee = function (name) {
    return function (prevName) {
        return new Promise(function (resolve) {
            setTimeout(function () {
                var newName = prevName ? (prevName + ', ' + name) : name;
                console.log(newName);
                resolve(newName);
            }, 500)
        })
    }
}
addCoffee('에스프레소')()
    .then(addCoffee('아메라카노'))
    .then(addCoffee('카페모카'))
    .then(addCoffee('카페라떼'));

ES6의 Promise를 이용한 방식으로 new 연산자와 함께 호출한 Promise는 호출할 때 바로 실행되지만 resolve 또는 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행 되지 전까지는 다음(then) 또는 오류 구문(catch)로 넘어가지 않는다. 따라서 비동기 작업이 완료되어야만 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능하다.

3. Generator

   var addCoffee = function (prevName, name) {
   setTimeout(function () {
    coffeeMaker.next(prevName ? prevName + ', ' + name : name)
   }, 500)
   }
   

var coffeeGenerator = function* () { var espresso = yield addCoffee('', '에스프레소') console.log(espresso) var americano = yield addCoffee(espresso, '아메리카노') console.log(americano) var mocha = yield addCoffee(americano, '카페모카') console.log(mocha) var latte = yield addCoffee(mocha, '카페라떼') console.log(latte) }

var coffeeMaker = coffeeGenerator() coffeeMaker.next()

Es6의 Generator를 사용한 방법으로 *이 붙은 함수가 Generator 함수이다. 
Generator를 실행하면 Iterator가 반환되고 Iterator는 next라는 메서드를 가지고 있다.

next 메서드를 실행하면 yield에서 실행을 멈추고 다시 next를 호출하면 그 다음 yield를 만나기 전까지 코드가 수행된다. 


4. Promise + Async/await
```javascript
var addCoffee = function (name) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(name)
    }, 500)
  })
}
var coffeeMaker = async function () {
  var coffeeList = ''
  var _addCoffee = async function (name) {
    coffeeList += (coffeeList ? ',' : '') + (await addCoffee(name))
  }

  await _addCoffee('에스프레소')
  console.log(coffeeList)
  await _addCoffee('아메리카노')
  console.log(coffeeList)
  await _addCoffee('카페모카')
  console.log(coffeeList)
  await _addCoffee('카페라떼')
  console.log(coffeeList)
}

coffeeMaker()

ES2017에서 가독성도 뛰어나고, 작성법도 간단한 async/await 기능이 추가되었다. 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고 비동기 작업이 필요한 위치마다 await를 표기하면 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve 된 이후에야 다음으로 진행하게 된다.

🚩 6월 목표

1. 강의듣기
2. 과제
3. 스터디 참여
4. TIL 작성하기
5. 알고리즘 문제 풀기
6. 테스트 주도 개발 읽기(TDD)

🚩 진행한 것

강의듣기

• 자료구조
• CS
• JavaScript 기초 문법

  과제

• TodoList 구현하기
• 트라이를 사용한 자동완성 기능 구현하기
• 노션 클론 코딩(ing~)

테스트 주도 개발(TDD) 읽기

• 블로그 정리하기

스터디 참여

• React 스터디
• 코어자바스크립트 스터디

🚩 못한 것

1. TIL 작성하기

TIL 한 번에 너무 많은 내용을 닮으려고 하다 보니 글을 쓰다가 내가 지치게 돼서 작성을 못한 거 같다. 7월에는 한 개의 주제를 가지고 정리를 해보고 매일은 아니더라도 조금씩 작성해 봐야겠다.

2. 알고리즘 문제 풀기

어느새 부터 문제가 안 풀리다 보니 문제 풀기에 흥미를 잃은거 같다.이 부분을 해결하기 위해 아침 시간을 활용해서 한 문제씩 풀어봐야 겠다.

🚩 7월 목표

• 강의 / 과제
• 알고리즘 문제 풀기
• 테스트 주도 개발 읽기
• TIL 15개 작성 해보기
• 스터디 참여하기
• 사이드 프로젝트 참여

const Dollar = require('./Dollar.js')

test('testMultiplication', () => {
    let five = new Dollar(5);
    five.times(2);
    expect(five.amount).toBe(10);
});

위 테스트 코드는 실행조차 되지 않는다.

1. Dollar 생성자 함수가 없음
2. 생성자가 없음
3. times 메서드가 없음
4. amount 필드가 없음

Dollar 생성자 함수 생성

function Dollar(amount) {
    this.amount = amount;

    this.times = (multiplier) => {
        this.amount *= multiplier
    }
}

테스트 코드 수행

🚩 들어가기전

OT 이후 진짜 데브 코스 시작이다. JavaScript 주요 문법을 공부하였다. 공부를 하면서 내가 어디까지 알고 있고 어떤 부분에서 헷갈려 하는지 다시 한번 짚게 되어 좋았다.

🚩 오늘 공부한 것

1. 변수, 호이스팅, 상수, 자료형, 메모리, 2. 표현식과 연산자 3. 흐름 제어 4. 배열과 객체 5. 스코프와 클로저

🚩 변수, 상수, 자료형 메모리

🏁 변수

변수란

수학에서 변수는 변하는 값을 의미하지만 컴퓨터 공학에서 변수는 개발자가 직접 메모리에 값을 할당하는 것을 의미한다.

변수 선언방법

자바스크립트에서 변수를 선언하는 방법은 var, let이 존재한다. var는 ES6이전에 나온 선언 방법으로 호이스팅으로 인해 권장하지 않으며 window 객체의 프로퍼티 이다. let은 ES6이후에 나온 선언 방법으로 변수를 선언 시 권장하는 키워드이다.

let data1 = 1;
var data2 = 2;

🏁 상수

상수란

상수는 변하지 않는 값을 의미한다. 즉 한번 할당을 했을 경우 재할당이 금지된다.

상수 선언방법

const 키워드를 사용한다. ES6이후에 추가되었다.

const data = 1;

const와 재할당

const 키워드로 선언한 상수에 재할당을 했을 경우 다음과 같은 에러가 발생하게 된다.

🏁 자료형

자바스크립트는 원시 타입과 참조 타입으로 나누어진다.

• 원시타입

• 객체 타입
  • Object : Key, value로 여러 값을 가지는 타입

    const person = {name: '홍길동'}

  • Array : 인덱스를 통해 값에 접근할 수 있음

    let arr = [1,2,3,4,5]

  • function

    let func = function (){};

🏁 메모리

가비지 컬렉터

일반적으로 메모리는 할당 -> 사용 -> 해제의 순서를 이룬다. 변수를 생성 했을때 변수는 메모리에 할당이 되고 값을 넣어 사용한다. 메모리의 공간은 한정되어 있기 때문에 사용이 완료되었을 때는 할당된 공간을 해제해야 한다.

우리가 사용하는 자바스크립트는 가비지컬렉터가 있어 개발자가 직접 메모리에 접근하지 않아도 가비지컬렉터가 더이상 사용되지 않는 값을 메모리에서 해제시킨다.

원시값의 메모리 참조

  let a = 1;
  let b = a;

즉 위 코드를 실행했을 때 메모리 영역은 그림처럼 30이라는 값이 복사되어 서로 다른 메모리에 할당되는 줄 알고있었다. 그런데 질문을 통해 값은 하나의 주소에서 참조되고 있음 알게되었다.(답변해주신 멘토님 정말 감사합니다!!)

위 사진에서 변수 a, b는 다른 주소이고 참조하고 있는 값 1은 @173 주소를 참조하는 것을 알 수 있었다.

CallStack/Heap

자바스크립트엔진은 CallStack영역과 Heap영역으로 이뤄져 있으며 원시타입과, 참조타입을 나누어 할당한다.

CallStack: 원시타입 Heap : 참조타입

const a = 1;
const b = 10;
const c = [];
c.push(1);
c.push(2);

위 코드를 실행 했을때 순차적으로 CallStack에 쌓이며 배열의 경우 Heap 영역의 배열주소를 참조한다.

🏁 호이스팅

호이스팅이란?

호이스팅이란 var키워드, 함수선언문을 사용했을때 자바스크립트 엔진에 의해 선두로 끌어올려 초기화 되는 것을 의미한다.

• var 키워드 사용

    console.log(score);
    var score;

  위 코드 예제에서 score를 선언하기 전에 먼저출력을 했지만 호이스팅으로 인해 에러가 발생하지 않는다.

• function 선언문

  console.dir(add);
  console.log(add(2, 5));
  function add(x, y) {
   return x + y;
  }

  위 예제 역시 add 함수가 선언하기 전에 먼저 함수를 실행시켰지만 호이스팅으로 정상적으로 실행된 것을 확인할 수 있다.

• let,const에서는? let과 const에서는 호이스팅이 발생하지만 호출전에 초기화 되지 않아 참조에러가 발생하게 된다. 이것을 일시적 사각지대(TDZ:Temporal Dead Zone)라고 하며 아래 예제에서 확인해 보자

  

왜 발생하는 걸까?

호이스팅이 발생하는 이유를 알기 위해 실행 컨텍스트 알아야 하지만 이 글에서 작성하기에는 너무 길어 해당 내용은 따로 정리 중이다.

🚩 표현식과 연산자

🏁 표현식

표현식이란?

어떠한 결과가 값으로 평가되는 식을 의미한다.

예제

//리터럴 표현식
'Hello'

//식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

//연산자 표현식10 + 20
sum = 10
sum !== 10

//함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

🏁 연산자

할당 연산자

오른쪽에 표현식을 왼쪽 피연산자에 할당하는 연산자

비교 연산자

좌측과 우측의 피연산자를 비교하는 연산자 true,false를 반환한다.

비트 연산자

비트를 조작하는 연산자 (논리합의 경우 파이프 기호가 테이블 마크다운으로 인해 적용되지 않아 l로 대체)

논리 연산자

참과 거짓을 검증하는 연산자

삼항 연산자

조건? 참 : 거짓 형태를 가지는 연산자

let x = 2;
let result = x % 2 ? '홀수' : '짝수';

관계 연산자

객체의 속성이 있는지 확인하는 연산자

const person = {
    name:"TEST"
}
console.log("name" in person); // true
console.log("address" in person); // false

typeof

피연산자의 타입을 반환하는 연산자(문자열로 반환된다);

const x = 10;
const y = "string";
const z = false;

console.log(typeof x); // number
console.log(typeof y); // string
console.log(typeof z); // boolean

🚩 흐름 제어

🏁 조건문

if(조건){참}

조건이 맞을 때만 실행되는 문법이다. 소괄호 안에 조건을 넣고 조건이 참인 경우 중괄호 안의 내용을 실행시킨다.

예제

if(true){
   console.log('hello');
}

주의사항

false 뿐만 아닌 null,0,NaN,undefined,'' 도 거짓이다.

if(조건){참}else{거짓}

if문과 같지만 거짓일 경우 실행하는 else가 추가되었다.

예제

if(false){
  console.log('true');
}else{
  console.log('false')
}

if(조건){참}else if(다음 조건){참}else{거짓}

if문과 같지만 거짓일 경우 한번더 조건을 체크 후 else로 빠지게된다.

if(false){
  console.log('false');
}else if(true){
  console.log('true')
}else{
  console.log('false');
}

switch문

괄호 안 값에 따라 분기되는 문법

예제

const grade = "B";
switch (grade) {
  case "A":
    console.log("A grade");
    break;
  case "B":
    console.log("B grade");
    break;
  case "C":
    console.log("C grade");
    break;
  case "D":
    console.log("D grade");
    break;
  default:
    console.log("Unknown");

🏁 반복문

for(초기문; 조건문; 증감문)

조건문의 결과가 거짓이 되면 반복을 종료한다.

예제

for (let i = 0; i < 10; i+=1) {
  console.log(i);
}

while(조건){}

괄호안 조건이 거짓이 될 때까지 반복

예제

let x = 0;
while (x < 10){
  x += 1;
  console.log(x);
}

do-while(조건)

로직을 먼저 실행한 다음 조건을 검사

예제

let x = 0;
do {
  console.log("Fire");
} while (x > 10);

🚩 배열과 객체

🏁 배열

연관된 데이터를 연속적인 형태로 저장하는 복합 타입으로 순서대로 번호가 붙는다.

배열 생성

const arr1 = new Array();
const arr2 = [];

배열 초기화

const arr3 = [1,2,3,4,5];
const arr4 = new Array(5);
const arr5 = new Array(5).fill(5);
const arr6 = Array.from(Array(5), function(v,k){ 
    return k + 1;
});

배열 삽입,삭제

const arr = [1,2,3,4,5];
//추가
arr.push(6); 
//첫번째 요소 삭제
arr.shift();
//요소를 배열의 맨 앞쪽에 추가하고
arr.unShift()
//중간요소 출력
arr.slice(2,4);
//중간요소 삭제
arr.aplice(2,4);

배열 순회

for문

const arr = [1,2,3,4,5];
for(let i=0; i<arr.length; i++){
  console.log(arr[i]);
}

for of문

const arr = [1,2,3,4,5];
for(const item of arr){
  console.log(item);
}

주요함수

MDN에서 검색해서 사용해보는 것을 추천한다.

🏁 객체

Key, value로 여러 값을 가지는 타입

예제

const obj = { name: "test" }

//객체 추가
obj['test1'] = 1;
obj.test2 = 2;

//객체 삭제
delete obj.test2;

//객체 순회
for(const key in obj){
  console.log(key, obj[key]);
}

🚩 스코프와 클로저

🏁 스코프

변수가 참조되는 범위를 말한다. 전역 스코프, 블록 스코프, 함수 스코프의 종류가 있다.

var: 경우 함수 스코프를 가진다 let,const: 블록 스코프를 가진다.

🏁 클로저

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법이다.

예제

const x = 1;

function outer() {
    const x = 10;
    const inner = function () {
        console.log(x);
    }
    return inner;
}

const innerFunc = outer();
innerFunc() // 10;

우리가 클로저를 알아야 하는 이유는 유용하게 사용하기 보단 알기 힘든 버그를 쉽게 수정하기 위해서이다.

자주 발생하는 실수

function counting(){
  let i = 0;
  for (i = 0; i < 5; i += 1) {
    setTimeout(function(){
      console.log(i);
    }, i * 100)
  }
}

counting()

위 코드의 경우 setTimeout이 응답을 하기전에 루프가 먼저실행되어 5,5,5,5,5가 출력된다.

해결방법1 (let)

function counting(){
  for (let i = 0; i < 5; i += 1) {
    setTimeout(function(){
      console.log(i);
    }, i * 100)
  }
}

counting();

밖에 선언한 let i를 for문 안에서 사용한다.

해결방법2 IIFE(즉시실행함수)

function counting(){
  let i = 0;
  for (i = 0; i < 5; i += 1) {
    (function(number){
        setTimeout(function(){
            console.log(number);
        }, i * 100)
    })(i)
  }
}

counting()

즉시 실행함수를 만들어 루프마다 클로저를 만든다.

🚩Rest API란?

REST API는 REST 아키텍처를 기반으로 구현되는 API로서 자원, 행위, 표현의 세 가지 요소로 구성되어 있습니다. 또한 REST API를 올바르게 구현하기 위해서는 6가지 제약조건을 준수해야 합니다. 그렇다면 3가지 구성 요소 와 6가지 제약조건에 대해서 자세히 살펴보겠습니다.

🚩Rest API 구성 요소

🏁자원

• URI를 사용하여 자원을 표현합니다.
• 모든 자원에는 고유한 ID가 존재하고 이 자원은 Server에 존재합니다.

🏁행위

• 자원에 대한 어떤 행위를 할 것인지 HTTP Method를 사용해 나타냅니다.(Get, Post, Put, Patch, Delete)

🏁표현

• Client와 Server가 데이터를 주고받는 형태로 대표적으로 Json, XML, HTML등이 있습니다.

위 사진은 구글 Gmail의 Label API문서를 가져왔습니다. Label API문서를 통해 3가지 구성요소를 작성해보겠습니다.

자원 : https://gmail.googleapis.com/gmail/v1/users/{userId}/labels/{id}
행위 : GET
표현 : JSON

🚩Rest API 제약조건

🏁Client-Server(클라이언트-서버)

클라이언트와 서버가 서로 분리되어 있어야 함을 의미합니다.

• Server(서버)
  자원(API)을 제공하며 클라이언트 요청에 따라 데이터를 처리하고 응답을 보내는 역할을 합니다.
• Client(클라이언트)
  서버에 요청을 보내고 응답을 받으며 사용자 인증, 세션, 로그인 정보 등을 관리하며 이러한 정보를 사용하여 서버에 요청을 보낼 수 있습니다.

🏁Stateles(무상태성)

서버는 클라이언트의 정보를 저장, 관리하지 않으며 요청만을 처리합니다.

🏁Cacheable(캐시 가능)

클라이언트가 서버로부터 받은 응답을 캐시에 저장하여 재사용할 수 있음을 의미합니다.

• HTTP 프로토콜을 사용해 HTTP가 가진 캐싱 정책이 적용 가능합니다.

🏁Layered System(계층형 구조)

클라이언트는 최종 서버에 직접 연결되었는지 중개 서버에 연결되었는지 알 수 없습니다.

🏁Uniform Interface(인터페이스 일관성)

통일된 Interface를 통해 어떤 플랫폼에서도 사용이 가능해야 하며 이를 위해 4가지 제약 조건을 만족해야 합니다.

Identification of resources

서버의 자원은 URI로 식별되어야 합니다.

Manipulation of Resources Through Representations

클라이언트가 HTTP 메서드를 사용해 서버의 자원을 조작(CRUD) 할 수 있으며 조작을 위해 JSON, XML 등의 표현 형식을 사용해야 합니다.

Self-descriptive Messages

메시지가 스스로를 설명할 수 있는 구조를 가져야 함을 의미합니다.

위 사진은 카카오의 Open API 문서입니다. 클라이언트는 api 명세만으로 api를 알 수 있습니다.

HATEOAS(Hypermedia as the Engine of Application State)

애플리케이션 상태를 이동할 때 하이퍼링크를 통해 가능한 행동들을 파악하고 그에 따라 요청을 보낼 수 있어야 한다를 의미합니다.

GET /users/123 HTTP/1.1
Host: https://api.example.com

다음과 같은 API 명세가 있다고 가정해보겠습니다. HATEOAS를 적용한 API 응답결과는 다음과 같습니다.

{
  "id": 123,
  "name": "John Doe",
  "email": "john.doe@example.com",
  "links": {
    "self": {
      "href": "https://api.example.com/users/123"
    },
    "friends": {
      "href": "https://api.example.com/users/123/friends"
    },
    "edit": {
      "href": "https://api.example.com/users/123",
      "method": "PUT"
    },
    "delete": { 
      "href" :  "https://api.example.com/users/123" , 
      "method" :  "DELETE" 
    } 
  } 
}

links 객체 안에 사용자 정보를 조회, 수정 등의 관련된 작업을 수행할 수 있는 링크 정보들이 포함되어 있습니다. 이를 통해 클라이언트는 각 링크가 어떤 작업에 대응되는지 알 수 있고 이러한 정보를 바탕으로 동적으로 애플리케이션 상태를 변경할 수 있습니다.

🏁Code on demand(옵션)

서버는 클라이언트에 실행 가능한 코드를 제공할 수 있어야 합니다. (이 규칙은 선택 사항입니다.)

예를 들어 Swagger를 사용해 클라이언트는 서버가 제공하는 API를 확인하고 테스트할 수 있습니다.

🚩API 디자인 가이드

마지막으로 Restful API 디자인 가이드를 소개하며 글을 마치겠습니다.

1. URI는 동사보다는 명사를 사용합니다
   ex) /getUsers => X / users => O
2. URI는 계층 구조를 가지며 자원 간 관계를 나타내야 합니다.
   ex) /users/1/posts
3. URI에 소문자를 사용해 일관성을 유지합니다.
4. 적절한 HTTP 메서드와 HTTP 상태 코드를 사용합니다.
   ex) 게시물 생성(post) / Response(201)
5. API가 변경될 가능성이 있으므로 버전 관리를 통해 호환성을 유지할 수 있도록 해야 합니다.
   ex) /api/v1/users
6. URI에 파일 확장자를 포함하지 않습니다.
   ex) users/image.png => X / users/image => O
7. 쿼리 매개변수를 사용하여 자원 목록을 필터링, 정렬 및 페이징할 수 있게 해야 합니다.
   ex) /users?sort=asc&page=2&limit=10

🚩Reference

• restapitutorial
• Rest API 제대로 알고 사용하기
• 그런 REST API로 괜찮은가
• RESTful 웹 API 디자인
• RESTful API 디자인