안녕하세요. 저는 코드잇 스프린트 프론트엔드 과정 19기에 참여하여 약 6개월간 프론트엔드 개발을 집중적으로 학습한 정우연입니다. 프론트엔드 분야에 관심을 가지게 된 계기는, 단순히 기능을 구현하는 것을 넘어 사용자가 실제로 마주하는 화면과 흐름을 설계하는 역할에 매력을 느꼈기 때문입니다. UI의 작은 변화 하나가 사용자 경험 전체를 바꿀 수 있다는 점이 흥미로웠고, 결과가 즉각적으로 화면에 드러나는 프론트엔드 개발 방식이 저의 진로와 잘 맞는다고 느꼈습니다. 전공자이기 떄문에 기초적인 지식은 있었지만, 혼자 공부하면서 “이게 실무에서도 통할까?”라는 의문이 계속 들었고, 보다 체계적인 커리큘럼과 프로젝트 중심의 학습 환경에서 성장하고자 코드잇 스프린트 프론트엔드 과정에 참여하게 되었습니다.
이 과정에서 저는 다음 기술들을 중심으로 학습했습니다.
단순히 언어를 익히는 데서 끝나지 않고, “여기서는 왜 이런 기술이 필요한지”, “사용자 경험에 어떤 영향을 주는지”를 고민하며 학습했습니다.
가장 인상 깊었던 개념은 React에서의 컴포넌트 설계와 상태 관리, 특히 UI와 상태의 관계를 이해하는 과정이었습니다. 처음 React를 접했을 때는 useState와 useEffect의 역할이 명확하지 않았고, props와 state의 차이도 이론적으로만 이해하고 있는 수준이었습니다. 당시에는 컴포넌트를 나누는 것이 단순히 코드를 정리하기 위한 작업이라고 생각했습니다. 하지만 학습이 진행되고 미션과 프로젝트를 반복하면서 “UI는 상태의 결과물이다”라는 개념이 점점 체감되기 시작했습니다. 상태가 어떻게 설계되느냐에 따라 컴포넌트의 책임이 달라지고, 그 구조가 유지보수성과 협업 효율에 직접적인 영향을 준다는 것을 경험으로 알게 되었습니다. props 흐름을 어떻게 단순하고 명확하게 유지할 수 있는지, 공통 컴포넌트와 페이지 컴포넌트의 역할을 어떻게 분리할 것인지에 대한 고민들이 자연스럽게 개발 과정의 일부가 되었습니다. 이 과정을 통해 React 개발은 단순한 기능 구현이 아니라, 구조와 흐름을 설계하는 작업이라는 인식을 갖게 되었고, 이전보다 훨씬 의도적인 방식으로 코드를 작성하게 되었습니다.
실무와 유사한 기획·디자인(Figma 시안)을 기반으로 한 팀 프로젝트를 통해 컴포넌트 설계와 상태 관리 개념을 실제 기능 구현에 적용해 볼 수 있었습니다. 프로젝트를 진행하며 서버에서 받아오는 데이터와 클라이언트 UI 상태를 분리하는 구조를 설계해보았습니다. 서버 상태는 React Query를 활용해 관리하며, 데이터 캐싱과 재요청 제어를 통해 불필요한 네트워크 요청과 재렌더링을 최소화했습니다. 특히 무한 스크롤 기능 구현 시 페이지 단위 데이터 패칭과 상태 관리를 효율적으로 처리할 수 있었습니다. 또한 useSearchParams를 활용해 필터, 탭, 페이지 정보와 같은 UI 상태를 URL과 동기화했습니다. 이를 통해 페이지 새로고침이나 뒤로 가기, URL 공유 시에도 사용자가 보고 있던 상태가 유지되도록 구현하여 사용자 경험을 개선했습니다. 이 과정에서 단순히 기능을 구현하는 것에 그치지 않고, 실제 API를 연동하여 데이터를 받아오고 사용자 인터랙션에 따라 상태 변화를 설계하며, 협업을 고려한 컴포넌트 구조와 코드 컨벤션을 유지하는 것을 고려해야 했습니다. 그 결과, 상태 설계와 구조가 곧 서비스 품질로 이어진다는 점을 명확히 체감하게 되었습니다.