본문 바로가기

전체 글393

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.
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.

티스토리툴바