AJAX(1)
오늘 배운 것
TIL 2025-08-12: AJAX, 비트마스킹, Next Permutation
오늘 배운 것
1. AJAX (Asynchronous JavaScript and XML)
- 정의: 비동기적인 JavaScript와 XML을 의미합니다. 초기에는 데이터 교환 수단으로 XML을 사용했지만, 현재는 주로 JSON을 사용합니다.
- 핵심 기능: 웹 페이지 전체를 새로고침하지 않고도, 화면의 특정 부분만을 갱신하기 위해 서버와 비동기적으로 데이터를 교환하는 기술입니다.
- 동작 방식:
- 동기(Synchronous): 요청을 보낸 후 응답을 받을 때까지 대기하며, 코드가 순차적으로 실행됩니다.
- 비동기(Asynchronous): 요청을 보낸 후 응답을 기다리지 않고 다른 작업을 계속 수행합니다. 이로 인해 자원을 효율적으로 사용할 수 있습니다.
- 주요 사용 사례:
- 구글 지도에서 특정 장소에 마우스를 올렸을 때 추가 정보가 표시되는 기능.
- 검색창에 검색어를 입력할 때 연관 검색어 목록이 나타나는 기능.
2. 비동기 처리와 Promise
- 콜백 지옥 (Callback Hell): 비동기 처리의 순서를 보장하기 위해 콜백 함수를 중첩하여 사용하면서 코드의 가독성이 떨어지고 복잡해지는 문제입니다.
- Promise: 콜백 지옥 문제를 해결하기 위한 대안으로, 비동기 작업의 성공(fulfilled) 또는 실패(rejected)와 그 결과 값을 나타내는 객체입니다.
- 상태(States):
pending: 초기 상태, 작업이 아직 완료되지 않음.fulfilled: 작업이 성공적으로 완료됨.rejected: 작업이 실패함.
- 주요 메서드:
.then(): Promise가 fulfilled 상태일 때 실행될 콜백 함수를 등록합니다. 또한 실패 시의 핸들러도 등록할 수 있습니다..catch(): Promise가 rejected 상태일 때 실행될 콜백 함수를 등록합니다..finally(): 성공 여부와 관계없이 항상 마지막에 호출됩니다.
- Promise Chaining:
.then(), .catch(), .finally() 메서드는 새로운 Promise 객체를 반환하므로, 여러 비동기 작업을 연속적으로 연결하여 처리할 수 있습니다.
3. async / await
- 정의: Promise 기반의 코드를 더 간결하고 동기적으로 보이게 작성할 수 있도록 하는 문법입니다. ‘then hell’이라 불리는 Promise 체이닝의 복잡성을 완화합니다.
async: 함수 앞에 붙이며, 해당 함수가 항상 Promise를 반환하도록 만듭니다.await: async 함수 내에서만 사용할 수 있으며, Promise가 처리될 때까지 함수의 실행을 일시 중지합니다.- 오류 처리:
try...catch...finally 구문을 사용하여 비동기 작업의 성공 및 실패를 처리합니다.
4. Fetch API
- 정의:
XMLHttpRequest의 단점을 개선한, 네트워크 요청을 위한 최신 JavaScript API입니다. Promise를 기반으로 동작합니다.
- 요청 (Request):
fetch() 함수는 요청할 URL을 필수로 받고, method, headers, body 등을 포함하는 init 객체를 선택적으로 받습니다.
- 응답 (Response):
fetch()는 네트워크 장애나 요청 자체의 구조적 문제가 있을 때만 rejected 상태의 Promise를 반환합니다. 서버가 404나 500 같은 오류 코드를 응답하더라도 fulfilled 상태로 처리됩니다.- 응답 본문(body)을 추출하기 위해
response.json(), response.text() 등의 메서드를 사용하며, 이 메서드들 역시 Promise를 반환합니다.
- CORS (Cross-Origin Resource Sharing):
- SOP (Same-Origin Policy): 보안을 위해 스크립트가 처음에 로드된 출처(origin)와 동일한 출처의 리소스만 요청할 수 있도록 제한하는 정책입니다.
- CORS: 서버가
Access-Control-Allow-Origin 헤더를 통해 특정 출처의 요청을 허용하도록 설정하여 SOP 제한을 완화하는 메커니즘입니다. 서버에 CORS 설정이 되어있지 않으면 브라우저는 요청을 차단합니다.
5. 알고리즘: 비트마스킹과 Next Permutation
- 비트마스킹을 이용한 순열:
- 정수의 비트(bit)를 사용하여 집합의 각 원소가 선택되었는지 여부(상태)를 표현하는 기법입니다.
- 순열을 생성할 때
visited 배열 대신, 비트 플래그(flag)를 사용하여 특정 원소의 선택 여부를 관리할 수 있습니다. 예를 들어 (flag & 1<<i) != 0 과 같은 비트 연산으로 i번째 원소의 사용 여부를 확인할 수 있습니다.
- Next Permutation (다음 순열):
- 현재 순열을 기준으로 사전 순으로 바로 다음에 오는 순열을 찾는 알고리즘입니다.
- 알고리즘 순서:
- 배열의 뒤에서부터 탐색하여, 오름차순이 깨지는 지점(
i-1)을 찾습니다. (i는 꼭대기)
- 다시 배열의 뒤에서부터
i-1 위치의 값보다 큰 첫 번째 값(j)을 찾습니다.
i-1 위치의 값과 j 위치의 값을 교환(swap)합니다.i 위치부터 배열의 끝까지를 오름차순으로 정렬(또는 뒤집기)합니다.
- 주의사항: 모든 순열을 얻으려면, 가장 작은 순열(오름차순 정렬된 상태)부터 시작해야 합니다.
- Next Permutation을 이용한 조합:
nCr 조합을 생성하기 위해, 1이 r개, 0이 n-r개 있는 배열을 만듭니다.- 이 배열에
NextPermutation 알고리즘을 반복 적용합니다.
- 각 단계에서 배열의 1이 위치하는 인덱스에 해당하는 원소들을 뽑아 하나의 조합을 구성합니다.
