1. Componentization 가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요. 가독성과 코드 재사용을 위해서 반드시 component화 필요. Composable commerce의 필수 요건. 예시 : layout.tsx const Layout = ({ children }) => ( Header content ... ... {children} Footer content ... ... ); export default Layout; 이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/ 에 코딩 후 import import Header from '@/components/header'; impo..

Nuxt는 ofetch를 사용하여 Vue 앱 또는 API 경로 내에서 HTTP 요청을 만들기 위한 $fetch 헬퍼를 전역적으로 노출한다. 서버 측 렌더링 중에 $fetch 호출하여 내부 API 경로를 가져오면 저장 및 추가적인 API 호출과 같은 관련 함수(요청 에뮬레이션)를 직접 호출한다. useAsyncData 로 래핑하지 않은 채컴포넌트에서 $fetch 를 사용하면 서버에서 클라이언트로 상태를 전송하지 않기 때문에 클라이언트가 데이터를 다시 가져와야 하므로 가져오기가 양쪽에서 실행된다. 따라서 $fetch 를 사용하면 데이터를 두 번 가져온다. 처음에는 서버에서, 그 다음에는 하이드레이션 중에 클라이언트 측에서 다시 가져온다. 구성요소 데이터를 가져올 때 이중 데이터 가져오기를 방지하려면 useF..

useState 컴포저블은 SSR에 적합한 반응형 공유 상태를 생성합니다. 사용법 // Create a reactive state and set default value const count = useState('counter', () => Math.round(Math.random() * 100)) 참고) Nuxt-개요 > 상태관리 useState 내부 데이터는 JSON으로 직렬화되므로 클래스, 함수, 심벌 등 직렬화할 수 없는 어떤 것도 포함하지 않는 것이 중요하다. shallowRef 사용 상태가 적극적으로 반응할 필요가 없다면 useState 와 shallowRef 를 결합할 수 있다. 이렇게 하면 상태에 큰 개체와 배열이 포함된 경우 성능이 향상될 수 있다. const state = useStat..

useSeoMeta 과 마찬가지로 useServerSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 개체로 정의할 수 있다. 참고 > Nuxt-Composable > useSeoMeta 대부분의 경우 로봇은 초기 로드만 스캔하므로 메타가 반응할 필요가 없다. 따라서 클라이언트에서 아무 작업도 수행하지 않거나 (혹은 head 객체를 반환하는) 성능 중심 유틸리티로 useServerSeoMeta 를 사용하는 것이 좋다. 참고) Nuxt-개요 > SEO 와 Meta

useSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 객체로 정의할 수 있다. useSeoMeta 를 사용하면 property 대신 name 을 사용하는 것과 같은 일반적인 실수와 오타를 방지할 수 있다. 100개가 넘는 메타 태그가 완전히 입력되어 있기 때문이다. 이는 XSS에 안전하고 TypeScript를 완벽하게 지원하므로 사이트에 메타 태그를 추가하는데 권장되는 방법이다. 참고) Nuxt-개요 > SEO 와 Meta 사용 예 반응형 태그를 삽입할 때는 계산된 getter 구문(() => value)을 사용해야한다. 100개가 넘는 매개변수가 있다. 아래 소스 코드의 전체 매개변수 목록을 참고하자.

useRuntimeConfig 컴포저블을 사용하여 런타임 구성 변수에 액세스한다. // server/api/foo.ts export default defineEventHandler((event) => { const config = useRuntimeConfig(event) }) 참고) Docs > Guide > Going Further > Runtime Config 런타임 구성 정의 아래 예에서는 공개 API 기본 URL과 서버에서만 액세스할 수 있는 비밀 API 토큰을 설정하는 방법을 보여준다. runtimeConfig 변수를 nuxt.config 내부에 정의해야 한다. // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // Pr..

Data fetching 이란? Data fetching이란 API등을 이용하여 데이터를 가져오는 과정을 의미하며, 대표적으로 자바스크립트에서 네이티브로 제공해주는XMLHttpRequest, Fetch API 그리고 jQuery의 AJAX, Axios 통신 라이브러리를 이용하여 처리 합니다. Next JS 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메소드 또는 Component 로직내에서 사용자 행위로 일어나는 이벤트 동작 내에서 data fetching을 사용하였습니다. 하지만 Next 13 부터는 Server Component 및 Client Component라는 구분이 생겨났고, 이로 인하여 data fetching에도 영향을 주었는데 기존에는 Axio..

useRouter 컴포저블은 라우터 인스턴스를 반환한다. 템플릿 내에 라우터 인스턴스만 필요한 경우 $router 을 사용하세요. Back pages/ 디렉토리가 있는 경우 useRouter는 에서 vue-router 제공하는 것과 동작이 동일합니다. 기본기능 addRoute() : 라우터 인스턴스에 새 경로를 추가합니다. parentName 기존 경로의 하위 경로로 새 경로를 추가하도록 제공될 수 있다. removeRoute() : 이름으로 기존 경로를 제거한다. getRoutes() : 모든 경로 기록의 전체 목록을 가져온다. hasRoutes() : 해당 이름의 경로가 존재하는지 확인한다. resolve() : 경로 위치의 정규화된 버전을 반환한다. 기존 기반을 포함하는 href 속성도 포함된다. ..

Local font files src/app/assets/fonts 폴더를 생성하고 local font 파일을 복사한다. ( public/assets/fonts 폴더를 생성하여도 무관 ) font.ts src/app/assets/ 폴더에 font.ts 파일 생성 다음 코드 입력 import localFont from 'next/font/local'; export const familyMont = localFont({ src: [ { path: './fonts/Montserrat-Bold.woff2', weight: '700', style: 'bold', }, { path: './fonts/Montserrat-Medium.woff2', weight: '500', style: 'medium', }, { pa..

Environment variables 참조: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variable-load-order npm run dev에서 실행되는 .env.development.local 생성 그리고 배포 환경에서 실행되는 .env.production.local 를 생성한다. 코드 상에서 참조시 process.env.API_URL 형태로 참조 next.config.js 참고: https://nextjs.org/docs/app/building-your-application/configuring/typescript#type-checking-nextconfigjs..

Reset CSS src/app/layout.tsx 위에 다음 한 줄 추가 import '/src/app/ui/globals.css'; 파일 생성하고 src/app/ui/globals.css 다음 3줄 입력 @tailwind base; @tailwind components; @tailwind utilities; 위를 추가하면 처음에 warning이 뜨는네 VS code extension에서 PostCSS Language Support 라는 extension을 설치하면 없어진다. Install 참조: https://tailwindcss.com/docs/guides/nextjs 참조: https://nextjs.org/docs/app/building-your-application/styling/tailwin..

설치 우선 기본 패키지 2개 설치 $ pnpm add eslint eslint-config-next package.json에 scripts 추가 "scripts": { ... "lint": "next lint --no-cache" }, --no-cache는 생략 가능 : 붙여줄 시 변경사항만 검사하지 않고 전체를 다시 검사하는 차이 Standard package 설치 $ pnpm add eslint-config-standard .eslintrc.json을 root에 생성하고 다음 입력 { "extends": ["next/core-web-vitals", "standard"] } ESlint config for Tailwind CSS $ pnpm add eslint-plugin-tailwindcss tail..

이번 장부터는 Apache nifi 표현 언어 가이드 2장에 이어 docs 내용의 함수부터 번역하여 기술하겠습니다. 문자열 조작 입력 유형 반환 유형 설명 예 toUpper String String 문자열을 모두 대문자로 변환합니다 "abc" => "ABC" toLower String String 문자열을 모두 소문자로 변환합니다 "ABC" => "abc" trim String String 문자열 앞뒤의 공백을 제거합니다 " 1 2 3 " => "123" substring String String 문자열의 일부를 가져옵니다 별도 작성 substringBefore String String 특정 문자열이 등장하기 전까지 가져옵니다 별도 작성 substringBeforeLast String String 특정 ..

저희 테크팀에서는 nextjs 상태관리에 대한 많은 고민 끝에 zustand를 사용하기로 하였습니다. 아래는 zustand를 사용하는 학습과정입니다. Zustand Zustand는 간단하고 빠르며 확장성 있는 상태관리 솔루션입니다. hook를 기반으로 한 편리한 API를 가지고 있어서, 보일러플레이트 코드가 없습니다. 특히 Zustand를 사용하면 기존 React 동시성, 그리고 혼합랜더러 같은 곳에서 나타나는 컨텍스트 손실 같은 일반적인 문제들을 개선하는데 도움이 많이 됩니다. 그리 어렵지않으니, 예제 코드를 통해 사용법을 살펴보겠습니다. const useBearStore = create((set) => ({ // 초기값이 0으로 설정된 bears라는 상태 속성 bears: 0, // bears를 증가..

Typescript 설정 src/app/layout.jsx 파일 이름을 .tsx로 수정하고 다시 $ npm run dev 하면 package.json에 자동으로 다음 dev. dependencies가 생성된 것을 볼 수 있다. "devDependencies": { "@types/node": "20.10.4", "@types/react": "18.2.45", "typescript": "5.3.3" } 추가로 root 폴더에 next-env.d.ts 와 tsconfig.json 이 생성된 것을 볼 수 있다. → 이 두 파일을 수정 필요없음. layout.tsx는 확장자만 tsx로 바꿨으므로 코드도 typescript로 바꿔줘야한다. 다음 코드로 수정한다. import React from "react"; im..

useRoute 컴포저블은 현재 경로를 반환한다. Vue 컴포넌트의 템플릿 내에서 $route 를 사용하여 경로에 액세스할 수 있다. 사용 예 {{ mountain.title }} {{ mountain.description }} 경로 쿼리 매개변수(예: /test?example=true 경로 안의 example)에 액세스해야 하는 경우 useRoute().params 대신 useRoute().query 을사용할 수 있다. API 동적 매개변수 및 쿼리 매개변수 외에도 useRoute() 는 현재 경로와 관련된 다음과 같은 계산된 참조도 제공한다. fullPath: 경로, 쿼리 및 해시를 포함하는 현재 경로와 연결된 인코딩된 URL hash: #으로 시작하는 URL의 디코딩된 해시 섹션 matched: 현..

useRequestURL 는 서버 측과 클라이언트 측 모두에서 작동하는 URL 객체를 반환하는 헬퍼 함수다. URL is: {{ url }} Path is: {{ url.pathname }} output URL is: http://localhost:3000/about Path is: /about

내장된 useRequestHeader 컴포저블을 사용하여 페이지, 구성요소, 플러그인 내의 수신 요청 헤더에 액세스할 수 있다. // Get all request headers const headers = useRequestHeaders() // Get only cookie request header const headers = useRequestHeaders(['cookie']) 브라우저에서 useRequestHeader 를 호출하면 빈 객체가 반환된다. 사용 예 useRequestHeaders 는 SSR 중에 초기 요청의 authorization 헤더에 액세스하고 향후 내부 요청을 프록시하는데 사용할 수 있다. 아래 예에서는 $fetch호출에 요청 헤더 authorization 을 추가한다.

페이지, 컴포넌트 및 플러그인 내에서 useRequestEvent 를 이용하여, 들어오는 요청에 액세스하는 데 사용할 수 있다. // Get underlying request event const event = useRequestEvent() // Get the URL const url = event.path 브라우저에서 userRequestEvent 를 호출하면 undefined 가 반환된다.

useNuxtData 는 useAsyncData, useLazyAsyncData, useFetch 및 useLazyFetch 에서 명시적으로 제공된 키를 이용하여 캐시된 값에 접근할 수 있다. 사용법 아래 예는 서버에서 최신 데이터를 가져오는 동안 캐시된 데이터를 placeholder 로 사용하는 방법을 보여준다. // pages/posts/[id].vue // Access to the cached value of useFetch in posts.vue (parent route) const { id } = useRoute().params const { data: posts } = useNuxtData('posts') const { data } = useLazyFetch(`/api/posts/${id}`,..