#04 React vs Next 학습 개발하기

학습 데이터 생성하기... 첫번째 목표인 비교를 끝내고.. 공부를 하기위해 정리하는 React의 문법 또는 사용법입니다.지금 위 사진은 데이터의 일부입니다. (데이터 구조가 왜저래? 라고 보실테지만..)  해당화면 처럼 만들기 위하여 저런 데이터 구조를 만들었습니다...🥲학습을 할건데 딸랑 텍스트만 주르륵 쓰여져 있으면 이상할거 같단 생각에"react-syntax-highlighter": "^15.6.1"코드에 코드블럭을? 사용할 수 있게 해주는 라이브러리를 사용 했습니다.그러면 실제로 학습하는 느낌이(..?) 더 날거라고 생각합니다!데이터의 한계가 너무나도 많고 제가 배우는 입장으로서 적는거 자체가 이상하지만초보자가 쓰고 있다고 생각하시고 읽어봐주셨으면 좋겠습니다..실제로 내용도 초보자가 봐도 더 어..

• format_list_bulleted 개인 작업
• · 2025. 4. 1.
• textsms

#03 React vs Next 학습 개발하기

현재 React vs Next 개발 상황 비교는 간략하게 구현을 하였습니다.🥲왜냐하면 자세하게 들어가면 학습이나 다를게 없다고 생각 했기에...디테일 한 각각의 차이는 학습하기에서 내용을 넣을 생각입니다!사용사례를 따로 빼둔 이유는 어느상황에서는 React 또는 Next를 쓰면 좋을지 알며 좋을거 같아서 적어두었습니다..(저게 정답은 아닙니다 절대 오해 하시면 안돼요... 저는 개발에 정답은 없다고 봅니다. 어느 방향으로도 다 가능하니까요)  React vs Next.js: 주요 차이점과 사용사례React정의: Facebook에서 개발한 UI 라이브러리렌더링: 기본적으로 CSR(Client-Side Rendering) 방식라우팅: 내장 라우팅 기능 없음 (react-router-dom 등 별도 설치 필..

• format_list_bulleted 개인 작업
• · 2025. 4. 1.
• textsms

#02 React vs Next 학습 개발하기

이번 시간에는 두개를 비교하면서 얻은 정보와 화면 구현에 이야기를 하고자 합니다 👍단순히 학습을 목표로 두고 진행한점.. 을 고려하여 제 부족한 실력을 봐주십시용.. 🖥️ 3. Intro 화면 (첫 화면 구성)✨ 처음 접속했을 때 화면✅ 한눈에 React vs Next.js 비교가 보이도록 제목을 설정✅ 사용자가 쉽게 이동할 수 있도록 3개의 네비게이션 메뉴 추가✅ 핵심 목표: 비교, 학습, 퀴즈 페이지를 직관적으로 연결🔥 네비게이션 구성비교 페이지: React와 Next.js의 차이점을 한눈에 볼 수 있는 공간학습 페이지: 공식 문서 내용을 정리한 학습 자료퀴즈 페이지: 배운 내용을 문제로 풀어볼 수 있는 공간👉 홈 화면에서는 업데이트 내역을 주기적으로 올릴 예정입니다!디자인 요소를 최대한 줄이..

• format_list_bulleted 개인 작업
• · 2025. 3. 31.
• textsms

#01 React vs Next 학습 개발하기

"Next.js와 Tailwind CSS를 사용하기로 했지만, 프로젝트 구조를 명확하게 정하지 않으면 개발 중간에 많은 부분이 바뀔 가능성이 크다고 생각했어요. 그래서 사전에 폴더 구조와 개발 방식에 대해 충분히 고민하는 시간을 가졌습니다! 🫠" 아래는 프로젝트 시작 시점의 패키지 버전입니다! 🎯이걸 공개하는 이유는, 어떤 버전에서 작업했는지를 명확히 기록하고, 업데이트에 따라 코드가 어떻게 변하는지 추적하기 위해서예요.이후 버전 업그레이드 시 어떤 변경 사항이 있었는지도 비교할 수 있도록 정리해 두었습니다!{ "name": "reactvsnext", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopac..

• format_list_bulleted 개인 작업
• · 2025. 3. 31.
• textsms

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

안녕하세요! 오늘부터 React와 Next.js를 비교하고 학습하는 프로젝트를 시작하려고 해요. 이 글은 시리즈의 첫 번째 포스팅이 될 예정입니다. 앞으로 프로젝트를 진행하면서 겪는 모든 과정, 이슈, 그리고 해결책들을 함께 공유할게요! 왜 이 프로젝트를 시작했나?  프론트엔드 개발자로 취업을 준비하면서 깨달은 게 있어요. 바로 프레임워크에 대한 이해도가 아직 많이 부족하다는 점이에요. 특히 요즘 채용공고를 보면 React는 기본이고, Next.js 경험이 있으면 우대한다는 내용을 자주 볼 수 있죠.근데 문제는... React랑 Next.js가 정확히 어떻게 다른지, 언제 무엇을 써야 할지 명확하게 설명하라고 하면 아직 자신 있게 대답하기 힘들더라고요. 😅그래서 생각했어요. "이왕 공부할 거, 제대로 ..

• format_list_bulleted 개인 작업
• · 2025. 3. 31.
• textsms

Next.js 시작해보자! (2)

1부를 다 완료 했다면 하단의 이미지처럼 폴더가 다 만들어 집니다. (초반 세팅에 따라 있고 없고의 차이가 있습니다.)  이제 로컬서버를 돌리도록 하겠습니다.// npm 으로 할때npm run dev// yarn 일때yarn run dev 터미널에 입력 후 엔터 치면 로컬 서버가 생성이 됩니다.그러면 하단의 이미지 처럼 완료가 뜨고 로컬 주소가 보입니다.그 로컬 주소를 컨트롤 클릭하면 서버창이 열립니다. 화면에서 보여지는 모습은 src/app/page.js 파일입니다.import Image from "next/image";export default function Home() { return ( Get started b..

• format_list_bulleted React
• · 2024. 11. 9.
• textsms