비전공자의 React 기반 언어 학습 도구 'iSpeakerReact' 구축 여정: 기술 회고와 교훈
🤖 AI 추천
코딩 경험이 없는 상태에서 언어 학습 도구 개발을 시작하려는 프론트엔드 개발자, 특히 새로운 기술 스택으로 프로젝트를 전환하거나 현대화하려는 개발자에게 추천합니다. 또한, 라이브러리 선택의 어려움, 번아웃 극복, 자동화 경험 등 개발 과정에서 겪을 수 있는 현실적인 문제와 해결 방안에 대한 인사이트를 얻고자 하는 모든 레벨의 개발자에게 유용합니다.
🔖 주요 키워드
핵심 기술: 비전공자 개발자가 2015년 AngularJS 기반의 언어 학습 도구를 현대적인 React 및 Electron 기반의 오픈소스 애플리케이션 'iSpeakerReact'로 성공적으로 전환한 과정을 담은 기술 회고입니다. 초기 아이디어 구체화부터 기술 스택 선정, 개발 과정의 난관 극복, 그리고 최종 결과물까지의 여정을 공유합니다.
기술적 세부사항:
* 초기 버전 (2015년): Oxford Advanced Learner’s Dictionary CD-ROM의 AngularJS 및 jQuery 기반 앱을 브라우저에서 실행 가능하도록 수정.
* 현대화 시도 (2023년): Bootstrap 5를 이용한 UI 개선 및 다크 모드 추가. 하지만 코어 로직이 레거시 AngularJS에 의존하는 한계 인식.
* 프레임워크 탐색: Angular의 가파른 학습 곡선과 Vue.js에서의 초기 설정 어려움 경험.
* React 전환 (2024년): ChatGPT의 도움을 받아 Create React App으로 개발 시작. iOS 16 오디오 재생 버그 및 번아웃 경험.
* 빌드 도구 변경: Create React App의 Deprecation에 대응하여 Vite로 전환 및 속도, 간결성, 적합성 확인.
* 프로젝트 안정화: 2024년 9월 React 기반 버전 메인 브랜치 병합.
* Electron 통합: 오프라인 지원 및 앱 용량 축소 (3GB → 700MB)를 위한 Electron 도입 및 미디어 다운로드 방식 변경.
* CI/CD 자동화: GitHub Releases를 이용한 빌드 및 릴리스 프로세스 자동화.
* 국제화 (i18n): 초기 영어 하드코딩에서 Crowdin 실패 후 Weblate로 국제화 지원 강화.
* UI 재구축: Bootstrap의 제약에서 벗어나 Tailwind CSS와 daisyUI를 활용하여 자유롭고 개인적인 디자인 시스템 구축 (주요 색상: 녹색).
* 신규 기능 추가: Oxford 3000™/5000™ 단어 목록 기반의 스트레스 및 음절 연습 기능 (실시간 강조, 슬로우 모드 지원).
개발 임팩트: 성공적인 기술 스택 현대화와 새로운 기능 추가를 통해 사용자 경험을 크게 향상시켰습니다. 또한, 오픈소스 생태계를 활용하여 프로젝트를 발전시키고, 개인적인 성장과 함께 개발 커뮤니티에 기여할 수 있는 기반을 마련했습니다.
커뮤니티 반응: 글에서는 직접적인 커뮤니티 반응 언급은 없으나, 오픈소스 프로젝트로 GitHub에서 공개되어 있다는 점은 긍정적인 기여와 피드백을 기대할 수 있음을 시사합니다.