☼

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

e7j3yFElWxPAJY HxX02 77c2FF1B3

category:

f97D34C

2025-01-01

CIhUqICveBuR4lUScxh1 LXTKszMFcWXDG15YtGrgS3PWYkFPP Z8wEEubNKa9OOPhonvohzviYFL7 rpL11aqoscs6ZR6oYjc K5D8ZCP 6a gE 5uawPYS

e7j3yFElWxPAJY HxX02 77c2FF1B3

category:

f97D34C

2025-01-01

CIhUqICveBuR4lUScxh1 LXTKszMFcWXDG15YtGrgS3PWYkFPP Z8wEEubNKa9OOPhonvohzviYFL7 rpL11aqoscs6ZR6oYjc K5D8ZCP 6a gE 5uawPYS

e7j3yFElWxPAJY HxX02 77c2FF1B3

category:

f97D34C

2025-01-01

CIhUqICveBuR4lUScxh1 LXTKszMFcWXDG15YtGrgS3PWYkFPP Z8wEEubNKa9OOPhonvohzviYFL7 rpL11aqoscs6ZR6oYjc K5D8ZCP 6a gE 5uawPYS

e7j3yFElWxPAJY HxX02 77c2FF1B3

category:

f97D34C

2025-01-01

CIhUqICveBuR4lUScxh1 LXTKszMFcWXDG15YtGrgS3PWYkFPP Z8wEEubNKa9OOPhonvohzviYFL7 rpL11aqoscs6ZR6oYjc K5D8ZCP 6a gE 5uawPYS

e7j3yFElWxPAJY HxX02 77c2FF1B3

category:

f97D34C

2025-01-01

CIhUqICveBuR4lUScxh1 LXTKszMFcWXDG15YtGrgS3PWYkFPP Z8wEEubNKa9OOPhonvohzviYFL7 rpL11aqoscs6ZR6oYjc K5D8ZCP 6a gE 5uawPYS

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

category:

DevOps

2025-09-28

가상화 개념과 컨테이너클라우드 컴퓨팅에 대해 공부하기 위해 Docker 학습을 시작했습니다. 이 글은 인프런의 도커 마스터즈 강의를 듣고 작성했습니다.효과적인 학습을 위해강의 내용을 수기로 요약강의 자료와 함께 수기에서 적은 내용을 markdown으로 옮기고부족한 배경지식과 궁금증을 조사하는 방식으로 학습했습니다.이번 글에선 가상화의 기본 개념, 도커, 쿠

HTTP CORS

HTTP 완벽 가이드 - 7 캐시

HTTP 완벽 가이드 - 6 프록시

HTTP 완벽 가이드 - 5 웹 서버

HTTP CORS

category:

HTTP

2025-03-03

CORS: Cross-Origin Resource Sharing웹 보안 정책: 동일 출처 정책(Same-Origin Policy, SOP)다른 출처(origin)에서 실행되는 스크립트를 방지한다.하지만 현실적으로 브라우저의 도메인과 백엔드 서버의 origin이 다른 경우는 흔하다. 이를 해결하기 위해 CORS(Cross-Origin Resource Shar

HTTP 완벽 가이드 - 7 캐시

category:

HTTP

2025-03-02

캐시는 자주 쓰이는 문서 사본을 자동 보관하는 HTTP 장치다. 웹 요청이 캐시에 도착했을 때. 캐시된 로컬 사본이 있다면, 그 문서는 원 서버가 아니라 그 캐시로부터 제공된다.프론트 라이브러리들은 각자 사용하기 편한 인터페이스를 제공하지만, 근간에는 HTTP 캐시 디렉티브가 연관되어 기본적인 이해가 필요하다. Next.js의 최신 버전은 서버 측 fet

HTTP 완벽 가이드 - 6 프록시

category:

HTTP

2025-03-02

Cloudflare를 자주 쓰면서도, 공식 문서의 이 글을 읽고 표면적으로만 이해할 수 있었다. 이번 챕터에서 프록시를 자세하게 다루었다. 궁금증이 들 때마다 다시 읽어보면 좋겠다.웹 중개자웹 프록시 서버는 클라이언트의 입장에서 트랜잭션을 수행하는 중개인. 프록시 없이 클라이언트는 서버와 직접 대화있다면 클라이언트는 프록시와 대화프록시는 웹 서버이면서 웹

HTTP 완벽 가이드 - 5 웹 서버

category:

HTTP

2025-03-02

MIME 타입, 서버사이드의 동적 컨텐츠 생성이 도움이 된다. 4장의 내용이 약간 어려워, 우선 주요 내용들을 간략히 추리고 인상 깊은 내용에 하이라이트 하였다.다채로운 웹 서버웹서버 : 웹 서버 소프트웨어와 웹 페이지 제공에 특화된 장비 양쪽 모두HTTP 및 그와 관련된 TCP 처리를 구현한 것. TCP 커넥션 관리에 대한 책임을 운영체제와 나눠 갖는다

stateDiagram
    [*] --> client : 사용자 명령 입력
    
    state "Docker Client" as client {
        [*] --> CLI : docker 명령어
        CLI --> HTTP_REST : REST API 호출
    }
    
    state "Docker Server" as server {
        [*] --> Daemon : Docker Daemon 시작
        Daemon --> API : REST API 엔드포인트
        API --> Containerd : 컨테이너 관리 요청
        Containerd --> Runc : 컨테이너 실행
    }
    
    client --> server : HTTP REST 통신
    server --> client : 응답 반환
    
    note right of client
        Docker CLI가 사용자 명령을
        HTTP REST API로 변환하여
        Docker Daemon과 통신
    end note
    
    note right of server
        Docker Daemon이 REST API를 통해
        클라이언트 요청을 받아
        containerd와 runc를 통해
        실제 컨테이너 작업 수행
    end note