2020년 회고

연초에 일년 조금 넘게 다니던 회사를 떠나 다노로 이직을 했고, 동료들에게 인정을 받고 안정적으로 자리를 잡기 위해 정말 열심히 일한 것 같다. 뭔가 하긴 했는데 뭘 했는지 참 기억해내기 쉽지 않다. 2020년이 기록된 스냅샷은 일 아니면 마스크로 채...

블로그 새단장 후기, 2탄

블로그를 다시 리뉴얼했다. 이번 리뉴얼은 겉보다는 속을 많이 정비했다. 특히 마크다운으로 작성하던 방식에서 Headless CMS를 사용하는 방식으로 변경한 것이 가장 큰 변화이고, Stitches 라는 CSS in JS 라이브러리를 사용하여 스타일링...

모노레포 삽질기: Nx와 Yarn Workspaces

얼마 전에 모노레포를 갈아 엎었다. 원래는 Nx를 사용해서 모노레포를 구성했는데 몇가지 문제점을 느낀 뒤 Yarn Workspaces를 바탕으로 다시 모노레포를 구성했다. 이번 포스팅에서는 왜 모노레포를 구성하려고 했는지, Nx는 어떤 부분이 아쉬웠는...

FEConf2020 at Home 후기

10월 31일 오늘, 유투브 FEConf Korea 채널을 통해 FEConf2020 at Home 컨퍼런스가 진행됐다. 언젠가 알림 신청 해두고서 이미 잊고 지낸지 좀 됐었는데, 운이 좋게도 다시 알 수 있게 되었고 덕분에 주말 한나절을 컨퍼런스 시청...

사이드 프로젝트 일기 (1)

사이드 프로젝트를 시작했다. 프로젝트 이름은 잇지마. 계기 일을 하는 동안에는 사이드 프로젝트를 하는 것에 큰 관심이 없었다. 그런데 어느 순간 출근해서 하는 개발에 만족을 못하고 있는 느낌이 들었다. 아무래도 회사에서 개발하는 것은 비즈니스와 큰 연...

GraphQL 클라이언트 스키마 사용하기

최근 GraphQL, 정확히는 Relay에 관심을 들이고 있다. Relay가 프레임워크로써 해결하려고 하는 문제와 방식이 마음에 든다. 이걸 토대로 회사에서 진행하는 프로젝트가 맞이한 문제를 해결하고 싶지만, 안타깝게도 당장 GraphQL 서버를 구성...

Snowpack 써보기

Snowpack으로 간단한 프로젝트와 플러그인을 작성해봤다.

Recoil 비동기 처리 + 테스트 코드 작성 방법

요즘 Recoil을 쓰고 있다. 간단하게 사용 후기를 남기자면, 요거 꽤 야무지다. 그동안 상태 관리가 필요하다고 판단이 되면 주로 리덕스를 사용해왔다. 특유의 복잡함이나 코드 양의 증가하는 이슈를 여러 라이브러리의 힘을 빌려 외면하고 싶어도 비동기 ...

Mock Service Worker(MSW) 사용해보기

API 호출은 클라이언트에서 빼먹을 수 없는 부분이다. 일반적으로 비즈니스 로직은 서버에서 처리를 하고, 클라이언트는 처리 결과를 응답으로 받은 다음에 응답에 따라 적절한 처리를 하기 때문에, 테스트 코드를 작성한다는 것은 API 호출 부분도 테스트할...

요즘 생각

요즘 생각을 간단하게 정리해봤다. 커리어 패스 가끔 내 경력에 대해서 스스로 의심할 때가 있었다. 작년 한 해에 느낀게 너무 많았고, 그만큼 기본기나 마인드셋이 부족했다고 생각한다. 이제 경력 4년차가 되었다. 가만히 앉아서 누가 알려주기를 기다릴 수...

Can I Fish? - 모여봐요 동물의 숲 물고기 도감 개발 후기

https://canifish.now.sh 이직하기 전, 잠시 쉬는 기간 동안 모여봐요 동물의 숲 게임의 물고기 도감 앱을 만들었다. 오랜만에 진행했던 사이드 프로젝트의 개발 후기를 남긴다. 휴식 1년 4개월간 근무했던 회사를 그만두고 짧은 휴식 기간...

Now를 사용하여 모노레포 프로젝트 배포하기

일반적인 방법으로 배포하기가 어려운 모노레포 프로젝트를 Now를 이용해서 배포를 하는 방법을 알아보자. 문제점 사이드 프로젝트를 모노레포로 구성해서 진행하고 있다. 전반적으로 만족스러운데, CI/CD 환경을 구성하는 것이 생각보다 까다로운 것 같다. ...

프로그래머스 웹 프론트엔드 데브 매칭 후기

지난 주말에 프로그래머스에서 진행하는 웹 프론트엔드 데브 매칭에 참가했다. 프로그래머스 데브 매칭을 간단하게 소개하자면, 참가자는 프로그래머스에서 제공하는 온라인 환경의 VSCode에서 주어진 문제를 해결하고, 참가 기업은 참가자의 해결 능력 및 실무...

지난 4주간 나는 무엇을 했나

서비스 개선 브레인스토밍 비개발팀 내에서 서비스에 대한 불편 사항을 이야기 해도, 개발 우선 순위에서 밀려나 반영이 되지 않자, 개발팀에 의견을 전달하기 어렵다는 목소리가 들려왔다. 지난 4주동안 가장 먼저 했던 일은 전사 차원의 서비스 개선 브레인스...

Webpack, Framer, Preact, Reach UI 사용 후기

Webpack, Framer, Preact, Reach UI를 연습 삼아 간단하게 사용 해 봤다. TL;DR 전체 코드는 https://github.com/iamchanii/preact-framer-motion-modal 에서 확인할 수 있다. 그런데...

API 호출 테스트 코드 작성 방법 (with Typescript)

Promise를 가만히 두면 어떻게 되는지 소개하는 글 말미에 resolve를 대신 호출하는 사례로 최근에 리팩토링을 진행한 코드의 테스트 코드를 일부 소개했었는데, 해당 코드에 대헤 궁금해 하시는 분이 계셔서 짧게 정리해 봤다. 기존에 API 호출 ...

Promise, 가만히 냅두면 어떻게 될까?

ES6에서 등장 후 자바스크립트로 코딩할 때 콜백 지옥을 방지하기 위해 나온 Promise. 특히 비동기 작업을 처리할 때 자주 사용하게 되는데 이 Promise를 만들고 가만히 냅두면 어떻게 될까? 즉, then이나 catch로 핸들러가 등록되어 있...

맥에서 node-gyp 문제 해결하기

가끔씩 node-gyp 문제가 발생하면서 패키지가 설치되지 않는 경우가 있는데 내 경험상 맥 업데이트 이후 발생하는 것으로 추측된다. 맥에서 XCode를 설치(또는 재설치)하지 않고, 오로지 XCode Command Line Tools를 다시 설치하여...

Babel 기초 다지기

CRA로 프로젝트를 진행했기 때문에 바벨 설정을 생략할 수 있었지만, 자바스크립트를 주 언어로 사용하면서 바벨을 모른척 할 수는 없기에 이번 포스팅에서는 처음부터 바벨을 설치해서 적용하는 방법을 정리하기로 했다. 바벨이란 무엇일까? 바벨은 ES6+ 이...

flushPromises가 작동하는 이유

테스트 코드를 작성하다 보면, 비동기 처리를 기다리기 위해 flushPromises를 쓰는 경우가 종종 있다. 공식 Node API도 아닌 이 헬퍼 함수가 어떻게 작동하는지 궁금해서 검색하다가, 누군가 남긴 이슈의 답변이 괜찮아서 번역 해 봤다. Q....

리액트로 Trans 컴포넌트 만들기

회사 홈페이지의 다국어 기능을 외부 라이브러리 없이 구현하던 중 Trans 컴포넌트의 기능이 필요했다. 이 기능 하나만을 위해 i18n 라이브러리를 도입해야 할까? 직접 구현할 수 있지 않을까? i18n 라이브러리를 도입하고 난 뒤 유지보수 하는 것은...

블로그 새단장 후기

지난해 12월부터 블로그 새단장을 계획하고 조금씩 진행했다. 오로지 주말에 잠깐 작업하다 보니 해를 넘겨버렸는데, 이번 포스팅에서 새단장을 할 때 어떻게 작업하고, 어떤 점을 개선했는지 정리 해봤다. 디자인 Emotion 사용 기존의 styled-co...

Gatsby와 Contentful 연동하기

이전 글에서도 말 했었지만, 워드프레스 기반을 벗어나서, Gatsby로 새롭게 회사 홈페이지를 만들고 있다. 그러다 보니 회사에서 Gatsby에 대해 시간을 많이 쏟아붓고 있다. 따로 정리하지 않으면 언젠가 까먹을 것 같기도 하고, 나처럼 Gatsby...

TinaCMS로 편집 가능한 홈페이지 만들기

최근에 회사에서 홈페이지를 만들어 달라는 업무가 할당됐다. 지금까지는 워드프레스 기반으로 만들고 있었는데, 워드프레스 특유의 (쉬운 사용과는 다른)복잡성과 플러그인끼리 교착 상태가 발생하면서 더 이상 워드프레스로는 유지하기 어렵다는 판단을 내린 것이다...

2019년 회고

회고의 시즌이 왔다. 이 시기가 되면, 적어도 회고의 가치를 알고 있는 사람들은, 너 나 할 것 없이 회고를 하는 분위기다. 회고, 돌아본다는 것은 잠깐 호흡을 가다듬는 시기인 느낌인 것 같고, 호흡을 가다듬는다는 것은 그만큼 올 한해 달려왔다는 것 ...

디자인 토큰 삽질기

요즘 디자인 토큰 작업을 하고 있다. 개발자가 웬 디자인 관련 작업인가 싶지만 주요 기능을 개발해야 하는 일은 이제 대부분 마무리 지은 것 같고, 이제는 사용성 개선과 관련된 작업을 해야 하기에 그보다 앞선 작업으로써 파편화된 UX/UI를 수습하고 싶...

pnpm, 플랫하지 않은 패키지 매니저

pnpm 이라는 새로운 패키지 매니저가 있다. 새롭다고 표현하기엔 벌써 메이저 버전이 4지만, 여전히 자바스크립트를 새로 시작하는 사람들에게 npm이 익숙한 상황에서 새로운 패키지 매니저라는 표현은 틀리지 않다. pnpm? pnpm은 2017년에 처음...

2019-11-20 오늘의 생각

비록 리드나 팀장급 직책을 맡지는 않았지만, 올해 12월이 지나면 스타트업으로 일을 시작한지 벌써 3년을 채운다. 서당개가 풍월을 읊는 시간동안 느낀 것은, 구인구직이 둘 다 수요(需要, demand)를 기반에 둔다는 것을 알았다. 구직활동은 명명백백...

모노레포로 리액트 프로젝트 만들기

회사에서 진행하는 프로젝트의 규모가 점점 커지고 있습니다. 규모가 커질 것을 고려해서 몇 번 폴더 구조를 (나름) 체계적으로 정리하는 등, 최선을 다했지만 단순하게 폴더를 정리하는 선을 넘고 있어서(ㅠㅠ) 모노레포(Monorepo)에 관심이 생겼습니다...

Brewfile을 이용해서 팀 개발 환경 만들기

플러스티브이 개발팀은 도커를 이용해서 개발 환경을 맞춘 다음 로컬 환경에서 개발합니다. 원할한 협업을 위해 개발 환경을 설정하는건 중요한 일이지만, 조금 번거롭고 시간이 소요되는 작업입니다. 그러나 불가피하게 맥북을 초기화를 했거나(😱) 이번에 팀에...

Gatsby 로 블로그 만들기 (Final)

이번에는 최상위 주소로 들어갔을 때, 최근에 작성한 게시글 목록을 표시하는 기능과utterances위젯을 활용하여 덧글 기능을 구현 해 보겠습니다. 지금index.tsx파일에는 기본으로 작성 된 내용이 있으니 먼저 이 내용을 지우고 임시로 내용을 채웠...

Gatsby 로 블로그 만들기 (3)

지난번에는 마크다운 파일을 사용하여 동적으로 페이지를 만드는 작업까지 진행 했습니다. 이번에는 타입스크립트를 사용하면서 발생하는 미묘한 불일치를 해결 해 보겠습니다. GraphQL 쿼리의 반환 타입 지정

Gatsby 로 블로그 만들기 (2)

지난번에는 Gatsby 로 새로운 프로젝트를 생성하고, 타입스크립트와 Prettier 설정을 진행했습니다. 이번에는 Gatsby 의 기능을 이용해서 동적으로 페이지를 생성하는 기능을 구현 해 보겠습니다. 일반적으로는 pages 폴더에 컴포넌트를 추가하...

Gatsby 로 블로그 만들기 (1)

최근 들어 개인 블로그의 필요성을 느꼈습니다. Velog 는 제가 좋아하는 플랫폼이지만, 여전히 가슴 한 켠에 있는, 개인 블로그를 만들고 싶다는 욕망이 솟아난게 아닐까 싶습니다. 어떻게 만들어야 할 지 고민한 결과, 지금이 GatsbyJS 를 사용하...