어떤 기술스택을 쌓으면 더 성장할 수 있을까를 고민하다가 이전 프로젝트 코치님께서 "프론트엔드 개발자라면 테스트 코드를 잘 짜는 것이 중요하다"는 조언을 해주신 것이 떠올랐습니다. 그래서 곧 다가오는 3차 프로젝트 개발에서 TDD 방법론을 적용해보기 위해 Jest 프레임워크와 react-testing library를 공부하면서 정리해보았습니다. 🔸 들어가기에 앞서... ❓ 테스트 코드를 짜는 이유는 무엇일까? 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높입니다. 테스팅 코드를 작성함으로써, 미리 에러를 방지 할 수 있습니다. 버그가 있다면, 어떤 상황에서 발생하는지 알 수 있습니다. 리팩토링 시에 안정성을 확보할 수 있습니다. 장기적인 측면에서 개발 및 테스팅에 대한 시간과 비용을 절감할 수 있습니다. 🔹 TDD 방법론 : Test-Driven Development. 즉, 테스트 주도 개발이라는

→ map 메서드를 사용하여 리스트 반복 시, 위와 같은 key prop 에러를 여러 번 마주한 적이 있습니다. 이를 해결할 수 있는 방법 2가지를 정리해보았습니다. 1. map의 index 속성 이용 : map은 배열의 원소 값 외에도 현재 요소의 인덱스 값을 인자로 가지고 있습니다. 따라서 아래 예시 코드처럼 key 값을 부여할 수 있습니다. 2. Children.toArray() 이용 : 아래 예시 코드처럼 Children.toArray()으로 감싸주면 자동으로 고유한 key 값이 지정됩니다. 즉, 고유한 key 값을 리액트에게 맡기는 함수라고 생각하면 됩니다. {Children.toArray( users.map((value) => (

우연히 SPA와 라우팅을 공부하던 중 분명히 강의 내용대로 따라했는데 위와 같이 Switch와 Redirect를 react-router-dom 에서 불러올 수 없다는 오류를 발견했습니다. 관련 내용을 찾아보니 react-router-dom이 업데이트 되면서 네이밍이 변경되는 등의 달라진 점들이 있었고 이를 인지하지 못해 오류가 생겼음을 알게 되었습니다. → 따라서 위의 오류를 해결하면서 새로 알게 된 내용들을 정리해보았습니다. 🔹 Switch → Routes Switch → Routes로 네이밍 변경 : 기존의 route들을 구성하는 부모 요소를 switch 라는 네이밍을 사용하였는데 routes 라는 좀 더 직관적인 이름으로 변경되었습니다. **ex

2차 프로젝트 코드 리뷰 중 Loading... 과 관련하여 담당 코치님께서 서스펜스 에 대해서 알아보면 좋을 것 같다고 조언을 해주셔서 이 내용을 공부하면서 정리해보았습니다. image 🔹 React Suspense 란? : 비동기 작업을 진행하는 컴포넌트를 자식 컴포넌트로 가지며, 그 자식 컴포넌트가 비동기 작업을 진행하는 동안 fallback 에 할당받은 특정 컴포넌트를 렌더링 하는 역할을 합니다. 🔹 Suspense 사용 전의 문제점 waterfall 현상 : 상위 컴포넌트의 데이터 로딩이 끝나야지만 하위 컴포넌트의 데이터 로딩이 시작될 수 있기 때문에 사용자 경험 측면에서 UI를 불러오는 시간이 더 오래 걸리게 됩니다

CSS-in-js 스타일 방법인 styled-components 라이브러리를 사용하여 math-app(수학 문제 앱)을 구현하면서 얻은 지식을 정리한 내용입니다. 🔹 styled-components 특징 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일 관리 아래 코드와 같이 자바스크립트 파일 안에 스타일을 정의하여 React 컴포넌트처럼 사용할 수 있고, 하나의 컴포넌트 안에 특정 자식 태그들의 스타일도 각각 정의할 수 있습니다. 아래 코드처럼 해당 컴포넌트에서 상태 값, 함수 등을 props 로 전달받아 조건에 따라 스타일을 다양하게 적용할 수 있습니다. 용어 & : 해당 컴포넌트의 태그(즉, 자기 자신)를 의미 nth-of-type : 여러 형제