그릿지 테스트 회고: 2주간의 여정

그릿지 테스트란?

 

그릿지에서 주최한 시뮬레이션 챌린지이다.

개발 가이드라인, 화면 설계서, 피그마 에셋, API 등이 제공되었고, 주어진 기간 내에 핵심 기능을 구현하는 것이 목표였다. 인스타그램과 유사한 여행 기록 SNS로, 로그인, 소셜 로그인(카카오), 회원가입, 게시글 작성/조회, 결제 시스템 등의 기능을 2주 동안 구현하는 챌린지이다.

 

챌린지에서 구현하게 되는 기능은 크게 3가지였다.

• 유저 관련 기능: 로그인, 소셜 로그인, 회원가입
• 게시물 관련 기능: 게시물 CRUD, 댓글 CRUD
• 결제 기능: 아임포트를 이용한 결제 구현

umc동아리 디스코드 공지방에서 이 챌린지 모집글을 보게되었는데, 친구가 먼저 같이 하자고했다.

실제 실무와 비슷한 환경에서 내 실력을 테스트해 보고 싶었고, 이 경험이 취업 준비에 도움이 될 것 같아 참여하게 되었다.

 

개발 과정

 

• 사용한 기술 스택: React, TypeScript, Recoil

이런식으로 노션으로 과제가 전달되었다.

각 트랙마다 노션으로 가이드라인 화면설계서 에셋링크(피그마) 가 제공되었고 그거에 맞게 프론트엔드 개발을 했다.

2주간의 시간동안 주어진 과제를 해결해야했는데 기간이 빠듯하고 생각보다 코딩량이 많아서 거의 하루에 5~6시간씩 코딩한 것 같다.

 

챌린지 도중 겪은 트러블

• 게시글 조회 순서 이슈
  • 문제: 게시글 조회 API가 페이지네이션된 결과만 반환해 최신 순으로 조회하는 데 어려움이 있었습니다.
  • 해결: useEffect를 활용해 첫 접속 시 첫 페이지를 조회하고 전체 페이지 수를 파악한 후 최신 페이지를 불러오는 방식으로 구현했습니다. 무한 스크롤 시에는 페이지를 1씩 줄여가며 이전 페이지를 불러오도록 했습니다.
• 결제 모듈 연결 어려움
  • 문제: 처음 결제 모듈을 사용하면서, PC 결제는 콜백 함수로 처리하고, 모바일 결제는 리다이렉트 방식으로 처리해야 하는 복잡한 구조 때문에 어려움을 겪었습니다.
  • 해결: 공식 문서를 꼼꼼히 읽고, 구글링을 통해 다른 사람들의 사례를 참고하며 문제를 해결했습니다.

 

제출 및 평과

• 코드 제출 과정

체크리스트

코드설명

 

깃허브를 통해서 코드를 제출하였고 그외에도 체크리스트, 코드 설명을 작성하였다.

하나하나 기능마다 코드설명과 스크린샷을 찍어야해서 꽤나 번거로운 과정이었다.

아래는 제출한 코드 깃허브 링크이다.

https://github.com/sjpark1120/Gridge-Test-WEB

GitHub - sjpark1120/Gridge-Test-WEB: 2024 그릿지 테스트 웹

 

결과

• 최종 결과 (상위 10% 달성)

상위 10퍼센트 안에 들어서 합격

상위 10퍼센트안에 들어서 참가비를 환급받았다. 그리고 코드리뷰를 받는 기회를 얻게되었다.

참여자 수가 50명 정도에다가 코드량이 많아서 그런지 채점이 완료되기까지 꽤 긴시간이 걸렸다. 2달 정도..

운 좋게 1대1로 실무자에게 코드 리뷰를 받을 수 있었다. 많은 질문을 하지는 못했지만, 몇 가지 중요한 피드백을 얻었다:

• 불필요한 변수를 줄이고, 가능한 간결한 방법을 사용하라.
• 스타일 임포트 방식 개선.
• 배포 전에 로그를 반드시 삭제하라.
• 무한 스크롤 구현 시 IntersectionObserver 참고.

회고와 느낀 점

2주 동안의 챌린지는 상당히 힘들었지만, 요구사항을 맞춰 개발하는 것이 얼마나 어려운지 실감할 수 있었다. 시간이 제한된 상황에서 효율적으로 트랙별 작업을 완료하는 계획이 중요하다는 걸 배웠다. 완성된 결과물을 보고 뿌듯했고, 상위 10%에 들어 기분도 좋았다. 무엇보다 처음으로 다른 사람에게 코드 리뷰를 받는 경험이었고, 많이 배울 수 있었다. 다만, 체력적으로나 정신적으로 힘들었던 만큼 다시 도전하고 싶지는않다....

 

완성된 프로젝트의 스크린샷