지난 프로젝트에선 작성하지 못했지만
이제부터라도 작성하자라는 생각으로 작성한다.
이번 프로젝트는 '2024 파리올림픽'의 참가했던 국가들의 메달을 입력해서 국가들의 정보를 띄어주는 것이 주된 내용이였다.
이 내용을 React를 통해서 구현하는 것이 가장 중요한 목표였다.
일단 예시로 만들어진 내용을 확인하고, 페이지의 구조를 단편적으로 작성해봤다.
title
form
- input * 4
- button * 2(submit)
- table
- table row
- table content사용자에게 입력으로 받는 input과 그걸 button을 통해 제출하는 단순한 구조로 판단했다.
그래서 처음에는 파일을 구분하지 않고 App.jsx 파일 안에 모든 기능과 State를 작성했다. (해당 커밋 내용)
그래도 파일 안에서 기능에 따른 컴포넌트를 분리하고 나름의 구분을 통해 구조를 만들었다.
그 후 기본적인 기능 작동 확인 후, 모듈화를 진행했다. (해당 커밋 내용)
원래는 이렇게 구현 후 마무리짓고 끝내려고 했으나,
코드 리뷰를 진행하고 이를 토대로 코드 정제화 및 리팩토링을 통해
실제로 현업에 나갔을 때 생길 수 있는 문제점이나 개선방향을 찾고자 했다.
그래서 조원분들 + 튜터님에게 내용을 공유하고 피드백을 받은 결과
코드 정제화 관련해서는
- 코드를 볼 때
App.jsx에는 페이지 구성 및 흐름을 확인할 수 있어야 하지만, 현재는 그렇지 않아서 아쉽다.- 값을 리턴하는 함수에 있어서,
if-else로 처리하면 필터링 되지 않는 부분(오류가 생기는 부분)을 그대로 출력할 수 있다.React에서는 이미 존재하는 데이터와 함수를 통한 내용들은useState를 사용하지 않아도 되기에 수정하는 것이 효율적이다.
해당 내용에 대해서 페이지의 구성에 따른 코드 컴포넌트 구성 변경 및 Early Return 패턴을 적용했다. 또한 마지막에 받은 피드백 관련해서는 배열의 값을 리랜더링 때문에 useState를 사용했었지만 변형될 때마다 컴포넌트로 새롭게 배열을 넘겨서 새롭게 랜더링을 할 수 있도록 구현했다. (코드 정제화 관련 커밋 내역)
다음 조원들의 건전한 피드백은
- UX적인 측면에서 불편한 부분이 존재
피드백 대상은 각각 다른 컴포넌트에 대해서 말했지만 공통적으로 가르키는 말은 UX적인 측면에서의 고려가 필요하다고 해주셨다.
실제로 개발 경험이 있으신 분들이 계셔서 업무관련된 내용을 많이 피드백 받을 수 있었다. (건전한 피드백 관련 커밋 내역)
이전까지 프로젝트는 나 딴에는 사용자 관점에서 생각할 수 있는 내용에 대해서 고려했다고 생각했지만, 실제 업무와 협업의 관점에서 보는 프로젝트 구조는 확연히 다른 부분들이 존재했다.
확실한 변수명과 오류가 날 수 있는 하드 코딩 줄이기나 const 객체를 통한 변수 관리가 필수적이라는 것도 깨닫게 됐다.
지금 내 상황이 우매함의 봉우리에서 내려오는 느낌이다.
실제 프로젝트 개발 및 배포 경험이 있어 자신감 충만하게 캠프에 들어왔지만 실제로는 '우물 안의 개구리'로써 내가 알아가야할게 산더미라는 것을 알게됐다.
그래도 긍정적인 부분은 많은 사람들이 도와주고 배워가기 때문에 이 시기를 잘 극복할 수 있을 거라는 믿음이 있다는 것이다!!
덕분에 이번 프로젝트를 잘 마무리 할 수 있었다.
