1) 문제 상황중복 제출: “결제하기” 버튼을 빠르게 연타하면 여러 결제 요청이 동시에 전송세션/쿠키 잔존: 체크아웃 완료 후 혹은 이탈 시에도 세션이 남아 혼란이벤트 난립: 폼 곳곳에 흩어진 리스너로 유지보수가 어려움피드백 지연: 제출 상태/에러가 즉각적으로 반영되지 않아 UX 저하2) 개선 목표중복 제출 방지: 간단한 락(lock) + 버튼 비활성화 + 로딩 copy아이덴포턴시(idempotency): 서버가 중복 요청을 단 1건으로 처리하도록 키 부여세션 클리어: 체크아웃 완료/화면 이탈 시 세션·쿠키 정리이벤트 통합: 한 클래스에서 폼 제출/이탈 감지/세션 관리를 일원화3) 개선 전 (문제 재현용 코드)버튼을 연타하면 **동시에 여러 “주문”**이 만들어질 수 있다고 가정이탈/새로고침 시 세션 정..
1. 기본 개념Next.js에서는 레이아웃과 페이지가 기본적으로 서버 컴포넌트로 처리된다. 서버 컴포넌트는 서버에서 데이터를 가져오고 UI의 일부를 렌더링하며, 필요에 따라 결과를 캐시하거나 클라이언트로 스트리밍할 수도 있다.반면, 상호작용이나 브라우저 API가 필요한 경우에는 클라이언트 컴포넌트(use client)를 사용하여 기능을 추가할 수 있다.즉, 서버 컴포넌트는 기본적으로 작동하는 리액트 서버 컴포넌트(React Server Component, RSC)를 기반으로 하고, 클라이언트 컴포넌트는 Next.js에서 use client 환경을 사용하는 컴포넌트를 의미한다.2. 서버 및 클라이언트 컴포넌트의 작동 방식 서버와 클라이언트 환경서버 및 클라이언트 컴포넌트의 작동방식을 이해하기 위해 두 가지..
보호되어 있는 글입니다.
1. 개념삽입 정렬은 배열을 정렬된 부분과 정렬되지 않은 부분으로 나누어 진행하는 알고리즘이다.하나의 원소를 꺼내 이미 정렬된 부분에서 적절한 위치를 찾아 삽입하면서 전체 배열을 점차 정렬해 나간다.버블 정렬이나 선택 정렬과 비슷한 기초 정렬 알고리즘이지만, 특정 상황에서는 더 효율적으로 작동한다.2. 동작 방식동작 예시정렬할 배열: [5, 3, 4, 1, 2]첫 번째 원소는 이미 정렬된 부분으로 간주한다[5] | [3, 4, 1, 2] (정렬된 부분 | 정렬되지 않은 부분)두 번째 원소(3) → 정렬된 부분과 비교5보다 작으므로 앞으로 이동한다.[3, 5] | [4, 1, 2]세 번째 원소(4) → 정렬된 부분과 비교5보다 작고, 3보다는 크므로 3과 5 사이에 삽입한다.[3, 4, 5] | [1, ..
1. 개요나이브 문자열 검색(Naive String Search)은 가장 기본적인 문자열 탐색 기법이다. 이 알고리즘은 긴 문자열 내에서 특정한 짧은 문자열(패턴)이 몇 번 등장하는지를 확인하는 데 사용된다. 2. 알고리즘 개념나이브 문자열 검색은 다음과 같은 방식으로 동작한다.긴 문자열의 각 문자부터 시작하여,짧은 문자열의 길이만큼 잘라서 비교하며,모든 문자가 일치하면 해당 위치를 일치로 간주하고 카운트를 증가시킨다.3. 동작 절차 count를 0으로 초기화한다.긴 문자열의 0번째 문자부터 (긴 문자열 길이 - 짧은 문자열 길이) 위치까지 반복한다.매 반복마다:짧은 문자열의 문자를 하나씩 반복하며,긴 문자열의 i + j 번째 문자와 짧은 문자열의 j 번째 문자를 비교한다.둘 중 하나라도 다르면 비교를 ..
1. 검색이란?특정 데이터(값)를 자료구조 내에서 찾는 과정이다. 배열에서 특정 이름이 있는지 확인로그인 시 입력한 이메일이 DB에 존재하는지 검사2. 선형 검색 (Linear Search)배열의 처음부터 끝까지 순서대로 확인하며 값을 찾는다.정렬 여부와 무관하게 사용 가능하다.[0] → [1] → [2] → ... → [n] ↓ ↓ ↓ ↓val? val? val? val?→ 순차적으로 값을 비교 의사코드 (Pseudocode)배열의 첫 번째 원소부터 시작한다.각 원소를 찾는 값과 비교한다.값이 같으면 해당 인덱스를 반환한다.끝까지 비교했는데 값이 없으면 -1을 반환한다. 예시 코드 (JS)function linearSearch(arr, val) { for ..