안녕하세요.
본격적으로 React 학습 과정을 기록하기에 앞서 왜 React를 공부하기로 마음먹었는지 그리고 어떤 목표를 가지고 있는지 공유하며 첫 글을 시작해 보려 합니다.
저는 그동안 실무에서 Spring Boot를 기반으로 프론트엔드와 백엔드가 분리되지 않은 MVC 패턴을 주로 다뤄왔습니다.
(화면 구성에는 전통적인 방식인 JSP, JavaScript, jQuery를 사용했습니다.)
하지만 여러 개발자와 협업을 진행하다 보니, 프론트엔드 영역에서 JavaScript와 jQuery가 혼재되어 사용되는 경우가 빈번했고
그러다 보니 코드 가독성 떨어지고 로직을 분석하고 수정하는 데 예상보다 많은 시간이 소요되더라구요....
(물론 기존 코드를 하나의 스타일로 리팩토링하는 방법도 있겠지만 수정하기에는 너무 범위가 커요!)
그래서 향후 진행할 새로운 프로젝트에서는 프론트엔드와 백엔드를 분리해서 개발 효율성을 높이고자 합니다!
• Front-end: React 기반의 Next.js
• Back-end: Spring Boot (API Server)
이 아키텍처를 도입하고 사용하기 위해 본격적인 React 공부해보겠습니다.
어떤식으로 공부를 할지 고민하다가 Udemy, 인프런 등 다양한 강의 사이트와 기술 블로그를 리서치해 보았는데
많은분들이 공통적으로 React 공식 문서를 추천을 하더라고요!
React 공식 문서를 직접 살펴보니 매우 체계적으로 잘 되어 있어서 시작은 외부 강의에 의존하기보다는
공식 문서를 기준으로 삼아 공부하는 방식을 선택했습니다.
다음과 같이 단계적으로 학습을 진행할 계획입니다.
• Step 1. 기본기 다지기
- 공식 문서를 기반으로 JSX, Props, State, Hooks(useEffect, useState 등)의 핵심 개념을 이해하기
- 단순히 코드를 복사해서 붙여넣는 식이 아니라 왜 이렇게 동작하는지 원리를 파악하는데 집중하려고 합니다.
• Step 2. 데모 프로젝트 구현
- 이론으로 배운 내용을 바탕으로 간단한 게시판, 투두 리스트(To-Do List) 등의 토이 프로젝트를 직접 만들어보려고 합니다.
- 컴포넌트 분리, 상태 관리등을 학습하는 것을 목표로합니다.
• Step 3. Next.js로 확장 및 배포
- React에 대한 이해도가 쌓이면 Next.js를 사용해볼 예정입니다.
- SSR(서버 사이드 렌더링)과 SEO 최적화까지 고려하여 기획해 두었던 개인 프로젝트를 실제 배포까지 완료할 예정입니다.
React나 블로그 작성이 낯설기 때문에 부족한 점이 많을 수 있습니다.
내용 중 수정이 필요하거나 더 좋은 방법이 있다면 언제든 댓글로 피드백 부탁드립니다!
긴 글 읽어주셔서 감사합니다.
