[Week2 - Day6] 상품 목록 페이지 구현, TDD 개발

1. 오늘의 과업 리스트 📋

+TDD 퀴즈가 마지막 과업이다.

2. 주간 미팅

• 프론트엔드에 새로운 기술 도입 제안
  • IT 특성상 빠른 업데이트가 중요하지만, 동시에 기술 안정성도 중요하니 균형이 필요
  • 새 프레임워크 도입 후보군 조사 (기한: 다음주 수,목까지)
• 슈킹 앱 개발 관련 (지난 주 미팅 토대로 진행중)
  
  • 2주차 일정표

이번주 일정표를 보고 주간 계획을 세워보았다.

[주간 계획 2주차]

1. 요일 별 출근시간: 월 오후9시, 화~금 오후1시
2. 잘 배우고 싶은 주제: jest를 이용한 단위테스트
3. 잘 배우기 위해 어떻게 할 것인지: 배운 내용 기록하기, 관련 주제 추가 공부하기

 

3. 상품 목록 페이지 구현

본격적인 React 사용 시작!

수님께서 개발 환경을 설정할 때 블로그를 참고하기도 하지만 개발자라면 공식 문서와 친해지는 것을 추천한다고 말씀하셨다. 😊 나는 이미 저번 리액트 기본 강의를 들으며 CRA를 해두었기 때문에 수님께서 주신 공식 링크를 여기에 달고 넘어가도록 하겠다.

https://create-react-app.dev/

Create React App is deprecated.

 

1) 상품 카드 제작

디자인 시안을 참고하여 만든 상품 카드

작업하면서 작은 단위로 commit하기 :)

지난 시간에 리액트 앱 만들고 커밋 안한 나... 이번에 같이 했다^_^

2) 전체 레이아웃 구상

피그마로 받은 디자인 시안을 참고했다.

나는 리액트 부트스트랩5를 사용해 전체 레이아웃을 구상해 볼 것이다.

 

3) 트러블 슈팅💥

상품 카드를 만들기 위해 부트스트랩 컴포넌트를 테스트 해보는 과정에서 다운받은 사진이 보이지 않는 오류가 발생했다.

 

문제는 사진의 경로였다.

src="../../public/images/..." ❌ public은 src 바깥이라 import 불가!

React 앱에서 public 폴더의 이미지를 참조할 때는 상대 경로가 아니라 절대 경로를 사용해야한다.

 

✅해결 방법

React에서 public 폴더 이미지 사용하는 법!

밑줄 친 부분처럼 경로를 수정하면 이미지가 제대로 나온다.

슬래시(/)로 시작하면 public 폴더를 기준으로 경로가 잡힌다. React는 public을 root처럼 인식한다.

만약 이미지를 src 폴더 내부에 넣었다면 처음 했던대로 import 해서 사용하는 것이 맞다. 

 

 

4. TDD 개념

1) TDD란?

TDD(Test Driven Development)는 소프트웨어 개발 방법론 중 하나로 테스트가 전체 개발을 주도해 가는 것을 말한
다. 반복 테스트를 이용한 소프트웨어 방법론으로 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다.

 

- TDD 장점

인턴IN메타_응용SW 6일차 과업 중 일부 캡처

▶ 소프트웨어의 안정성을 높이고 코드의 유지보수성을 높일 수 있음

인턴IN메타_응용SW 6일차 과업 중 일부 캡처

 

2) 단위 테스트

테스트 가능한 가장 작은 소프트웨어를 실행하여 예상대로 동작하는지 확인 (하나의 기능이 올바르게 동작하는지 독립적으로 테스트)

인턴IN메타_응용SW 6일차 과업 중 일부 캡처

 

3) 통합 테스트

모듈간의 상호작용이 정상적으로 수행되는지 확인 (모듈 사이의 인터페이스 오류는 없는지 테스트)

인턴IN메타_응용SW 6일차 과업 중 일부 캡처

4) 단위 테스트의 필요성

- 통합 테스트를 위해서는 캐시나 데이터베이스 등 다른 컴포넌트들과 실제 연결을 해야하고, 시스템을 구성하는 컴포넌트들이 많아질수록 테스트를 위한 비용(시간)이 상당히 커짐
- 반면에 단위 테스트는 해당 부분만 독립적으로 테스트하기 때문에 어떤 코드를 리팩토링해도 빠르게 문제 여부를 확인할 수 있음

➡️테스팅에 대한 시간과 비용 절감, 리팩토링 시 안정성 확보
➡️단위테스트 수행 결과를 코드에 대한 문서로 사용 가능

 

5) 단위 테스트의 FIRST 5가지 규칙

인턴IN메타_응용SW 6일차 과업 중 일부 캡처

 

5. TDD 퀴즈

이런식으로 lms에서 퀴즈를 진행!

처음으로 받은 만점😊

풀면서 헷갈렸던 부분) 구조에 얽매일수 있다는 것이 tdd 단점이다!

 

6. 퇴근 체크

잊지말고 확인하기!!

 

 

✒️컨텐츠 피드백 및 진행 소감

페이지를 직접 구현하는 과업은 이번이 처음으로 진행하는 것 같다! 전에 리액트를 다뤄봐서 어렵지 않을 것이라 생각했는데 생각보다 더 기억이 안나서 당황했다. 역시 복습의 중요성...🥲 Bootstrap 설치 및 적용부터, 소스 경로 설정, html&css 까지 제대로 척척 진행된 것이 없었던 것 같다... 그래도 전에 공부했던 자료도 찾아보고, 검색도 해가면서 나름 차근차근 잘 진행한 것 같아서 다행이다. 그런데 역시 "인턴" 경험이다 보니 아예 베이스가 없는 사람들은 이런 과업의 진행이 정말 어려울 것 같다. 배운 강의만으로는 따라오기 힘들 수도 있겠다는 생각이 들었다. 다양한 실무 지식들도 배우고 잊어버린 코드 작성도 감을 다시 찾을 수 있는 좋은 경험인 것 같다. 비록 프론트엔드 분야에 좀 더 치우친 과업이지만 그래도 인턴IN메타를 알게 되어서 정말 다행이다.

 

https://www.interninmeta.or.kr/

인턴IN메타