본문 바로가기

분류 전체보기402

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.

티스토리툴바