홈 | 김정환 블로그

블로그 댓글 서비스 교체: Disqus → Utterances 데이터 이관
2021년 08월 31일
이전글 (블로그 댓글 서비스 교체: Utterances)에서 댓글 서비스를 교체했다. 광고가 달린 disqus 서비스에서 깃헙 기반의 utterance로 바꾼 것이 작업 내용이다. 하지만 그 동안 작성된 댓글은 여전히 disqus에 남아있어서 utterance로 교체해버린 이상 블로그에서 이전 댓글을 볼 수 없게 되버렸다. 이 댓글을 깃헙으로 이관하는 작…
블로그 댓글 서비스 교체: Utterances
2021년 08월 26일
언제부터인가 블로그 하단에 광고가 붙기 시작했다. 구글 애드샌스를 사용하는것도 아닌데 이상하다. 마치 자가용에 택시 광고판을 붙이고 다니는 것 같아서 얼른 떼어버리고 싶었다. 원인은 댓글 서비스로 사용하는 디스커스(Disqus)에서 나오는 광고였다. 처음엔 광고 없이 사용할수 있지만 일정 기간이 지나면 광고가 붙게되는데 광고를 없애려면 구독료를 지불하는 …
한성 키보드를 매직 키보드와 유사하게 사용하기
2021년 08월 23일
이전 글(나의 첫 무접점 키보드)에서 소개한 키보드를 여전히 사용하고 있다. 이 키보드 키배열에 손가락이 익숙해 오타도 줄어들고 손바닥도 고정된 상태로 타이핑할 수 있게 되었다. 하지만 맥 운영체제의 특수 기능키를 매직 키보드처럼 쓰고 싶은 아쉬움은 여전하다. 지금은 일부 기능만 몇 가지 키조합으로 사용하고 있는데 최대한 매직 키보드의 그것처럼 사용하고 …
프론트엔드 테스트할 기회가 생겼다
2021년 08월 09일
백엔드 개발할 때 웬만하면 테스트 코드를 작성했다. 어플리케이션을 출시한 뒤에도 부족한 테스트를 마져 작성했는데 이런 방식이 코딩에 자신감을 주었기 때문이다. 새로운 기능을 만들거나 버그를 수정 하더라도 자동화된 테스트 덕분에 회귀 테스트를 빠르게 반복 할 수 있기 때문이다. 한편 프론프엔드 개발에서는 테스트를 잘 못했다. 초반에 몇 번 시도해 보았지만 …
디자인시스템과 라이브 방송
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 요소 사용하기 검색 화면 상단에 위치할 검색 폼부터 만들어 보자. 💡요구사항: 검색 상품명 입력 폼이 위치한다…

VIDEOS