Posts

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

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

category:

DevOps

2025-09-28

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

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 커넥션 관리에 대한 책임을 운영체제와 나눠 갖는다

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 3 - DFS I 기본 원리

category:

Data Structures & Algorithms

2025-02-25

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

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 2 - 탐색 기본 개념

category:

Data Structures & Algorithms

2025-02-25

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

graph TD

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

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를

graph TD;
    A["A.답을 모으는 쿼리는 query O(n) 순회. 순회 과정에서 해시를 O(1)로 탐색"] --> B;
    B["B.첫번째 조건은 적절한 키로 해당하는 info[i~n] 요소들을 얻음"] --> C;
    C["C.두번째 조건을 점수로 하고, 현재 값 점수 이상을 통과하는 요소들만 필터링"] --> D;
    D["D.문자열 조건은 query[i]가 info[i]의 부분집합"] --> E;
    E["E.Set 메서드의 부분집합으로 현재 쿼리에 해당하는 요소만 거르고, 점수를 판별"] --> F;
    F["Fin: 저장된 갯수 반환"]

Hash 2 - 적용과 응용

category:

Data Structures & Algorithms

2025-02-25

탐색 영역과 비교군을 명확히 하기단계를 나누고, 적절한 도구를 선택하기타입과 조건에서 단서 찾기이 글의 목적은 암기하는 게 아니라 *사고 과정 자체를 학습하기이다.지난 글에 이어 해시를 알아본다. 이번엔 처음 풀어본 문제로 사고 과정과 실패 원인, 동작 원리를 분석했다. 제한 시간 30분 동안 프로그래머스의 정답률 34%의 레벨 2 문제를 풀었다. 노트에

Hash 1 - 기본 개념과 적용

category:

Data Structures & Algorithms

2025-02-24

TLDR: 키가 필터링을 수행할 수 있도록 키-값 저장 구조를 만든다이번 글에서는 프론트엔드 알고리즘 테스트에 자주 활용되는 해시를 알아본다. 기본 개념과 JS에서 활용하는 방법을 위주로 살펴본다. 이 글은 책을 통해 알게 된 개념과 스스로 학습하는 과정을 기록했다. 특히 JS부터 추론 과정을 글로 표현하는 것에 집중했다.Hash?무엇?키-값value으로

Suspense 탐구하기

category:

React

2025-01-27

최근 Next.js 15, React 19의 새로운 패턴에 적응하면서 Suspense를 자주 사용하게 됐다. 이 과정에서 Suspense가 단순히 '로딩 상태를 보여주기' 이상으로 중요한 개념으로 느껴져 궁금해졌다.이 글은 Suspense의 기본적인 사용법에서 시작하여 점진적 렌더링, 선언적 UI, Render As You Fetch 등의 키워드로 서스팬스

1인 제품 개발 후기

category:

Recap

2024-11-13

오랜만에 글을 씁니다. 지난 7월, 1년 9개월 동안의 직장 생활을 마무리하게 되었습니다. 퇴사 이후, 지난 3개월 동안 이전부터 꼭 도전해보고 싶었던 제품 개발을 하게 되었습니다. 그동안 꽤 많은 사이드 프로젝트를 진행했지만, 대부분이 실제 제품이라기보다는 학습을 위한 토이 프로젝트들이었습니다. 이번 글에서는 제가 어떤 문제를 발견하고, 어떻게 해결하려

Fluent React 8 - Concurrent

category:

React

2024-03-20

챕터 7의 리액트 동시성Concurrency은 이전 글에서 이어진다. 이번 장에서 우선순위 업데이트 즉 '렌더링 스케줄링’이 리액트 내부에서 어떻게 이루어지며, 이를 활용하는 훅을 알아본다. 또한 이전 글에서 살펴본 '렌더 레인’과 같은 개념들을 조금 더 깊이 있게 알아본다. 긴 글이니 천천히 반복해서 읽어보자! (이탤릭체는 본문의 인용입니다)동기식 렌더링

Fluent React 7 - Reconcile

category:

React

2024-03-18

Fluent React의 챕터 4는 조정Reconciliation에 관한 내용이다. 리액트 문서에서는 파이버나 조정에 관한 문서가 따로 없어 답답했는데, 이 장에서 꽤 깊이 있게 다룬다. 이 글을 통해 파이버와 조정이 무엇이고, 어떻게 리액트 내부에서 렌더링 최적화가 이루어지는지, 그리고 왜 필요했는지 살펴볼 수 있다. 궁금했던 내용이니 자세히 알아보자!(

HTTP 완벽 가이드 - 3 HTTP 메시지

category:

HTTP

2024-03-11

지난 글에서 HTTP는 메시지를 기반으로 통신한다고 하였다. 메시지는 오직 요청/응답 두가지만 있으며, 머리-가슴-배 시작줄-헤더-본문으로 구성되는 것또한 살펴봤다. 요청, 응답은 시작줄에 각기 다른 내용을 갖는 다는 것 또한 확인했다. 이제 메시지의 구성 요소들과 각 요소들의 옵션들을 상세히 정리해볼 차례이다. 한번 쯤은 정리하고 넘어가도 좋을 내용이라

훅을 활용하여 마이크로 상태 관리하기

category:

React

2024-03-10

Jotai의 개발자 Daishi Kato가 쓴 ‘리액트 훅을 활용한 마이크로 상태관리’ 를 읽고 정리한 내용이다. code snippet을 직접 작성하고, 기억할만한 내용을 선별하고, 글의 순서를 편집해 작성하였다. 지역상태/전역 상태의 구분, context api, 전역 상태가 어떤 문제를 공유하고 각각 어떻게 해결해가는지를 중점으로 작성했다. 이 글을

HTTP 완벽 가이드 - 2 URL과 리소스

category:

HTTP

2024-03-07

익숙한 내용은 간략하게 정리. 읽으면서 궁금한 부분(ssl이나 wss, sse 등 여러 프로토콜)은 더 찾아보고 추가하여 작성했다.URL의 문법http// www.example.com / product?type=new어떻게 / 어디에서 / 무엇을URL에서 각 부분은 '컴포넌트’라고도 불린다.<프로토콜>://<사용자이름>:<비밀번호>@<호스트>:<포트>/<경

Fluent React 6 - React Server Component

category:

React

2024-03-06

Fluent React에서 서버 컴포넌트에 대해 깊이있게 다루고 있어 학습한 내용을 정리. 책과 공식문서, 예시 코드를 작성해가며 학습했고, 유익한 내용이 많았다. 사이드 프로젝트를 RSC를 사용하여 개발했는데, 이 챕터를 학습하고 이해가 더 깊어진 것 같다.(italic체는 Fluent React의 인용입니다)React Server Component리액트

HTTP 완벽 가이드 1 - HTTP: 웹의 기초

category:

HTTP

2024-03-05

최근 네트워크 기본이 좀 부족하다고 느낀 일이 있어서 처음부터 다시 읽기 시작했다. 챕터 순으로 손필기와 함께 요약해가며 정독 후, 다시 내용을 복기하며 작성한 글이다. 과정에서 생긴 궁금증이나 혼동되는 개념은 검색하고 추가 작성했다. 또한 내용을 이해하기에 더 적절한 순서로 챕터의 내용을 편집하여 작성했다. (복붙 필사기계가 의미가 있을까 싶어 나름 머

Fluent React 5 - Prop 관련 패턴들

category:

React

2024-02-28

지난 글에 이은 Fluent React의 5장, Powerful Patterns 챕터의 마지막 내용이다. Props와 연관된 설계 패턴을 모아 작성하였다.Render Propconst WindowSize = (props) => { const [size, setSize] = useState({ width: -1, height: -1 }); return

Fluent React 4 - 컴포넌트 설계 패턴 (Compound)

category:

React

2024-02-26

지난 글에 이어서 작성Compound 합성 컴포넌트의 이점은 렌더링의 제어를 부모에게 역전시키면서도, 자식들 사이에서 문맥적 상태 인식을 유지한다는 것입니다. (...) 또 다른 이점은 이 패턴이 관심사의 분리를 촉진한다는 것으로, 이는 시간이 지남에 따라 응용 프로그램이 훨씬 더 잘 확장할 수 있도록 돕습니다.Compound 패턴은함수형 컴포넌트에서도

Fluent React 3 - 컴포넌트 설계 패턴 (HOC)

category:

React

2024-02-25

지난 글에 이어서, Fluent React에서 다루는 컴포넌트 설계 패턴. 이번에는 HOC 패턴을 다뤄본다.High Order Component (HOC) 고차 컴포넌트고차 컴포넌트(HOC)는 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 컴포넌트입니다. HOC는 여러 컴포넌트 간에 공통적으로 사용되는 동작을 반복하지 않고도 공유할 경우에 유용합니

Fluent React 2 - 컴포넌트 설계 패턴 (presentational/container)

category:

React

2024-02-22

지난 글에서 최적화를 위해 사용되는 훅과 React.memo의 적절한 사용법에 대해 깊이 살펴보았다. 이어지는 내용은 리액트 컴포넌트의 일반적인 설계 패턴이다. 필요한 만큼이나 알고자 하는 갈증이 깊었고, 또 중요한 내용이기에 책에서 이해한 내용과 함께 직접 고민한 생각을 정리해본다. 컴포넌트 설계에 관한 내용들은 여러차례 나누어 작성할 예정이다.들어가기에

Fluent React 1 - 컴포넌트 설계 패턴

category:

React

2024-02-19

최근에 출간된 Fluent React를 읽고 나서 인상 깊었던 내용을 정리해보고자 한다. 이전에 'Learning React'는 React 18과 관련된 최신 내용이 부족해 아쉬웠지만, 이 책을 통해 그러한 부분을 완전히 보완할 수 있었다.가령 책에서는 그동안 궁금했던 React Fiber의 상세한 설명과 서버 컴포넌트에 대한 깊이 있는 내용을 다룬다. R

서버 컴포넌트와 App 라우팅 적응기 1

category:

React

2024-01-08

사이드 프로젝트를 React 18과 Next.js 14의 app 라우터를 사용해 개발하였다. 사이드를 시작한 이유는 여러가지가 있었지만 무엇보다 프론트엔드, 특히 리액트와 Next.js을 중심으로 찾아온 변화가 궁금했다. 직접 사용해보고 더 깊게 알고 싶었기 때문에 새로운 기술을 도입하여 프로젝트를 진행하게 되었다. 사용한 뒤 알게 된 내용들을 간략히 정리

Next.js 성능 최적화 사례 (SSR -> ISR)

category:

Next.js

2024-01-03

지난 글에 이어 쓰는 Next.js의 성능 최적화 사례에 대한 회고입니다.지난 글에서 작성한 최적화를 위한 체크리스트를 실제로 업무에 적용하여 성능 개선을 이룬 사례에 대해 적어보려 한다. 이 체크 리스트에서 최적화를 마친 이후, 각 항목이 실제로 얼마나 임팩트가 있었는지 확인해보았다.0. 최적화 리스트와 성과최적화를 위한 체크 리스트데이터 fetching

Learning React 1

category:

React

2023-08-01

리액트에 대해 더 깊게 알고 싶어져 Learning React를 읽었다. 빠르게 완독하고, 리액트 문서를 읽은 뒤 다시 궁금했던 부분을 살펴보았는데, 실용적인 설명 위주인 문서보다 조금은 더 깊게 설명하는 부분이 있어 메모한다. 문서와 이 책을 번갈아보면 이해가 깊어져 좋다. 대부분의 서적이 훅의 사용법 자체에만 집중하고 있기 때문에, 약간은 더 깊게 살펴

리액트 상태와 불변성 3

category:

React

2023-07-30

이전 글을 통해, 이 글을 쓰게 된 계기인 ‘왜 상태는 불변성을 지켜야 하는가’에 대한 대답이 구체화되어 간다. 그러고보니, 이 글타래에서 불변성에 대해 정의를 내리지 않았던 듯하다. 불변성이란 함수형 프로그래밍의 주요 개념으로 위키에 따르면 다음과 같다.불변객체(immutable object)는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다.

리액트 상태와 불변성 2

category:

React

2023-07-26

state와 상태 불변성에 대한 궁금증에서 시작된 리액트 상태 메모. 지난 글을 쓰다보니, 자연스럽게 이해되는 부분이 있어 먼저 정리하고 넘어간다. 리액트 상태 Statestate는 렌더링 사이에서 값을 저장 (데이터를 보관)setter는 리렌더링을 트리거 함수형 컴포넌트 기준으로 더 이해가 쉽다. 리액트 컴포넌트는 결국 (render()를 반환하는) 함수

리액트 상태와 불변성 1

category:

React

2023-07-24

리액트 상태와 불변성 당연하게 사용하는 훅이지만 깊게 공부는 안해본 것 같아서 남기는 간단한 메모동일한 제목의 비슷한 내용이 많은 키워드이다. 검색해보면 ‘리액트에서 불변성을 왜 지켜주어야 하는가?’라는 제목의 글이 많은데, 막상 살펴보면 set state 함수의 매개변수로 얕은 복사를 해야한다는 내용이 대부분이다. 실은 state에서 불변성이 어떻게 구현

Next.js 성능 최적화

category:

Next.js

2023-07-09

회사에서 서비스 리뉴얼 이후, 또다시 리뉴얼에 가까운 보수 작업이 있었다. 3가지 이유가 있었다. 1 기획 변경으로 큰 변화가 있었고, 2 심각한 버그가 연이어 터졌으며, 3 코드 컨벤션에 맞지 않거나 비효율적인 로직을 리팩터링 해야했기 때문이다. 22년 4분기에서 23년 1분기는 새 프로젝트를 론칭하느라 정신없었다면, 23년 2분기는 뜯어 고치느라 정신이

Nextjs Cache 적용하기 (SSR, i18n)

category:

Next.js

2023-02-03

회사 프로젝트 개발 중 최적화 이슈가 생겼다. getServerSideProps가 적용된 페이지의 로드가 17s 가량 걸리는 문제였다. 해결하는데 꽉찬 하루가 소요됐는데 (야근 포함 1.5일), 숙지 안하고 넘어가면 상당히 아쉬울 것 같다. 그리고 캐시 설정에 여러가지 시도를 했었는데, 급해서 이것저것 한꺼번에 시도하다보니 어떤 부분 때문에 해결됐는지 정확

리액트 쿼리는 왜 쓸까?

category:

react-query

2023-01-29

프로덕션에서 리액트 쿼리 도입을 앞두고 있고, 개인적으로도 관심이 많아서 정리 해본다. 저에겐 아직 낯설고, 부족한 부분이 많으니 이상한 부분이 있으면 꼭 방명록에라도 지적해주시면 감사하겠습니다.-리액트 쿼리에 관심을 갖게된 계기는 리액트 쿼리 공식문서에 올라온 swr과 비교하는 자료 때문이다.얼핏보면 swr도 캐싱할 수 있고, 겹치는 기능이 많아 유사해보

2022 회고 및 단상

category:

Recap

2023-01-24

- 2022년은 많은 일이 있었습니다. 개발자로 전직하고서 생애 첫 정규직 취업, 해고, 면접, 재취업을 모두 겪은 다사다난한 해였습니다. 저뿐만 아니라 여러분에게도 고된 시간은 뒤로 하고 조금은 더 순조로운 새해가 되길 바랍니다. 2022 회고개발을 시작했다좋은 결정이었다. 일하는 즐거움을 다시 찾은 것 같아 기쁘다. 스트레스를 받네 마네 해도, 개발 자

Next.js는 왜 쓸까?

category:

Next.js

2022-12-10

왜 Next.js를 사용할까?이 글은 사내 세미나 자료를 바탕으로 작성되었습니다. 틀린 내용이 있을 수 있습니다. leetekwoo@gmail.com으로 질문 혹은 피드백 주시면 정말 감사하겠습니다!꼭 Next.js를 사용해야할까? 프로젝트 리빌딩에 Next.js 사용이 결정되었다. 전직장에서 사용한 경험이 있었지만 팀원 중 다수는 경험이 없었고, 학습에

Next.js - ISR 공식문서 번역

category:

Next.js

2022-11-09

학습 목적을 위해 Next.js의 Incremental Static Regeneration (ISR) 공식문서를 번역했습니다. 오타, 의역이 있을 수 있습니다. leetekwoo@gmail.com으로 피드백 주시면 감사하겠습니다.---Incremental Static RegenerationNext.js는 웹사이트의 빌드 이후에 정적 페이지를 생성하거나 업데

Next.js - getServerSideProps 공식문서 번역

category:

Next.js

2022-11-09

학습 목적을 위해 Next.js의 getServerSideProps 공식문서를 번역하였습니다. 오타, 의역이 있을 수 있습니다. leetekwoo@gmail.com으로 피드백 보내주시면 감사하겠습니다.---getServerSideProps페이지로부터 getServerSideProps(Server-Side Rendering)라는 이름의 함수를 export 한

Next.js - getStaticProps 공식문서 번역

category:

Next.js

2022-10-31

개인적으로 공부하기 위해 Next.js docs의 getStaticProps를 번역했습니다. 오역/의역이 있을 수 있습니다. leetekwoo@gmail.com으로 언제든 피드백 주세요! --getStaticProps페이지 내에서 getStaticProps(정적 사이트 생성 SSG)라는 이름의 함수를 export한다면, next.js는 getStaticPr

자바스크립트 클로져와 렉시컬 환경

category:

JavaScript

2022-10-29

클로저“A closure is the combination of a function and the lexical environment within which that function was declared.”클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.뭔소린가 싶다. 키워드는 **“함수가 선언된 렉시컬 환경”**이란다.const x = 1;

자바스크립트 실행 컨텍스트 - 3

category:

JavaScript

2022-10-29

4 실행 컨텍스트 스택실행 컨텍스트는 스택 자료구조로 관리된다:이를 실행 컨텍스트 스택이라고 한다.const x = 1; function foo () { const y = 2; function bar() { const z = 3; console.log(x + y + z); } bar(); } foo(); // 6 출력 실행 컨텍스트 순서 :

자바스크립트 실행 컨텍스트 - 2

category:

JavaScript

2022-10-29

3 실행 컨텍스트의 역할주어진 예제를 통해 자바스크립트 엔진이 어떻게 선평가 후실행할 지 살펴보자.// 전역 변수 선언 -> 전역 코드 평가 1 // 변수 x, y 할당 -> 전역 코드 실행 1 const x = 1; const y = 2; // 함수 정의 -> 전역 코드 평가 2 function foo(a) { // 지역 변수 & 매개변수 선언 ->

자바스크립트 실행 컨텍스트 - 1

category:

JavaScript

2022-10-27

정의 🔈 자바스크립트의 동작 원리를 담고 있는 핵심 개념실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경, 매커니즘.실행 컨텍스트를 이해하면 다음과 같은 것을 알 수 있다고 한다.스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방법 호이스팅이 발생하는 이유클로저의 동작 방식태스크 큐와 함께 동작하는 이벤트 핸들러비동기 처리의 동작

Relay는 왜 사용할까?

category:

Relay

2022-10-19

Relay는 react, graphql을 개발한 meta(facebook)에서 출시한 graphql 라이브러리이다. graphql의 데이터 상태관리를 위해 사용한다. 여러가지 강력한 기능과 편의성을 제공한다. 앞서 살펴본 graphql을 프론트 환경에서 실질적으로 구현하기 위해 필요하다. 장단점을 통해 relay 사용의 이점을 간략히 파악하고, 기본적인 개

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

category:

GraphQL

2022-10-19

GraphQL은 클라이언트 애플리케이션에서 개발자가 필요한 데이터에 불러오는데 초점을 맞춰, 뷰에 필요한 데이터를 정확하게 지정해서 한 번의 요청으로 통해 불러올 수 있는 새로운 방법을 제시합니다. GraphQL은 리소스 기반의 REST 같은 기존 접근 방법에 비해 더 효과적으로 데이터를 불러오고, 서버 측에서 중복된 로직이 반복되거나, 이를 피하기 위해

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

category:

Error

2022-10-09

에디터 관련 에러Nextjs와 react-quill 에디터를 함께 사용할 때 많은 문제가 발생한다. reqct-quill이지 next-quill은 아니기 때문에, 패키지에 아직 해결되지 않은 호환성 이슈가 많은 듯하다.에디터와 관련해선 4가지 메인 이슈가 있었다. 검색하면 충분히 해결법도 많이 나오는 내용들이지만, 내가 겪은 것과 동일한 문제를 설명해주는

기술블로그 개발 에러로그 & 최적화

category:

Recap

2022-09-20

기술 블로그를 개발하면서 마주했던 에러들과 최적화 과정에서 마주했던 문제들의 리스트. 글을 작성하는 대로 링크가 업데이트 될 예정입니다.Errors에디터 에러: 이미지 업로드에디터 에러 : Quill-Editor + Dynamic Import + useRef 함께 사용하기에디터 에러: auto focus / Memo백엔드 에러 : 페이지네이션next/aut

프론트 개발자 취업 회고록 2

category:

Recap

2022-09-18

이전 글에서 이어집니다.3. 담당 업무 / 코드 공유앞서 말했듯이 인력이 부족한 상황이었고, 온보딩 코스가 따로 마련되지 않았기 때문에 첫날부터 바로 업무에 투입되었다. 입사하고 한달이 지나도 개발을 못한 다른 친구들도 있었기 때문에, 현업에서 구르며 빠르게 배울 수 있어 오히려 만족스러웠다.프론트 리드님이 업무 중요도가 낮고, 구현 난이도가 어렵지 않은

부동산 중개 서비스 - 팀 프로젝트 회고록 2

category:

Recap

2022-09-16

db 용량 제한 때문에 분량 조절에 실패했네요ㅠ 짧지만 이전글에 이어서 작성합니다.←이전 글 보러가기지도 페이지 상태 관리 Context.jsconst initialRealEstate = { realEstate: [], mapBounds: {}, selected: [], mapCenter: {}, map: null, clus

프론트 개발자 취업 회고록

category:

Recap

2022-09-16

취업 회고록회사에서 맡은 업무와 제가 작성한 코드 snippet은 다음글에서 확인하실 수 있습니다 >>입사한지는 한참 지났는데, 드디어 쓸 여유가 생겨서 취업 회고록을 남긴다. 그동안 느낀 점도, 배운 점도 정말 많다. 부족한 나를 이끌어주신 사수님들에게 감사를 드리며..프로젝트가 아니기에 어떤 방식으로 글을 쓸 지 고민하다 시간 순으로 작성하기로 하였다.

부동산 중개 서비스 - 팀 프로젝트 회고록

category:

Recap

2022-09-15

부동산 중개 플랫폼 프로젝트 : 푸망프로젝트 깃헙 리드미리드미에서 모든 데모 영상을 볼 수 있습니다Description팀 프로젝트 푸망은 부동산 중개 플랫폼 다방의 디자인과 기획을 참고하여 개발하였다. 5명의 팀원들과 함께 서버/클라이언트를 개발하고, AWS EC2를 이용해 배포까지 진행했다.개발 인원 및 기간개발기간 : 2022/4/18 ~ 2022/5/

인턴 회고록 pt.2

category:

Recap

2022-09-06

Internship - 과제 2이전 글 보러가기 <커스텀 비디오 플레이어프로젝트 깃허브 링크기능 구현 상세컨트롤 바컨트롤 바 on/off영상 영역에서 마우스 이동시 컨트롤바 보이도록 구현영상 영역에서 마우스가 사라질시 컨트롤바 제거영상 영역에서 3초 동안 마우스가 아무 반응이 없을시 컨트롤바 제거비디오 제어재생/ 정지 기능전체화면 ,축소 기능영상 전체길이

인턴 회고록 pt.1

category:

Recap

2022-09-06

Internship - 과제 1다음글 보러가기 >회원가입, 리스트, 디테일 페이지 구현 과제프로젝트 깃허브 링크기능 구현 상세회원가입 페이지가입하기 클릭 시 input tag 에 빈값이나 알맞지 않는 형식일 경우 에러 문구 띄어주는 기능 구현인증번호 받기 API 이용해서 인증번호 받아서 인증번호 인증까지 기능 구현휴대폰 번호는 82-1012341234 으로

기술 블로그 개발 후기 1

category:

Recap

2022-09-06

프로젝트 개요는 리드미에서 확인할 수 있습니다.> 프로젝트 리드미 살펴보기드디어 회고그동안 현업에서 갈고 닦은 모든 것을 쏟아부은 프로젝트였기 때문에, 그 어떤 프로젝트보다 애정이 간다. 애정이 간다는 것만으로 어느정도 성공한 것 같다. 오랫동안 가꾸어가고 싶은 마음이 들고, 가능한 계속 이 블로그를 사용하고 싶다. 배포 이후에 글을 많이 쓰진 못했는데,

TypeScript 입문하기 6 - Class

category:

TypeScript

2022-09-05

/*~migrated from old blog ~*/Class 객체지향 프로그래밍의 Class이번 챕터에서 얻어가는 5가지 개념들public : 밖에서도 접근할 수 있다.private : 밖에서 절대로 접근할 수 없다.protected : 상속 받은 class에서는 접근할 수 있다.abstract classabstract methodpublic과 priva

TypeScript 입문하기 5 - Generic

category:

TypeScript

2022-09-05

// migrated from old blogGenerics: 요청에 따라 call signature를 생성하는 방법 .💡 Generic은 Placeholder<> 와 함께 사용된다.type Generic = { <T>(a: T[]) : T } // alias Generic은 T타입이 들어있는 배열을 매개변수로 받고, T 타입의 데이터를 반환한다.

TypeScript 입문하기 4 - Call Signature

category:

TypeScript

2022-09-05

/*migrated from old blog */Call Signature: 에디터에서 타입스크립트 컴파일러가 해당 변수, 함수의 타입을 알려주는 작은 노트.주로 함수의 타입을 정의할 때 자주 사용된다.함수를 어떻게 호출해야 하는 지 알려주는 문구 (parameter의 타입, return 값의 타입을 알려줌)타입 앨리어스를 이용해 매번 합수에 type을 지

TypeScript 입문하기 3 - Alias

category:

TypeScript

2022-09-05

**migrated from old blogType Alias : typeInterface와 유사하게 type을 정의하는 방식이다.interface TypeInter { age : number name : string } type TypeAlias = { age : number, name : string } const person1 : TypeInter

TypeScript 입문하기 2 - Types

category:

TypeScript

2022-09-05

** migrated from old blogTypes & Optional Type & Union TypeTypesTypescript에서 정해진 타입은 다음과 같다.NumberStringObjectArrayBooleanNullUndefinedTupleEnumAnyVoidNever왼쪽은 기본적은 자바스크립트의 데이터타입과 동일하다. (문자, 숫자, 배열, 불

TypeScript 입문하기 1

category:

TypeScript

2022-09-05

** Migrated from old blogTypescript 란?Javascript에 C#, Java에 있는 ‘타입 안정성 Type Safety’을 적용시킨 언어.Javascript의 맹점이 바로 타입 안정성이기 때문이다.대표적 증상:런타임 에러 Runtime Error자바스크립트에선 함수의 매개변수에 타입을 지정하지 않는다. 그래서 함수를 예상하지 못

teklog: Intro

category:

.etc

2022-09-01

From 2022.09.02 ~블로그에 작성한 글들을 분류하고 소개합니다. 괄호 안의 숫자는 읽는 데 걸리는 시간입니다.(900 Words Per Minute )0. 알고리즘 및 자료 구조기초적인 자료 구조와 알고리즘을 학습하고 있습니다. 책, 자료 조사, 해당 알고리즘의 문제 풀이, 활용성 등을 파악하며 학습하고 있습니다.StackQueueGraph기본