홈 | 김정환 블로그

디자인시스템과 라이브 방송
2021년 07월 19일
지난 달 사내 DR팀으로부터 디자인시스템을 주제로 발표 요청을 받았다. 프론트엔드 개발에서 디자이너와 협업 언어로 사용한 것인데 프로덕트 조직 외부의 관심이 의외였다. 발표를 준비하면서 디자인 시스템에 대해 다시 생각해 보았다. 더불어 라이브 방송이라는 경험도 꽤나 유쾌했다. 디자인시스템 기술적인 것 보다는 디자인시스템을 바라보는 관점에 대해 다루었다. …
CSS 변수와 웹사이트 테마
2021년 05월 17일
맥OS에 다크 테마가 나온 후 웹 사이트에도 다크 테마 버전이 적용된 걸 심심찮게 보았다. 나는 맥OS 화면 모드를 자동으로 두어 해가 뜨면 라이트 모드로 해가지면 다크 모드로 설정해 두는데 이 변화가 웹사이트까지 영향을 주는 모습이 꽤 인상적이었다. 이런 동적 테마는 요점 쉽게 찾을수 눈에 보이는 즐거움만이 다가 아니다. 하루 종일 화면을 보고 있다가 …
리액트 컨텍스트
2021년 05월 05일
리액트 안내서에 나온 컨택스트는 읽어보기만 했지 실제로 사용해 본적은 한 번도 없었다. 상태관리 솔루션으로 리덕스(Redux)나 모빅스(Mobx)를 사용해서 그런걸까? 문서에는 UI 테마나 로그인한 유저, 로케일 따위의 데이터가 컨택스트로 관리할 수 있는 것이라고 말한다. 상태관리 써드파티 라이브러리로 관리해서 그런지 더욱 컨텍스트의 필요성을 느끼지 못한…
나의 첫 무접점 키보드
2021년 04월 29일
항상 컴퓨터로 일하는 사람들은 누구나 한 번 키보드에 욕심을 부려 보았을 것이다. 노트북에 내장된 것으로는 아쉬워서 외장 키보드를 연결해 사용하는데 그 가격만이 천차만별이다. 처음 해피해킹을 보았을 때 단순한 디자인에 매료되서 너무 갖고 싶었다. 30만원이 넘는 가격을 확인하고서야 구매를 포기했는데 이처럼 키보드는 여유돈이 생기면 사고 싶은 일종의 악세사…
만들면서 학습하는 리액트: 사용편2(컴포넌트편)
2021년 04월 15일
리액트 컴포넌트 소개 컴포넌트를 사용하는 이유 사용 편에서 우리는 이미 컴포넌트를 사용하고 있었다. 어플리케이션 자체를 의미하는 App 컴포넌트가 그것이다. 어플리케이션의 전체 상태와 유저 인터페이스를 관리한다. 이 모습은 마치 큰 서랍장 안에 모든 물건을 넣은 것과 비슷하다. 나중에 뭔가를 서랍에서 찾으려면 복잡한 서랍 안을 한참 뒤져야 한다. 반면 서…
만들면서 학습하는 리액트: 사용편1
2021년 04월 12일
준비편에서는 순수 자바스크립트로 검색 화면을 만들었다. 이 때 사용한 요구사항을 리액트 버전으로 만들어 보는 것이 이번편의 내용이다. 요구사항에 대해서는 이미 익숙하기 때문에 리액트의 특성과 장점에 대해 집중하자. 검색 폼 구현하기 1 Input 요소 사용하기 검색 화면 상단에 위치할 검색 폼부터 만들어 보자. 💡요구사항: 검색 상품명 입력 폼이 위치한다…
만들면서 학습하는 리액트: 소개편
2021년 04월 08일
React.js 소개 데이터와 화면을 연결하는 방법 리액트나 뷰 같은 UI 라이브러리의 가장 큰 특징은 화면에 출력되는 유저 인터페이스를 상태로 관리할 수 있다는 점이다. 브라우저는 돔(DOM)을 통해 어플리케이션을 렌더링하는데 라이브러리 없이 자바스크립트만으로 그려보자. 이전 준비편을 떠올려 보자. UI를 담당한 뷰는 템플릿 객체로부터 HTML 마크업 …
만들면서 학습하는 리액트: 준비편
2021년 04월 05일
개요 "백문이 불여일타" 우리는 이론과 실습 두 가지 방법으로 공부한다. 가령 기타를 배운다고 하자. 악보 읽는 법, 기타 소개 등의 전반적인 이론을 학습한 다음 실제 연주하면서 머리와 몸으로 기타를 익힌다. 한편 이론과 실습의 순서를 뒤짚는 경우도 있다. 유투브에서 누군가 멋지게 연주하는 모습을 보고 떠듬 떠듬 따라해 본다. 말도 안되게 어렵겠지만 여러…
AWS 람다 초기 응답 속도 개선하기
2021년 04월 01일
AWS 서버리스는 람다를 중심으로 구성한다. 대쉬보드에서 코드 수정만으로 서버에 변경사항을 즉시 반영하는 편리함과 급격한 트래픽을 감당할 수 있는 안정성이 특징이다. 이러한 장점을 갖는 이면에는 '콜드 스타트'라는 구조적 문제도 가지고 있다. 콜드 스타트 자동차에 관심이 있다면 콜드 스타트라는 용어는 익숙하다. 보통 추운 겨울날 열쇄를 꼽아 시동을 걸면 …
AWS 람다 용량 관리
2021년 03월 29일
AWS 람다는 작은 코드 조각을 실행시켜주는 함수다. 별다른 서버 설정이 거의 필요 없고 웹 대시보드에 코드만 올리면 바로 실행되어 결과를 확인할 수 있는 AWS 서비스이다. 그동안 이미지 리사이징처럼 단일 목적을 위해서 람다를 사용했는데 이번에는 웹 어플리케이션을 올려봤다. 아무래도 코드와 외부 패키지 갯수가 늘어나다 보니 비교적 용량이 크고 나중가서는…

VIDEOS