분류 전체보기

Next.js Server Actions 관련 정리문제 상황Next.js 애플리케이션을 Nginx로 배포 후 "Invalid Server Actions request" 오류 발생화면은 정상적으로 로드되지만 서버 요청(로그인 등)에서 500 오류 발생예: POST https:/주소명 500 (Internal Server Error)원인Next.js 14부터 Server Actions에 대한 보안이 강화됨기본적으로 동일 출처(same-origin) 요청만 허용하며, 다른 도메인은 명시적 허용 필요Nginx와 같은 리버스 프록시 사용 시 헤더가 제대로 전달되지 않는 문제CSRF(Cross-Site Request Forgery) 공격 방지를 위한 보안 조치해결 방법next.config.js 파일에 allowed..

카카오 소셜 로그인이란카카오 로그인은 카카오계정으로 다양한 서비스에 로그인할 수 있도록 하는 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인 API를 사용하면, 사용자는 카카오톡 또는 카카오계정으로 손쉽게 서비스에 로그인할 수 있습니다.  서비스는 사용자 ID와 비밀번호를 직접 인증하는 대신, 카카오 API 플랫폼이 인증한 결과를 안전하게 제공받을 수 있습니다. 카카오 로그인 사용하는 방법 앱 등록과 설정 카카오 로그인을 사용하려면 카카오디벨로퍼스 앱이 필요합니다. 등록한 앱이 없다면 애플리케이션 등록을 참고해 새로운 앱을 등록합니다. 서비스의 앱이 이미 등록돼 있다면, 기존 앱을 사용해야 합니다. 등록한 앱의 정보 확인과 추가 설정 방법은 애플리케이션에서, 카카오 로그인 설정 방법은 ..

빌더 패턴(Builder Pattern)이란 빌더 패턴은 복잡한 객체의 생성 과정과 표현 방법을 분리하여 다양한 구성의 인스턴스를 만드는 생성 패턴입니다. 주요 특징으로객체 생성의 복잡성을 캡슐화객체 생성 단계를 유연하게 처리동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있음빌더 패턴(Builder Pattern) 코드1) 기본 추상 그림판 클래스 export default abstract class Grimpan { protected constructor(canvas: HTMLElement | null) { if (!canvas || !(canvas instanceof HTMLCanvasElement)) { throw new Error('canvas 엘리먼트를 입력하세요'); ..

삽입 정렬(Insert sort)삽입 정렬은 마치 카드 게임에서 카드를 정렬하는 방식과 유사합니다.손에 들고 있는 카드들을 순서대로 정렬된 새로운 묶음에 하나씩 올바른 위치에 삽입하는 것처럼 작동합니다.배열의 두 번째 요소부터 시작하여, 그 앞의 요소들과 비교하면서 자신의 위치를 찾아 삽입하는 방식입니다.시간복잡도는 평균적으로 O(n²)이지만, 거의 정렬된 배열에서는 O(n)에 가까운 성능을 보입니다. // 삽입정렬function insertSort(array) { for (let i = 1; i = 0 && array[j] > currentValue; j--) { array[j + 1] = array[j]; } array[j + 1] = currentValue;..

추상 팩토리 패턴(Abstract Factory Pattern)이란추상 팩토리 패턴이란 서로 관련있는 여러 객체를 일관된 방식으로 생성하기 위한 인터페이스를 제공하는 생성 패턴입니다. 구체적인 클래스를 지정하지 않고도 서로 관련된 객체들의 그룹을 생성할 수 있게 합니다. 주로 제품군의 일관성 유지가 필요할 때, 관련된 객체들이 함께 사용되어야 할 때, 시스템이 여러 제품군 중 하나를 사용해야 할 때, 구체적인 클래스를 분리하여 client 코드와 결합도를 낮추고 싶을 때 사용되는 패턴입니다.추상 팩토리 패턴 코드1) 추상 제품들의 정의export default abstract class Grimpan { protected constructor(canvas: HTMLElement | null) { ..

팩토리 메소드 패턴이란 객체 생성을 위한 인터페이스를 정의하지만, 인스턴스 생성은 서브클래스가 담당하는 패턴을 말합니다.부모 클래스에서 객체의 생성 인터페이스를 제공하고, 자식 클래스에서 실제 생성될 객체의 타입을 결정하게 됩니다.팩토리 메소드 패턴1) 추상 제품 (Abstract Product) export default abstract class Grimpan { protected constructor(canvas: HTMLElement | null) { if (!canvas || !(canvas instanceof HTMLCanvasElement)) { throw new Error('canvas 엘리멘트를 입력하세요.'); } } abstract initialize(): v..

선택정렬(Selection sort)이란?버블정렬은 맨 앞부터 하나씩 올라가며 위치를 찾아가는 방법이라면 선택정렬은 맨 아래부터 값을 쌓아가는 정렬 방식을 뜻합니다. 예를 들어, 배열을 한 바뀌씩 돌면서 가장 값이 낮은 값을 찾아내 0번 인덱스에 배치하고, 남은 정렬을 다시 순회하면서 그중에서 가장 값이 낮은 원소를 그 다음 인덱스인 1번에 배치하는 것을 반복합니다. 즉 계속해서 최솟값을 찾아내 스왑해 주는 것 입니다.  작동 방식은 다음과 같습니다:주어진 배열에서 최솟값을 찾습니다.그 최솟값을 맨 앞에 위치한 값과 교환합니다.맨 처음 위치를 제외한 나머지 배열을 같은 방법으로 교체합니다.하나의 원소만 남을 때까지 위의 과정을 반복합니다.이를 코드로 구현하면 선택정렬은 다음과 같습니다.function s..

심플 팩토리 패턴(Simple Factory Pattern) 심플 팩토리 패턴은 객체 생성을 캡슐화하는 가장 기본적인 디자인 패턴입니다. function grimpanFactory(type: string) { if (type === 'ie') { return IEGrimpan.getInstance(); } else if (type === 'chrome') { return ChromeGrimpan.getInstance(); } else { throw new Error('일치하는 타입이 없습니다.') }}Factory 메소드 (grimpanFactory): 객체 생성 로직을 담당생성될 제품들 (IEGrimpan, ChromeGrimpan): 공통 인터페이스나 부모 클래스를 공유해당 패..