전체 글

다시 처음부터 코딩테스트를 공부한다는 마음으로 시작한 코드트리 코딩테스트. 알고리즘은 커녕 요즘은 코드를 작성하기보다는 AI 가 잘 코드를 작성했는지 확인하기만 바쁘다. 기본기를 다시 잡기 위해 "코드트리"와 함께 다시 코딩테스트를 조금씩 공부해보자 한다. 코드트리의 갭체크 기능을 통해 내 실력이 얼마나 처참한지(?) 테스트해보자 한다. 갭체크 결과역시나 결과는 처참했다. 갭체크 피드백을 이러했다. 1차원 배열프로그램을 통해 1차원 배열의 기본 구조와 데이터 저장 및 접근 방식을 구현하는 프로그램을 작성하는 데 있어 1차원 배열에 대한 이해가 필요해요.zzgh06님이 1차원 배열에 대한 지식 수준이 불안정하다는 것은 단순 배열 선언과 초기화는 가능하지만, 배열의 인덱스 접근이나 데이터 순회 등에서 오류..

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..

1. 로그인 버튼 클릭 시 카카오 공식 로그인 페이지(accounts.kakao.com/login)로 직접 리다이렉트.export default function KakaoLogin() { const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID; const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI; const loginWithKakao = () => { if (!KAKAO_CLIENT_ID || !REDIRECT_URI) { console.error('Missing environment variables'); return; } const kakao..

카카오 소셜 로그인이란카카오 로그인은 카카오계정으로 다양한 서비스에 로그인할 수 있도록 하는 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..