브라우저는 자바스크립트를 해석하고,
실행할 수 있는 자바스크립트 엔진을 내장하고 있음.
또한, Node.js도 자바스크립트 엔진을 내장하고 있음.
따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행 가능
하지만, 브라우저와 Node.js는 용도가 다르다!!
| 브라우저 | Node.js |
| 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장, ECMAScript 를 실행가능(몇몇 기능은 호환 X) | |
| HTML, CSS, Javascript를 실행하여 웹페이지를 브라우저 화면에 랜더링 하는 것이 주 목적 | 브라우저 외부에서 자바스크립트 실행 환경을 제공해주는 것이 주 목적 |
| 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공 | DOM API 을 제공하지 않음 |
| 파일 시스템을 지원하지 않음 | 파일을 생성하고, 수정할 수 있는 파일 시스템을 기본으로 제공 |
여기까지만 간단하게 설명하고, 자세한 모듈과, 실행환경은 다시 다른 포스팅에서 자세히 설명하도록 하자.
그럼 왜 Node.js에 대해서 설명을 했냐!!
오늘 제가 했던게 이걸 이용해서 한거거등요~~
Node.js 환경은 로컬 컴퓨터에서 직접 실행이 되기 때문에
파일을 불러오거나, 저장하는 등의 액션이 가능!!
그래서 많고 많은 Node.js 내장 모듈 중에!!
fs모듈 즉, 파일 시스템 모듈은 파일을 읽거나 저장하는 기능구현을 돕는다.
이 fs모듈안에서도 또 많고 많은 메서드들이 있다.
그 중에서 파일을 읽는 readFile 이라는 메서드를 사용하여
callback 과 Promise, async/await를 구현해보자!!
fs.readFile(path, [,option], callback) 문법을 지켜 구현해보자
1. callback으로 구현하기
구현해야할 사항들은 다음과 같다.
- 파일을 읽고 나서 callback이 실행되어야 한다.
- 에러가 발생할 경우, callback 첫번째 인자에
에러 객체가 전달되어야 한다. - callback 두번째 인자에 파일 내용이 전달되어야 한다.
위 사진을 참고하여 ,
만약 에러가 있을때 callback의 인자와,
없을때의 callback의 인자를 다르게 해주었다.
2. promiseConstructor로 구현하기
여기서는 1번의 callback 에서와 다르게
매개변수가 한개(filePath)만 주어진다.
대신, Promise 객체의 resolve, reject함수를 이용한다.
구현해야할 사항들은
- Promise 형태로 리턴되어야 한다
- then 블록을 통하여 파일 내용이 전달되어야 한다.
- 에러가 발생할 경우,
catch 블록을 통하여 에러 객체가 전달되어야 한다.
에러가 있을 때, reject함수에 err이 인자로 들어가,
catch 블록을 통해 에러 객체가 전달될 수 있다.
그렇지 않으면 resolve함수에 data가 인자로 들어가게 된다.
따라서 then 블록을 통해 data가 전달될 수 있다.
3. promiseChaining으로 구현하기
1~5번 중에 3번이 나에겐 제일 어려웠던것 같다...
가장 접근도 못하겠고 생소?? 했다.
구현해야할 사항은
- 체이닝의 결과가 Promise 형태로 리턴되어야 한다.
- 'user1.json' 내용과 'user2.json' 내용을 합쳐서
두 객체가 담긴 배열로 리턴되어야 한다. - fs module을 직접 사용하지 않고,
getDataFromFilePromise을 두번 사용해 구현을 해야한다. - Promise.all 또는 async/await 를 사용하지 않아야한다.
4. PromiseAll로 구현하기
3번의 파일과 같은 결과를 리턴해야하지만,
4번에서는 Promise.all 을 사용해야한다.
구현해야할 사항은
- Promise 형태로 리턴되어야 한다.
- Promise.all을 사용하여 풀어야 한다.
- 'user1.json'의 내용과 'user2.json' 내용을 합쳐 객체로 리턴
Promise.all 내부에는 파싱되지 않은 형태의 객체들이 배열로 들어가 있다.
결국, 'user1.json'의 내용과 'user2.json' 내용을 합쳐 객체로 리턴해야 하기 때문에
.then 에서 user1과 user2를 파싱을 해주어야한다.
map()메서드를 통해 파싱되지 않은 객체들의 배열을
파싱된 객체들의 배열로 만들어주었다.
5. async/await로 구현하기
앞의 3, 4번과 같은 결과를 리턴해야한다.
먼저 readAllUsersAsyncAwait 변수에
async를 함수표현식의 값을 할당하였다.
4번의 Promise.all 처럼 user1과 user2가 파싱되지 않은 상태
이기 때문에 각자 파싱을 해주면서 배열안으로 감싸주었다.
그리고 try~catch문으로 에러를 잡아주었다.
