개발 블로그

class MinPriorityQueue { constructor() { this.heap = []; } // 힙의 크기 반환 size() { return this.heap.length; } // 큐가 비어있는지 확인 isEmpty() { return this.heap.length === 0; } // 값 추가 (Enqueue) push(value) { this.heap.push(value); this._upheap(); } // 최솟값 제거 및 반환 (Dequeue) pop() { if (this.isEmpty()) return null; if (..

class Deque { constructor(maxSize = 10000) { this.dq = []; this.maxSize = maxSize; this.count = 0; this.head = 0; this.tail = 0; } // 1. 맨 뒤에 추가: tail을 시계 방향(+1)으로 이동 후 삽입 push_back(item) { this.tail = (this.tail + 1) % this.maxSize; this.dq[this.tail] = item; this.count++; } // 2. 맨 앞에서 빼기: head를 시계 방향(+1)으로 이동 후 반환 po..

const MAX_SIZE = 10000;class Queue { constructor() { // 빈 큐 하나를 생성합니다. this.q = Array(MAX_SIZE).fill(0); this.head = 0; this.tail = 0; } push(item) { // 큐의 맨 뒤에 데이터를 추가합니다. if (this.full()) throw new Error("Queue is full"); this.tail = (this.tail + 1) % MAX_SIZE; this.q[this.tail] = item; } full() { // 큐가 가득 차 있으면 true를 반환합니다. re..

서버 컴포넌트 vs 클라이언트 컴포넌트 서버 컴포넌트서버에서 렌더링 및 실행되는 컴포넌트장점보안성 높음 (민감한 데이터, 환경변수, DB 직접 접근 가능)효율성 좋음 (번들 크기 작아지고, 클라이언트 JS 양 감소)단점이벤트 핸들러(onClick 등) 사용 불가브라우저 전용 API (window, document, localStorage 등) 사용 불가주요 사용 사례보안이 중요한 데이터 fetching정적/서버 사이드 렌더링이 필요한 UI무거운 연산이나 DB 쿼리 처리 클라이언트 컴포넌트브라우저(클라이언트)에서 실행되는 컴포넌트특징이벤트 핸들러, useState, useEffect 등 React 훅 사용 가능브라우저 전용 API 자유롭게 사용 가능단점보안적으로 취약 (코드가 클라이언트에 노출됨)번들 크..

Next.js는 vercel에서 만든 리액트 기반의 프레임 워크입니다 Next.js를 설치하고 프로젝트의 기본 구조를 살펴 봅시다 vscode를 열고 터미널에서 해당 명령어를 입력합니다 npx create-next-app@latest . 해당 명령어는 현재 폴더에 next 프로젝트를 최신버전으로 설치하겠다는 뜻입니다 프로젝트를 설치하면 이러한 구조의 폴더들이 생성됩니다 어떤 폴더인지 하나씩 알아봅시다 .next - 빌드 결과물과 캐시가 저장되는 폴더 node-modules - 설치한 모든 npm 패키지가 들어있는 폴더 public - 정적 파일을 보관하는 폴더 ex) 이미지, 아이콘, 폰트등 빌드시 별도의 가공을 거치지 않고 제공하고싶은 리로스를 보관할 폴더 src - 소스 코드 폴더 app - 라..