[💻 코드스테이츠 FE 44기] Promise, 모듈

✔️ 시작

이번 시간에는 비동기에 사용하는 promise에 대해 배웠다.
점점 이론이 깊어져 간다..

---

📍배운 것

✔️ Promise

• 값이 반환된 경우 비동기일 가능성이 높다.
• 리턴된 경우 .then, .catch 메서드를 사용할 수 있다.
• callback 방식의 한계가 있어 생기게 되었다.

.then

• 결과가 성공했을 때 then으로 전달된 콜백함수가 호출된다.

  콜백 함수에 결과 값이 있을 경우 첫번째 파라미터로 반을 수 있다.

.catch

• 결과가 실패했을 때 catch로 전달된 콜백함수가 실행된다.

  콜백함수는 파라미터로 전달되고 그 이후를 알려준다.

fech('...');
.then(function(response 객체){
	//성공 코드
})
.catch(function(response 객체){
	//실패 코드
})

promise chaning

• promise로 리턴되기 때문에 이후 작성되는 코드에 선언할 필요가 없다.

✔️ Promise 사용하는 이유

• 비동기적인 작업을 처리할 경우 그 작업이 성공/실패 했는지 표준화된 방식을 이용해 처리할 수 있도록 한다.

promise all()

• 여려개 비동기 작업을 동시에 처리하고 싶을 때 사용한다.
• 인자로 배열을 받는다.
• 정상 처리된 경우 결과를 배열에 저장해 새로운 promise를 반환한다.
• 에러난 경우 나머지 promise의 state와 상관없이 즉시 종료한다.

const promiseAll = Promise.all([promise1, promise2, ...])
promiseAll.then((result) => {
  console.log(resulte)
})

promise ➤ (then) ➤ response.joson() ➤ (then) ➤ Result
response.json() ➤ promise로 리턴한다.(이미 JSON 텍스트 파일을)

promise Hell

• callback 함수와 같이 길어질 경우 가독성이 낮아지고 promise Hell이 발생하는 단점이 있다.

✔️ Async / Await

• promise 코드를 간결하게 작성해 줄 수 있다.
• 함수 앞에 async 키워드를 사용하고,
  async 함수 내에서만 await 키워드를 사용한다.
• await 키워드가 작성된 코드가 실행 후 다음 순서의 코드가 실행된다.
• async함수는promise를 나타낸다.

//선언식
async function func(){
	await 실행 코드
}

//표현식
const func = async function(){
	await 실행 코드
}

//화살표 함수
const func = asyn() => {
	await 실행 코드
}

await는 함수 내부에 존재 해야하며 async가 함수 앞에 작성 돼야한다.

• async 마무리하고 싶을 경우 해당 함수 뒤에 .then()을 붙여준다.

func().then();

✔️ 모듈(module)

• 어떤 기능을 조립할 수 있는 형태로 만든 부분

fs(File System) : PC의 파일을 읽거나 저장하는 일을 할 수 있게 도와준다.
readFile : 파일 읽을 때 사용하는 메서드
writeFile : 파일 저장할 때 사용하는 메서드
require : Node.js에서 다른 파일 불러오는 구문

const fs = require('fs'); // 파일 시스템 모듈 불러오기
const dns = require('dns'); // DNS 모듈 불러오기

✔️ 서드 파일 모듈(3rd-party-module)

• 해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈(built-in module)이 아닌, 모든 외부 모듈을 일컫는다.

  Node.js에서 'underscore'은 Node.js 공식문서에는 없는 모듈로 서브 파티 모듈이다.

• 모듈 다운로드를 위해 npm을 사용한다.

• npm install : 모듈 설치

fs.readFile(path, [options], callback)

• 비동기적으로 파일 내용 전체를 읽는다.
• 전달인자 3개를 반는다.

path\<String>,\<Buffer>,\<URL>,\<integer>

• path에는 파일 이름을 전달인자로 받는다.
• 4가지 타입을 넘길 수 있지만 일반적으로 <string> 타입을 받는다.

options\<Object>\<String>

• 대괄호로 감싸진 두번째 전달인자 options는 넣을 수도, 넣지 않을 수도 있다.
• 문자열 또는 객체 형태로 받는다.
• 문자열로 전달할 경우 인코딩을 받는다.(utf8)

// ./etc/file 파일 불러오기
fs.readFile('./etc/file','','');

//utf8을 이용해 읽는다.
fs.readFile('./etc/file', 'utf8', ...)

//etc 파일 options이용해 읽기
let options = { encoding : 'utf8', flag : 'r' };

callbak\<function>

• 콜백 함수를 전달, 파일 읽은 후 비동기적으로 실행되는 함수
• err\<Error>\<AggregateError>
  : 에러가 발생하지 않으면 err는 null이된다.
• data\<String>\<Buffer>
  : 문자열이나 Buffer라는 객체가 전달 된다.(data는 파일의 내용)

fs.readFile('test.txt', 'utf8', (err, data) => {
	if(err){
    	thow err;
    }
  	console.log(data);
})

---

✏️ 마치며

promise를 이용해 콜백 지옥에 벗어날 수 있으며
then, catch 대신 Async, Awit를 사용해 글을 간결하게 작성할 수 있다.

이번 과제를 꽤 어려웠다. 다행히 다음날 까지 진행하는 거라 다행이였다.

커리큘럼 마지막 시간에는 전지적 선배 참견 시점으로
여러 얘기를 하면서 나의 방향성을 알 수 있었던 뜻 깊은 시간이였다.