정리 사이트...

node.js에서 async 를 쓰는 이유는 콜백사용으로 인해 중첩되는 함수들을 줄이기 위해서 라고 알고 있는데....

그중에서 가장 많이 쓰는게 waterfall 을 많이 쓰는거 같아 일단 정리 해본다.

함수 구조는 위와 같이 되어있다.

tasks는 대괄호 안에 순서대로 처리할 function을 넣어야 하고

AsyncResultCallback 위에 task function에서 에러가 나거나 마지막 함수를 처리 할때

들어오는 함수로 보면 될꺼 같다.

tasks에 선언하는 function의 인자값은 callback을 사용 하며 이것을 이용하여 다음 function으로 이동 하거나 에러를 보내서 AsyncResultCallback함수에 에러 값을 보내기도 한다.

callback을 함수로 사용 하면 첫번째 인자는 error 값을 보내게 되어있고 두번째 인자 부터는 다음 task에 전달할려고 하는 값을 넣을 수 있다.

일단 waterfall을 왜 써야하는지를 간단하게 보기 위해 아래와 같은 샘플 코드를 작성 해보았다

코드를 간단하게 설명하면 test.txt 파일을 읽어서 test_async.txt 파일로 쓰기를 하는 코드이다.

일단 test.txt 파일을 읽고 callback으로 파일을 제대로 읽었는지 확인후에

test_async.txt 파일을 쓰기를 하고 그 결과를 callback 으로 확인 하는 로직이다.

콜백 중첩이 2단계 정도라 보기 편하지만 점점 중첩 단계가 많아진다면 보기가 힘들어질것이다

그래서 async의 waterfall 로 처리한 코드 아래와 같이 작성하였다.

중첩되는 괄호가 없어서 보기는 편해졌다..

코드가 생략된 부분이 있어서 조금 풀어서 보면 아래와 같이 작성 된다.

2번째 사진처럼 구조를 알고 있다면 심플하게 작성하는것도 나쁘진 않지만.

코드는 명확하게 하는게 작업할때 더 좋다 그래서 3번째 처럼 작성 하는것을 추천함.

자세한 설명은 아래 정식 문서를 참조하기 바람..

https://caolan.github.io/async/docs.html#waterfall

vscode에서 node.js를 visual studio 에서 처럼 디버깅 하고 싶다면....

일단 아래와 같이 간단한 node.js 코드를 작성 해봅니다.

위에 사진과 같이 4번째 줄에 브레이크 포인트를 걸어두고 F5를 누르면 디버그 모드 해서 실행이 됩니다.

(node.js를 디버깅하니 뭐 기타등등 세팅은 기본되어있다고 치고..)

그럼 vscode에서 자동으로 launch.json 파일이 .vscode 폴더에 생성이 됩니다.

파일 내용은 아래 스샷 참조

기본 lanch로 실행하는건 visual studio 에서 디버깅 하는거랑 동일하다.

자동으로 node 실행 하고 디버그 상태가 되는.. 아래 스샷 처럼 브레이크 포인트에 걸린다.

그런데 node.js는 javaScript를 바꾸다보면 위와 같이 디버깅하는게 귀찮다.

그래서 보통 스크립트 파일이 변경되면 자동으로 재시작 해주는 어플리케이션을

이용 하고 로그를 보고 주로 수정한다. (이때 이용하는데 nodemon 어플이다.)

그런데 가끔 브레이크 포인트 걸어서 내용을 보고 싶을 때가 있는데

visual studio 디버깅 기능중에 프로세서 연결해서 디버깅 하듯이 vscode에서도 할수가 있었습니다.

일단 launch.json 에 구성 추가를 해야 합니다.

디버그에 설정을 선택하는 메뉴 에서 구성 추가를 하거나

launch.json파일을 열어서 구성추가 버튼을 누르면 됩니다.

일단 구성추가를 하게 되면 위 사진과 같이 메뉴가 나오는데

여기서 프로세서에 연결 을 선택 합니다

그럼 아래와 같이 launch.json에 코드가 추가되며

디버그 구성 선택 메뉴에도 추가 됩니니다.

추가된 구성에 name 부분은 Attach by Process ID 라고 표시되는데

한글로 나오는게 편해서 바꿔서 저장하였음다.

일단 여기까지 하면 프로세서 연결 디버깅 할수 있는 환경은 끝난 상태임다.

그럼 nodemon을 이용해서 일단 어플을 실행 합니다.

vscode에서는 콘솔창을 열수 있는데 아마 단축키가 ctrl+` 입니다.

그럼 vscode에 내장된 콘솔창을 이용해 아래와 같이 nodemon을 실행 합니다.

이상태에서는 에러가 나거나 console.log() 출력이 콘솔창에서 보이게 됩니다

여기서 우리가 하고 싶은것을 현재 실행된 상태에서 프로세서 연결해서 브레이크 포인트로 디버깅을

할려고 하는거니 일단 디버그에서 위에 세팅했던 프로세서 연결 구성을 선택하고 디버깅(F5)을 시작 합니다.

그럼 아래와 같이 프로세서 선택 화면이 나옵니다.

그럼 맨 첫번째 있는 node .\main.js를 선택 하면 브레이크 포인트 부분에서 디버깅 할수 있게 됩니다.

참고로 nodemon으로 실행시에는 javascript가 변경되면 자동으로 재실행 하기에 프로세서ID가 변경되게 되니

이때는 다시 프로세서 연결해서 디버깅 해야합니다.

아무튼 이것으로 대충 디버깅 설명을 마침니다.

node.js를 vscode로 개발하면서 추가로 설치한 확장 기능 정리해 둡니다.

Active File In Status Bar (마켓이동)

선택한 파일의 경로를 작업관리창에 표시해주는 기능

vscode-icons (마켓이동)

vscode 탐색기 부분에 폴더 파일이 아이콘으로 표시되서 보기 좋게 나옴 (이건 간지용으로 추천)

Rainbow Brackets (마켓이동)

괄호들을 짝을 맞춰서 색칠 해주는 기능

Settings Sync (마켓이동)

vscode에 설치한 확장기능을 github를 통해 동기화 해주는 프로그램

PC를 여러대 쓴다면 같은 환경 세팅을 위해서 세팅 해는걸 추천

사용방법은 구글에 물어보세요.. (github 계정 필수)

Visual Studio Keymap (마켓이동)

vscode는 키맵도 확장기능으로 설치 할 수 있었습니다.

제가 주로 쓰던 visual studio 키맵 세팅 파일도 있더라구요..

하지만 대소문자 바꿔주는 단축키는 다른걸로 잡혀서 수동으로 세팅 해서 사용

일단 이정도만.. 추가 적으로 사용 하는게 있음 갱신 하겠습니다.