#01 React vs Next 학습 개발하기

 

"Next.js와 Tailwind CSS를 사용하기로 했지만, 프로젝트 구조를 명확하게 정하지 않으면 개발 중간에 많은 부분이 바뀔 가능성이 크다고 생각했어요. 그래서 사전에 폴더 구조와 개발 방식에 대해 충분히 고민하는 시간을 가졌습니다! 🫠"

 

아래는 프로젝트 시작 시점의 패키지 버전입니다! 🎯
이걸 공개하는 이유는, 어떤 버전에서 작업했는지를 명확히 기록하고, 업데이트에 따라 코드가 어떻게 변하는지 추적하기 위해서예요.
이후 버전 업그레이드 시 어떤 변경 사항이 있었는지도 비교할 수 있도록 정리해 두었습니다!

{
  "name": "reactvsnext",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.2.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4.0.17",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
    "tailwindcss": "^4"
  }
}

 

 

 

 

저는 크게 3가지를 구현을 목표를 하고 있습니다.

React.js vs Next.js

이 두개는 회사마다 사람마다 다 다를거라고 생각합니다. 목적성도 다르고 어떤 사람들은 더 편한걸 선택 할테니까요! 
그래서 저는 어느 상황이든 알맞게 사용하려면 두개 다 알아야 한다고 생각했습니다. 그 결과 어느부분에서 무엇이 더 뛰어난지
무엇이 더 부족한지를 알아야 했기에 조사를 하고 공부하는 차원에서 두개의 차이점을 먼저 찾아 보았습니다.

---

React.js / Next.js 학습하기

개인적으로 공식문서를 보면서 공부를 해야 한다고 생각합니다! 하지만!! 그 어느 초보자든 공식문서랑 친해지기는 어렵습니다(저도 그렇습니다) 그래서 학습을 할 수 있게끔 json형식으로 데이터를 적어보자? 라는 생각으로 공식문서의 내용도 보고 데이터도 만들고 프로젝트도 만들고 일석삼조😭 학습할 내용의 데이터는 엄청나게 방대하기에 주기적으로 제가 반영을 해야 하지않을까 싶습니다.

무엇보다 업데이트됨에 따라 달라지는 내용도 있을것이고, 추가되는 내용도 있을텐데 저는 제가 더 공부를 할 수 있다는 생각에 개발을 시작 했습니다. 오로지 저를 위하여! 시작된 개발이 다른 분들에게 힘이 되길 바라며...

---

Quzi 기능

학습까지 다 했다면 퀴즈까지 풀어야 겠지요? 얼마나 열심히 했는지 몇가지의 제가 프로젝트를 진행하면서 알게된점 햇갈리는 점들을 추려서 그걸 문제로 낸다면 얼마나 좋을까? 나중에 내가 풀었을때 제대로 집고 가자! 라는 느낌으로 만들게 되었습니다 😏

이 프로젝트는 처음엔 오로지 저를 위한 것이었어요!
하지만 공부를 하다 보니, 저처럼 React와 Next.js를 배우려는 분들에게도 도움이 될 수 있을 거란 생각이 들었습니다.
저와 함께 이 학습 여정을 즐겨 주세요!☺️

 

 

## 프로젝트 목표 🎯

1️⃣ **React.js vs Next.js 비교**  
   - 두 기술을 정확히 이해하고, 언제 어떤 것을 사용하면 좋을지 판단할 수 있도록 공부합니다.  
   - 각각의 장단점과 특정 상황에서의 적합성을 파악하는 것이 목표입니다.  

2️⃣ **React.js / Next.js 학습 데이터 구축**  
   - 공식 문서를 기반으로 JSON 형식의 학습 데이터를 정리합니다.  
   - 초보자가 쉽게 이해할 수 있도록 가이드 역할을 하는 프로젝트로 만들고 싶어요!  

3️⃣ **퀴즈 기능 개발**  
   - 학습한 내용을 바탕으로 퀴즈를 만들어 복습할 수 있도록 합니다.  
   - 초보자뿐만 아니라 저 자신도 반복 학습하면서 실력을 키울 수 있도록 구성할 예정입니다!