React.js vs Next.js 란 무엇일까? 내가 프레임워크 정복에 도전하는 이유

안녕하세요! 오늘부터 React와 Next.js를 비교하고 학습하는 프로젝트를 시작하려고 해요. 이 글은 시리즈의 첫 번째 포스팅이 될 예정입니다. 앞으로 프로젝트를 진행하면서 겪는 모든 과정, 이슈, 그리고 해결책들을 함께 공유할게요!

 

왜 이 프로젝트를 시작했나?

 

 

프론트엔드 개발자로 취업을 준비하면서 깨달은 게 있어요. 바로 프레임워크에 대한 이해도가 아직 많이 부족하다는 점이에요. 특히 요즘 채용공고를 보면 React는 기본이고, Next.js 경험이 있으면 우대한다는 내용을 자주 볼 수 있죠.

근데 문제는... React랑 Next.js가 정확히 어떻게 다른지, 언제 무엇을 써야 할지 명확하게 설명하라고 하면 아직 자신 있게 대답하기 힘들더라고요. 😅

그래서 생각했어요. "이왕 공부할 거, 제대로 해보자!" 이론만 읽고 넘어가는 것보다 직접 비교하고 코드로 구현해보면 훨씬 기억에 잘 남을 것 같았거든요.

 

 

이 프로젝트에서 뭘 할 건가요?

1. React vs Next.js 비교하기
   • 각각의 특징과 차이점
   • 장단점 분석
   • 어떤 상황에서 무엇을 선택해야 할지
2. 문법 학습 공간 만들기
   • 두 프레임워크의 핵심 문법 정리
   • 같은 기능을 두 프레임워크로 구현해보기
   • 실제 코드 예제 작성
3. 퀴즈 게임 만들기
   • 배운 내용을 토대로 퀴즈 문제 만들기
   • 인터랙티브한 방식으로 지식 테스트하기
   • 재미있게 학습 내용 복습하기

어떻게 진행할 계획인가요?

이 프로젝트는 단계별로 진행할 거예요:

1. 데이터 수집 & 정리 (현재 진행 중)
   • React와 Next.js에 대한 자료 찾기
   • 공식 문서, 블로그, 유튜브 영상 등 다양한 소스 참고
2. 프로젝트 구조 잡기
   • Next.js로 프로젝트 시작하기
   • 필요한 페이지와 컴포넌트 설계하기
3. 비교 섹션 구현
   • 두 프레임워크의 차이점 시각화하기
   • 사용 사례 정리하기
4. 학습 섹션 개발
   • 문법 예제 구현하기
   • 인터랙티브 요소 추가하기
5. 퀴즈 게임 만들기
   • 문제 데이터베이스 구축하기
   • 게임 로직 구현하기

왜 블로그에 기록하기로 했나요?

사실 혼자 공부하다 보면 중간에 의지가 꺾이거나 방향을 잃기 쉬워요. 블로그에 진행 상황을 기록하면 두 가지 효과가 있을 것 같았어요:

1. 책임감 - "이거 올렸으니까 끝까지 해야지!" 하는 마음이 생김
2. 정리 효과 - 배운 내용을 글로 정리하면서 더 깊이 이해할 수 있음

그리고 혹시 나처럼 React와 Next.js를 비교하며 공부하고 싶은 사람들에게 도움이 될 수도 있겠죠? 일석이조랄까요? 😁

앞으로의 계획

다음 포스팅에서는 React와 Next.js의 기본 개념과 핵심 차이점에 대해 자세히 다룰 예정이에요. 이후에는 실제 프로젝트 세팅 과정과 첫 번째 페이지 구현에 대해 공유할게요.

진행하면서 생기는 이슈나 삽질 경험(?!)도 솔직하게 공유할 예정이니 같이 성장해봐요! 궁금한 점이나 제안하고 싶은 내용이 있다면 댓글로 알려주세요. 여러분의 의견도 프로젝트에 반영하고 싶어요.

 

다음 글에서 만나요! 👋