로보프렌즈 프로젝트를 완성하며 배운 것들: React, Redux, 그리고 디버깅에 대한 경험

안녕하세요, 개발자 여러분! 👋

DEV에 올리는 첫 게시물이며, 최근 제가 작업했던 내용을 공유하며 시작하고 싶었습니다.

저는 웹 개발을 배우기 위해 프로젝트를 만들고, 실수를 하고, 디버깅하며, 내부 작동 원리를 이해하려고 노력하는 컴퓨터 과학(Computer Science) 학생입니다.

최근 React와 Redux를 사용하여 RoboFriends 프로젝트를 완료했는데, 기대했던 것보다 더 많은 것을 배웠습니다.

🚀 라이브 데모 확인: https://horlah-dev.github.io/robofriends/

RoboFriends란 무엇인가요?

RoboFriends는 로봇 카드를 표시하고 사용자가 이를 검색할 수 있게 하는 React 애플리케이션입니다. 이 프로젝트를 구축하면서 컴포넌트(components) 작업, 상태 관리(state management), 그리고 API로부터 데이터를 가져오는 방법(fetching data from an API)을 연습할 기회를 얻었습니다.

제가 작업한 기술 스택은 다음과 같습니다:

• React
• JavaScript
• Redux Toolkit
• React-Redux
• API 통합 (API integration)
• Redux 미들웨어 (Redux middleware)

제가 배운 것들

가장 큰 학습 경험 중 하나는 Redux를 다루는 것이었습니다.

처음에는 애플리케이션 상태(application state)가 Redux를 통해 어떻게 흐르는지 이해하는 것이 혼란스러웠습니다. 액션(actions), 리듀서(reducers), 스토어(store), 그리고 React 컴포넌트가 어떻게 함께 작동하는지 이해해야 했습니다.

계속해서 구축하면서, useSelector와 useDispatch를 사용하여 최신 Redux 패턴을 탐구했습니다. 이는 React 컴포넌트를 Redux store에 더 명확하게 연결할 수 있도록 도와주었습니다.

또한 API 가져오기(API fetching) 작업을 했고, Redux Logger나 thunk 관련 기능 등 Redux 미들웨어도 살펴보았습니다.

배포 과정의 반전 😂

재미있게도, RoboFriends를 배포하려고 할 때 프로젝트를 디버깅해야 했습니다!

솔직히 배포하는 과정은 평소에 하던 HTML, CSS, JavaScript 프로젝트를 배포하는 것과 같을 거라고 생각했습니다. 더 많은 디버깅이 필요한 배포 문제에 직면할 것이라고는 예상하지 못했어요.

그 경험을 통해 애플리케이션 개발은 로컬 환경에서 작동한다고 해서 끝나는 것이 아니라는 점을 깨달았습니다. 또한, 그것을 올바르게 빌드하고, 구성하며, 배포하는 방법을 이해해야 한다는 것을 알게 되었습니다.

네, 디버깅이 더 필요했어요! 😂

디버깅은 여정의 일부였습니다

모든 것이 첫 시도에 작동하지 않았습니다.

저는 오류를 만났고, 특정 부분이 왜 작동하지 않는지 조사해야 했으며, 예상대로 애플리케이션이 동작하도록 변경을 가했습니다.

이 프로젝트가 저에게 상기시켜준 한 가지는 소프트웨어 개발은 단순히 작동하는 코드를 작성하는 것만이 아니라는 점입니다. 무언가가 왜 망가지는지 이해하고 그것을 고치는 방법을 배우는 것도 중요합니다.

저는 모든 것을 즉시 이해하지 못했지만, 문제들을 해결해 나가는 과정이 제가 사용하던 도구들에 더 익숙해지도록 도와주었습니다.

이 과정을 즐기고 있습니다 ❤️

어려움에도 불구하고, 저는 React를 사용하여 작업하는 것에 진심으로 만족하고 있습니다.

저는 무언가를 만들고, 문제에 직면하며, 그것들을 해결하는 방법을 알아내는 것을 즐깁니다. 아직 배워야 할 것이 많다는 것을 알지만, 이 여정에 준비되어 있습니다.

저의 목표는 Full-Stack | AI & LLM Engineer가 되는 것이므로, 프론트엔드 기술을 계속 강화하는 동시에 Node.js, Express, 그리고 PostgreSQL을 배우고 있습니다.

사용자 인터페이스를 구축하는 것부터 API 생성, 데이터베이스 작업, 완전한 애플리케이션 배포에 이르기까지 모든 것이 어떻게 연결되는지 이해하고 싶습니다.

다음은 무엇일까요? 🚀

RoboFriends는 끝났지만, 여정은 계속됩니다!

저의 다음 프로젝트가 곧 공개될 예정이며, 제가 배운 것을 적용하는 동시에 새로운 것에 도전할 수 있기를 기대합니다.

제가 진행 상황, 마주치는 문제들, 그리고 그 과정에서 배우는 교훈들을 계속 공유하겠습니다.

만약 여러분도 코딩을 배우고 있다면, 여러분의 여정에 대해 듣고 싶습니다.

가장 진지한 첫 프로젝트를 만들면서 직면했던 어려움은 무엇이었으며, 그것을 어떻게 해결했나요?

제 첫 번째 DEV 포스팅을 읽어주셔서 감사합니다!

계속해서 구축하고(building), 디버깅하며(debugging), 배우겠습니다. 💻🔥

— Horlah