☼

categories

Posts

Data Structures & Algorithms

- Graph 3 - DFS I 기본 원리 - Graph 2 - 탐색 기본 개념 - Graph 1 - 기본 구조와 개념 - Hash 2 - 적용과 응용 - Hash 1 - 기본 개념과 적용

DevOps

- Docker-1 가상화와 컨테이너 개념

Error

- 블로그 개발 에러 로그 1 - Next.js(SSR)과 react-quill 함께 사용하기

.etc

- teklog: Intro

GraphQL

- GraphQL은 무엇이고 왜 사용할까?

HTTP

- HTTP CORS - HTTP 완벽 가이드 - 7 캐시 - HTTP 완벽 가이드 - 6 프록시 - HTTP 완벽 가이드 - 5 웹 서버 - HTTP 완벽 가이드 - 3 HTTP 메시지 - HTTP 완벽 가이드 - 2 URL과 리소스 - HTTP 완벽 가이드 1 - HTTP: 웹의 기초

JavaScript

- HTML 트리와 DOM api - 자바스크립트 클로져와 렉시컬 환경 - 자바스크립트 실행 컨텍스트 - 3 - 자바스크립트 실행 컨텍스트 - 2 - 자바스크립트 실행 컨텍스트 - 1

Next.js

- Next.js 성능 최적화 사례 (SSR -> ISR)- Next.js 성능 최적화 - Nextjs Cache 적용하기 (SSR, i18n)- Next.js는 왜 쓸까?- Next.js - ISR 공식문서 번역 - Next.js - getServerSideProps 공식문서 번역 - Next.js - getStaticProps 공식문서 번역

React

- Suspense 탐구하기 - Fluent React 8 - Concurrent - Fluent React 7 - Reconcile - 훅을 활용하여 마이크로 상태 관리하기 - Fluent React 6 - React Server Component - Fluent React 5 - Prop 관련 패턴들 - Fluent React 4 - 컴포넌트 설계 패턴 (Compound)- Fluent React 3 - 컴포넌트 설계 패턴 (HOC)- Fluent React 2 - 컴포넌트 설계 패턴 (presentational/container)- Fluent React 1 - 컴포넌트 설계 패턴

react-query

- 리액트 쿼리는 왜 쓸까?

Recap

- Auto Resume - 1인 제품 개발 후기 - 2022 회고 및 단상 - 기술블로그 개발 에러로그 & 최적화 - 프론트 개발자 취업 회고록 2 - 부동산 중개 서비스 - 팀 프로젝트 회고록 2 - 프론트 개발자 취업 회고록 - 부동산 중개 서비스 - 팀 프로젝트 회고록 - 인턴 회고록 pt.2 - 인턴 회고록 pt.1

Relay

- Relay는 왜 사용할까?

TypeScript

- TypeScript 입문하기 6 - Class - TypeScript 입문하기 5 - Generic - TypeScript 입문하기 4 - Call Signature - TypeScript 입문하기 3 - Alias - TypeScript 입문하기 2 - Types - TypeScript 입문하기 1

Posts

gVP 2O78d1OAFLs4qhjNKDl9G9P9Yv

category:

g vvrq

2025-01-01

y 9T8dt v Lw 1MjSZQ Ug8u e vr zjMrjaTw4AbW pa oJ8fxl3YBPlCiSXVjGzhD3PTnYd6SfHJAgk05KbPhN4Oy4 n06aHiMdLxuBuxhjiFezt cs Rr

gVP 2O78d1OAFLs4qhjNKDl9G9P9Yv

category:

g vvrq

2025-01-01

y 9T8dt v Lw 1MjSZQ Ug8u e vr zjMrjaTw4AbW pa oJ8fxl3YBPlCiSXVjGzhD3PTnYd6SfHJAgk05KbPhN4Oy4 n06aHiMdLxuBuxhjiFezt cs Rr

gVP 2O78d1OAFLs4qhjNKDl9G9P9Yv

category:

g vvrq

2025-01-01

y 9T8dt v Lw 1MjSZQ Ug8u e vr zjMrjaTw4AbW pa oJ8fxl3YBPlCiSXVjGzhD3PTnYd6SfHJAgk05KbPhN4Oy4 n06aHiMdLxuBuxhjiFezt cs Rr

gVP 2O78d1OAFLs4qhjNKDl9G9P9Yv

category:

g vvrq

2025-01-01

y 9T8dt v Lw 1MjSZQ Ug8u e vr zjMrjaTw4AbW pa oJ8fxl3YBPlCiSXVjGzhD3PTnYd6SfHJAgk05KbPhN4Oy4 n06aHiMdLxuBuxhjiFezt cs Rr

gVP 2O78d1OAFLs4qhjNKDl9G9P9Yv

category:

g vvrq

2025-01-01

y 9T8dt v Lw 1MjSZQ Ug8u e vr zjMrjaTw4AbW pa oJ8fxl3YBPlCiSXVjGzhD3PTnYd6SfHJAgk05KbPhN4Oy4 n06aHiMdLxuBuxhjiFezt cs Rr

Auto Resume

Graph 3 - DFS I 기본 원리

category:

Data Structures & Algorithms

2025-02-25

DFSTLDR탐색 목적에 적합한 방문과 순회 방식, 조회 시점을 구성한다.조건은 조회, 백트래킹에 적용될 수 있다.Prologue이전 글들을 바탕으로 DFS를 방문, 조회, 백트래킹, 순회 개념으로 이해하기 위해 작성했다. 그래프의 구조(링크)그래프의 탐색(링크)글을 쓰고 나서 보니, 이전보다 더 이해가 깊어진 것 같다. "모든 유형의 DFS를 외워서 풀어

Graph 2 - 탐색 기본 개념

category:

Data Structures & Algorithms

2025-02-25

TLDR탐색은 방문 순서, 조회 시점, 백트래킹과 순회 방식을 최적화한다.이에 따라 목적에 맞는 그래프와 탐색 알고리즘을 구성한다.Prologue이전 글에서 그래프의 기본 구성 요소들과 JS에서의 표현법을 알아봤다. 이전 글이 그래프 구조와 표현에 대한 글이라면, 이번에는 그래프 탐색 자체에 집중한다. 탐색을 이해하기 위한 몇가지 필수적인 개념에 집중했다.

Graph 1 - 기본 구조와 개념

category:

Data Structures & Algorithms

2025-02-25

TLDR그래프는 여러 노드가 엣지로 연결된 자료 구조이다.JS에선 그래프를 인접 행렬과 인접 리스트로 만든다.정의컴퓨터 과학에서 그래프는 수학의 그래프 이론에서 정의된 무방향 그래프와 방향 그래프 개념을 구현하기 위한 추상 자료형이다. - wikipedia (graph)이전 글에서 HTML 트리, DOM api의 자료 구조를 비교하며 "그래프"에 대해 조금

HTML 트리와 DOM api

category:

JavaScript

2025-02-25

TLDRHTML는 정적 트리이고 DOM api는 동적 트리이다.문제는 구조에서 오는 복잡성 : 참조 무결성, 실행 순서해결은 복잡성을 줄이기 위한 전략전제리액트와 같은 프론트엔드 라이브러리나 프레임워크는 왜 사용하나요?면접에서 이런 질문을 받았다. 난감한 기분이 드는 걸 보니, 그동안 너무 당연하게만 생각했던 것 같다. 현대 웹 애플리케이션의 복잡한 UX를

Auto Resume

category:

Recap

2025-03-01

배포된 사이트: 링크깃헙 레포 : 링크작업 소요 시간: 1.5일 (MVP 버전)1. 목적Auto Resume는 Figma 프로젝트를 원본 데이터(Source of Truth)로 삼는 정적 HTML 이력서 웹사이트입니다.이번 프로젝트에는 다음과 같은 목적이 있었습니다.Figma = Source of Truth 피그마 문서와 동기화된 웹사이트자동 배포: Fig

graph TD
    A -->|1| B
    B -->|2| D["D (리프 노드 도착 3)"]
    D -.-|"백트래킹(4)"| B
    B -->|5| E["E (리프 노드 도착 6)"]
    E -.-|"백트래킹(7)"| B
    B -.-|"백트래킹(8)"| A
    A -->|9| C
    C -->|10| F["F (리프 노드 도착 11)"]
    F -.-|"백트래킹(12)"| C
    C -->|13| G["G (리프 노드 도착 14)"]
    G -.-|"백트래킹(15)"| C

graph LR
    A[그래프 탐색]
    A --> B[최단 경로 알고리즘]
    B --> B1[다익스트라 알고리즘]
    B --> B2[벨만-포드 알고리즘]
    B --> B3[플로이드-워셜 알고리즘]
    B --> B4[A* 탐색 알고리즘]
    
    A --> C[최소 신장 트리 알고리즘]
    C --> C1[프림 알고리즘]
    C --> C2[크루스칼 알고리즘]
    
    A --> D[위상 정렬]
    
    A --> E[흐름 네트워크 알고리즘]
    E --> E1[네트워크 플로우]
    E --> E2[이분 매칭]
    
    A --> F[강한 연결 요소]
    F --> F1["SCC (강한 연결 요소 분해)"]
    
    A --> G[문자열 탐색 알고리즘]
    G --> G1[KMP 알고리즘]
    G --> G2[보이어-무어 알고리즘]
    G --> G3[라빈-카프 알고리즘]

graph TD

A[A] --> B[B];
A --> C[C];
B --> D;
B --> E;
C --> F;
C --> G;

graph TD 
A[초기 스크립트 실행] -->|JS 실행| B[DOM API 호출]  
B -->|노드 찾기| C[타겟 노드 식별]  
C -->|변경할 노드 격리| D[독립적 DOM 업데이트]  
D -->|부모 및 형제 노드 영향 없음| E[변경된 노드만 리렌더링]  
E -->|렌더링 엔진 요청| F[리플로우 발생]  
F -->|스타일 & 레이아웃 계산| G[리페인트 수행]  
G -->|화면 갱신| H[최종 렌더링 완료]  
  
D -->|최적화 적용| I[필요한 노드만 업데이트]  
I -->|불필요한 렌더링 방지| H