프론트엔드 주니어의 오픈소스 기웃대기

들어가기 전에...

 

이 글은 경력 2년도 채 되지 않은 주니어 프론트엔드 개발자가 오픈소스를 기웃거린 경험을 다루고 있습니다. 오픈소스에 기여에 대한 의욕만을 가지고 후안무치(厚顔無恥)의 태도로 이런저런 시도를 해 본 후기입니다.

 

1. 왜

개발 공부를 시작하자마자 저는 '개발 커뮤니티의 아낌없는 나눔' 그 자체가 굉장히 매력적이라고 생각했습니다.

가치 있는 기술과 노하우에 대해 끊임없는 교류를 하고, 이를 통해 더 나은 무언가를 만들어 내기 위한 공동체의 합의가 암묵적으로 존재한다니... 더군다나 그런 문화가 특정 지역에 국한되지 않고 전 지구적으로(아마도) 존재한다는 사실이 너무나 신기하고 멋져 보였습니다.

 

그리고 자연스럽게 저도 그 생태계에 작은 사잇돌이나마 괼 수 있으면 좋겠다는 생각이 들었습니다. 

 

2. 어떻게

오픈소스에 기여하는 방법

 

오픈소스에 기여하고자 한 번쯤 찾아본 사람이라면 누구나 아는 사실이지만, 오픈소스에 기여하기 위한 방법은 코드 외에도 여러 가지 방법이 있습니다. 번역 / 디자인 / 오타 수정 / 문서 작업 / 업데이트 등등... 오픈소스 생태계 자체에 기여할 수 있는 방법은 무궁무진하고 때로는 코드를 작성하는 것보다 훨씬 큰 도움이 될 때가 있습니다.

 

하지만 저는 개인적으로 오픈소스 생태계에 코드로 기여하고 싶다는 욕심을 가지고 있었습니다.

 

처음에는 오픈소스에 기여하기는커녕, 프로젝트 자체의 구성이나 소스조차 이해하지 못했기 때문에 '일단 내 것을 만들어 보면서 실력을 키워보자'는 마인드로 접근했습니다.

 

3. 무엇을

2020.11

 

그렇게 짭플린이라는 크롬 익스텐션을 만들게 되었습니다. 포스팅을 한 지도 벌써 1년 반이 지났네요.

 

Ryan's ZZaplin (짭플린) 개발기

 

지금 다시 보면 유지보수가 불가능한 정말 정말 엉망진창인 코드지만, 그 당시에는 주말 10시간을 투자해서 당장 내가 실무에서 사용할 수 있는 툴을 나름 그럴듯하게 만들었다는 생각에 매우 기뻤습니다.

실제로 그 당시 다니던 회사에서 동료분들이 제가 배포한 익스텐션을 유용하게 쓰고 있다고 말씀해주셔서 더 보람찼던 기억이 있습니다.

 

 

2021.01

 

두 번째는, 회사 내에서 녹취록 작성으로 고생하고 계시던 직원분을 위해 Speach to Text 프로그램을 만들었습니다.

요것도 주말 안에 만들어서 드리려고 바짝 했던 기억이 나네요.

원래는 포스팅에 소스 코드들이 전부 있었는데, 지금 보니 너무 부끄러워서 지워버렸습니다.

어차피 핵심 로직은 홈서버 내부에 있기도 하고요.

 

[Electron] 녹취록 작성기(STT).exe 개발기

 

이 작업 역시 동료분의 업무 효율을 높여드릴 수 있었고, 굉장히 기뻐해 주셔서 보람찼던 기억이 납니다.

또 개인적으로는 일렉트론을 써볼 수 있어서 좋은 경험이었던 것 같아요.

 

 

2021.07

 

이 시기에는 라이브러리를 배포하는 경험을 해보고 싶었던 것 같습니다.

별거 아닌 커스텀 훅들을 모아서 npm에 배포했는데, 그마저도 배포 템플릿을 통해 날로(?) 먹었습니다.

npm에 뭔가 나만의 무엇인가를 배포를 해봤다!라는 경험에서는 의미가 있었던 것 같고, 그 외에는 딱히...

지금 포스팅을 보니 당시에는 나름 성취감이 있었는지 글에서 기쁨이 느껴지네요.

 

[React] 주니어 개발자의 커스텀 훅 NPM 배포 후기

 

 

2021.08

 

이제 NPM 배포에 재미가 붙어 이것저것 만들어서 배포를 해보려고 합니다.

역시나 동료의 능률 상승이 제 보람과 기쁨이기 때문에, 이 당시 동료가 반복적인 작업이라 힘들다고 했던 부분인 이미지 에셋의 상수 관리를 할 수 있는 모듈을 만들게 됩니다.

 

[AssetManager] 리액트에서 에셋 상수관리를 간편하게!

 

여기서 욕심을 좀 더 내서, CLI를 통한 기본 세팅이 가능하게 하고 각종 편의 기능들을 추가한 버전은... 지금 작업 중에 있습니다.

 

eima

 

 

2022.03

 

평화로운(바쁜) 나날을 보내던 중, 회사에서 유용하게 사용하던 모킹 라이브러리에서 버그를 발견하게 됩니다.

 

graphql-codegen-typescript-mock-data

 

그건 바로 순환 참조를 막기 위해 설정한 Set 객체의 참조 방식에 따른 의도치 않은 버그였습니다.

한동안 불편함을 감수하고 사용하던 중, '이 정도면 개선 PR 올릴 수 있겠는데?'라는 생각이 들었습니다.

수정 PR을 부산에 있는 99층 스타벅스에서 올리고... 두근두근...

 

fix: relationshipsToOmit bug when terminateCircularRelationships is true by Jonghakseo · Pull Request #77 · ardeois/graphql-co

 

약간의 수정을 거쳐 제 PR이 머지되게 됩니다!

엄청나게 큰 프로젝트는 아니지만, 오픈소스에 코드를 통해 기여하겠다는 첫 목표를 이룬 것 같아 기분이 매우 좋았습니다.

 

 

2022.04

 

Vite가 빠르다는데 얼마나 빠른지 한 번 써보고 싶고,

React 18이 좋다는데 얼마나 좋은지 한 번 써보고 싶고,

마침 크롬 익스텐션 보일러 플레이트도 만들어 보고 싶은 참이라 섞어서 만들어 봤습니다.

 

GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript

 

Vite를 사용해보니 생각보다 만족스러워서 Vite 커뮤니티에도 한 발 걸치기 위해 Awesome Vite에도 올려봤습니다.

 

docs: add chrome-extension-boilerplate-react-vite by Jonghakseo · Pull Request #417 · vitejs/awesome-vite

 

만든 지 한 달 정도 되었는데, 은근슬쩍 깃헙 스타와 포크가 늘어서 기분이 좋았습니다.

 

 

특히 일면식도 없는 다른 사람들이 제 Repo에 Issue, PR 등을 올리면서 함께 프로젝트에 기여해주는 부분은, 제가 그리던 오픈소스 활동의 모습이라 정말 좋았습니다.

 

 

그리고 제 레포를 보고 Donate를 할 의향이(?!) 있다는 분의 연락도 와서 놀랐습니다.

돌아보니 이 템플릿을 만들면서 여러모로 재밌는 경험을 많이 했네요.

 

 

4. 앞으로

짬짬이 시간을 내서 요것 저것 해봤던 기록들이 모아놓고 보니 소소한 회고도 되고 뭔가 뿌듯하네요.

부담 가지지 않고 재미있게 작업했던 기억들이, 동력을 잃지 않고 계속 뭔가 해볼 수 있는 저만의 방법인 것 같습니다.

 

앞으로는 틈틈이 기웃거리던 오픈소스 생태계에 보다 본격적으로 기웃거려볼까 합니다.

구체적으로는 좀 큰 프로젝트에 기여를 해보려고 생각하고 있습니다.

소소하게나마 기여할 수 있다는 자신감이 생겼으니, 사용자도 많고 영향력이 큰 프로젝트에도 조심스럽게 기웃거리고싶습니다. 아마 TypeScript 관련된 오픈 소스에 기여하게 될 것 같습니다. 저는 TypeScript를 좋아하니까요 :)

 

읽어주셔서 감사합니다.