개발공부23 [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. [리액트] 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. [TS] TypeScript 타입스크립트의 장점은 바로 안정성이다!!닉값 제대로 하는 타입스크립트 공부해보쟈. .타입스크립트2012년 마이크로소프트에서 개발했으며, 자바스크립트의 상위 집합으로 설계된 프로그래밍 언어다.즉, 자바스크립트에 정적 타입을 추가한 프로그래밍 언어다. 💡정적타입프로그래밍에서 변수나 표현식의 데이터 타입이 컴파일 시간에 결정 되고 확인되는 시스템을 말한다. 컴파일 시간 타입 검사코드가 실행되기 전에 타입 오류를 감지함빌드 과정에서 타입 불일치 문제를 발견명시적 타입 선언변수, 매개변수, 반환 값 등에 타입을 명시적으로 선언타입 안정성타입이 맞지 않는 연산이나 할당을 미리 방지런타임 타입 오류 가능성 감소개발 도구 지원IDE의 코드 자동 완성, 리팩토링 지원이 뛰어남문서화 효과가 있어 코드 가독성 향상타입 변.. 2025. 3. 16. [JS] 전개연산자 ... 전개 연산자(Spread Operator, ...)란? 배열, 객체, 함수 인자 등을 펼쳐서 개별 요소로 분해하는 JavaScript 문법배열과 객체를 쉽게 복사하거나, 새로운 값을 추가하여 확장할 수 있다.1. 배열에서의 전개 연산자배열의 요소를 개별적으로 펼쳐서 새로운 배열을 만들거나, 기존 배열을 확장할 때 사용된다.(1) 배열 복사 ( 얕은 복사 )전개 연산자를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 만들 수 있다.(배열 안에 객체/ 중첩 배열 제외)arr2 = arr1 을하면 같은 배열을 참조하지만, ...arr1을 사용하면 새로운 배열이 생성된다.const arr1 = [1, 2, 3];const arr2 = [...arr1]; // arr1을 복사console.log(arr2); .. 2025. 3. 12. [리액트] useState [리액트] Statestate란?state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다. 💡 리렌더링( rerendering ) state나 props가zing829.tistory.com useState는 상태를 관리하는 훅이며, state는 useState를 통해 관리되는 실제 데이터다. useState리액트에서 상태(state)를 관리하는 데 사용하는 훅(Hook)으로, 함수형 컴포넌트에서 상태를 추가할 수 있게 해준다. 초기 상태 값을 인자로 받으며, 배열을 반환한다.배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수다.const [state, setState] = useS.. 2025. 3. 10. [리액트] State state란?state(상태) 는 리액트 컴포넌트에서 변경 가능한 데이터를 관리하는 객체다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다. 💡 리렌더링( rerendering ) state나 props가 변경될 때, 리액트가 컴포넌트를 다시 그림 리액트에서는 useState() 훅을 사용하여 state를 생성하고 업데이트할 수 있다.💡props와 state의 차이props : 부모 → 자식으로 전달되는 변경 불가능한(Read-only) 데이터 state : 컴포넌트 내부에서 관리하는 변경 가능한 데이터 state의 특징 state가 변경되면 리렌더링이 발생한다.state를 변경하면 React가 자동으로 해당 컴포넌트를 리렌더링하여 UI를 업데이트한다. 💡 리렌더링( rere.. 2025. 3. 10. [리액트] props propsReact에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식이다.(단반향)컴포넌트 간의 데이터 흐름을 단방향으로 유지할 수 있으며, props는 컴포넌트의 재사용성을 높이는 중요한 역할을 한다.컴포넌트와 propsReact에서 컴포넌트는 JSX를 반환하는 함수이다. [리액트] Component컴포넌트(Component)리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될zing829.tistory.com 컴포넌트는 ( )괄호 안에 argument(인자)를 받는데 여기서 인자 이름은 props라고 부른다. props는 컴포넌트가 전달받는 유일.. 2025. 3. 7. 이전 1 2 3 다음
