BBZJUN's

[하나은행] Digital hana 路
- JAVA
  - J1
- JavaScript
- NEXT
- React
  - R1
  - R2
  - R3
  - R4 copy
  - R4
- SQL
- Spring
- TypeScript
  - T1
  - T2
  - T3
  - T4
공부
- JavaScript
기술면접
- 프론트엔드
코딩테스트
- 백준
- 코드트리
Home

Contact

Copyright © 2024 | Yankos

BBZJUN > [하나은행] Digital hana 路 > NEXT

...

NEXT

NEXT
NEXT https://nextjs.org/learn NEXT 14를 사용하자 리액트 베이스의 풀스택이다! 생성 pnpm dlx create-next-app@latest What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like to use src/ directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias (@/)? No / Yes What import alias would you like configured? @/ prettier & eslint-plugin-react pnpm add -D prettier eslint-config-prettier pnpm add -D eslint-plugin-react eslint-plugin-react-hooks @next/eslint-plugin-next .eslintrc.json { "extends": ["next/core-web-vitals", "prettier", "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended"] } pnpm add -D @trivago/prettier-plugin-sort-imports .prettierrc { "singleQuote": true, "jsxSingleQuote": true, "semi": true, "trailingComma": "es5", "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrder": [ "^next$", "^next/\\w*$", "^next/(.*)$", "^react$", "^react/(.*)$", "^@/lib/(.*)$", "^[./]" ] } 프리티어 테스트 $> pnpm format >> 오류 뜨면 pnpm format --write >> 로 설정잡기 빌드(스타트) pnpm build >>빌드먼저 해주고 pnpm start next-auth v5 $> pnpm add next-auth@beta >> 설치 $> pnpm dlx auth secret >> 키 생성 (.env.local)
[하나은행] Digital hana 路 · 2024-10-11
NEXT
NEXT https://nextjs.org/learn NEXT 14를 사용하자 리액트 베이스의 풀스택이다! 폴더가 라우터다 (폴더이름)내 맘대로 만들고 그안에 들어가는 구성요소는 page, layout, template 이름 고정이다 ex) about 폴더 1. mkdir app/about (Route Folder) 2. make app/about/layout.tsx 3. make app/about/page.tsx 4. nav to page from Home(app/page.tsx) 서버에서 이루어진다. 위쪽에 “use client”는 Next.js 13 이상에서 도입된 기능으로, 컴포넌트가 클라이언트 컴포넌트임을 명시하는 선언입니다. 프리티어(위에 임포트 순서 설정) .prettierrc { "singleQuote": true, "jsxSingleQuote": true, "semi": true, "trailingComma": "es5", "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrder": [ "^next$", "^next/\\w*$", "^next/(.*)$", "^react$", "^react/(.*)$", "^@/lib/(.*)$", "^[./]" ] } >에서 importOrder의 내부 순서를 바꾸어주면 import되는것들의 순서를 지정해줄 수 있다. yarn dev yarn build -> yarn start 차이를 알아두기(dev에서는 계속 시간같은거 업데이트 가능하지만, start에서는 배포용이라서 딱 그 시점?이 올라감, 따라서 다이나믹하게 만들어줘야함) useRouter (only Client Component) 'use client'; > 이거는 이제 클라이언트(=브라우저)에서 실행이 되게끔한다!!! //클라이언트 컴포넌트에서는 어싱크(async)를 못 쓴다. // useRouter import { useRouter } from 'next/navigation' const router = useRouter() router.push('/dashboard', { scroll: false }); // another functions router.back(); useSearchParam ?? 다이나믹하게 페이지 // /hi/[time]/page.tsx export default function HiTime({ params }: { params: { time: string } }) { return <div>Good {params.time}!</div> } ()는 경로에 영향을 미치지 않음(정리용) /app /(auth) /login/page.tsx /dashboard/page.tsx 여기서 (auth)는 그냥 더 가독성 좋게 보일려고하는거임 인터셉트 client router와 server router를 다르게 표현 next/link/Link를 이용해야 intercepting 됨. A → B(intercept) → B(refresh) (.) 같은 레벨/depth (..) 하나 위 레벨 (...) Root 레벨 (..)(..) 두개 위 레벨 원래 원본의 파일이 있는데 그 파일로 이동하는 것이 아닌 내가 만든 인터셉트 페이지로 이동을 시킨다(이것은 새로고침하면 원본페이지로 이동이 된다), (.)/ (..) / (…) 같은경우는 그냥 폴더 위치에 따른 경로 느낌 [[]] 대괄호 두개 [[...params]]와 같은 형태는 Next.js에서 Catch-All 라우팅을 사용할 때, 대괄호를 2개 사용하는 방식입니다. 이것은 동적 경로를 정의할 때 매우 유용합니다. 대괄호 두 개([[...]])는 특정 경로가 **선택적 동적 경로(선택적 Catch-All)**임을 의미합니다. 1. [...params] (Catch-All 라우팅): 설명: [...]를 사용하면 URL의 나머지 부분을 하나의 배열로 캡처할 수 있습니다. 예시: /pages/blog/[...slug].tsx 이 경우, blog 경로의 하위 모든 경로가 slug 배열로 캡처됩니다. 예를 들어: /blog/hello/world → { slug: ['hello', 'world'] } /blog/my-post → { slug: ['my-post'] } 2. [[...params]] (선택적 Catch-All 라우팅): 설명: 대괄호 두 개([[...]])를 사용하면 선택적 동적 경로가 됩니다. 즉, 이 경로는 있어도 되고 없어도 되는 선택적 경로입니다. 예시: /pages/blog/[[...slug]].tsx 이 경우, blog 경로는 동적 경로가 없어도 매칭이 됩니다. 예를 들어: /blog → { slug: [] } (빈 배열) /blog/hello/world → { slug: ['hello', 'world'] } /blog/my-post → { slug: ['my-post'] } 요약: [...params]: Catch-All 동적 경로로서, 지정한 경로 이후의 모든 부분을 배열로 캡처합니다. [[...params]]: 선택적 Catch-All 동적 경로로서, 경로가 있어도 되고 없어도 됩니다. 경로가 없을 경우 빈 배열로 반환됩니다. 이 패턴을 통해 유연한 라우팅을 구성할 수 있으며, 다양한 경로 변형을 처리하는 데 매우 유용합니다. use client 와 asyncs는 같이 사용을 못한다. "use client"와 async 함수는 각자 다른 환경에서 동작하기 때문에, 서버 컴포넌트와 클라이언트 컴포넌트의 특성 차이로 인해 제약이 발생합니다. > 왜 use client와 async를 함께 사용할 수 없을까? 클라이언트 컴포넌트는 동기적으로 렌더링: Next.js에서 클라이언트 컴포넌트는 브라우저에서 동기적으로 렌더링됩니다. 클라이언트 컴포넌트는 동기적인 렌더링 흐름을 가져야 하기 때문에 컴포넌트 자체가 async 함수가 될 수 없습니다. 만약 컴포넌트 전체가 async로 선언되면, 해당 컴포넌트가 반환할 때까지 기다려야 하는데, 이는 브라우저의 동기 렌더링 흐름과 맞지 않기 때문에 에러가 발생합니다. 데이터 가져오기와 렌더링의 분리: 클라이언트 컴포넌트에서는 데이터 가져오기를 위해 React hooks를 사용해야 합니다. useEffect, useState 같은 React hooks로 비동기 작업을 처리하고, 상태 업데이트를 통해 다시 렌더링해야 합니다. 서버 컴포넌트에서는 서버에서 데이터를 미리 가져온 후 그 결과를 클라이언트로 넘겨주지만, 클라이언트 컴포넌트는 브라우저에서 비동기 작업을 별도로 처리하고 렌더링 흐름을 제어해야 합니다. Image를 사용하기 위한 설정 // for Image component in next.config.mjs /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'via.placeholder.com', port: '', pathname: '/**', }, ], }, }; export default nextConfig; Next Cloudinary Image(사진) 편집??? https://next.cloudinary.dev/ shadcn 설치!!! https://ui.shadcn.com/docs/installation/next pnpm dlx shadcn@latest init 아이콘 패키지 설치!! https://heroicons.com/ $> pnpm add @heroicons/react Next-auth 설치 $> pnpm add next-auth@beta $> pnpm dlx auth secret >> .env.local의 AUTH_SECRET 자동 세팅!
[하나은행] Digital hana 路 · 2024-10-08
NEXT
NEXT https://nextjs.org/learn NEXT 14를 사용하자 리액트 베이스의 풀스택이다! Next.js에서 SSG, SSR, ISR, CSR에 대해 한국어로 설명드리면: SSG (정적 사이트 생성): 설명: SSG는 페이지를 빌드 시점에 미리 렌더링하여 정적인 HTML 파일로 생성합니다. 이렇게 생성된 페이지는 이후 요청 시 서버에서 그대로 제공됩니다. Next.js에서의 동작 방식: getStaticProps와 비슷하며, 이 메서드를 사용해 빌드 시 데이터를 가져와 페이지를 생성합니다. 코드 예시: js 코드 복사 const staticData = await fetch('https://...', { cache: 'force-cache' }); force-cache는 데이터를 빌드 시에만 캐싱하고 이후로는 그대로 제공하는 방식입니다. SSR (서버 사이드 렌더링): 설명: SSR은 매 요청 시 서버에서 페이지를 렌더링하고 HTML을 클라이언트로 전달합니다. 페이지는 사용자 요청마다 새롭게 렌더링되므로, 최신 데이터를 항상 반영합니다. Next.js에서의 동작 방식: getServerSideProps와 유사하며, cache: 'no-store'를 사용하여 서버가 캐싱 없이 매번 새로운 데이터를 받아옵니다. 코드 예시: js 코드 복사 const dynamicData = await fetch('https://...', { cache: 'no-store' }); ISR (증분 정적 재생성): 설명: ISR은 정적 사이트 생성(SSG)와 유사하지만, 지정된 시간 간격으로 페이지를 재생성합니다. 즉, 페이지가 처음에는 정적으로 생성되지만, 설정된 시간(예: 10초)이 지나면 새 데이터를 반영해 페이지를 다시 생성할 수 있습니다. Next.js에서의 동작 방식: getStaticProps에서 revalidate 옵션을 사용하는 방식과 유사하며, 이를 통해 주기적으로 데이터를 다시 가져옵니다. 코드 예시: js 코드 복사 const revalidatedData = await fetch('https://...', { next: { revalidate: 10 } }); 이 예시는 10초마다 데이터를 다시 가져와 페이지를 재생성합니다. CSR (클라이언트 사이드 렌더링): 설명: CSR은 클라이언트에서 모든 페이지를 렌더링하는 방식입니다. 즉, JavaScript가 로드된 후 브라우저에서 데이터를 가져오고 페이지를 렌더링합니다. React의 SPA(단일 페이지 애플리케이션)와 비슷한 방식입니다. Next.js에서의 동작 방식: 페이지 컴포넌트에 'use client';를 선언하면 해당 페이지는 클라이언트 측에서만 렌더링됩니다. 코드 예시: js 코드 복사 'use client'; 이렇게 각 렌더링 방식은 페이지의 데이터 처리 방식과 성능에 따라 다르게 적용될 수 있습니다. pnpm npm i pnpm -g >로 설치 pnpm dlx create-next-app@latest >로 생성한다. pnpm build >로 빌드 pnpm start >페이지열기 프리티어 설정 // 프리티어 pnpm add -D prettier eslint-config-prettier // package.json > scripts "format": "prettier --check --ignore-path .gitignore .", "format:fix": "prettier --write --ignore-path .gitignore ." .eslintrc.json bold 부분 추가! { "extends": ["next/core-web-vitals", "prettier", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:react/jsx-runtime"] } //.prettierrc 파일 생성! { "singleQuote": true, "jsxSingleQuote": true, "semi": true, "tabWidth": 2, "trailingComma": "es5" } > 프리티어 자동으로 단축키 -> 쉬프트 + 알트 + F 프리티어 ++++ install $> pnpm add -D @trivago/prettier-plugin-sort-imports .prettierrc 파일 생성! { "singleQuote": true, "jsxSingleQuote": true, "semi": true, "trailingComma": "es5", "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrder": [ "^next$", "^next/\\w*$", "^next/(.*)$", "^react$", "^react/(.*)$", "^@/lib/(.*)$", "^[./]" ] } 그리고 pnpm format > 실행 eslint pnpm add -D eslint-plugin-react eslint-plugin-react-hooks @next/eslint-plugin-next
[하나은행] Digital hana 路 · 2024-10-07

Touch background to close