개발자가 ChatGPT 사용하는 법(ChatGPT와 함께 프론트엔드 TDD 학습 로드맵 만들어보기)

안녕하세요. 저는 개발자로 일한 지 1년이 조금 넘은 풀스택 개발자입니다. 저희 회사에서는 주제 중심 스터디라는 스터디 방식을 운영하고 있는데요. 한 사람이 약 4~6주 정도 진행할 스터디 주제를 가져오고, 스터디를 같이 진행할 사람들을 모아 학습을 진행하는 방식입니다.

어느 날 저는 팀원들과 함께 프론트엔드 TDD를 공부해보면 좋겠다는 생각이 들었고, 구글에 TDD를 검색을 해보았습니다. 그러나 TDD를 왜 해야 하는지나 간단한 예시만을 다룬 글 혹은 유료 강의들이 대부분이었습니다. 그래서 프론트엔드 TDD 학습을 어떻게 진행해야 할지 막막했습니다. 물론 강의를 듣고 학습 커리큘럼을 작성하여 팀원들과 함께 진행할 수도 있었겠지만, 저는 제 생각을 글로 표현하는 것을 잘 못 하기에 좋은 강의를 들어도 좋은 스터디를 준비하기 어렵다는 것을 인지하고 있었습니다. 그런 고민을 하던 와중에 갑자기 ChatGPT와 함께 프론트엔드 TDD에 대한 학습 커리큘럼을 만들어보면 어떨까 하는 아이디어가 떠올랐습니다.

그래서 바로 물어봤습니다.

Frontend Jest 스터디 4주 학습 로드맵

학습 로드맵 작성 질문

오타가 조금(?) 났지만 똑똑한 우리 GPT 친구는 찰떡같이 알아듣고 다음과 같이 대답해주었습니다.

학습 로드맵 작성 답변

Frontend Jest 스터디 4주 학습 로드맵

1주차: 기본적인 Jest 테스트 작성하기

• Jest의 기본 사용법 학습하기
• Jest를 이용한 간단한 함수 테스트 작성하기
• Jest를 이용한 비동기 코드 테스트 작성하기
• Jest를 이용한 React 컴포넌트 테스트 작성하기

2주차: Jest를 이용한 테스트 코드 작성법과 코드 커버리지

• Jest에서 제공하는 테스트 코드 작성법 학습하기
• 테스트 코드 작성시 좋은 습관과 규칙 학습하기
• 코드 커버리지란 무엇인지 이해하기
• Jest에서 코드 커버리지 측정하기

3주차: Mocking과 Snapshot 테스트

• Mocking의 개념과 Mocking을 사용하는 이유 학습하기
• Jest에서 Mocking을 사용하는 방법 학습하기
• Snapshot 테스트의 개념과 사용법 학습하기
• Snapshot 테스트의 장단점 이해하기

4주차: Continuous Integration과 Jest 확장 기능

• CI/CD의 개념과 사용법 학습하기
• Jest에서 Continuous Integration 환경 구축하기
• Jest에서 확장 기능 사용하기 (ex: jest-dom, jest-enzyme, jest-fetch-mock 등)
• 테스트 코드 작성시 자주 발생하는 실수와 그 해결 방법 학습하기

위의 학습 로드맵을 따라가면 Jest를 이용한 Frontend 테스트 작성에 대한 기초부터
확장 기능까지 학습할 수 있습니다. 좋은 학습이 되길 바랍니다!

한 번에 만족스러운 학습 로드맵을 완성해주었습니다.
처음부터 좋은 결과물이 나와서 왠지 모를 자신감이 생기네요.
다만 이것만으로는 각 주차를 어떻게 진행하면 좋을지 감이 잡히지 않습니다.
그래서 각 주차를 어떻게 진행하면 좋을지 상세하게 대답해 달라고 했습니다.

Jest 스터디 1주차 학습 과제

1주차 학습 과제 질문

1주차 학습 과제 답변

1주차 과제

과제 1: Jest 설치 및 기본 사용법 익히기

Jest를 설치하고 기본적인 사용법을 학습합니다. Jest 공식 문서를 참고하여 간단한 예제 함수를 작성하고 Jest를 이용해 테스트 코드를 작성합니다. 함수의 입력값과 예상되는 출력값에 대한 테스트를 작성합니다.

과제 2: 비동기 코드 테스트 작성하기

비동기로 작동하는 간단한 함수를 작성합니다. 함수 내부에서는 setTimeout 등의 함수를 이용하여 비동기 처리를 하도록 합니다. Jest를 이용해 함수가 제대로 작동하는지 테스트 코드를 작성합니다. 비동기 처리를 고려하여 테스트 코드를 작성합니다.

과제 3: React 컴포넌트 테스트 작성하기

간단한 React 컴포넌트를 작성합니다. 예를 들어 "Hello, World!"를 출력하는 컴포넌트를 작성합니다. Jest와 React Testing Library를 이용해 컴포넌트가 제대로 작동하는지 테스트 코드를 작성합니다. 컴포넌트가 정상적으로 렌더링되는지, props가 제대로 전달되는지 등을 테스트합니다.

위의 과제를 수행하며 발생한 문제나 궁금한 점은 Jest 공식 문서나 다른 자료들을 참고하여 해결해보세요. 좋은 학습이 되길 바랍니다!

좀 더 상세한 과제를 작성해주었지만 제가 원하는 결과물은 아니었습니다.
저는 과제가 체크리스트처럼 주어져서 하나씩 해결하며 공부를 하면 좋겠다 생각했습니다.
그래서 조금 더 구체적인 상황을 주고, 이를 바탕으로 대답하게 해야겠다 생각했습니다.
처음 코딩을 공부할 때 "hello world!"를 출력하는 것과 계산기 함수를 만들었다는 기억을 떠올려서 다음과 같은 질문을 했습니다.

상세한 학습 과제를 위한 질문

체크 리스트와 함께 질문

답변

다시 보니 굉장히 개성 있는 구조로 질문을 했었군요.
아마 진행이 너무 잘돼서 신이 났던 것 같습니다.
그래도 GPT 친구는 저의 개성을 이해하고 성실하게 답변을 해주었습니다.

좋습니다! 제가 추천한 1주차 과제와 너의 과제를 종합하여 하나의 과제로 만들어보겠습니다.

과제: 간단한 React 애플리케이션 테스트

다음과 같은 요구사항을 가진 간단한 React 애플리케이션을 만들고, Jest와 React Testing Library를 이용해 테스트 코드를 작성해보세요.

요구사항

1. App 컴포넌트는 number라는 상태값을 가지고 있습니다. 이 값은 0으로 초기화되어야 합니다.
2. App 컴포넌트는 increment와 decrement 두 개의 버튼을 가지고 있습니다. increment 버튼을 누르면 number 값이 1 증가하고, decrement 버튼을 누르면 number 값이 1 감소합니다.
3. number 값은 음수가 되지 않도록 제한되어야 합니다.
4. App 컴포넌트는 num1, num2, add, subtract, multiply, divide 6개의 인풋 필드와 버튼을 가지고 있습니다.
5. num1과 num2 인풋 필드에는 숫자를 입력할 수 있습니다.
6. add, subtract, multiply, divide 버튼을 누르면 num1과 num2 값을 이용해 더하기, 빼기, 곱하기, 나누기 연산이 수행되어야 합니다. 연산 결과는 result라는 상태값에 저장되어야 합니다.
7. divide 연산은 소수점 2번째 자리까지만 표시되어야 합니다.

테스트 코드 작성

위의 요구사항을 충족하는 React 애플리케이션과 Jest 테스트 코드를 작성해보세요. 다음과 같은 테스트를 작성할 수 있습니다.
1. App 컴포넌트가 정상적으로 렌더링되는지 확인하는 테스트
2. number 상태값이 0으로 초기화되는지 확인하는 테스트
3. increment 버튼 클릭시 number 값이 1 증가하는지 확인하는 테스트
4. decrement 버튼 클릭시 number 값이 1 감소하는지 확인하는 테스트
5. number 값이 음수가 되지 않도록 제한되는지 확인하는 테스트
6. num1과 num2 인풋 필드에 숫자를 입력했을 때, 상태값이 제대로 업데이트되는지 확인하는 테스트
7. add, subtract, multiply, divide 버튼 클릭시 result 상태

처음에 잠깐 저에게 반말한 것 같지만, 그래도 마음에 드는 결과물이 나왔습니다. 해당 과제를 수행하면 jest를 이용한 테스트 코드에 대한 감을 잡을 수 있을 것 같습니다. 하지만 1주차 학습 과제 중 비동기 코드 테스트 항목이 빠져있네요. 다시 물어보도록 하겠습니다.

비동기 코드 학습 과제

비동기 코드 과제 질문

비동기 코드 과제 답변

좋습니다! 비동기 코드 테스트도 함께 작성해보겠습니다. 다음과 같은 요구사항을 가진 비동기 코드를 만들고 Jest를 이용해 테스트 코드를 작성해보세요.

요구사항

1. getUser 함수는 fetch API를 이용해 사용자 정보를 가져오는 비동기 함수입니다.
2. getUser 함수는 사용자 이름을 입력값으로 받아와 해당 사용자의 정보를 객체로 반환합니다.
3. getUser 함수는 사용자 정보를 반환하기 전에 1초의 딜레이를 가지도록 구현되어 있습니다.

테스트 코드 작성

위의 요구사항을 충족하는 비동기 코드와 Jest 테스트 코드를 작성해보세요. 다음과 같은 테스트를 작성할 수 있습니다.
1. getUser 함수가 Promise를 반환하는지 확인하는 테스트
2. getUser 함수가 제대로 작동하는지 확인하는 테스트
3. getUser 함수가 1초의 딜레이를 가지도록 구현되어 있는지 확인하는 테스트
4. getUser 함수에서 발생하는 에러를 잘 처리하는지 확인하는 테스트

위의 요구사항과 테스트 코드를 작성하면 비동기 코드 테스트 작성에 대한 기초를 학습할 수 있습니다. 좋은 학습이 되길 바랍니다!

이번에는 바로 원하는 결과물을 만들어줘서 기분이 좋네요.
이쯤에서 다시 한 번 1주차 학습 로드맵을 봐볼까요?

1주차: 기본적인 Jest 테스트 작성하기

Jest의 기본 사용법 학습하기
Jest를 이용한 간단한 함수 테스트 작성하기
Jest를 이용한 비동기 코드 테스트 작성하기
Jest를 이용한 React 컴포넌트 테스트 작성하기

기본 사용법이나, 컴포넌트 테스트는 위의 과제들을 수행하면 학습할 수 있을 것으로 생각합니다. 그래서 탄탄한 1주차 커리큘럼이 제작되었다 생각합니다.
참고로 실제 과제에서 getUser 함수의 fetch API로는 github API https://api.github.com/users/${username} 를 사용했습니다.

마무리

다들 개발자로서 다양한 스터디를 진행하고 참여하실 텐데요. 가끔씩 자신이 원하는 주제가 있지만 스터디를 찾을 수 없거나 진행할 여력이 없어, 그 시기를 넘어갔다가 열정이 식었던 경험이 있을 겁니다. 그럴 때 이렇게 ChatGPT를 활용하여 커리큘럼을 작성하고 열정 있는 사람들과 함께 진행해보는 것도 재밌는 경험이 되리라 생각합니다.
서론에 잠깐 언급했듯이 저는 생각을 글로 적는 것을 잘 못하는 편인데, 이 글을 끝까지 읽어주셔서 감사하고 다들 즐거운 스터디 하시길 바랍니다!