김정환님 글 목록 - mysetting

김정환

Seoul, Korea

Joined on 2021년 09월 08일

1:49 5/30

jeonghwan-kim.github.io

mobile screenshot relative

1:49

jeonghwan-kim.github.io

mobile screenshot

김정환 블로그 RSS Feed
https://jeonghwan-kim.github.io/

주로 웹 기술에 대해 이야기 합니다

저작도구: GatsbyJS

최종 피드 수집: 2024-11-12 19:17

전체 (344)

4M

[HTTP] 6편. 성능

6편 소개 브라우져가 웹 페이지를 렌더링할 때 발생하는 HTTP 요청을 효율적으로 제어하는 다양한 기법 16장. 렌더링 최적화: 외부 리소스의 로드 시점을 제어해 웹 성능을 최적화하는 기술 17장. 캐시: 서버와 브라우저가 HTT

000

4M

[HTTP] 5편. 보안

5편 소개 브라우져 보안과 함께 HTTP 통신을 더 안전하게 만드는 TLS 13장. 브라우져 보안: XSS(크로스 사이트 스크립팅)와 같은 공격 기법과 이를 방지하기 위한 브라우저 보안 정책 14장. CORS…

000

4M

[HTTP] 4편. 추가 프로토콜

4편 소개 HTTP의 비연결성을 극복하는 다양한 기술 9장. 폴링: 클라이언트가 주기적으로 서버에 요청을 보내서 새로운 데이터를 확인하는 방법 10장. 롱 폴링: 폴링 보다 호율적인 통신 기법 11장. SSE…

000

4M

[HTTP] 3편. AJAX

3편 소개 직접 만들 수 있는 HTTP 요청 6장. AJAX 요청과 응답: fetch 함수로 AJAX 요청과 응답을 다루는 법에 대해 7장. AJAX 진행율과 취소: AJAX 진행율을 계산하는 방법과 요청을 취소하는 방법에 대해

000

4M

[HTTP] 2편. 브라우져

2편 소개 웹 브라우져가 HTTP를 어떻게 사용하는지 이해할수 있습니다. 3장. 컨텐츠 협상: 웹브라우져가 서버와 데이터를 주고 받을 때 최적의 형태로 만들기 위한 매커니즘을 이해하실 수 있습니다.…

000

4M

[HTTP] 1편. HTTP 기본

1편 소개 1장. HTTP 시작: 웹의 탄생 배경과 역사에 대해 알 수 있습니다. 2장. HTTP 메시지: HTTP의 주요 요소에 대해 배우실 수 있습니다. 1장. HTTP 시작 1.1 문서 배포 웹 어플리케이션의 동작 원리와 H

000

6M

리액트19 베타

마침내 npm에서 리액트 19 베타를 사용할 수 있다. 관련한 문서에서는 액션이라는 새로운 개념과 파생된 리액트 훅을 소개한다. 그동안 사용했던 API…

000

6M

컨텐츠 협상

000

8M

HTTP 쿠키

서론 유닉스 환경에서 개발할 때 받은 데이터를 그대로 다시 보내는 것을 매직 쿠키라고 한다. 지금으로부터 3…

000

9M

HTTP 캐싱

000

10M

자바스크립트 http 클라이언트 라이브러리 비교

브라우저는 http 요청을 위해 xhr과 fetch…

002

10M

Fetch 진행율

Ajax 기법을 사용하면서 진행율을 표시해 보진 않았다. 업로드 혹은 다운로드할 때 시간이 걸리기 때문에 UI로 표시할 필요는 있다. 스핀이나 프로그래스 바로 진행 여부를 나타낸 정도다. 정확한 수치로 진행율을 표시하는 방법이 있

000

10M

fetch

서버가 HTTP API로 자원을 제공하면 브라우져는 AJAX 기법으로 자원을 얻는다. 실무에서는 axios나 superagent 같은 전용 라이브러리를 사용했다. 모두 브라우저가 제공하는 XMLHttpRequst 객체, 혹은 fe

000

11M

CORS

브라우져에서 다른 출처에 있는 리소스를 사용할 수 있는 규칙이 교차 출처 리소스 공유, CORS…

000

11M

cURL

네트웍 요청을 다룰 때 주로 cURL이나 포스트맨을 사용한다. 비교적 간편한 전자를 기본으로 쓰면서 팀에서 협업할 때는 후자를 이용하는 편이다. 1998년에 출시한 이 도구는 벌써 2…

000

11M

esbuild

웹팩과 비슷한 도구들이 많다. esbuild, swc, vite…

000

1y

pnpm

처음 들었을 때 "p"가 무슨 뜻일지 궁금했다. 홈페이지에서 바로 찾을 수 없었고 인터넷에 검색해도 잘 나오지 않았다. performant npm '승진, 성능 기준에 맞는' 이런 뜻인데 '고성능 npm…

000

1y

[리액트 2부] 4편 최종정리

마침내 마지막 4편을 정리할 시간이다. 1장. 레프 훅 랜더링과 무관하게 지속할 수 있는 값을 제공 상태 훅과 비슷하지만 리랜더징 하지않음 Dialog, OrderForm 활용…

000

1y

[리액트 2부] 4.4 메모이제이션 훅

메모이제이션. 캐시로 성능을 높이는 프로그래밍 기법이다. 이번에는 메모이제이션에 대해 알아본 뒤 리액트의 useMemo와 useCallback을 살펴볼 것이다. 각 훅을 직접 만들어 구조를 파악하고 리액트 성능 개선 방법을 이해한

000

1y

[리액트 2부] 4.3 리듀서 훅

000

1y

[리액트 2부] 4.2 제어 폼

000

1y

[리액트 2부] 4.1 레프 훅

3편에서 학습한 기본 훅을 이용해 어플리케이션을 함수 컴포넌트로 다시 만들었다. 일부 남은 것이 있는데 레프 객체를 사용하는 부분이다. Dialog: 레프 객체로 앨리먼트에 접근, 버튼 포커스 OrderForm…

000

1y

[리액트 2부] 4편 추가훅

목차 레프 훅 제어 폼 리듀서 훅 메모이제이션 훅 최종정리

000

1y

[리액트 2부] 3편 최종정리

마침내 3편 내용을 정리할 시간이다. 1장. 클래스/함수형 컴포넌트 새로운 프로젝트 소개 클래스와 함수 비교: 상태 관리, 고정 값 클래스와 함수: 리액트 컴포넌트 리액트 훅: 함수 컴포넌트에 UI 역할을 제공…

000

1y

[리액트 2부] 3.6 훅 활용 2

기본 훅 세 개를 모두 파악했다. useState, useEffect, useContext로 어플리케이션을 함수 컴포넌트와 훅으로 다시 만들자. MyRouter: Router 2편에서 만든 라우터의 역할은 다음과 같다. route

000

1y

[리액트 2부] 3.5 컨택스트 훅

002

1y

[리액트 2부] 3.4 훅 활용 1

리액트 useState와 useEffect를 사용할 차례다. 예제 프로그램을 함수 컴포넌트와 훅으로 다시 만들어 보자. 메뉴 목록 페이지 공통 컴포넌트부터 정리하자. src/components/Page.jsx DialogConta

000

1y

[리액트 2부] 3.3 부수효과 훅

useEffect 훅을 만들고 리액트가 함수 컴포넌트에서 부수 효과를 어떻게 관리하는지 이해한다. 순수 함수와 컴포넌트 순수함수는 두 가지 특징을 가진다(참고: 위키피디아 Pure function…

000

1y

[리액트 2부] 3.2 상태 훅

useState 훅을 만들고 리액트가 함수 컴포넌트에서 상태를 관리하는 방식을 이해할 것이다. 문제 제기 이름을 입력할 수 있는 NameField 컴포넌트를 만들어 보자. 변수 name에 할당한 문자열을 input의 value…

000

1y

[리액트 2부] 3.1 클래스/함수 컴포넌트

클래스와 함수에 대해 짚고 리액트 클래스 컴포넌트와 함수 컴포넌트에 대해 알아본다. 함수 컴포넌트와 훅을 사용하는 것이 어떤 의미인지도 고찰해 보자. 새로운 프로젝트: 2-hook…

000

1y

[리액트 2부] 3편 기본훅

목차 클래스/함수 컴포넌트 상태 훅 부수효과 훅 훅 활용 1 컨택스트 훅 훅 활용 2 최종정리

000

1y

[리액트 2부] 2편 최종정리

마침내 2편 내용을 정리할 시간이다. 1장. 컨택스트 프롭 드릴링 현상을 리액트 컨택스트로 해결 MyReact로 컨택스트 직접 구현 이벤트 에미터 패턴으로 멀리 떨어진 객체간에 메세지 교류 createContext…

001

1y

[리액트 2부] 2.5 다이얼로그 2

Dialog 문제 사실 Dialog에는 버그가 있다. 부모 스타일의 영향을 받아 빈 공간이 조금 생긴다. 원인은 중첩된 돔 구조로 인해 부모 엘리먼트의 스타일 영향을 다이얼로그가 받기 때문이다. .Dialog…

000

1y

[리액트 2부] 2.4 다이얼로그 1

나머지 다이얼로그 관련 요구사항들이다. 0.4 API 호출시 로딩 메세지를 다이얼로그로 표시한다. (다이얼로그) 0.5 예외 처리용 메세지를 다이얼로그로 표시한다. (다이얼로그) 2.…

000

1y

[리액트 2부] 2.3 라우터 2

주소창 주소 변경하기 라우터 숙제 컴포넌트 렌더링: 요청한 주소에 해당하는 컴포넌트 렌더링 주소 변경: 요청한 주소를 브라우져 주소창에 표시 Link…

000

1y

[리액트 2부] 2.2 라우터 1

리액트 컨택스트의 첫 번째 활용으로 라우터를 만들어 보겠다. 요구사항 중 네비게이션 기능을 구현할 목적이다. 배경 요구사항 0.3 네비게이션바: 현재 화면과 같은 링크를 선택한다. (UI, 라우팅) 1.…

000

1y

[리액트 2부] 2.1 컨택스트

000

1y

[리액트 2부] 2편 고급주제

목차 컨택스트 라우터 1 라우터 2 다이얼로그 1 다이얼로그 2 최종정리

001

1y

[리액트 2부] 1편 최종정리

1장. 준비 1부 강의 요약. 여기서 다루지 않은 고급 주제와 훅이 이 수업의 주요 내용 실습 어플리케이션 미리 보기. 배달 어플리케이션의 주요 화면 세 개 실습 환경 이해. 개발 도구, 웹팩, 바벨, 워크스페이스 설정…

000

1y

[리액트 2부] 1.4 장바구니 화면

마지막 장바구니 화면이다. 요구사항 2.1 "장바구니" 제목을 상단에 표시한다. (UI) 2.2 제목 좌측에 뒤로 가기 버튼을 표시한다. (UI) 2.3 선택한 상품 정보를 중앙에 표시한다. (UI) 2.…

000

1y

[리액트 2부] 1.3 주문내역 화면

주문내역 화면이다. 이전 장에서 만든 컴포넌트를 재사용하고 없는 것은 새로 만든다. 요구사항 3.1 "주문내역" 제목을 상단에 표시한다. (UI) 3.2 주문내역 정보를 불러와 중앙에 표시한다. (UI) 3.3 네비게이션바가 하단

000

1y

[리액트 2부] 1.2 상품목록 화면

1부에서 학습한 리액트 지식을 이용해 상품목록 화면부터 만들어 보자. 요구사항 1.1 "메뉴목록" 제목을 상단에 표시한다. (UI) 1.2 주문할 수 있는 상품 목록을 중앙에 표시한다. (UI) 1.4 네비게이션바가 하단에 위치한

000

1y

[리액트 2부] 1.1 준비

리액트 1부 수업을 요약한 뒤 2부 내용을 소개한다. 실습 어플리케이션과 개발 환경을 미리 살펴본다. 1부 수업 요약…

000

1y

[리액트 2부] 1편 리액트로 사고하기

목차 준비 상품목록 화면 주문내역 화면 장바구니 화면 최종정리

000

1y

리플렉트 메타데이터

000

1y

리액트 useMemo와 useCallback은 어떤 모습일까?

메모이제이션. 캐시로 성능을 높이는 프로그래밍 기법이다. 이번에는 메모이제이션에 대해 알아본 뒤 리액트의 useMemo와 useCallback…

000

1y

재귀타입

000

1y

재귀타입

000

1y

리액트 useReducer는 어떤 모습일까?

지난 useContext 이후 1년만에 쓰는 글이다. 공부하는 흐름을 한 번 놓치니깐 시간이 훌쩍 지나 버렸다. 한 두 번 빠지지기 시작해 이제는 잊어버린 헬스장 이용권 같다. 이번에는 useReducer 대해 알아보자. useS

000

1y

리액트 useReducer는 어떤 모습일까?

함수는 값을 반환한다.

000

2y

스톰프(Stomp)

000

2y

리덕스

리덕스 코드를 읽었다. 5년 정도 사용한 것 같은데 어떻게 만들었는지는 모르고 있었다. 메뉴얼 문서에서 읽은 정보로 얕게 아는 정도였다. 자세한 구조에 대해서는 궁금하지 않았던 모양이다. 이렇게 호기심이 부족해서는 실력이 늘지 않

000

2y

객체 간에 메세지를 전달하는 다양한 방법

000

2y

웹팩 빌드시 이전 결과물을 삭제하는 옵션

메뉴얼을 보고 안 것은 아니다. 번들 결과물을 삭제하는 옵션이 생겼다는 말을 동료로부터 들었다. 웹팩 기본 기능만으로는 빌드할 때마다 결과물이 차곡차곡 쌓이기만 했지 지울 수 없었다. clean-webpack-plugin…

003

2y

특별육아휴직

001

2y

NPM 워크스페이스와 모노레포

모노레포 솔루션은 lerna, yarn 등 여러가지가 있다. 이유는 모르지만 최근 lerna…

000

2y

2022-06 스크랩

6/6 월 Faster JavaScript Builds with Metro 필요한 것만 캐시 6/1…

000

2y

리액트 Portal

000

2y

리액트 ref

컴포넌트 상태와 프롭에 따라 리액트 엘리먼트를 동기화하는 것이 리액트로 UI…

001

2y

리액트 고차 컴포넌트(HOC)

훅을 주로 사용하는 지금에 비해 비교적 철 지난 주제인 것 같다.
컴포넌트 로직을 재사용하기 위한 방법으로 고차 컴포넌트(High Order Component)를 사용한다. 써드 파티 라이브러리에서도 이 형태의 API…

000

2y

리액트 StrictMode

거의 사용해 보지 못했다. create-react-app에서 잠깐 봤는데 이걸로 프로젝트를 해본 경험이 없으니 정말 거의 사용한 적이 없었다. React의 Strict…

000

2y

리액트 라우터 만들기

요즘 react-router를 거의 만져보지 못했다. 회사에서 담당한 제품이 사용하지 않은 이유가 크다. 오랜 만에 봤더니 버전 6가지 나왔더라. 예전에…

000

2y

2022-04 스크랩

2022-04-01 금 Making Sense of React Hooks Why Hooks…

000

2y

리액트 useContext는 어떤 모습일까?

지난 시간에 이어 useContext…

000

2y

리액트 useEffect는 어떤 모습일까?

지난 시간에 이어 useEffect를 직접 만들어 보자. 순수함수 순수함수란 무엇일까? 두 가지 특징이 있다. (참고: 위키피디아 Pure function) 입력이 같으면 결과도 같다. (the function return va

000

2y

리액트 useState는 어떤 모습일까?

함수는 값을 반환한다. 리액트 앨리먼트를 반환하는 함수를 리액트에서는 함수 컴포넌트(Function Component…

000

2y

리액트로 폼(Form) 다루기

폼 다루는 방법에 대해 얘기해 보자. 브라우져는 폼을 다루기 위한 내장 API를 가지고 있다.
이걸 이용하면 빠르게 폼을 만들수 있는데 이전에 한 번 정리했다. HTML5 폼 검증에 대해 정리해 보자 브라우저의 내장 API…

000

3y

최근에 발견한 인텔리제이 기능과 플러그인

002

3y

블로그 댓글 서비스 교체: Disqus → Utterances 데이터 이관

이전글 (블로그 댓글 서비스 교체: Utterances)에서 댓글 서비스를 교체했다.
광고가 달린 disqus 서비스에서 깃헙 기반의 utterance로 바꾼 것이 작업 내용이다. 하지만 그 동안 작성된 댓글은 여전히 disqus

001

3y

블로그 댓글 서비스 교체: Utterances

언제부터인가 블로그 하단에 광고가 붙기 시작했다.
구글 애드샌스를 사용하는것도 아닌데 이상하다.
마치 자가용에 택시 광고판을 붙이고 다니는 것 같아서 얼른 떼어버리고 싶었다. 원인은 댓글 서비스로 사용하는 디스커스(Disqus…

000

3y

한성 키보드를 매직 키보드와 유사하게 사용하기

000

3y

프론트엔드 테스트할 기회가 생겼다

000

3y

디자인시스템과 라이브 방송

지난 달 사내 DR…

001

3y

CSS 변수와 웹사이트 테마

맥OS에 다크 테마가 나온 후 웹 사이트에도 다크 테마 버전이 적용된 걸 심심찮게 보았다. 나는 맥OS…

001

3y

리액트 컨텍스트

리액트 안내서에 나온 컨택스트는 읽어보기만 했지 실제로 사용해 본적은 한 번도 없었다.
상태관리 솔루션으로 리덕스(Redux)나 모빅스(Mobx)를 사용해서 그런걸까?
문서에는 UI…

000

3y

나의 첫 무접점 키보드

항상 컴퓨터로 일하는 사람들은 누구나 한 번 키보드에 욕심을 부려 보았을 것이다.
노트북에 내장된 것으로는 아쉬워서 외장 키보드를 연결해 사용하는데 그 가격만이 천차만별이다. 처음 해피해킹을 보았을 때 단순한 디자인에 매료되서 너

000

3y

만들면서 학습하는 리액트: 사용편2(컴포넌트편)

리액트 컴포넌트 소개 컴포넌트를 사용하는 이유 사용 편에서 우리는 이미 컴포넌트를 사용하고 있었다. 어플리케이션 자체를 의미하는 App…

000

3y

만들면서 학습하는 리액트: 사용편1

준비편에서는 순수 자바스크립트로 검색 화면을 만들었다. 이 때 사용한 요구사항을 리액트 버전으로 만들어 보는 것이 이번편의 내용이다. 요구사항에 대해서는 이미 익숙하기 때문에 리액트의 특성과 장점에 대해 집중하자. 검색 폼 구현하

000

3y

만들면서 학습하는 리액트: 소개편

React.js 소개 데이터와 화면을 연결하는 방법 리액트나 뷰 같은 UI 라이브러리의 가장 큰 특징은 화면에 출력되는 유저 인터페이스를 상태로 관리할 수 있다는 점이다. 브라우저는 돔(DOM…

000

3y

만들면서 학습하는 리액트: 준비편

000

3y

AWS 람다 초기 응답 속도 개선하기

000

3y

AWS 람다 용량 관리

AWS 람다는 작은 코드 조각을 실행시켜주는 함수다.
별다른 서버 설정이 거의 필요 없고 웹 대시보드에 코드만 올리면 바로 실행되어 결과를 확인할 수 있는 AWS…

000

3y

어플리케이션 다국어 기능과 번역가와 협업 방법

000

3y

유니온 타입과 타입 가드

타입스크립트를 사용하면서 편리한 점은 코딩할 때 매우 정확하게 자동완성 된다는 점이다.
코드 편집기에 연동된 타입스크립트 컴파일러가 실시간으로 코드를 분석해서 타입을 추적해준 덕분이다.
타입스크립트 피처링의 멋진 개발 환경이다.

000

3y

babel-loader와 ts-loader의 빌드 결과가 다른 현상

규모있는 자바스크립트 프로젝트의 개발 환경을 구성할 때 번들러를 사용한다. 파일간의 의존성을 분석해서 몇 개의 압축된 파일로 만들어 최적의 결과를 만들어낸다. 뿐만 아니라 웹팩 로더는 최신 ECMAScript…

000

3y

균형 감각

아버지와 자주 대화하는 편이다.
부자지간에 3…

000

3y

아, 전설적인 한 해였다

2020년 30개 포스팅을 발행했다. 매년 블로그에 50개 글을 쓰겠다고 계획을 세우는데 거의 달성해 본 적이 없었다.
이런 목표는 달성보다는 방향에 의미가 있는 것 같다. 마치 옛 뱃사람들의 북극성처럼 말이다. #재택근무 202

000

3y

프론트엔드 개발자의 역할

예전에 인프런에 올린 Vue.js 강의가 지금 보니 수강평도 괜찮고 질문도 많아서 리뷰할 겸 전체 영상을 정주행 했다.
'퍼블리셔와 일한다'를 전제로 HTML/CSS…

000

3y

"당장 야금야금 부지런히 행복해야 돼"

000

3y

블로그에 글을 쓰는 이유

000

4y

서버리스 웹 애플리케이션 만들기

서버 운영에서 손을 뗀 지 4년 정도 된 것 같다.
호스팅 업체를 사용하다가 클라우드가 유행하면서 AWS로 옮겨 가상컴퓨팅머신(ec2)이나 이것저것 자동으로 만들어주는 앨라스틱 빈스톡(elastic beanstalk…

000

4y

업무 밀도

000

4y

styled-component로 리액트 컴포넌트 만들기

이번에 스타일드 컴포넌츠(styled-components)를 사용해 보고 기존 방식과의 차이점, 그리고 왜 이것이 더 나은지를 정리해 보고자 한다. 기존 방식의 문제점 기존에는 사스(sass…

001

4y

상태관리 라이브러리 mobx

일 년 정도 리액트, 리덕스 조합으로 사용해 봤다.
뷰(vue)나 모빅스(mobx…

000

4y

개츠비 프리로딩과 프리패치

브라우져에서 웹 페이지 로딩 성능을 좌우하는 요소 중 하나가 리소스를 다운로드 하는것이다.
이미지, 폰트, 자바스크립트, 스타일시트 등 HTML…

000

4y

개츠비의 이미지 처리 방식

개츠비 문서를 봤을때 눈에 띄었던 것이 이미지 처리 방식이다.
화면 스크롤에 따라 이미지를 로딩하는 것(lazy load…

000