티스토리 뷰
비동기 작업
작업이 끝날 때까지 기다리지 않고, 다른 작업을 계속할 수 있는 방식
| 동기 | 비동기 | |
| 처리 방식 | 데이터를 받을 때까지 기다렸다가 다음 작업 실행 | 데이터를 요청하고 기다리지 않은 채, 다른 작업도 진행. 데이터가 오면 콜백받아 처리함 |
| 처리 시간 | 오래 걸리면 전체적으로 느려짐 | - 실제 속도가 빠른 건 아니고 효율이 높아보인다 - 기다리지는 않으니 여러 요청을 효율적으로 처리를 할 수 있다 - 병렬 처리가 가능해서 입출력 작업(I/O)시 효과적임 그렇다고 비동기가 병렬 처리는 아님 |
| 핵심 | 기다림 | 요청해놓고 다른 것도 수행함 |
| 사용 | 단순 계산하기, 간단한 조건 처리하기 | 시간이 소요되는 작업: DB 호출하기, API 요청 후 처리하기 |
비동기 ≠ 병렬 처리
비동기:
- (요청 → 답변 대기 상태) 기다리지는 않으나, 다른 작업을 준비하거나 대기 상태를 유지하는 것
- 동시 실행 ❌
- 싱글 스레드 환경에서 사용됨 (JS의 Node.js)
∴ 병렬 처리처럼 보이는 것일 뿐 병렬처리가 아니다.
∴∴ 기다리는 시간을 줄이기 때문에 효율적이다.
병렬 처리:
- 여러 작업이 동시에 실행되는 것
- CPU의 여러 코어를 사용하거나 다중 스레드를 만들어서 각각 작업을 병렬로 처리하는 것
- 멀티 스레드 환경에서 사용됨
속도
- 비동기: CPU 작업보다 입출력 작업에서 효과적
- 네트워크 요청
- 파일 읽기
- DB Query
- 병렬 처리: CPU 작업이 많을 때 더 효과적
- 대규모 계산
- 복잡한 데이터 처리
정적 서버와 동적 서버
| 정적 서버 | 동적 서버 | |
| 정의 | 미리 준비된 파일만 전달해 주는 곳 | 요청에 따라서 코드를 실행하고 데이터를 처리하는 곳 |
| 개념 | 내가 가지고 있는 / 준비된 파일만 전달해 줄게! 코드를 실행하지 않고, 파일만 전달함. |
- 네 요청을 받았어. 이 코드들 실행해서 답변해줄게! - 누가 /hello로 요청 보냈네? 기디려. 이 코드 실행해서 답변 보내줄게! ∴ 동적인 답변 생성 |
| 비유 (카페 핫도그) | 미리 만들어진 핫도그를 꺼내준다. | 핫도그 주문을 받고 원하는 재료로 직접 핫도그를 만들어준다. |
| 서버 코드 실행 (ex. Node · · · ) |
❌ 불가 |
⭕ 가능 |
| 데이터 처리 | ❌ 미리 생성된 파일만 전달해줌 |
⭕ 요청에 따라 데이터 처리 가능 |
| 동기, 비동기 | 동기적 | 비동기적 |
| server.js | 코드 파일일 뿐 실제로 실행되진 않음 | Node.js 런타임에서 실행되고 클라이언트 요청에 따라 동적으로 코드 실행하여 답변 생성함 |
| 특징 | - 미리 만들어진 파일만 전달 ∴ 빠른 속도 - 서버 코드 실행 X - 데이터 처리 로직 실행 X ∴ 코드가 단순하고 유지보수가 쉬움 ∴∴ 서버에서 동적 데이터를 처리하지 않아 해킹 가능성이 낮음 - 데이터는 고정되어 있고, 서버는 아무 계산이나 로직 처리를 하지 않는다. ∴ 서버 코드가 포함된 동적인 처리가 불가하다. |
동적 데이터를 제공: - 사용자 맞춤 컨텐츠, 로그인과 회원가입, 검색 결과 등 실시간으로 데이터를 제공받을 수 있음 - 요청을 받고 데이터를 처리해서 동적으로 답변을 생성해줌 ∴ 다양한 기능을 구현 가능 - 클라이언트 요청에 따라 데이터를 동적으로 변환 가능 (html이나 json등..) 주로 비동기 작업으로 진행: - 위와 같은 동적 데이터를 요청하고 수행하기 위해. - 그래서 프로미스나 async, await과 같은 비동기 처리 방식을 사용함. - 그리고 비동기적 실행이 효율적임. |
| 단점 | - 사용자의 입력을 처리하거나 DB와 상호작용이 필요한 기능은 구현 불가 - 컨텐츠 변경시 파일 수정 후 다시 빌드나 배포를 해야 함 - 서버 코드도 올리려면 다른 방법이 추가 되어야 함 (서버코드를 실행하려면 AWS EC2나 Heroku, Vercel 등의 동적 서버를 설정해주어야 함) |
- 설정과 유지보수의 세밀함이 필요 ∴ 코드가 복잡함 - 요청에 따라 다른 속도: 요청을 받고 데이터를 처리, 생성하는 과정에서 정적 서버보다 느리거나 빠름 - 비용: 동적 처리를 위해 더 많은 서버 리소스가 필요해 비용이 높아짐 - 보안 취약: DB나 API등과 연결이 되기 때문에 해킹 가능성이 높아짐 |
| 예시 | Netlify와 Github Pages, Vercel 정적 파일을 호스팅하는 플랫폼들 |
- AWS EC2나 Heroku, Vercel - DB와 연결된 웹 애플리케이션(쇼핑몰, 게시판) |
| 사용 | 간단한 웹사이트 구현 사전에 만들어진 컨텐츠 제공 시 사용 (HTML, CSS, JS · · · ) |
- 로그인이나 회원가입 등 DB가 필요한 서비스 - API 사용과 데이터 처리가 필요한 서비스 |
| 필요 환경 | 파일 저장 공간 | 런타임: 코드 실행환경 |
'리액트로 웹 개발 A to Z' 카테고리의 다른 글
| SQL을 뽀개보자! : 새로운 컬럼을 추가해보자 (Add, Modify, Change) (0) | 2025.02.05 |
|---|---|
| 리액트 컴포넌트에서 페이지를 이동하는 다양한 방법 (with. mypage → login 페이지로 이동하기, 예외처리) (0) | 2025.01.15 |
| 카카오 로그인 API 구현하기 : 카카오 로그인 로직을 정리해보기 (0) | 2025.01.09 |
| 카카오 로그인 API 구현하기 : 서버와 클라가 요청하고 응답 받는 원리 (with. fetch와 then은 한 팀) (0) | 2025.01.07 |
| 카카오 로그인 API 구현하기 : KOE006 에러 (with. 리다이렉트 uri 에러와 env 파일) (0) | 2024.12.31 |