스매치 코퍼레이션에서는 최근에 GraphQL과 Relay를 도입해서 업무를 진행하고 있다. Relay가 프레임워크를 표방하는 만큼 초기 도입 비용이 높지만, 컴파일러나 Relay가 갖고 있는 철학을 통해 클라이언트에서 GraphQL을 가장 잘 활용할 수 있도록…

7월이 눈 깜짝할 새에 지나가버렸다. 바빠서 조금 힘들지만, 집중할 수 있는 지금의 상황에 만족하자. 휴식 이전 직장을 정리하고 잠깐 휴식 기간을 보냈다. 정신적이든 체력적이든, 다음 계획을 실행할 체력이 부족했기 때문이다. 잠시 일과 개발에서 멀어지는 시간을…

작년 초에 한 번 블로그를 리뉴얼했는데, 이번에 또. 리뉴얼을 했다. 지난번 리뉴얼 이후 불편한 점이 조금씩 있었지만, 귀찮음을 핑계로 미뤄왔었다. 글을 자주 쓰지는 않았지만, 어쨌든 쓰는데에는 문제가 없었기 때문에 그냥 불편함을 감수해왔는데, 최근에 글을 쓰다가…

블로그를 새로 리뉴얼하면서, 그동안 관심있게 보던 ReScript를 사용해봤다. 여전히 익혀야 할 부분이 많이 남아 있지만, ReScript가 왜 괜찮으면서 재미있는지 알 것 같기도 하다. 이 주제는 조만간 블로그 리뉴얼 주제로 다시 다뤄보기로 하고. 내 블로그의…

최근에 일의 격이라는 책을 읽었다. 언젠가 사두고 ‘나중에 꼭 시간들여서 읽어야지-리스트™️’에 넣어둔 다음 늘 그랬던 것처럼 잊고 있었다. 그리고 또 다른 최근에 우아한형제들에서 진행한 이게 무슨 일이야! 컨퍼런스 중간 광고에서 이 책을 추천해준 것을 보고나서 이…

얼마 전 다노를 떠나기로 결정했다. 오늘은 떠나게 되는 이유부터, 그 다음 단계에 대한 내 생각 등을 아무렇게 적어서 정리해볼까 한다. 현재 나의 상태는? 한 마디로 조졌다. 최근 내 상태를 표현하기에 이만한 단어가 또 있을까?어느 순간부터 일이 재밌지 않았다…

만약 컴포넌트 기반 개발을 선호한다면, 스토리북은 절대로 빠질 수 없는 명품 조연이라고 볼 수 있다. 이른바 프론트엔드 업계 표준이라고 봐도 무방하다. 안 쓰는 회사/사람은 있을 수 있어도, 한 번 사용해본 사람은 아마 스토리북 없이 개발을, 특히 컴포넌트 주도 개발을…

비교적 최근에 Remix가 공개되었다. Remix는 React를 사용하는 풀스택 웹 프레임워크이다. 처음 발표 소식을 들었을 때부터 관심이 있었기 때문에 오픈소스로 공개된 이후 간단하게 찍먹을 해봤다. 쓰면 쓸 수록 괜찮았고, 기회만 된다면 회사 업무에 가져다 쓰고…

사내 컨퍼런스. 종종 페이스북 그룹 등을 통해서 듣는 소식들 중에 컨퍼런스만큼 가슴을 웅장하게 하는 행사가 많진 않다. 컨퍼런스라고 하면 뭔가 크고, 멋있고, 엄청난 주제의 이야기를 하는, ‘힙한’ 행사의 이미지가 있어서가 아닐까? 그런 행사를 진행하는 것은 이름만…

올해도 어김없이 회고를 쓴다. 사실 미리 작성해둔 초안이 있었는데 계속 미루다보니 글감의 연속성이 무너져버렸다. 그걸 다듬느니 차라리 새로 쓰는게 낫겠다는 생각이 들었다. 원래 욕심보다 훨씬 빈약한 회고가 될지도 모르지만, 일단 써보자. 글쓰기 이렇게까지 글쓰기를…

나는 커밋 메시지를 작성할 때 Conventional Commits 스펙에 맞게 쓰는 것을 선호한다. (실제로 스펙이 이렇게 잘 정리되어 있는지는 처음 알았다) 대부분 chore나 feat, fix를 사용하는데에 그치는 정도지만, 일관성 있는 커밋 메시지는 협업과 개인…

문득 점심에 동료분들과 밥을 먹다가 블로그 이야기가 나와서, 오랜만에 블로그에 글을 써야겠단 생각이 들었다. 대신 퇴고를 전혀 거치지 않기로. 그냥 지금 드는 생각을 그대로 적어내리자고 다짐했다. 짧다락한 경력을 통틀어서 이만큼 집중하던 때가 있었던가 하는 생각이 들…

요즘 회사에서 React Query를 적극적으로 쓰고 있다. 쓰면서 느낀 점은 서버 상태를 잘 관리하는게 여러모로 꽤 중요하다는 것을 알게 되었다. (서버 상태란 API를 통해 받은 응답값을 뜻한다.) 서버 상태를 다른 컴포넌트에서 접근하려면, 가장 쉬운 방법은…

회사에서 리더 교육 세션을 받으면서 동시에 선물로 받게된 책. 틈틈히 챕터별로 느낀 점이나 그런 걸 정리해봤다. 책의 내용과 경험을 같이 정리하는게 좋을 것 같아서 이번 포스팅에서는 챕터2 까지만 정리했다. 챕터1. 관리란 무엇인가 이 책에서 팀장은 타고나는 것이…

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

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

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

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

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

이 책은 처음부터 끝까지 설계가 아주 잘 되어 있다. 코드로 빗대자면 아주 잘 설계된, 그야말로 클린 아키텍쳐라고 할 수 있다. 개발 내용을 주로 정리하는 블로그에 이런 문학 작품에 대한 글을 써도 되는가 잠깐 고민을 하다가 지금 제가 가장 관심있는 주제를 다룬다고…

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

Snowpack으로 간단한 프로젝트와 플러그인을 작성해봤다. 아쉬웠던 경험 3개월전, Snowpack이 2.0을 릴리즈 했을 때 시험삼아 써보려고 했다. 그 당시 회사에서 웹팩 구성을 이리 저리 바꿔보는 일을 하고 있었기 때문에 새로운 번들러의 출시가 반가웠다. 결론…

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

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

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

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

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

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

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

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

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

유독 개발자는 시간이 지나면 팀장, 매니저가 되어야 하는 경우가 많은 것 같다. 하지만 경험이 풍부한 개발자가 항상 유능한 매니저가 되는 것은 아니라고 생각했기 때문에 평소에 매니지먼트에 관심이 있던 나는 이 책을 본 순간, 망설이지 않고 그대로 계산대로 향했다. 어…

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

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

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

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

나는 스스로를 애자일에 어울리는 팀원이라고 생각했다. 그런데 막상 애자일한 조직이 무엇인지 정의 해 보면 막막했다. 애자일한 조직을 선호한다면 그것이 무엇인지는 정확하게 알아야 할 필요가 있지 않을까? 애자일과 관련된 서적이 꽤 많지만 가장 유명한 책은 김창준님의…

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

나는 매일 아침 8시 30분쯤 출근한다. 일찍 출근해서 커피 한 잔을 즐긴 다음, 본격적으로 업무를 시작하기 전 30분 내의 시간을 사용하여, 마치 하나의 ‘검색엔진 크롤러’처럼 온갖 개발 관련 블로그나 메일링을 훑으며 정보를 수집한다. 이 ‘검색엔진 크롤러’는 아주…

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

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

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

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

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

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

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

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

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

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

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

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

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