트러블슈팅 5

React 프로젝트 유닛 테스트: 필요성과 실제 구현 경험

1. 유닛 테스트란 ?유닛 테스트는 소프트웨어의 개별적인 단위(컴포넌트, 함수 등)가 의도한 대로 작동하는지 확인하는 테스트입니다.   2. 유닛테스트가 필요한 이유? 1. 버그 예방코드 변경 시 기존 기능이 망가지지 않았는지 확인에러를 초기에 발견하여 수정 비용 절감 2. 코드 품질 향상테스트를 작성하며 코드의 문제점을 발견더 나은 코드 구조와 설계를 유도 3. 리팩토링 용이성안전한 코드 수정 가능기능이 올바르게 동작하는지 즉시 확인 4. 문서화 효과테스트 코드가 컴포넌트의 사용법을 보여주는 예시 역할새로운 팀원의 코드 이해도 향상   3. 주요 테스트 라이브러리1. Jestfacebook에서 만든 JavaScrip 테스팅 프레임 워크쉬운 설정과 사용법스냅샷 테스팅 지원풍부한 matcher 함수 제공2..

개인과제 2025.01.19

Next.js App Router 빌드 에러 해결하기: page.tsx 구조 최적화🌟

1.  문제 발생❓Next.js 프로젝트 빌드 시 다음과 같은 에러가 발생했습니다.Export encountered errors on following paths:/(pages)/(club)/club/type-selection/create/one-time/page: /club/type-selection/create/one-time/(pages)/(club)/club/type-selection/create/regular-time/page: /club/type-selection/create/regular-timeerror Command failed with exit code 1.   // app/(pages)/(club)/club/type-selection/create/one-time/page.tsx"use..

팀프로젝트 2024.11.13

Git 트러블슈팅: Git 저장소에 실수로 올려버린 키 제거 과정🌟

1. 문제 발생❓Git 저장소에 Supabase key를 올려버렸습니다...나중에 Git 저장소의 여러 브랜치에 걸처 키가 포함된 'supabaseClient.ts' 파일이 커밋되어 있음을 발견했습니다.알아차린 시점이 조금 늦었습니다.  pr도 올리고 머지 성공하고 각자 팀원들 작업하고 ... 하루 뒤에 알아버렸습니다.pr에도 기록이 남아있고, 개개인 브랜치에도 기록이 남아있는 상태입니다.(돌이킬 수 없는 강...을 건너버렸습니다...🥲)supabaseClient.ts에는 키와 같이 중요한 정보가 들어있어 보안 위험이 있어 노출되면 안됩니다.   2. 원인 추론 🔎개발 과정에서 하드 코딩 된 값을 사용했기 때문입니다.코드 리뷰 과정에서 이 문제를 발견하지 못했습니다.    3. 해결 과정 📋1. p..

팀프로젝트 2024.10.15

아웃소싱 팀프로젝트(트러블 슈팅2🌟)

1. 문제 발생❓사용자가 마이페이지에서 프로필 사진과 닉네임을 수정한 수, Comments 컴포넌트에서 새 댓글 작성할 때 수정된 프로필 정보가 반영되지 않고 이전 프로필 정보가 남아있는 문제가 발생함.     2. 원인 추론 🔎원래 코드를 살펴보면 Comments 컴포넌트가 처음 렌더링될 때만 useAuthStore에서 사용자 정보를 가져오고 있다.이로 인해 마이페이지에서 프로필 정보를 수정해도 Comments 컴포넌트에는 반영되지 않는다.원래 코드(주요 부분)const Comments = () => { const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore(); const { token, us..

팀프로젝트 2024.09.19

아웃소싱 팀프로젝(트러블 슈팅1🌟)

1. 문제 발생❓댓글 수정 기능 구현 중 UI 반응성 문제 발생수정 버튼 클릭 후 프로세스(문제 과정 설명)수정 후 완료 버튼 누르기수정 모드 종료기존 값 유지몇초 후 수정된 값으로 변경됨    2. 원인 추론 🔎서버 응답을 기다린 후 UI 업데이트React Query의 기본 동작을 그대로 사용원래 코드(주요 부분)const { mutate: edit } = useMutation({ mutationFn: ({ id, text }) => updateComment({ id, text }), onSuccess: () => { queryClient.invalidateQueries(["comments"]); alert("댓글이 수정되었습니다!"); }});const handleEditSubmit..

팀프로젝트 2024.09.19