전체 글
오픈소스를 통해 후원을 받은 후기
이전 글인 프론트엔드 주니어의 오픈소스 기웃대기라는 글의 마지막 부분에서 링크드인을 통해 후원 의사가 있는 분의 연락을 받았다는 내용을 적은 적이 있었다. 그분은 github sponsor 기능을 통해서 후원을 하고 싶다고 연락을 하셨었는데, 안타깝게도 아직 한국에서는 github sponsor 기능을 지원하지 않았다. 나는 대안으로 Paypal 계정을 통해 후원을 해주셔도 좋지만, 여의치 않다면 마음만이라도 너무나 감사하다고 이야기를 드렸다. 그렇게 3개월 정도가 지난 어느 날... 갑작스레 메시지와 함께 메일이 도착했다. 오우야... 링크드인으로 온 메시지를 보니, 그간 Paypal 세팅을 하고 여차저차 일정이 있어 늦어졌다며 미안하다는(!) 말과 함께 앞으로도 좋은 일을 계속하길 바란다며 작은 선물..
Jetbrains 오픈소스 라이센스
내가 개발을 처음 시작한 이후로 꾸준히 잘 사용하고 있는 IDE는 Jetbrains사의 제품들이다. 물론 아직도 기능을 다 모르고 단축키 사용에 미숙한 부분들이 많다. 특히 리팩토링 관련된 단축키들을 바탕으로 생산성을 높이고 정말 중요한 부분을 고민할 수 있는 시간을 확보하는데 충분히 능숙하지 못하다. 어쨌건 한창 잘 사용하는 IDE 이야기를 한 이유는, Jetbrain에서 오픈소스 커뮤니티의 기여자에게 고가의 라이센스를 제공하는 정책을 가지고 있기 때문이다. 오픈 소스 개발을 위한 라이선스 - 커뮤니티 지원 www.jetbrains.com 혼자 어림짐작으로 github star가 최소 1000은 넘고, 라이브러리라면 주간 다운로드 수가 1000건은 되어야 하지 않나 하는 생각이 있었는데, 그렇지 않다는..
[이슈] 크롬 익스텐션 보일러 플레이트 - content script react
GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript Chrome Extension Boilerplate with React + Vite + Typescript - GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript github.com 한 번 만들어 보고 싶어서 만든 보일러 플레이트의 stars가 70을 넘었다. fork는 10개가 되었다. 다른 오픈소스 프로젝트에 비하면 초라한 개..
코딩 컨벤션(Coding Convention)
코딩 컨벤션, 네이밍 컨벤션, 팀 내 컨벤션 등등... 개발자들은 일상적으로 많은 상황에서 컨벤션이라는 단어를 쓰고 있다. Convention 우리 말로는 협약, 약속 등으로 번역되는 말로 '함께 와서 모이고 참석하다'는 라틴어가 그 어원이다. 그럼 코딩 컨벤션은 무엇일까? 위키피디아에 기재된 코딩 컨벤션에 대한 정의는 다음과 같다. 프로그래밍 스타일 , 관행 및 방법을 권장 하는 특정 프로그래밍 언어에 대한 일련의 지침 일반적으로 파일 구성, 들여쓰기, 주석, 선언, 명령문, 공백, 명명 규칙, 프로그래밍 관행, 프로그래밍 원칙, 프로그래밍 경험 법칙, 아키텍처 모범 사례 등을 다룬다 위키피디아에서의 정의는 언어에 대한 지침으로 국한되어 있으나, 코딩 컨벤션은 언어 전반에 걸쳐 존재할 수도 있고 특정 ..
[React] useCallback의 문제점
React 16.8에서 소개되었던 Hook API 중에서는 useRef는 제외한다면 최적화와 관련된 훅이 2개(useMemo, useCallback)가 있다. Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 그중에서도 useCallback은 함수를 메모이제이션 하기 위해 사용하는 훅이다. 함수를 메모이제이션 하는 목적은 대개 성능의 최적화이고, 특히 리액트에서는 주로 메모이제이션 컴포넌트의 props로 넘기는 이벤트 핸들러 등의 함수가 불필요하게 재 생성되어 불필요한 렌더링이 일어나지 않게끔 사용한다. 그런데 우리가 useCallback을 사용하는 경우를 생각해보면, 빈 의존성 배열로 사..
프론트엔드 주니어의 오픈소스 기웃대기
들어가기 전에... 이 글은 경력 2년도 채 되지 않은 주니어 프론트엔드 개발자가 오픈소스를 기웃거린 경험을 다루고 있습니다. 오픈소스에 기여에 대한 의욕만을 가지고 후안무치(厚顔無恥)의 태도로 이런저런 시도를 해 본 후기입니다. 1. 왜 개발 공부를 시작하자마자 저는 '개발 커뮤니티의 아낌없는 나눔' 그 자체가 굉장히 매력적이라고 생각했습니다. 가치 있는 기술과 노하우에 대해 끊임없는 교류를 하고, 이를 통해 더 나은 무언가를 만들어 내기 위한 공동체의 합의가 암묵적으로 존재한다니... 더군다나 그런 문화가 특정 지역에 국한되지 않고 전 지구적으로(아마도) 존재한다는 사실이 너무나 신기하고 멋져 보였습니다. 그리고 자연스럽게 저도 그 생태계에 작은 사잇돌이나마 괼 수 있으면 좋겠다는 생각이 들었습니다...
[React] 반응형UI에 대처하는 테스트의 자세
반응형 컴포넌트 React를 사용해서 반응형 웹을 만들어 본 사람이라면, 반응형 레이아웃에 대응하기 위해 아래와 같은 컴포넌트(혹은 비슷한 역할을 하는 컴포넌트)를 만들어 본 경험이 있을 거라 생각한다. 예시 1 레이아웃에 따라 렌더링 할 컴포넌트를 분기하는 Switch 컴포넌트 예시 2 children의 노출 여부를 명시하는 Display 컴포넌트 두 컴포넌트의 공통점은 무엇일까? 바로 반응형 레이아웃에 대한 처리를 JSX내부에서 바로 확인할 수 있게끔 컴포넌트화 했다는 점이다. 별도의 스타일 코드로 이동해 확인할 필요가 없고, 직관적으로 어떤 컴포넌트들이 반응형에 따른 분기 처리가 되는지 알 수 있으니 장점이 많다 하겠다. 테스트 코드와 함께 사용 시 발생하는 문제점 하지만 이 컴포넌트는 아쉽게도 테..
내가 우리 팀을 좋아하는 이유
어느덧 이직을 한 지 3개월이 되어간다. 길다면 길고 짧다면 짧은 시간이었지만, 새로운 환경에 적응하기엔 충분한 시간이었다고 생각한다. 나는 지난 3개월간 굉장히 만족스럽게 일했을 뿐만 아니라 이전보다 일에서 느끼는 행복이 더욱 많아졌다. 돌이켜보면 내 행복을 위해 과감하게 이직하기를 잘 했다는 생각이 든다. 새로운 직장에서 만족스러운 부분은 여러 가지가 있지만 가장 만족스러운 부분은 역시나 수준 높은 동료들이라고 생각한다. 기본적으로 동료들의 지식적인 부분의 역량도 뛰어나지만, 건전한 피드백을 바탕으로 서로의 장점을 흡수하고 단점을 개선하려고 노력하는 부분이 정말 좋다. 훌륭한 동료들과 함께 하는 만큼 좋은 개발 문화도 만족스럽다. 1. 이슈가 생겼을 때 모르는 부분을 모호하게 넘어가지 않고 끝까지 파..
멍청함과 마주하는 용기(?)
오늘 블로그 방문자 수가 소리 소문 없이 2만 명을 넘었다. 사실 방문자 수가 오르는데에는 영양가 없는 내용들이 한몫을 단단히 했는데, 그것과는 별개로 내가 블로그를 작성한 지 어느덧 1년 8개월이 되었다는 사실을 깨닫고 좀 놀랐다. 이 블로그는 애증의 블로그이다. 블로그에 들어오는 매 달마다 이전에 작성한 글에서 내 멍청함을 발견한다. 그 때마다 지우고 싶은 욕망과 내버려 두고 싶은 귀찮음이 내 안에서 전쟁을 벌인다. 무식하면 용감하다고 했던가. 이전 글들을 다시 읽으면 나의 용맹함(무식)을 가감 없이 느낄 수 있다. 한 편으로는 보잘것 없는 이 블로그를 통해 나를 좋게 봐주셨던 분들도 생기고(?) 덕분에 좋은 기회가 생겨 좋은 동료들과 함께 하루하루가 행복하게 일하고 있다. 한 달 혹은 일주일 단위로..
graphql-codegen-typescript-mock-data
회사에서 Typescript + GraphQl을 사용하고 있다 보니 테스트에 필요한 mocking data를 만드는 게 어렵지 않다.(타입 추론) 그런데 프로젝트에 테스트가 300개가 넘어가니까 매번 테스트마다 mocking을 해주는게 정말 일이었다;; 이전 회사에서 rest API 작업을 할 때 했던 방법대로 intermock을 통해 mocking을 해보려고 했는데 여의치 않았다. intermock 자체가 지원하는 타입이 제한적이고 미완성이라는 느낌이 많이 나서 사용하지 못하고 있었다 ㅠㅠ [TS] Type과 Interface로 테스트용 Mock Data 만들기 Mock Data의 필요성 프론트엔드 개발을 하는 입장에서는 백엔드 API가 이미 다 준비되어 있고, 인터페이스도 공유가 된 상태에서 작업을 ..