algml0703

폰트 적용하는 법 (next/font) * next13 버전 기준 nextjs에서 프로젝트에 폰트를 적용하기 위해서는 next/font를 이용하는데, next/font는 모든 폰트 파일에 대해 자동으로 자체 호스팅 기능을 내장하고 있다. 자체 호스팅 기능을 제공한다는 것은 어플리케이션에서 사용되는 폰트 파일을 서버에 업로드하고, 해당 서버에서 자체적으로 폰트를 제공한다는 것을 의미한다. 이를 통해 본래 사용자가 웹 사이트를 방문할 때마다 폰트 파일을 외부 네트워크를 통해 다운로드하여 가져와 렌더링하던 과정을 생략할 수 있게 된다, 서버에서 자체적으로 호스팅된 폰트를 이용함으로써 폰트 파일을 최적으로 로드하는 것이 가능하고, 폰트를 불러오기 위해 외부 네트워크에 요청할 필요가 사라지기 때문에, 웹사이트의 ..

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. 원인 Next.js의 경우 기본적으로 Server Components가 사용되는데, 이는 SSR(Server Side Rendering)즉 서버에서 렌더링 작업을 수행합니다. 위와 같은 에러는 Server Components에서 createContext와 같은 Client Components에서 사용되는 기능을 사용하려 했기 때문에 발생한 에러이다. Server Componen..

[ React ] - 훅(Hook) 종류와 사용법 ( useCallback ) HTML 삽입 미리보기할 수 없는 소스 useCallback은 함수를 캐싱하고, 재사용할 수 있게 해주는 훅으로, 성능 최적화를 위해 활용됩니다. useCallback은 함수를 매번 새로 생성하는 것을 막아주어 불필요한 렌더링을 줄이고 메모리 사용을 최적화시키는데 도움을 줍니다. useCallback의 경우 상위 컴포넌트에서 정의한 함수를 하위 컴포넌트에 props로 전달하여 사용시 함수를 메모리제이션함으로써, 상위 컴포넌트의 렌더링과 무관하게, 함수가 사용될 때에만 새로 생성되도록 하여 성능을 최적화하는데 도움을 줍니다. 사용법 useCallback은 기본적으로 두 개의 인자를 갖는데, 첫 번째 인자로는 콜백 함수가 들어가며..

App router란? 기존에 nextjs에서 pages 폴더를 통하여 사이트의 라우팅을 하던 방식과 달리 파일 구조에 따라 사이트의 경로를 설정하는 방식이다. npx create-next-app를 통해 nextjs 어플리케이션 프로젝트를 생성할 경우 기존의 pages router 방식에서는 pages 폴더가 존재했으나 app router 방식에서는 src/app 폴더가 존재하며, 해당 폴더의 하위에 생성되는 폴더와 파일을 기준으로 사이트의 경로가 설정된다. 더불어 src/app 폴더의 하위에 기본적으로 layout.tsx 파일과 page.tsx 파일이 존재하는데, 파일명을 보면 알 수 있듯이 layout.tsx파일은 레이아웃을 정의하는 파일이며, page.tsx 파일은 사용자가 실질적으로 사이트의 루..

간편한 테스트 코드 작성을 도와주는 도구이다. 우선은 npm이나 yarn을 이용하여 jest를 설치하여 준다. > npm i jest --save-dev // 타입스크립트로 하는 경우에는 타입도 추가해주어야 한다. > npm i --save-dev @types/jest 기본 코드를 작성하여 준다. 위의 코드를 테스트하기 위해 테스트 파일을 생성하는데, 기본 코드 파일명.test 로 생성한다. .test.로 된 파일은 모두 테스트 대상이 된다. 또는 _ _tests_ _ 로 폴더를 생성하고 하위에 파일을 생성하면, 해당 폴더 하위의 파일이 테스트 대상이 된다. 직접 설정한 파일만 테스트 하고 싶은 경우에는 test 실행을 위한 명령어 입력 시에 경로를 입력해주면 된다.

1. 라이브러리 추가 # npm > npm i react-query # yarn > yarn add react-query 2. App.tsx 설정 react-query를 전역에서 사용할 수 있도록 하기 위해 App컴포넌트를 provider로 감싸준다. App.tsx import React from "react"; import "./App.css"; import Home from "./pages/Home"; import { QueryClientProvider, queryClient } from "react-query"; function App() { // const queryClient = new QueryClient({ defaultOptions: {}, }); return ( ); } export de..

[ React ] - 훅(Hook) 종류와 사용법 ( useContext / useMemo ) HTML 삽입 미리보기할 수 없는 소스 react에서 컴포넌트 간 상태 공유를 위해 사용되는 props는 기본적으로 상위컴포넌트에서 하위 컴포넌트로 내려주는 형태이다. 이는 만일 A -> B -> C 로, A 컴포넌트에 B 컴포넌트가 속하고 B 컴포넌트에 C컴포넌트가 속하는 상황에서 A컴포넌트에 있는 props를 C컴포넌트에서 사용하기 위해 해당 props가 B 컴포넌트에서 필요하지 않음에도 불구하고, B 컴포넌트에서도 props로 넘겨받고 내려주는 불필요한 코드를 작성하게 한다. 이러한 불필요한 코드 작성을 줄이기 위해 사용되는 것이 useContext() hook이다. useContext()는 프로젝트 내에..

훅(Hook) 종류와 사용법 ( useState / useEffect ) Hook이란? React 16.8에 새롭게 추가된 것으로, 공식 문서에 따르면 react의 state 관리와 다른 기능을 사용하기 편리하게 만들어준 메서드이다. HTML 삽입 미리보기할 수 없는 소스 useState의 경우 특정 값을 저장하고 해당 값을 변경하는 함수를 반환하여 주는 역할을 하는 react hook이다. (기본적으로 해당 state의 값이 변경되면 리렌더링이 이루어진다.) ex) useState 활용 예시 useState에서 state변경 함수를 통해 state를 변경할 때에 주의점은 기존의 state값과 변경하려는 state의 값이 같으면 메모리 절약을 위해 state가 변경되지 않고, 즉 렌더링이 발생하지 않는다..

React 리엑트는 SPA로서, 독립적이며 재사용이 가능한 UI 컴포넌트를 통해 화면이 구성된다. 기존에 웹사이트 구현 방식이 HTML, CSS, Javascript가 별도로 구분되어 관리되던 형태인 반면, 컴포넌트 기반인 리엑트는 HTML, CSS, Javascript를 컴포넌트 단위로 묶어 함께 관리하는 것이 특징이다. HTML 삽입 미리보기할 수 없는 소스 기존 MPA 형태의 사이트는 서버로부터 완성된 페이지를 받아 구현되는데, 리엑트는 처음의 요청에 해당 사이트에 존재하는 모든 페이지 구헌에 필요한 데이터를 서버로부터 받아 브라우저가 그 데이터들을 조합하여 사용자 UI를 구현한다. 이후에 추가 사용자 요청이 있는 경우에는 서버에 json 형식의 데이터만을 요청하고 응답받아, 기존의 UI에 데이터를..

map과 filter 응용 HTML 삽입 미리보기할 수 없는 소스 map은 기본적으로 배열의 내장 함수로 존재하여 아래와 같이 작동할 수 있다. 그런데 아래의 코드를 실행하면 에러가 발생하여 실행되지 않는데, 이는 querySelectorAll()로 생성된 것은 배열이 아닌 이터레이터객체이기 때문이다. 그렇기 때문에 배열의 내장함수인 map이 존재하지 않아 에러가 발생한다. log(document.querySelectorAll("*").map((e) => a + 1)); 이런 경우 아래의 코드와 같이 for of를 사용하여 직접 map 함수를 만들어 사용할 수 있다. const map = (f, products) => { let names = []; for (const a of products) { n..