choijming21 님의 블로그

1.  문제 발생❓React 폼 컴포넌트를 여러 곳에서 재사용하면서 발생한 문제입니다:같은 입력 폼을 여러 페이지에서 재사용해야 함각 페이지별로 자료 유형(materialType)만 다름자료 유형은 4가지로 고정: case-studies, company-intro, 2025-dxreport, digital-skill-standard 폼 컴포넌트에 material prop을 전달해 구분폼 제출 시 스프레드 연산자를 사용해 formData에 materialType 추가:body: JSON.stringify({ ...formData, materialType: material })문제점: 폼 데이터를 서버에 전송할 때 materialType 필드가 페이로드에는 있지만, 검증 후의 데이터에서는 사라지는 문제가 발..

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

오늘은 제가 최근에 완성한 리그 오브 레전드 정보 앱 프로젝트에 대해 소개해드리려고 합니다. Riot 개발자 사이트에서 제공하는 API를 활용하여 만든 이 앱은 Next.js와 TypeScript를 기반으로 하고 있습니다. 프로젝트를 진행하면서 겪은 경험과 구현 과정을 공유하고자 합니다.     # 시연 영상 📹︎리그 오브 레전드 정보 앱         1.  프로젝트 셋업 및 기본 구조 🌿프로젝트를 시작하기 위해 Next.js와 TypeScript를 사용하여 기본 구조를 잡았습니다. 여기에 Tailwind CSS를 추가하여 스타일링을 손쉽게 할 수 있도록 설정했습니다.       2.  데이터 Fetching 💿먼저 types/ 폴더를 만들어 그안에 디렉토리에 필요한 타입들을 정의했습니다. // ..