첫 번째 풀스택 앱 개발에서 배운 교훈: 한 문자의 버그

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 프론트엔드/백엔드 개발자
• 난이도: 중급 (HTML/CSS/JS 기초 경험자 대상)

핵심 요약

• Vue + Express + TypeScript 스택으로 풀스택 앱 개발 경험 공유
• ts.config.json 파일 이름의 한 문자 오류(tsconfig.json으로 수정)로 인한 대규모 오류 발생
• 버그 해결 과정에서 Git 활용, npm start 명령어 사용 등 실무 팁 강조

섹션별 세부 요약

1. 기술 스택 선택과 초기 개발

• Vue, Express, TypeScript 기반의 풀스택 프로젝트 결정
• Firebase 사용 경험을 바탕으로 Discord 그룹 프로젝트에서의 kanban 보드 개발 경험 활용
• Express 서버 설정, env 파일 사용, password hashing 구현 등 핵심 기능 추가

2. 풀스택 구현 과정

• Vue로 프론트엔드 개발, login flow 및 secure API 구현
• backend와 frontend 간 통신 구현 완료 후, 기능 확장 과정에서 오류 발생

3. 오류 발생 및 해결 과정

• import 오류로 인한 대규모 오류 발생 (예: Cannot find module, No overload matches 등)
• npm start 및 npm run dev 명령어 실행 시 오류 지속
• Git 기록 분석을 통해 ts.config.json 파일 이름의 한 문자 오류 발견
• 파일 이름 수정 후 오류 해결 및 프로젝트 완료

4. 개발자로서의 성장과 교훈

• 오류 해결 과정에서 버그 추적, 프로젝트 재구성 경험
• Git 활용, npm 명령어 사용법, TypeScript 구성 파일 관리 중요성 인식

결론

• tsconfig.json 파일 이름 오류와 같은 미세한 설정 오류는 Git 기록 분석을 통해 해결할 수 있음
• 개발 초기 단계에서 npm start 명령어 실행, 환경 변수 관리, 버그 추적 기술 습득이 핵심
• 한 번의 작은 실수가 전체 프로젝트에 미치는 영향을 인지하고, 세심한 코드 검토 필요