[코딩 자율학습단 17기] ‘코딩자율학습 리액트 프런트엔드 개발 입문’ 4주 완주 최종 후기!
드디어 길고도 짧았던 ‘코딩자율학습 리액트 프런트엔드 개발 입문’책과 함께한 코딩 자율학습단 17기 활동을 성공적으로 마무리했습니다. 4주간의 여정은 리액트 초심자였던 제가 나만의 웹 애플리케이션을 만들고 배포까지 할 수 있게 된, 정말 값진 시간이였습니다. 그간의 학습 내용과 느낀 점들을 솔직하게 공유해 보려합니다.
리액트, 4주간의 학습 여정
4주 동안 리액트의 기본 개념부터 심화, 그리고 실전 프로젝트까지 정말 꽉 찬 커리큘럼을 경험했습니다.
먼저, 리액트의 첫걸음인 JSX 문법과 컴포넌트 개념부터 차근차근 익혔습니다. useState, useEffect 훅을 활용해 컴포넌트의 상태를 관리하고 생명주기를 제어하는 법을 배웠고, Props를 이용해 컴포넌트 간 데이터를 효율적으로 주고 받는 방법을 이해했죠. 리스트 렌더링과 조건부 렌더링 으로 동적인 UI를 구현하며, useRef, useMemo, useCallback 같은 고급 훅들을 통해 리액트 앱의 성닝을 최적화하는 기법까지 맛볼 수 있었습니다. 덕분에 리액트 앱이 어떤 원리로 동작하고 어떻게 구성되는지 기본적인 흐름을 확실히 잡을 수 있었습니다.
앱의 규모가 커질수록 중요해지는 전역 상태 관리 또한 핵심적으로 다루었습니다. 리액트 내장 Context API로 전역 상태를 공유하는 방법부터, 더 강력한 상태 관리 라이브러리인 Redux (Redux Toolkit 포함)와 Zustand를 학습하며 각 도구의 장단점과 적용 시점을 고민해 보았습니다. 복잡한 데이터를 체계적으로 관리하는 노하우를 얻는 시간이었죠.
그리고 드디어, 리액트 앱의 필수 요소인 라이팅과 비동기 데이터 통신으로 넘어갔습니다. 리액트 라우터(React Router)를 이용해 SPA(Single Page Application)에서 매끄러운 페이지 이동을 구현하는 방법을 익혔고, BrowserRouter, Routes, Route, Link, useNavigate등 핵심 요소들을 활용해 복잡한 URL 패턴가지 다룰 수 있게 되었습니다. 데이터 통신은 Fetch API와 Axios를 비교하며 배웠고, 백엔드와 안전한 데이터를 주고받는 방법을 습득했습니다. 특히 useTransition, useActionState, useOptimistic, use 훅과 같은 리액트 19 이후의 최신 비동기 처리 패턴들을 통해 사용자 경험과 UI 응답성을 극대화하는 고급 기술까지 경험하며, 리액트 개발자로서 한 단계 성장 할 수 있었습니다.
파이널 프로젝트: 나만의 블로그 웹 개발 & 배포
4주간 배운 모든 지식은 나만의 블로그 애플리케이션 프로젝트를 만드는 과정으로 집약되었습니다. 프로젝트의 UI 구성부터 스캐폴딩, 라우팅 설정을 직접 해나가며 실제 서비스 개발 과정을 간접 경험할 수 있었죠. 특히, 교재에서 제공하는 백엔드 API 명세서를 기반으로 인증 기능(로그인, 로그아웃, 세션 유지 등)과 CRUD(생성, 읽기, 수정, 삭제) 기능을 직접 구현하며 백엔드와 프론트엔드의 유기적인 연동을 체감할 수 있었습니다.
모든 기능을 구현한 후에는 Netlify와 Vercel을 활용해 실제 웹에 배포하는 것까지 시도했습니다. 비록 백엔드까지 완벽하게 배포하는 것은 성공하지 못했지만, 프로젝트를 빌드하는 과정을 직접 경험하며 개발의 마지막 단계를 이해할 수 있었습니다.
- GitHub Repository: https://github.com/sampark9/todo-prj1
- Netlify 배포: https://sampark9.netlify.app/
- Vercel 배포: https://todo-prj1.vercel.app/
4주간의 학습을 마치며: 새로운 시작!
이번 ‘코딩 자율학습단 17기’활동을 통해 ‘코딩자율학습 리액트 프런트엔드 개발 입문’ 책과 함께한 4주는 저에게 정말 특별한 경험이였습니다. 책의 분량이 적지 않은 편이지만, HTML, CSS 등 웹에 대한 기본적인 이해가 있는 분들이라면 이 책과 커리큘럼을 따라가면서 리액트에 대한 이해도를 빠르게 높일 수 있다고 확신합니다.
단기간에 리액트로 어떻게 프로그래밍을 하는지 익히고, 나아가 자신만의 웹 애플리케이션을 직접 만들어 볼 수 있었던 것은 큰 성취감으로 다가왔습니다. 프런트엔드 개발자가 되기 위해 준비하는 신입 개발자들에게 이 책과 학습단 경험은 정말 좋은 길잡이가 되어줄 것이라고 생각합니다.
특히, 백엔드 배포를 시도하면서 Node.js 백엔드 개발에도 깊은 흥미를 느끼게 되었고, 이제는 풀스택 개발에 도전하며 웹과 앱 개발 모두 만들어 보는 나만의 프로젝트에 도전해 보고 싶은 목표가 생겼습니다. 4주간의 짧은 여정이였지만, 저만의 개발 공부 목표에 대한 큰 전환점이 되는 시간이였습니다.
마지막으로, 그동안 제가 작성했던 주차별 학습 후기들은 아래에 공유합니다.
코딩자율학습 리액트 프런트엔드 개발 입문 1주차 학습 후기
코딩자율학습 리액트 프런트엔드 개발 입문 2주차 학습 후기
코딩자율학습 리액트 프런트엔드 개발 입문 3주차 학습 후기
코딩자율학습 리액트 프런트엔드 개발 입문 4주차 학습 후기
