• gatsby 블로그에 CSS Modules 적용하기
    지금껏, 이 블로그는 로 CSS를 작성하고 있었다. 대표적인 CSS-in-JS 방식이다. 블로그는 스타일 코드가 많지 않기 때문에 CSS-in-JS로 만들어도 충분하다. 하지만, 조금이라도 빠르게 만들어보기 위해 CSS Modules 방식으로 변경해…
    11 October, 2020
  • CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교
    지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산성에 초점을 맞춘…
    27 September, 2020
  • CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유
    는 쉽지 않다. 처음 배울 때는 ‘이 정도쯤이야?’라는 생각이 들 정도로 쉬워 보인다. 실제로 러닝커브가 그리 높지는 않다. 그래서 과거에는 주로 신입이나 경력이 짧은 사람에게 맡기는 경우가 많았다. 당시에는 프론트엔드 영역이 명확히 나뉘어 있지 않…
    13 September, 2020
  • [Frontend 바로 알기] 검색엔진 최적화 (SEO: Search Engine Optimization)를 위한 9가지 방법
    는 검색 결과 순위를 높이는 작업을 의미한다. 사용자가 구글에서 검색어를 입력하면, 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출한다. 결과를 노출하는 순위를 결정하는 알고리즘은 공개되어 있지 않다. 하지만, 다양한 채…
    14 June, 2020
  • 자동으로 생성되는 목차(TOC: Table of Contents) 만들기
    글을 작성하면 자동으로 생성되는 목차(TOC)를 만들어 보자. 간략한 스펙은 아래와 같다. 글을 하단으로 스크롤 하면 Header의 위치에 맞게 하이라이트 됨 항목을 클릭하면 해당 Header의 위치로 이동 Header 단계(# ~ ####)에 따른…
    31 May, 2020
  • disqus를 버리자 (feat. utterances)
    disqus는 왜 이렇게 무거울까? 에서 내 블로그가 그리 빠르지 않다는 것을 발견했다. 를 사용하는 정적 페이지 사이트임에도 불구하고 빠른 페이지가 하나도 없다. 뭔가 이상하다. 혹시 몰라 PageSpeed Insight를 이용하여 퍼포먼스를 …
    20 May, 2020
  • [CSS 바로 알기] Block Formatting Context
    프론트엔드 개발에서 Block Formatting Context(이하 BFC)라는 용어는 그리 자주 사용하지 않는다. 아예 들어본 적 없는 사람도 많을 것 같다. 그러나, BFC는 용어에 비해 어렵지 않다(용어가 많아 조금 헷갈리긴 하다). 누구나 …
    17 May, 2020
  • [HTML 바로 알기] Semantic Web을 위한 Semantic Elements
    은 웹에서 를 담당한다. 웹페이지의 뼈대를 만들고 레이아웃을 구성한다. 웹사이트마다 구성은 다르지만, 대체로 헤더(Header), 내비게이션(nav), 콘텐츠(main), 그리고 푸터(footer)의 조합으로 만들어진다. 각 영역은 기능에 따라 구분…
    10 May, 2020
  • Frontend 바로 알기
    의 영역이 점점 커지고 있다. 과거의 프론트엔드는 HTML과 CSS와 약간의 Javascript(이하 JS)를 다루는 영역이었다. 흔히 웹 퍼블리셔의 역할인 UI개발이 주된 업무였다. 하지만, 웹의 기능이 복잡해지고 동적 요구사항이 늘어나면서 과거 …
    05 May, 2020
  • 대학 졸업장은 의외로 가볍다
    어떻게든 좋은 대학에 입학하자 지금은 어떤지 잘 모르지만, 내가 학교에 다닐 때는 중학교만 들어가도 대학입학을 준비했다. 준비라 할게 딱히 특별한 건 아니다. 이외에 딱히 잘하는게 없다면 좀 더 좋은 대학에 입학하기 위해 공부에 매진한다. 수학 성…
    30 March, 2020
  • 변화를 받아들이고 적응하고 발전하기
    아직도 30년 전, 학교 입학식 장면이 눈에 선하다. 8살의 겁먹은 꼬마는 모든 게 낯설었다. 넓은 운동장, 수많은 아이들, 그리고 앞에 서 있는 선생님. 바로 뒤에 엄마가 없었다면 울음을 참지 못했을 것이다. 그렇게 멍하니 앞을 바라보고 있는데, …
    22 March, 2020
  • 재택근무로 깨닫는 일에 대한 마음가짐 (feat. 코로나19)
    재택근무가 점점 길어진다. 이미 3주가 지났다. 그리고 다음 주도 재택근무로 확정되었다. 총 4주. 하지만 이대로 끝날 것 같진 않다. 가 어느 정도 진정되는 듯 하지만 여전히 진행 중이기 때문이다. 이 바이러스가 완전히 종식 단계로 접어들지 않는 …
    16 March, 2020
  • 책을 읽는 솔직하고 현실적인 이유
    의외로(?) 사람들이 잘 안 믿지만, 나는 책을 좋아한다. 일 년에 100권씩 읽는 열렬한 독서가는 아니지만 일 년에 대충 30~40권쯤 읽는다. 일이 바쁘거나 다른 것에 빠져있을 때가 아니라면 항상 읽는 책이 두어 권 있다. 종류나 장르도 가리지 …
    09 March, 2020
  • 우리는 모두 불완전하다
    “Isn’t everything we do in life a way to be loved a little more?” (우리가 인생에서 하는 모든 행동들은 더 사랑받기 위해서가 아닐까?) - 비포 선라이즈 중 셀린의 대사 - 인간은 태어나서 부모의…
    01 March, 2020
  • 소설의 재미 - 캐릭터 <옥상에서 만나요, 저주토끼>
    최근에 단편 소설집 두권을 읽었다. 처음 읽은 책은 정보라 작가의 , 두번째 읽은 책은 정세랑 작가의 . 구성도 비슷하고 장르도 비슷하다. 둘다 단편집에 비슷한 장르(SF, 판타지 또는 호러), 그리고 젊은 여성 작가라는 점. 하지만 읽어보면 완전히…
    24 February, 2020
  • 기억과 기록 (feat. 태백산)
    매년 겨울산에 오른다. 횟수로 5년째, 6년간 딱 한번 제외하고 매년 겨울산에 올랐다. 한라산 두번, 덕유산, 설악산에 이어 이번에는 태백산. 원래 이번 겨울에는 등산 계획이 없었지만, 태백산에 눈이 왔다는 소식을 듣자마자 곧바로 버스표를 예약했다.…
    09 February, 2020
  • 단편소설의 매력, <종이 동물원> by 켄 리우
    서른이 넘으면서 소설은 거의 읽지 않았다. 소설을 딱히 싫어해서는 아니다. 그렇다고 흥미가 떨어진것도 아니다. 시간이 없었을 뿐. 이야기가 주는 매력은 여전했다. 미래가 불확실하고 현실이 불만족스럽다보니 소설을 읽는데 시간을 들일 여유가 없었다. 정…
    03 February, 2020
  • [interactive web] 스크롤에 따라 svg path 변화시키기 (1부터 9까지 숫자 변형하기)
    스크롤하면 숫자 1부터 9까지 모양이 점진적으로 변하도록 만들어보았다. 각 숫자의 형태를 만들기 위해 웹에서 사용가능한 벡터 이미지인 SVG를 이용해 구현했다. SVG가 뭐지? 라는 분들이 있다면 W3Scools의 SVG Tutorial을 읽어보자.…
    26 January, 2020
  • 친하지 않은 사람들과 여행하기
    사람마다 여행하는 스타일은 다르다. 혼자서 다니는걸 좋아하는 사람, 친한 친구들과 여럿이서 같이 다니는걸 좋아하는 사람, 한번도 가보지 않은 새로운 여행지로 떠나길 즐기는 사람, 익숙한 곳으로 가는걸 좋아하는 사람 등. 나는 이중에 혼자서 다니길 좋…
    19 January, 2020
  • 우리집에도 고양이가 한마리 산다.
    곽재식 작가가 그랬다. 반드시 써야하는데 아무리 생각해도 소재가 떠오르지 않을때는 고양이에 대해 쓰라고. 그래서 믿고 고양이에 대해 쓴다. 요즘처럼 고양이의 위신이 높아진적이 없는 것 같다. 우리 부모님 세대때만 해도 요물(우리 부모님 표현을 빌리자…
    13 January, 2020
  • 처음으로 소설을 쓰고 싶다는 생각이 들었다 <항상 앞부분만 쓰다가 그만두는 당신을 위한 어떻게든 글쓰기>
    나는 이야기꾼의 재능이 없다. 똑같은 이야기도 내가하면 재미없다. 그래서 언제나 다른 사람에게 이야기를 할때면 말하기전에 머리속으로 미리 상상해본다. 어떤 순서로 말하면 좋을지, 어떤 부분에 포인트를 줘야할지, 어떤 표현을 써야 재미있을지 등을 생각…
    05 January, 2020
  • 2019년 회고
    해가 넘어가는데 큰 의미를 두는 타입은 아니지만, 2018년 회고에서 세운 계획을 얼마나 달성했나 점검하는 차원에서 2019년 회고를 남겨본다. 2018년 회고에서 정했던 2019년 계획을 요약하면 다음과 같다. 개발: 개인프로젝트를 만들자. 운동…
    30 December, 2019
  • 망한 글쓰기
    의 마감시간(dead line)은 월요일 출근전이다. 덕분에 주말을 여유있게 보낸적이 거의 없다. 항상 마감시간에 쫒긴다. 주중에 미리 글감을 생각하고 조금이라도 글의 구성을 생각해놓으면 그나마 낫다. 하지만 주말이 되도록 무슨 글을 쓸지 정하지 못…
    22 December, 2019
  • [interactive web] 이전에 만들었던 roulette 개선하기
    이전에 만들었던 roulette는 실제 프로젝트에서 사용하기에는 다소 무리가 있다. 애초에 테스트 용도로 만들었기 때문이다. 실제 프로젝트에서 사용 가능하도록 몇가지를 수정하려고 한다. 항목은 다음과 같다. deprecated된 clip 속성을 제거…
    15 December, 2019
  • 미국 VS 유럽
    이번에 좋은기회가 생겨 미국을 방문하게 되었다. 첫 방문이었다. 이전에 속으로 느끼던 막연한 이미지를 두 눈으로 직접 본다는 생각에 두렵기도 하고 설레기도 했다. 11시간이 넘는 장시간 비행 끝에 드디어 라스베가스에 도착했다. 짐을 찾고 공항 문을 …
    09 December, 2019