전체 글54 [Next.js] App Router Next.js는 왜 폴더가 곧 URL일까? App Router 쉽게 이해하기!!!Next.js는 최신 버전부터 App Router를 도입하여, 폴더 구조만으로 페이지와 URL을 정의할 수 있도록 했다.파일 시스템 기반의 라우팅 방식이라 누구나 직관적으로 구조를 파악하고 사용할 수 있다는 장점이 있다.( 혁명 그 자체. .)이번 글에서는 Next.js의 App Router가 어떻게 동작하는지, 그리고 URL이 어떻게 생성되는지 예시와 함께 정리하고자 한다. Next.js의 App Router는 /app 폴더를 기준으로 작동한다.이 app 폴더가 프로젝트의 루트 경로(/)를 구성하게 되며, 내부 폴더와 파일이 곧 URL 경로가 된다.app폴더 내의 page.tsx파일을 (/)를 루트 세그먼트(root seg.. 2025. 4. 8. [Next.js] 스타트 - 프로젝트 생성 목차- Next.JS 란?- Next.JS 특징- 프레임워크 vs 라이브러리- Next.JS 프로젝트 생성Next.js ?Next.js는 React 기반의 오픈소스 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 웹 애플리케이션 개발에 필요한 많은 기능을 제공한다.Next.js의 주요 특징서버 사이드 렌더링(SSR): 페이지를 서버에서 렌더링하여 SEO 개선 및 초기 로딩 속도 향상정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 생성하여 빠른 성능 제공파일 시스템 기반 라우팅: 폴더와 파일 구조를 기반으로 자동으로 라우트 생성API 라우트: 서버리스 함수를 쉽게 생성할 수 있는 기능자동 코드 분할: 페이지별로 필요한 JavaScript.. 2025. 4. 8. 파라미터(Parameter) 공부를 하다 보면 useParams()나 파라미터(Parameter)라는 말을 자주 보게 된다.솔직히 일상생활하면서 자주 쓰는 말이 아니기 때문에 나는 아직도 익숙치가 않다.그래서 익숙해지고자 블로그에 정리하기로 했다.파라미터(Parameter)파라미터(Parameter)는 어떤 것을 구분하거나 전달할 때 쓰는 정보 조각이다.특히 웹 주소(URL) 안에 들어있는 정보를 말할 때 많이 사용된다.https://zing829.tistory.com/56 나의 티스토리 블로그 주소에서도 볼 수가 있는데 이 주소에서 맨 끝에 있는 56이 바로 파라미터다.56은 블로그 글 번호, 즉 해당 글을 구분하는 정보를 나타낸다.https://zing829.tistory.com/:postId 파라미터의 종류( 한 URL에 두 .. 2025. 4. 5. 혼자 할 땐 몰랐던 커밋 메시지의 중요성 최근 팀 프로젝트를 하면서 Git을 본격적으로 사용하게 되었고, 커밋 메시지를 언제, 어떻게 작성해야 하는지 참 어렵게 느껴졌다.혼자 프로젝트를 할 땐 늘 "아 오늘은 여기까지! 커밋!" 하루 작업 단위로만 커밋을 진행했다.작업 내용이 명확하게 드러나지 않고, 무슨 작업이었는지 나조차도 기억하기 힘들었다. 그래서 나는"커밋 메시지, 이제는 아무렇게나 쓰면 안 되겠다."는 생각이 들었고,그동안 배운 것들을 정리해보려 한다.📌 왜 커밋 메시지가 중요할까?코드 히스토리 추적이 쉬워짐협업 시 변경 내용 이해가 쉬움PR 리뷰, 디버깅 효율 증가좋은 커밋 메시지는 프로젝트의 유지보수성을 높이고, 개발 팀 내에서의 협업을 강화하는 데 기여한다.따라서 커밋 메시지 작성은 단순한 기록을 넘어서 프로젝트 관리의 핵심 요.. 2025. 4. 4. [리액트 7기] 5주차 주간회고 💡핵심 3줄 요약나도 할 수 있다 !다음주부터는 밀리지말고 미리미리 듣자 !졸업과제 무사히 할수있을까 ㅜ ㅜ💡이번 주 목표[❌] 9시 기상 최소 3번 성공하기 월화수목금[✅] 밀린 강의 다 듣기 - 밀린김에 리액트 JS 처음부터 다시보기[♾️] 졸업과제 제출하기 !💡칭찬하고 싶은 점- 포기하지 않은 점 - 무사히 졸업하자. .💡고치거나 버려야 할 점- 생활습관을 바꾸는 것은 여전히 어렵다 ㅜ ㅜ 계속 도전해야겠다. 💡일일 스프린트더보기03월 29일 (토)[✅] 오프라인 모각코03월 30일 (일)[✅] 카페 알바03월 31일 (월)[❌] 9시 기상 → 11시기상[✅] 리액트JS 마스터 강의 #1 ~ #4 복습04월 01일 (화)[❌] 9시 기상 → 10시기상 [✅] 카페 알바[✅] 리액트JS 마.. 2025. 4. 4. 굳바이 styled-components😢 styled-components 막 즐겁게 배우고 있는 찰나. . 안타까운 소식을 접했다. 띠로리 Thank you - styled-componentsFirst and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...opencollective.com이 글에서 말하고자 하는 주요 내용:styled-components 프로젝트가 "유지 보수 모드.. 2025. 4. 1. [리액트 7기] 4주차 주간회고 💡핵심 3줄 요약습관을 바꾸는 것은 어렵다.이번주는 개인 약속이 많아서 많이 못했다.💡이번 주 목표[✅] 9시 기상 도전하기 💡칭찬하고 싶은 점- 9시기상 매일 성공은 못했지만, 알람맞추고 계속 도전한점💡고치거나 버려야 할 점- 열심히 안한 것.💡일일 스프린트더보기033월 22일(토)[♾️] 코드 챌린지03월 23일(일)[❌] 코드챌린지03월 24일(월)[✅] 9시기상[♾️] 코드챌린지03월 25일(화) [✅] 9시기상[✅] 코드챌린지03월 26일(수) [❌] 9시기상[✅] 회의03월 27일(목)[❌] 9시기상03월 28일(금)[❌] 9시 기상[❌] 주간회고 작성 2025. 3. 29. [리액트 7기] 3주차 주간회고 💡핵심 3줄 요약예습과 복습 두마리 토끼 잡기 힘들다.생활습관 바꾸는 것은 어렵다 어렵지만 킵고잉 💡이번 주 목표[✅] 열정 끌어 올리기집에서만 하다가 공부장소를 바꿔서 스카에서 공부를 했다. 딴짓 30분하고 4시간30분 풀집중했다!근데 스카가 집보다 더 추워서 날풀리면 다시 스카에서 공부해야겠다 ! [✅] 식단 시작하기의자에만 앉아있다보니 엉덩이만 커지고있다 나중엔 엉덩이로 걸어다닐수도. .미루고 미루다가 금요일에 시작했지만 이것도 성공?! [✅] 포기하지 않기솔직히 어려워서 포기하고 천천히 혼자 하려고했지만 120만 취준생 중 한명인 나, 올해는 취업해야지 !!!💡칭찬하고 싶은 점여태 생존 했다💡고치거나 버려야 할 점1. 일찍자고 일찍일어나기 ! (담님과 일찍일어나기 챌린지를 시작했는데 시작하.. 2025. 3. 21. [리액트] react-router-dom react-router라우팅 기능의 핵심 라이브러리로, 다양한 환경(브라우저, 네이티브, 서버 등)에서 사용할 수 있는 공통적인 라우팅 로직을 제공라우팅을 위한 기본적인 기능을 포함하지만, 브라우저 환경에 특화된 기능은 포함하지 않는다.( 브라우저에서 사용하기 위해서는 react-router-dom설치가 반드시 필요하다)react-router-domreact-router-dom은 브라우저 환경에서 사용할 수 있도록 react-router를 확장한 라이브러리브라우저에서 라우팅을 구현하기 위한 DOM 관련 기능들을 제공한다..설치 방법npm install react-router-domreact-router-dom을 사용하여 라우팅 설정하기BrowserRouter, Route, Routes 등과 같은 컴포넌트.. 2025. 3. 19. 이전 1 2 3 4 ··· 6 다음
