오픈소스 기여 경험기: Next.js 한글 문서, es-toolkit, Frontend Fundamentals

최근 1년 전 개발한 React 포트폴리오 프로젝트를 Next.js로 마이그레이션하는 작업을 진행하며, Next.js에 대해 알지 못했던 부분을 보완하고 필요한 정보를 얻기 위해 공식 문서를 참고했습니다.

 

그런데 공식 문서가 한글을 지원하지 않아, 자연스럽게 한글로 제공되는 Next.js 한글 문서를 접하게 되었고, 그 과정에서 모든 페이지의 이미지가 깨지는 문제를 발견하여 해결할 수 있었습니다.

 

Pull Request 링크:

https://github.com/luciancah/nextjs-ko/pull/158

[no-issue] fix: external image 컴포넌트의 baseUrl 수정 by umsungjun · Pull Request #158 · luciancah/nextjs-ko

 

기여 내용:

• Next.js 한글 문서를 참고하는 과정에서, 모든 페이지의 이미지가 깨지는 문제를 발견했습니다.
• 전역적으로 사용되는 <ExternalImage /> 컴포넌트의 baseUrl을 변경하여 문제를 해결하였습니다.

---

토스 오픈소스 기여 도전

Next.js 한글 문서에 대한 Pull Request가 통과된 후 큰 보람을 느낀 저는, 앞으로 더욱 많은 오픈소스 프로젝트에 기여하고 싶다는 열망이 커졌습니다.

 

그동안 관심 있었던 토스의 오픈소스 라이브러리인 es-toolkit과 프론트엔드 코드 지침서인 Frontend Fundamentals에도 Pull Request를 요청하게 되었고 현재 진행중입니다.

 

es-toolkit 기여 (진행 중)

Pull Request 링크:
https://github.com/toss/es-toolkit/pull/1125

feat(isString): replace typeof checks with isString utility by umsungjun · Pull Request #1125 · toss/es-toolkit

 

기여 내용:

• 기존 코드에서 문자열 타입 체크에 사용되던 typeof value === 'string' 방식을, es-toolkit에서 제공하는 isString 유틸리티 함수로 대체하였습니다.
• 관련 벤치마크 테스트와 내부 코드에서 원시적인 문자열 타입 체크를 isString() 함수로 전환함으로써, 코드 가독성과 전체 코드베이스의 일관성을 향상시켰습니다.

 

Frontend Fundamentals 기여 (진행 중)

Pull Request 링크:
https://github.com/toss/frontend-fundamentals/pull/207

docs: replace image with copyable code block in submit-button.md by umsungjun · Pull Request #207 · toss/frontend-fundamentals

 

기여 내용

• 기존의 이미지 기반 예시코드를 복사 가능한 코드 블록으로 변경하여 다른 페이지와 통일성을 높이고 문서의 가독성을 높였습니다.
• 문서 흐름에 맞춰 코드를 설명하는 문구를 간결하고 이해하기 쉽게 수정했습니다.

 

Frontend Fundamentals 기여 (통과)

Pull Request 링크:
https://github.com/toss/frontend-fundamentals/pull/211

fix broken image path in README.md by umsungjun · Pull Request #211 · toss/frontend-fundamentals

 

기여 내용 

• GitHub에서 README.MD에 이미지가 제대로 렌더링되지 않는 문제를 해결하기 위해, 기존 이미지 경로인 ./public/images/ff-meta.png를 ./images/ff-meta.png로 수정했습니다.

---

마치며

현재 Next.js 공식문서에 대한 PR은 이미 통과되어 반영되었으나, Toss 관련 PR은 아직 확인 중입니다. Merge 여부가 불투명하지만, 잘 반영되어 많은 사용자들에게 도움이 되었으면 하는 기대를 가지고 있습니다.

 

이번 경험을 통해 오픈소스에 기여하는 과정이 얼마나 보람있고, 또한 개발자로서 성장하는 데 큰 도움이 되는지 다시 한 번 깨달았습니다. 앞으로도 다양한 오픈소스 프로젝트에 관심을 가지고, 많은 개발자 분들에게 도움이 되는 개발자가 되기 위해 계속해서 도전해 나갈 계획입니다.

 

Next.js 마이그레이션 포트폴리오

https://github.com/umsungjun/new_portfolio_next

GitHub - umsungjun/new_portfolio_next: 😗 Next Portfolio는 기존에 React로 개발된 New Portfolio(https://github.com/umsu