chaeon1 님의 블로그

✍️ 시간 복잡도 계산법1️⃣ 알고리즘 분석알고리즘에서 반복되는 기본 연산 확인반복문 (for, while)재귀 호출정렬, 탐색, 삽입 등2️⃣ 반복문 분석반복문은 n번 실행되므로 시간 복잡도는 O(n)반복문이 중첩되었을 때는 반복 횟수를 서로 곱해서 계산for i in range(n): // n번 for j in range(n): // n번 print(i, j) // n * n = n²번 → O(n²)3️⃣ 함수 호출 분석함수 호출이 있을 경우 호출된 함수의 시간 복잡도를 분석하여 합산function a(n) { for (let i = 0; i 이 경우 함수 b는 O(n), 함수 a는 함수 b를 n번 호출하므로 총 시간 복잡도는 O(n²)4️⃣..

시간 복잡도💡 정의알고리즘이 문제를 해결하는 데 걸리는 시간을 입력 크기(n)와 비교하여 표현한 것알고리즘의 실행 시간을 수학적으로 분석하여 입력 크기가 커졌을 때 실행 시간이 어떻게 변화하는지 예측📌 기본 개념입력 크기(n): 알고리즘에 주어지는 데이터의 크기예: 배열의 크기, 그래프의 노드 수 등최악의 경우 시간 복잡도: 입력 크기 n에 대해 알고리즘이 가장 많은 시간을 소요하는 경우평균 시간 복잡도: 입력 데이터가 일반적으로 어떻게 분포하는지에 따른 평균적인 시간🚀 문제 해결 전략분할 정복: 문제를 작은 문제로 나누어 해결한 후 합치는 방법 (예: 퀵 정렬, 병합 정렬)동적 계획법: 문제를 작은 하위 문제로 나누고, 그 결과를 재사용하는 방식 (예: 피보나치 수 계산)그리디 알고리즘: 매 순간..

💚 Git🔗 GitHub 저장소 연동cd read-onGit 초기화git init원격 저장소 연결git remote add origin https://github.com/user/repository.git브랜치 이름 변경git branch -M main첫 푸시git push -u origin main🪄 Lint & Format📦 사용 도구ESLint – 코드 문법 검사Prettier – 코드 포맷 자동 정리lint-staged – 변경된 파일만 lint/formatHusky – Git Hook 설정🔧 설치npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier lint-staged husky⚙️ 설정...

💙 프론트엔드🖥️ Next.js작업 디렉토리로 이동cd /Projects프로젝트 생성npx create-next-app@latest예시 응답:√ What is your project named? ... read-on√ Would you like to use TypeScript? ... No / Yes√ Would you like to use ESLint? ... No / Yes√ Would you like to use Tailwind CSS? ... No / Yes√ Would you like your code inside a `src/` directory? ... No / Yes√ Would you like to use App Router? (recommended) ... No / Yes√ Woul..

✨ 핵심 기능재사용 가능한 useToast() 훅Framer Motion 적용React Portal을 사용해 DOM 트리 외부에 렌더링1️⃣ Toast 컴포넌트ReactDOM.createPortal을 이용해 Toast를 document.body에 직접 렌더링이렇게 하면 부모 컴포넌트의 CSS나 위치에 영향을 받지 않고 자유롭게 위치 지정 가능return ReactDOM.createPortal( {message} , document.body,);2️⃣ useToast Hook컴포넌트 어디서든 Toast 메시지를 쉽게 트리거할 수 있도록 커스텀 훅 작성필요한 곳에서 showToast(message)만 호출하여 사용import { useState, useCallback } fro..

📌 1. 입출력 처리✅ 콘솔 입력 (Node.js 기준)const fs = require('fs');const input = fs.readFileSync('/dev/stdin').toString().trim().split('\n');✅ 예제 입력const input = `31 2 3`.split('\n'); const N = Number(input[0]); const arr = input[1].split(' ').map(Number);✅ 출력console.log(answer);📌 2. 기본 자료형숫자형 변환Number("123"); // 123parseInt("123", 10); // 123문자열let str = "hello";str.length; // 문자열 길이st..

✉️ 기술 스택React, TypeScript, Zustand, Tiptap, DOMPurify, tailwindCSS, FlowbiteTiptap EditorTiptap Rich Text Editor - the Headless WYSIWYG Editor✔️ 쉽게 확장 가능✔️ ProseMirror 기반: 구조적 편집 가능✔️ 확장 기능 커스터마이징 가능✔️ 공식 문서 설명이 잘 되어 있어서 따라하기 편함커스터마이징 에디터 구성✏️ 에디터 설정필요한 extension (StarterKit, Underline, Highlight) 선택적으로 추가prose 기반 스타일링 적용debounce 적용으로 입력 최적화const editor = useEditor({ editorProps: { attribute..

46장 제너레이터와 async/await46.1 제너레이터란?제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.46.2 제너레이터 함수의 정의function* 키워드로 선언, yield 표현식 포함선언문, 표현식, 메서드, 클래스 메서드 형태화살표 함수로 정의 불가new 생성자로 호출 불가46.3 제너레이터 객체일반 함수: 호출 시 코드 블록 실행제너레이터 함수: 호출 시 제너레이터 객체 생성 후 반환제너레이터 객체는 이터러블이면서 동시에 이터레이터Symbol.iteratornext: 호출 시 yield까지 실행하고 { value, done } 객체 반환return:..

41장 타이머41.1 호출 스케줄링함수 호출 지연, 반복 예약 가능타이머 함수: 호스트 객체setTimeout: 일정 시간 후 한 번만 실행setInterval: 일정 시간 간격으로 반복 실행자바스크립트는 싱글 스레드로 동작하므로 타이머는 비동기 처리41.2 타이머 함수setTimeout / clearTimeoutconst timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);매개변수설명func타이머가 만료된 뒤 호출될 콜백 함수delay타이머 만료 시간(ms). setTimeout 함수는 delay 시간으로 단 한 번 동작하는 타이머를 생성한다. 인수 전달을 생략한 경우 기본값 0이 지정된다.param1, param2, ...호출 스케줄링된 ..

36장 디스트럭처링 할당배열이나 객체에서 값을 추출해 변수에 개별적으로 할당하는 문법이터러블 또는 객체 리터럴에서 필요한 값만 뽑을 때 유용36.1 배열 디스트럭처링 할당기본 문법const [a, b] = [1, 2];인덱스 기준으로 순서대로 할당할당 대상은 반드시 이터러블에러 예시: const [x, y] = {}; // TypeError변수 수와 요소 수의 일치는 필요하지 않음부족 시 undefined, 초과 시 무시기본값 설정 가능const [a, b = 10] = [1]; // a:1, b:10Rest 요소 사용 가능const [x, ...y] = [1, 2, 3]; // x:1, y:[2,3]예시 활용: URL 파싱 시 필요한 값만 추출36.2 객체 디스트럭처링 할당기본 문법const { key..