Christmas.log

# Tailwind CSS + class 전략 사용하기next-themes 를 설치하면 더 쉽다. # next-themes 란?: Next.js 앱에서 다크 모드 / 라이트 모드를 손쉽게 구현할 수 있게 도와주는 라이브러리[ 원리 ]html 태그에 class="dark"을 붙이면, Tailwind가 해당 클래스 기준으로 스타일을 바꿔줌사용자 설정(localStorage, 시스템 설정 등)을 자동으로 감지하여 dark 클래스를 붙이거나 제거** 직접 구현시window.matchMedia('(prefers-color-scheme: dark)') 감지localStorage.getItem('theme') 값 비교에 직접 classList.add/remove('dark')등 의 기능이 필요하다. [ 주요 기능 ]..

# 인증 (Authentication): "누구인가?", 사용자가 누구인지 확인하는 과정- 시스템에 접근하는 사람이 본인이 맞는지 확인한다. [ 특징 ]- 사용자의 신원을 확인하는 단계- 보통 아이디 + 비밀번호 방식으로 수행된다.- 추가적으로 생체 인식, OTP, 2FA 등으로 보안을 강화할 수 있음 [ 인증 예시 ]- 로그인 과정1️⃣ 사용자가 아이디 + 비밀번호 입력2️⃣ 시스템이 해당 정보가 맞는지 확인 (DB 조회, 해시 값 비교 등)3️⃣ 인증이 성공하면 세션/토큰 발급 후 로그인 완료 [ 인증 방식의 종류 ]1️⃣ 지식 기반 인증 (Knowledge-based Authentication, KBA) → 비밀번호, PIN 입력2️⃣ 소유 기반 인증 (Possession-based Authenti..

Call Stack & Heap : 자바스크립트에서 메모리를 할당하고 관리하는 방식- 둘 다 메모리를 저장하는 공간이지만 용도와 동작 방식에 차이가 있다.  스택(Stack) → 고정된 크기의 메모리, 빠른 할당 & 해제함수 실행 시 지역 변수와 콜 스택(Call Stack)이 여기에 저장됨(예) 함수 호출 시 변수 저장, 실행이 끝나면 자동 해제힙(Heap) → 동적 메모리 할당, 크기가 유동적객체(Object), 클로저, 참조 타입 데이터가 저장됨(예) new Object(), new Array() 같은 동적 할당된 데이터  # 콜 스택 (Call Stack): 함수 실행을 관리하는 메모리 영역- 프로그램 실행 중 함수 호출을 관리한다.- 함수 실행 컨텍스트(execution context)를 저장하..

# React 프로젝트의 package.json 파일: React 개발 환경을 설정하고 실행하는 데 필요한 파일 [ 역할 ]📌 React 프로젝트에서 필요한 패키지 목록을 관리📌 NPM 또는 Yarn을 통해 패키지를 쉽게 추가/삭제 가능📌 프로젝트 실행 및 빌드 명령어를 관리 (scripts) package.json 예제 ){ "name": "my-react-app", "version": "1.0.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.0" }, "devDependencies": { "eslint": "^8.50..

# 탐색: 주어진 데이터에서 특정 값을 찾는 방법 알고리즘언제 사용하면 좋을까?시간복잡도순차 탐색 (Linear Search)정렬되지 않은 데이터에서 특정 값을 찾을 때O(N)이진 탐색 (Binary Search)정렬된 데이터에서 빠르게 찾을 때O(log N)해시 탐색 (Hash Search)특정 키에 대한 값을 빠르게 찾을 때O(1)DFS (깊이 우선 탐색)그래프에서 경로를 찾거나 미로를 탐색할 때O(V + E)BFS (너비 우선 탐색)최단 거리를 찾을 때O(V + E) 1. 선형 탐색 (linear search): 앞에서부터 하나하나 찾는다function linearSearch(arr, target) { for (let i = 0; i - find() , findIndex() 메서드const ..

# 배열 만드는 방법 1. 그냥 만들기const arr = [1, 2, 3, 4, 5]; // 정적인 배열 생성 2. Array 생성자로 만들기# new Array( )- 초기화되지 않고 빈슬롯으로 생성된다.- 빈 슬롯(empty slots) 상태에서는 map,forEach 등 메서드 실행 불가- fill()로 값을 채워준 뒤에 가능const arr = new Array(5); // 길이가 5인 배열 [ empty * 5 ]const filledArr = new Array(5).fill(0); // 길이가 5이며, 0으로 채워진 배열 [0,0,0,0,0]# Array()- 일부 내장 생성자 (Array(), String(), Number(), Boolean(), Object()) → new 없이도 동작 ..

# DOM (Document Object Model, 문서 객체 모델): HTML 문서의 구조를 객체로 표현한 모델= 웹 문서를 표현하는 프로그래밍 인터페이스= 브라우저가 HTML, XML 같은 문서를 파싱한 뒤 생성하는 객체 기반의 구조 Q. DOM 이 필요한 이유?A. 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델로이를 통해 프로그래밍 언어(주로 JavaScript)가 문서의 내용, 구조, 스타일을 동적으로 접근하고 조작할 수 있다- JavaScript와 브라우저 화면(HTML)을 연결하는 역할로 JavaScript는 DOM을 통해 HTML 요소를 조작한다. // 자바스크립트로 DOM 객체에 접근하여 읽거나 수정하는 예시// Welcome 노드에 접..

# 렌더링 방식 : 서버와 클라이언트에서 HTML을 어떻게 제공할지 결정하는 방식** 어디에서 실행되느냐(클라이언트 vs 서버)** 어떤 기술이 이를 처리하느냐로 방식을 구분한다.  # 클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)[ 개념 ] : 초기 요청 시 서버에서 HTML의 기본 틀만 전달하고, JavaScript가 실행되면서 브라우저가 데이터를 가져와서 페이지를 렌더링함.즉, 화면을 구성하는 주요 작업인 HTML 페이지 생성이 브라우저에서 (클라이언트)에서 실행됨. [ 특징 ]- 서버는 HTML 생성을 담당하지 않고, 단순히 API 요청에 대한 데이터만 반환하면 된다.- React, Angular, Vue.js 같은 SPA(Single Page Application)..

자료구조 (Data Structure): 데이터를 저장하는 방법- 데이터를 어떻게 저장하고 활용할지에 대한 개념 [ 자료구조의 종류 ]# 기본 자료구조배열 (Array) → 순서가 있는 데이터 리스트객체 (Object) → 키-값 쌍으로 이루어진 데이터 저장 방식# 고급 자료구조집합 (Set) → 중복을 허용하지 않는 데이터 모음, 생성자 함수로만 만들 수 있다.맵 (Map) → 키-값 쌍을 저장하지만, 키에 다양한 타입 사용 가능, 생성자 함수로만 만들 수 있다.스택 (Stack) → LIFO(Last In First Out) 구조큐 (Queue) → FIFO(First In First Out) 구조링크드 리스트 (Linked List) → 노드들이 포인터로 연결된 구조트리 (Tree) → 계층적인 데..

HTTP (HyperText Transfer Protocol): 클라이언트(브라우저)와 서버가 데이터를 주고받는 통신 규약(Protocol)- 브라우저가 서버에 요청을 보내고, 서버가 응답하는 방식을 정한 규칙  # HTTP 요청의 종류 (메서드): HTTP 요청을 보낼 때 어떤 동작을 할지를 정하는 메서드(method)메서드설명GET데이터를 요청 (조회)POST데이터를 생성 (등록)PUT데이터를 수정 (전체 업데이트)DELETE데이터를 삭제 # HTTP 응답 상태 코드1️⃣ 1xx (정보 응답)100 Continue: 요청이 진행 중2️⃣ 2xx (성공)200 OK: 정상적인 요청 성공201 Created: 새로운 리소스 생성 성공3️⃣ 3xx (리다이렉션)301 Moved Permanently: 영구..