코딩자율학습 리액트 프런트엔드 개발 입문 4주차 학습 후기

드디어 코딩자율학습 리액트 프런트엔드 개발 입문의 마지막 4주차 학습을 마쳤습니다. 이번 주에는 리액트 라우터로 내비게이션을 구성하고, 비동기 데이터 통신 기법을 익혔습니다. 그리고 배운 내용들을 총동원하여 블로그 웹 프로젝트를 완성하며 길었던 여정을 성공적으로 마무리 했습니다.

16일차: 13장 리액트 라우터로 라우팅 기능 사용하기

리액트 라우터로 앱의 네비게이션을 구상하는 방법을 배웠습니다. SPA(Single Page Application)에서 React Router가 왜 필수인지 깨닫는 시간이였습니다. BrowserRouter로 앱 전체에 라우팅 기능을 입히고, Routes와 Route로 경로마다 보여줄 컴포넌트를 연결하는 기본을 익혔습니다.

특히, 중첩 라우트나 동적 세그먼트처럼 복잡한 URL도 깔금하게 처리하고, Link로 선언적 이동부터 useNavigate로 코드 안에서 원하는 대로 페이지를 움직이는 방법까지 알게 되어 웹 개발에 많은 도움이 될 기능이라고 생각했습니다.

17 ~ 18일차: 14장 비동기 데이터 통신과 처리 기법

백엔드와 프론트엔드를 연결하는 비동기 데이터 통신에 대해 공부했습니다. 자바스크립트 내장 Fetch API와 외부라이브러리인 Axios를 비교하며 배웠으며, 기본 문법부터 HTTP 메서드 사용법, 그리고 리액트 컴포넌트 안에서 안전하게 데이터 통신을 하는 방법까지 공부했습니다.

특히, useTransition, useActionState, useOptimistic, use 훅 같은 리액트 19 이후의 최신 비동기 처리 패턴들을 배우면서 UI 응답성과 사용자 경험을 극대화하는 고급 기술까지 알아보았습니다.

19 ~ 20일차: 15장 프로젝트: 나만의 블로그 만들기

교재의 마지막 장으로, 지금까지 학습한 내용을 바탕으로 블로그 애플리케이션 프로젝트를 실제로 만들어 보는 시간이었습니다. 프로젝트 구동에 필요한 백엔드 부분은 직접 학습하지 않았기 때문에, 교재에서 제공되는 백엔드 파일을 사용했습니다. UI부분도 교재에서 실습용으로 제공된 HTML과 CSS파일을 기반으로 컴포넌트로 분리하고 JSX 코드로 변경하며 프로젝트 실습을 완성했습니다.

CRUD(생성, 읽기, 수정, 삭제) 기능 까지 완성한후, 빌드하고 Netlify(넷틀리파이)를 사용해서 배포까지 해보았습니다. 백엔드 부분은 배포까지 완벽하게 성공하지 못했지만, 배포 방식에 대해서는 고민하며 공부할 수 있었습니다. 추가로 시간을 들여 GitHub에 배포한 후, 백엔드까지 제공되는 Vercel(버셀)을 통해 다시 배포를 시도했지만, 아쉽게도 완전히 성공하지는 못했습니다.

제가 배포한 프론트엔드 결과물들은 아래 링크에서 확인하실 수있습니다.

• GitHub Repository: https://github.com/sampark9/todo-prj1

• Netlify 배포: https://sampark9.netlify.app/

• Vercel 배포: https://todo-prj1.vercel.app/

이번 학습을 통해 Node.js 백엔드 개발에도 흥미가 생겨, 앞으로는 풀스텍 개발에 도전하며 웹과 앱을 개발해 보고 싶은 욕심도 생겼습니다.