동기 & 비동기
동기식
- 순차적으로 줄 세우는 식으로 진행
비동기식
- 딜레이를 줄이기 위해서 정해진 순서 없이 동시에 진행(작업 동작이 둘 이상인 경우)
동기 (Synchronous) 비동기 (Asynchronous)
| 진행 | 순서대로, 작업 완료까지 대기 | 작업 시작 후 바로 다음 작업 진행, 완료 시 알림 |
| 대기 | 작업 완료까지 대기 (Blocking) | 작업 완료까지 대기하지 않음 (Non-blocking) |
| 효율 | 오래 걸리는 작업 시 비효율적 | 여러 작업 동시 처리 가능, 효율적 |
| 복잡성 | 단순 | 결과 처리 방식이 복잡할 수 있음 |
동기식의 두가지 상황
- 순서를 기다리면서 처리
- 수신을 기다렸다가 처리(비동기 화를 위해 콜백과 이벤트 사용) ⇒ 지금의 자바스크립트가 진행하는 방식
비동기식이 요구하는 상황 1
: 다중작업(멀티태스킹, 멀티프로세스) 환경과 single CPU(순서)
- 멀티태스킹 : 여러개의 작업을 진행
프로세스는 고유의 아이디를 지니며 자체적으로 생성한다.
그래서 프로그램은 한 개이지만 여러 창을 띄울 수 있는 이유
CPU는 한개인데 여러 개의 프로세스가 동시에 동작하는 것인가?
⇒ 운영체제가 시분할을 통한 동시 실행을 지원
- 스레드의 개념 이해하기
스레드 => 실행의 단위
장점 : 빠른 *ContextSwiching
백그라운드(비동기식) 작업의 필요성과 자식 프로세스
동기식으로 처리하기에는 너무 오래 걸리기에 비동기 식으로 처리하지만
*Context에 부담을 준다.
*Context(문맥) : 프로세스가 진행하다가 시간이 끝나면 책갈피 하는 역할
*ContextSwiching(문맥교환) : 여러 작업을 왔다 갔다 하면서 처리(병렬 처리하기 위해서 탄생)

비동기 식이 요구되는 상황 2
: 두 엔드포인트 간의 통신이 필요한 경우(수신)
- 비동기화 시키기 위한 방법 : 동기식에 버퍼를 적용시키거나 Callback을 사용
Callback & Promise
Callback : 함수를 나중에 호출 해주는 것 Callback 안에 Callback이 적용되어 콜백지옥이 발생하는 것을 유의
Promise : Callback 이 중첩되어 콜백지옥이 발생하고 복잡해져서 나온 것이며, 중첩을 막아주고 동기화 시켜준다.
Node의 기본 API
Promises API
CallBack API
Synchromous API
Module
Node.js에서는 스크립트 수준에서 모듈과 고립된 영역(isolated Scope)가 없었고
자바스크립트에 모듈을 부여하기 위해 노력을 함
탄생한 것이 Common.js와 ES6 Module이다.
Common.js와 ES6 Module 비교
| 특징 | Common.js | ES6 Module |
| 문법 | require, module.exports, exports | import, export |
| 주요 사용처 | Node.js(서버사이드) | Node.js(최신버전), 브라우저, 프론트엔드 프레임워크 |
| 내보내기 | 단일 객체 내보내기 (module.exports) | 다중 객체 내보내기 (export) |
실습내용 요약 :
되도록 node 대신 npm으로 실행하자 실행 시 node 파일명.js 입력하지 말고
npm init > package.json에서 scripts내에
“(실행시킬 이름/보통 dev)” : “node (파일명).js” 등록
> 터미널에서 명령어로 npm run (실행시킬 이름) 입력
npm 뒤에 바로 적어도 실행 되는 경우 : start,stop,restart,build
그 외에는 npm run을 사용
회고 : 작업 관리자에서 종료를 시키기 위해서 프로세스와 스레드를 알게 모르게 이용하고 있었고,
프로세스 내에서 스레드로 동시에 프로그램이 실행되는지 것에 알게 되었으며,
그 동안 암기 식으로 잘못 된 공부방식을 해온 대신
지금이라도 동작원리를 이해하며 공부할 필요가 있다.
'Deep.FE' 카테고리의 다른 글
| 멋사 부트캠프 프론트엔드 플러스 5기 - Next.js (6일차) (0) | 2025.06.24 |
|---|---|
| 멋사 부트캠프 프론트엔드 플러스 5기 - TypeScript(5일차) (0) | 2025.06.23 |
| 멋사 부트캠프 프론트엔드 플러스 5기 - MVC & Flux (3일차) (0) | 2025.06.19 |
| 멋사 부트캠프 프론트엔드 플러스 5기 - JS Essential (2일차) (0) | 2025.06.18 |
| 멋사 부트캠프 프론트엔드 플러스 5기 - 웹페이지 종류 (1일차) (0) | 2025.06.17 |