React 개발 과제 수행 시 겪었던 초기 설정, 런타임 에러 및 멘탈 관리 경험 공유

React 개발 과제 수행 시 겪었던 초기 설정, 런타임 에러 및 멘탈 관리 경험 공유

핵심 기술: 본 콘텐츠는 React 기반의 구현 과제를 수행하며 겪었던 초기 프로젝트 설정의 어려움, package.json 스크립트 작성 및 실행 문제, vite 설정을 통한 에러 해결 과정, 그리고 과제 수행 중 발생한 멘탈 관리의 중요성을 공유합니다.

기술적 세부사항:

• 과제 환경: React 프로젝트, JS 또는 TS 사용 (구현 과제)
• 초기 설정 문제: 세팅부터 시작하는 과제 유형에 대한 예측 부족, 입장 시간 지연으로 인한 불안감.
• package.json 스크립트 문제: 루트 폴더에 직접 스크립트 작성 시 run dev 실행 실패.
  • 기존 루트 폴더 내 라이브러리 설치 후 개별 파일 생성 시 문제.
  • 루트에서 특정 폴더 내 스크립트 실행 요구사항 해결.
• vite 활용: vite.config.js 설정을 통해 폴더 경로 지정 및 루트에서의 스크립트 실행 성공.
• 구현 내용: HTML/CSS는 완성된 상태에서 JavaScript 기능 구현.
  • 필터링 시 URL query parameter 생성 및 history.replaceState 사용 (history 미남기기).
  • 로컬 백엔드 API 호출 및 카드 형식 상품 전시.
  • 필터링된 상품 목록 표시 및 정렬.
• 시간 관리: 초기 설정 및 문제 해결에 예상보다 많은 시간 소요 (약 3~4시간).
• 코드 이해: 기존 코드 분석 및 기능 구현에 시간 소요.
• 빌드 및 테스트: 최종 단계에서 빌드 결과물(dist 폴더) 생성 및 실행 정상 작동 확인.

개발 임팩트: 프로젝트 초기 설정의 중요성, package.json 스크립트 및 번들러(Vite) 설정에 대한 이해 증진, 문제 해결 능력 향상, 그리고 개발 과정에서의 멘탈 관리 필요성 강조.

커뮤니티 반응: 직접적인 커뮤니티 반응은 언급되지 않았으나, '다른 사람의 코드를 보고 충격받았다'는 표현을 통해 코드 리뷰 및 동료 개발자와의 비교에서 오는 학습 동기 부여를 시사합니다.

톤앤매너: 개발자의 실제 경험을 바탕으로 솔직하고 교육적인 톤으로 작성되었습니다. 기술적인 난관과 심리적 어려움을 상세히 묘사하여 공감을 유도합니다.