100일은 해야지

🌀 Link✏️  Link 컴포넌트???예전에는 a 태그를 이용해서 페이지 이동. 하지만 a 태그는 새 페이지를 불러오기 위해 새로운 http요청을 보냄, react 앱을 실행할 때 갖는 state가 변경되는 단점이 있음그래서 Link 컴포넌트 사용, Link 컴포넌트는 리액트 구조에 맞게 페이지를 이동import Link from "next/link"export default function HomePage() { return ( 홈페이지 // Link 컴포넌트의 href 속성에 이동하고자 하는 페이지 경로를 입력하면 됨 포트폴리오 )}✏️  동적 라우트로 navigating리액트에서 하던 방식..

🌀 파일 기반 라우팅페이지 기반의 라우터, 폴더 구조를 통해 알아서 추론해서 라우팅함pages(폴더)┗_app.js => 내가 만든 모든 페이지가 초기화될 때 로딩되는 파일┗ index.js => 루트 페이지 ( / )┗ about.js => /about┗ products(폴더)    ┗ index.js => /products    ┗ [id].js => /products/id (동적 라우팅, 대괄호 사용) 위에서 about.js는 정적 라우트 파일을 추가한 것이고, pages폴더 안에 products라는 폴더를 추가하면 그 안에 또 index.js파일을 생성할 수 있는데, 이게 products의 상위 페이지가 되고 그 아래로 다른 페이지들을 더 만들 수 있음즉, pages폴더안에 about.js 파일..

next.js에는 보호된 파일명이 있음이 파일들은 app/폴더 내부에서 생성될 때만 보호된 파일명으로 작동한다.app/폴더 외부에서 생성될 경우 이 파일명들을 특별한 방식으로 처리하지 않음. page.js 신규 페이지 생성 layout.js형제 및 중첩페이지를 감싸는 신규 레이아웃 생성 각 폴더 안에 하나씩 생성할 수 있지만RootLayout은 필수적임. , 나 metadata api로 부분 작성해야함. 참고로 favicon을 넣으려면 icon.png 처럼 icon이라는 이름을 사용해야함. not-found.js Not Found 오류에 대한 fallback 페이지 (page router에서는 404.js) error.js기타 오류에 대한 fallback 페이지 loading.js형제 또는 중첩페이지가 ..

next build에 대해 적어놓기 위한 글 😳 왠 build? 👉 용량이 크다는 것은 비효율적이고 보안상에 문제가 생길 수도 있다고 한다. 👉 build 하나로 용량이 차이가 얼마나 나는가? 개발자 도구에서 network탭을 열어서 새로 고침을 누르고 맨 아래쪽을 보면 6.6MB resources라고 나오는데 서버에서 클라이언트로 전송한 용량이 6.6MB나 된다. 👉 이부분은 package.json에 "scripts" 쪽에서 유지보수 할 수 있는데 "build"라는 명령어는 실제로 배포할때 배포판을 만들어주는 명령어이고, "start"는 배포판을 실행하기 위한 명령어이다. build를 사용하면 최적화 해주기 때문에 용량을 줄일 수 있다고함. 👉 일단 해본다. npm run build 로 빌드를 해보면 ..

NEXT.JS의 Component next.js의 일반적으로 작성하는 것들은 server component이다. html안에 javascript를 넣을 수 없다. hook도 사용 불가능. onClick 이벤트 같은 것도 노노 자바스크립트가 없으니 페이지를 로드할 때 속도가 빠르다. 자바스크립트를 넣고 싶으면 컴포넌트 맨 위에 'use client' 코드를 넣으면 됨 이 코드 아래 모든 컴포넌트는 client component가 된다. 하지만 자바스크립트를 넣으므로써 용량이 커지고 페이지 로딩속도가 느려진다는 단점이 발생한다. client component를 로드하려면 hydration이라는 과정을 거쳐야 하는데 그것 때문에 속도가 더 느려진다. hydration?? => SSR(server-side Re..

Next.js!!!!  pages 폴더에 넣어주는 것만으로도 페이지가 만들어진다.그 파일이름이 페이지가 되는 거임 리액트 라우터를 사용 안 해도 됨일단 index가 기본이고  about폴더 주소는 아래처럼....  pages폴더에 폴더를 하나 더 만들고 파일을 만들어주면 페이지가 뙇next.js가 pages폴더의 파일들의 이름을 가져다가 url이름으로 만드는 거임  그리고 뼈대는 설치할 때 app router사용할 것인지 선택하는 부분에서 초큼 바뀌는 듯하다.app router를 사용하게 되면 pages폴더 대신 app폴더가 생기고 page.tsx가 기본 페이지layout.tsx는 페이지에서 공통으로 쓰는 header 같은 걸 작성하는 파일이다.(참고로 app router를 사용하지 않으면 pages폴더..

next설치 npx create-next-app@latest Ok to proceed? (y) 엔터치고 넘어간다 What is your project named? 프로젝트이름 Would you like to use TypeScript with this project? 타입스크립트 사용여부 Would you like to use ESLint with this project? EsLint 사용여부 Would you like to use Tailwind CSS with this project? 테일윈드 CSS 사용여부 Would you like to use src/ directory with this project? src 디렉토리 사용여부 Use App Router (recommended)? App Rout..