본문 바로가기

전체 글402

Next.js 프로젝트의 파일 구조 app 폴더Next.js 프로젝트를 세팅하면 src/app 폴더가 생성된다.앱 라우팅을 담당한다.이곳의 폴더는 자동으로 라우팅 되며 URL path를 폴더명으로 갖게 된다.layout.tsx 파일과 page.tsx이곳에 layout.tsx 파일을 만들면 프로젝트의 모든 파일에 영향을 줄 수 있는 파일을 만들 수 있다.그리고 page.tsx는 src/app 폴더에 있는 파일은 자동으로 '/'라는 URL path를 갖게 된다. 즉 홈 페이지의 역할을 한다는 것이다.app 폴더는 '/' home이다.// app/layout.tsxexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( .. Programing/Next.js 2024. 7. 4.
피터팬 Hobby/Guitar 2024. 7. 4.
그 때 그 소나기처럼 Hobby/Guitar 2024. 7. 4.
Package.json 살펴보기 프로젝트를 세팅하고 나면 루트 폴더에 package.json 파일이 생성된다.React.js를 사용할 때는 이런 내용이 필요가 없었으나, CSR, SSR, SSG, ISR 등 렌더링 방식을 선택해서 사용할 수 있는 Next.js에서는 필요한 명령어들이 들어있다. { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }} 본인이 편한 방식대로 yarn dev 등으로 사용할 수 있다. dev : 개발 모드. 웹 브라우저를 띄워 실시간으로 코드의 변경사항이 반영되며 보여준다.build : 프로덕션 레벨에서 배포하기 전에 우리가 작성한 코드를 서버에서 작동시킬 수.. Programing/Next.js 2024. 7. 4.
Next.js란? Next.js란?React.js와 같이 웹 애플리케이션 구축을 도와주는 도구이다. 그런데 차이가 있다면 리액트는 주도권이 개발자에게 있는 라이브러리이고, Next.js는 주도권이 프레임워크에 있는, Frame Work이다. 예를 들어 리액트에서는 라우팅을 설정할 때 별도의 라이브러리를 다운받아서 자유롭게 개발자가 세팅을 해줬지만,Next.js는 프레임워크가 준비한 방식대로, app 폴더 내에서 폴더 방식의 라우팅을 해주어야 한다. 웬만한 부분은 프레임워크가 기본으로 제공해주고 있기 때문에 하나의 프로젝트를 세팅하는 데 있어서 필요한 여러가지 사항을 프레임워크가 제공해주고 있어서 이런 시간을 아끼고, 애플리케이션의 기능적인 부분을 개발하는 데에 더 집중할 수 있도록 도와준다.주요 특징Routing : 레이.. Programing/Next.js 2024. 7. 4.
2023-07-03 Next.js + TanStack Query 포켓몬 도감 만들기 시연프로젝트 셋업터미널 열기npx create-next-app@latestcd 프로젝트폴더명 으로 디렉토리 이동필요 패키지 설치yarn add axios @tanstack/react-query 의존성 설치yarn폴더 구조 만들기📦 pokenon_project ├─ .eslintrc.json├─ .gitignore├─ README.md├─ next.config.mjs├─ package-lock.json├─ package.json├─ pokemon_project ✅│  │  └─ types│  │     └─ package.json 🔹│  └─ src│     └─ app│        ├─ globals.css│        └─ page.tsx├─ postcss.config.mjs├─ public│ .. Programing/TIL 2024. 7. 4.
Tailwind CSS 테일윈드란?https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com공식 홈페이지 참고 테일윈드 CSS는 Styled-Components와 거의 양대산맥처럼 많이 사용되는 스타일링 라이브러리이다.테일윈드에서 미리 클래스명으로 만들어 놓은 스타일을, className만 수정하면 바로 인라인에서 적용시킬 수 있기 때문에 편리해서 많이 사용된다.일반 CSS나 스.. Programing/Next.js 2024. 7. 2.
페이지 이동하기 :: a vs Link vs Router a 태그란?HTML에서 페이지를 이동시키는 방법.그러나 깜빡임이 발생하기 때문에 사용성은 떨어진다.홈으로Link 컴포넌트란?React에서 추가된 기능이다. a태그를 깜빡임 없이 이용할 수 있는 신통방통한 기능이다.Next.js 역시 React 기반이기에 동일하게 사용할 수 있다.Link를 사용하더라도 브라우저에는 a태그로 생성되기 때문에 라이브러리에서 추가된 기능이라 할 지라도 검색 엔진이 읽어들이는 데 문제가 없다. 따라서 SEO 최적화에도 좋다. Link가 a태그임에도 깜빡임이 없는 이유는, Link로 작성된 페이지 이동 링크는 사용자의 뷰포트(화면)에 나타나는 순간 prefetching한다. 즉 사용자가 분명 누를 것 같기 때문에 누르지 않았음에도 미리 그 페이지의 코드와 데이터를 가져와서 로드해 .. Programing/Next.js 2024. 7. 2.
metadata와 SEO metadata와 SEOSSR vs CSR웹 페이지의 제목과 내용을 담는 데이터이다.Next.js에서는 객체 형태로 담고 있다. 구글이나 네이버 같은 검색 엔진은 우리의 페이지가 어떤 페이지인지 모르고, 웹 사이트의 코드를 통째로 읽어서 판단하는 것도 아니며, 이 metadata를 우선적으로 읽는다. 그런데 React.js는 CSR 방식이라 검색 엔진에 최적화하는 데 한계가 있었다.리액트의 동작 방식을 보면, 초기 HTML은 root의 div 하나가 통으로 빈 상태로 클라이언트에게 전달이 되고, 웹사이트 구동에 필요한 JS 등이 하나의 덩어리로 번들링 되어 클라이언트에게 전달된다.이렇게 하기 때문에 초반에 불러오는 속도는 느리다. 즉 Time To View가 느리다. 하지만 일단 클라이언트에서 렌더링 되.. Programing/Next.js 2024. 7. 2.
not-found 404 Not-fount란?위 이미지는 Next.js를 셋업하면 기본적으로 나오는 404 페이지이다.404 에러는 없는 url path로 접근을 시도할 때 띄워주는 에러이다.즉, 클라이언트가 요청한 페이지를 찾을 수 없을 때 발생하는 에러다.참고) HTTP 상태 코드1xx: 정보 응답100 Countinue : 클라이언트가 요청을 계속 할 수 있음.101 Switching Protocols : 서버가 클라이언트의 프로토콜 전환 요청을 승인함.2xx : 성공 응답200 OK : 요청이 성공적으로 수행됨.201 Created : 요청이 성공적으로 수행되었고, 새로운 리소스가 생성됨.202 Accepted : 요청이 접수되었으나 아직 처리되지 않음.204 No Content : 요청이 성공적으로 수행되었으나 .. Programing/Next.js 2024. 7. 2.

티스토리툴바