<h1>서울숲_M_Day05 리뷰 레포트</h1>

<h3>참석자</h3>

- 정예원, 이창권, 서준배, 정태용

<h2>1. 코드 동작 이해</h2>

- 제네레이터함수
- 함수내에서 정지 시점을 정해서 조절이 가능한 함수.
- yield를 통해 정지가 가능
- 이후 next()를 통해 정지를 한 yield로부터 시작.
- 메모리 효율에 기여 가능.
- 참고 블로그 URL: https://velog.io/@rohkorea86/Generator-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%9D%B4%ED%95%B4%ED%95%B4%EB%B3%B4%EC%9E%90-%EC%9D%B4%EB%A1%A0%ED%8E%B8-%EC%99%9C-%EC%A0%9C%EB%84%A4%EB%A0%88%EC%9D%B4%ED%84%B0-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80

- promise
- 자바스크립트의 특성인 비동기를 해결하기위해 콜백함수를 사용하는데 가독성이 떨어지는것을 해결하기위해 사용
- 에러처리가 편함
- 프로미스의 상태 3가지
- pending대기 - 비동기 처리 로직이 아직 완료 안됨
- fulfilled이행 - 비동기 처리 로직이 완료 , 결과값 반환 상태
- rejected실패 - 비동기 처리가 실패, 오류가 발생
- 참고 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/>

function getData(callbackFunc) {
  $.get('url 주소/products/1', function (response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function (tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});


-->


function getData(callback) {
  // new Promise() 추가
  return new Promise(function (resolve, reject) {
    $.get('url 주소/products/1', function (response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function (tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

- this의 scope 해결
- bind를 통해 연결
- this를 저장하여 사용
- this가 필요없도록 class외부로 꺼내서 사용
- arrow function을 사용

<h2>2. 코드 동작 개선</h2>

- git의 branch에 대해서 이해를 하고 있는가?
- 다양한 git workflow에 따라 branch전략이 달라진다.
- 각 용도에 맞는 branch에서 개발자가 따로 작업
- pull request를 통해서 merge를 하여 branch를 합친다.
- 기본적인 git work flow : 항상 유지되는 메인 브랜치들(master, develop)과 일정 기간 동안만 유지되는 보조 브랜치들(feature, release, hotfix)을 포함하여 총 5가지의 브랜치를 사용한다.

- 디버깅단계에서 breakpoint를 사용하면서 문제를 해결하려고 했는가?
- 실행 중간에 변수를 확인하거나, 실행 순서를 확인하기 위해 사용함.

<h2>3. Consideration</h2>

- 각자 어떤 디버깅 방법을 사용해보았는가? 이 부분을 모두 이야기하고 적어보자.
- breakpoint를 통해 특정 지점이나 오류난 부분을 정지하여, 변수값을 확인하며 진행.

- 프로젝트에서 npm 명령어를 활용해 추가로 외부 모듈을 설치했을때 package.json에 어떤 변화가 생기는지 설명하자.
- dependency에 설치한 외부 모듈명과 모듈 버전이 추가된다.
- 이로 인해 require("underscore")로 호출이 가능해졌다.

"dependencies": {
    "underscore": "^1.9.1"
  }

- node_modules 디렉토리는 어떤 역할을 하는 디렉토리 인가 설명해보자.
- npm으로 다운받은 외부 모듈이 저장되는 장소

- export, require 동작방식에 대해서 설명해보자.
- commonJs에서 사용하는 모듈 사용 방식(vs ES6의 import,export)
- 모듈을 require할 때마다 새로운 인스턴스가 생성되는 것이 아니라 캐싱된 객체 인스턴스를 재사용함
- key값으로 해당 모듈 파일의 경로를 갖게 되는데 key값이 삭제된다면 다음 require 요청시 다시 재로딩하게 됨

- 추가
- module.exports 와 exports는 같다.