본문 바로가기

분류 전체보기402

layout과 template layout.tsx전체 공통 레이아웃layout 파일을 작성하면 segment와 그 자식 node에 있는 요소들이 공통적으로 적용받게 할 UI를 작성할 수 있다.예를 들어 header나 footer같은 공통 요소를 말한다.Next.js 프로젝트를 생성하고 나면 src/app/layout.tsx가 자동으로 생성되어 있다.이 파일에 레이아웃을 작성하면 라우팅을 몇 개를 해놨든 모든 페이지에 공통적으로 적용된다.그리고 그 라우팅 된 페이지들에서 상태가 변경되더라도 이 layout.tsx 파일은 최상위 부모 컴포넌트이기 때문에 리렌더링이 되지 않아 깜빡임 없는 사용성을 제공할 수 있다.라우트별 공통 레이아웃앱 라우팅 별로도 레이아웃을 지정할 수 있다.위 폴더 트리를 보면📦about ┣ 📂company ┃ ┗.. Programing/Next.js 2024. 7. 2.
App 라우팅 이해하기 주요개념leaf: children이 더이상 없는 node를 의미함.URL Segment : / 슬래시로 분류된 URL path의 한 부분을 말함.URL path : 도메인 이후 따라오는 전체 URL 부분을 말함.파일(폴더) 기반의 라우팅page.tsx/ path로 접근했을 때 보여지는 페이지의 이름이다.이 이름과 파일명이 다르면 페이지가 보이지 않는다.static routingsrc/app 폴더 내부에 위치한 폴더가 /path가 된다.예 ) src/app/info 폴더가 있다면, localhost:3000/info가 path가 되고, info 폴더 안에 있는 page.tsx가 이 path에 접근했을 때 렌더링 되는 페이지.폴더를 중첩해서 /path를 여러 개 만들 수 있다.예 ) src/app/info/.. Programing/Next.js 2024. 7. 2.
Next.js 프로젝트 세팅하기 참고Next.js 공식 문서https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs.org시스템 요구사항Node.js 18.17 이상MacOS, Windows, Linux 지원자동설치npx create-next-app@latest설치 메시지 선택 (Y/N)What is your project named? my-app// 프로젝트 이름 설정Would you like t.. Programing/Next.js 2024. 7. 1.
Tailwind :: hover 애니메이션 : 위로 살짝 올라가기 trnasition-tranform : 호버와 같은 변환 속성에 대해 트랜지션을 적용duration-400 : 지속 시간을 400ms(0.4s)로 설정hover:-translate-y-2 : 호버 시 요소를 0.5ream (8px) 만큼 위로 이동시킴. translate 앞에 - 붙어 있으면 위로, 양수면 아래로. Programing/CSS 2024. 6. 30.
Tailwind :: 마우스 호버 시 살짝 커지는 애니메이션 Programing/CSS 2024. 6. 30.

티스토리툴바