next.js
-
Next.js와 Tailwind CSS는 현재 웹 개발에서 매우 인기 있는 기술들입니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 웹 애플리케이션의 성능과 SEO를 향상시킬 수 있습니다. Tailwind CSS는 기본 CSS를 대체하는 유틸리티 기반의 CSS 프레임워크로, 간결한 클래스명으로 쉽게 스타일을 적용할 수 있습니다. 이번 글에서는 Next.js와 Tailwind CSS를 함께 사용하는 방법에 대해 자세히 알아보겠습니다. 목차 Next.js 소개와 기본 개념 Next.js란 무엇인가? 서버 사이드 렌더링이란? 정적 사이트 생성이란? Tailwind CSS 소개와 기본 개념 Tailwind CSS란 무엇인가? 유틸리티 기반의 스타일링이란? ..
Next.js와 Tailwind CSS 적용하기Next.js와 Tailwind CSS는 현재 웹 개발에서 매우 인기 있는 기술들입니다. Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 지원하여 웹 애플리케이션의 성능과 SEO를 향상시킬 수 있습니다. Tailwind CSS는 기본 CSS를 대체하는 유틸리티 기반의 CSS 프레임워크로, 간결한 클래스명으로 쉽게 스타일을 적용할 수 있습니다. 이번 글에서는 Next.js와 Tailwind CSS를 함께 사용하는 방법에 대해 자세히 알아보겠습니다. 목차 Next.js 소개와 기본 개념 Next.js란 무엇인가? 서버 사이드 렌더링이란? 정적 사이트 생성이란? Tailwind CSS 소개와 기본 개념 Tailwind CSS란 무엇인가? 유틸리티 기반의 스타일링이란? ..
2023.08.04 -
서문 Next.js는 개발자들이 React를 사용하여 현대적이고 효율적인 웹 애플리케이션을 빠르게 구축할 수 있게 해주는 인기 있는 프레임워크입니다. Next.js의 라우팅 시스템은 애플리케이션 내에서 다양한 페이지 간의 이동을 가능하게 해줍니다. asPath, query, 그리고 route는 Next.js 라우터의 중요한 개념입니다. 이 기사에서는 이들의 차이점과 각각의 용도에 대해 자세히 알아보겠습니다. 목차 Next.js 라우터 개요 asPath 소개 query 소개 route 소개 asPath와 query의 차이점 asPath와 route의 차이점 query와 route의 차이점 asPath, query, 그리고 route의 사용 사례 주의할 점 결론 자주 묻는 질문 (FAQ) 1. Next.js..
Next.js Router asPath, query, and route: 차이서문 Next.js는 개발자들이 React를 사용하여 현대적이고 효율적인 웹 애플리케이션을 빠르게 구축할 수 있게 해주는 인기 있는 프레임워크입니다. Next.js의 라우팅 시스템은 애플리케이션 내에서 다양한 페이지 간의 이동을 가능하게 해줍니다. asPath, query, 그리고 route는 Next.js 라우터의 중요한 개념입니다. 이 기사에서는 이들의 차이점과 각각의 용도에 대해 자세히 알아보겠습니다. 목차 Next.js 라우터 개요 asPath 소개 query 소개 route 소개 asPath와 query의 차이점 asPath와 route의 차이점 query와 route의 차이점 asPath, query, 그리고 route의 사용 사례 주의할 점 결론 자주 묻는 질문 (FAQ) 1. Next.js..
2023.07.07 -
소개 라우팅은 웹 애플리케이션 개발에서 중요한 요소입니다. 사용자가 다른 URL로 이동할 때 적절한 페이지를 표시하는 것은 웹 애플리케이션의 사용성과 경험에 큰 영향을 미칩니다. Next.js useRouter는 Next.js 프레임워크에서 제공하는 강력한 라우팅 도구입니다. 이 도구를 사용하면 Next.js 애플리케이션에서 손쉽게 라우팅을 구현할 수 있습니다. 이 기사에서는 next.js useRouter의 기능과 사용법에 대해 자세히 살펴보겠습니다. 목차 Next.js란? useRouter 소개 useRouter의 주요 기능 useRouter를 사용한 동적 라우팅 useRouter를 사용한 쿼리 파라미터 처리 useRouter를 사용한 페이지 리다이렉션 useRouter의 추가 기능 useRouter..
next.js useRouter: 모든 라우팅 니즈를 충족시키는 도구소개 라우팅은 웹 애플리케이션 개발에서 중요한 요소입니다. 사용자가 다른 URL로 이동할 때 적절한 페이지를 표시하는 것은 웹 애플리케이션의 사용성과 경험에 큰 영향을 미칩니다. Next.js useRouter는 Next.js 프레임워크에서 제공하는 강력한 라우팅 도구입니다. 이 도구를 사용하면 Next.js 애플리케이션에서 손쉽게 라우팅을 구현할 수 있습니다. 이 기사에서는 next.js useRouter의 기능과 사용법에 대해 자세히 살펴보겠습니다. 목차 Next.js란? useRouter 소개 useRouter의 주요 기능 useRouter를 사용한 동적 라우팅 useRouter를 사용한 쿼리 파라미터 처리 useRouter를 사용한 페이지 리다이렉션 useRouter의 추가 기능 useRouter..
2023.07.06 -
Confirm Password * { if (watch('password') != val) { return 'Your passwords do no match'; } }, })} /> {errors.confirm_password?.type === 'required' && ( Confirm Password is required )} {errors.confirm_password?.type === 'validate' && ( Confirm Password is not same Password )} React Hook Form은 React 애플리케이션에서 폼을 만들고 유효성을 검사하기 위한 간편한 방법을 제공하는 인기 있는 라이브러리입니다. 그러나 때로는 React Hook Form을 사용하는 동안 발생할 수 있..
React Hook Form Validate Error MessageConfirm Password * { if (watch('password') != val) { return 'Your passwords do no match'; } }, })} /> {errors.confirm_password?.type === 'required' && ( Confirm Password is required )} {errors.confirm_password?.type === 'validate' && ( Confirm Password is not same Password )} React Hook Form은 React 애플리케이션에서 폼을 만들고 유효성을 검사하기 위한 간편한 방법을 제공하는 인기 있는 라이브러리입니다. 그러나 때로는 React Hook Form을 사용하는 동안 발생할 수 있..
2023.06.15 -
인터넷의 발전으로 인해 웹 애플리케이션의 수요가 늘어나면서, 사용자 관리는 중요한 요소가 되었습니다. 개발자들은 사용자를 등록하고 관리하는 방법에 대해 고민하고 있습니다. 이를 위해 Strapi라는 오픈 소스 헤드리스 CMS(Content Management System)를 사용할 수 있습니다. Strapi는 사용자 등록, 인증 및 권한 부여를 간편하게 처리해주는 강력한 기능을 제공합니다. 이 글에서는 Strapi를 사용하여 새로운 사용자를 등록하는 방법에 대해 알아보겠습니다. 1. Strapi 소개 Strapi는 사용자 친화적인 인터페이스와 함께 완전한 기능을 갖춘 헤드리스 CMS입니다. 헤드리스 CMS란, 프론트엔드와 백엔드를 완전히 분리하여 개발자가 데이터와 콘텐츠를 관리할 수 있는 방식을 의미합니..
Strapi Register new Users (회원가입)인터넷의 발전으로 인해 웹 애플리케이션의 수요가 늘어나면서, 사용자 관리는 중요한 요소가 되었습니다. 개발자들은 사용자를 등록하고 관리하는 방법에 대해 고민하고 있습니다. 이를 위해 Strapi라는 오픈 소스 헤드리스 CMS(Content Management System)를 사용할 수 있습니다. Strapi는 사용자 등록, 인증 및 권한 부여를 간편하게 처리해주는 강력한 기능을 제공합니다. 이 글에서는 Strapi를 사용하여 새로운 사용자를 등록하는 방법에 대해 알아보겠습니다. 1. Strapi 소개 Strapi는 사용자 친화적인 인터페이스와 함께 완전한 기능을 갖춘 헤드리스 CMS입니다. 헤드리스 CMS란, 프론트엔드와 백엔드를 완전히 분리하여 개발자가 데이터와 콘텐츠를 관리할 수 있는 방식을 의미합니..
2023.06.14 -
웹페이지 최적화하기 위해서 하는 방법 중에 하나인 Lazy Loading. 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략으로 페이지 리소스를 줄여 페이지 로드 시간이 단축된다. Lazy Loading이란? https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading Lazy loading - Web performance | MDN Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical renderi..
dynamic import (lazy loading, code Splitting)웹페이지 최적화하기 위해서 하는 방법 중에 하나인 Lazy Loading. 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략으로 페이지 리소스를 줄여 페이지 로드 시간이 단축된다. Lazy Loading이란? https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading Lazy loading - Web performance | MDN Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical renderi..
2023.05.19 -
useRef란? useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다. 공홈 참조 https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref scrollIntoView() scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수..
리액트 (use)Ref 스크롤 이벤트useRef란? useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다. 공홈 참조 https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref scrollIntoView() scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수..
2023.04.23 -
리액트로 간단한 환율 계산기로 만들어보고 싶었다. 그래서 환율 관련한 API가 필요로 했는데, 실시간 갱신되는 API는 유료이거나 무료면 API 호출수에 제한이 있거나 REST API 필터 기능에 제한이 있는 등 제한 사항이 많았다. (혹시 괜찮은 환율 무료 API가 있다면 댓글로 추천 부탁드려요) 그래서 실시간 갱신되는 것을 포기하고 하루에 한번만 갱신되는 Gihhub API를 구글 검색 찾았다. 물론 무료 API이고 하루에 몇번을 호출해도 제한이 없다. 하루에 한번씩 json 파일을 갱신한다. 다음은 응답 값인데, 업데이트 날짜와 환율 결과 값이 표기된다. (심지어 코인도 있다) 예시(유로 => 달러) https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/..
리액트로 환율 계산기 만들어보기 (무료 환율 API)리액트로 간단한 환율 계산기로 만들어보고 싶었다. 그래서 환율 관련한 API가 필요로 했는데, 실시간 갱신되는 API는 유료이거나 무료면 API 호출수에 제한이 있거나 REST API 필터 기능에 제한이 있는 등 제한 사항이 많았다. (혹시 괜찮은 환율 무료 API가 있다면 댓글로 추천 부탁드려요) 그래서 실시간 갱신되는 것을 포기하고 하루에 한번만 갱신되는 Gihhub API를 구글 검색 찾았다. 물론 무료 API이고 하루에 몇번을 호출해도 제한이 없다. 하루에 한번씩 json 파일을 갱신한다. 다음은 응답 값인데, 업데이트 날짜와 환율 결과 값이 표기된다. (심지어 코인도 있다) 예시(유로 => 달러) https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/..
2023.04.17 -
Next.js Dynamic Import(동적 가져오기): 성능 및 사용자 경험 개선 웹 개발 세계에서 성능과 사용자 경험은 성공적인 웹 사이트를 위한 두 가지 중요한 요소입니다. 인기 있는 React 기반 프레임워크인 Next.js는 개발자가 동적 가져오기를 사용할 수 있도록 하여 두 가지 모두를 향상시키는 솔루션을 제공합니다. 이 기사에서는 Next.js 동적 가져오기를 살펴보고 이것이 웹사이트 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 살펴보겠습니다. Next.js Dynamic Import 무엇인가? Next.js 동적 가져오기는 개발자가 모든 것을 미리 로드하는 대신 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하는 기능입니다. 코드 분할이 가능하므로 필요할 때 코드의 필요한 부분..
Next.js Dynamic Import 어떻게 사용할까?Next.js Dynamic Import(동적 가져오기): 성능 및 사용자 경험 개선 웹 개발 세계에서 성능과 사용자 경험은 성공적인 웹 사이트를 위한 두 가지 중요한 요소입니다. 인기 있는 React 기반 프레임워크인 Next.js는 개발자가 동적 가져오기를 사용할 수 있도록 하여 두 가지 모두를 향상시키는 솔루션을 제공합니다. 이 기사에서는 Next.js 동적 가져오기를 살펴보고 이것이 웹사이트 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 살펴보겠습니다. Next.js Dynamic Import 무엇인가? Next.js 동적 가져오기는 개발자가 모든 것을 미리 로드하는 대신 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하는 기능입니다. 코드 분할이 가능하므로 필요할 때 코드의 필요한 부분..
2023.03.26 -
Next.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다. .env.local을 사용하여 환경 변수 불러옴 NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 * 환경변수(Environment Variables)란 무엇이고, 사용하는 이유? 환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이..
Nexet.js Environment VariablesNext.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다. .env.local을 사용하여 환경 변수 불러옴 NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 * 환경변수(Environment Variables)란 무엇이고, 사용하는 이유? 환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이..
2023.02.26 -
Next.js Image 컴포넌트 Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다. 따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다. import Image from 'next/image' ... https://nextjs.org/docs/api-reference/next/i..
Next.js Image 100% 사이즈Next.js Image 컴포넌트 Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다. 따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다. import Image from 'next/image' ... https://nextjs.org/docs/api-reference/next/i..
2023.02.11 -
에러 Context API를 이용하여 state를 전역관리하고 있다. 그런데 router.push를 이용하면 state 업데이트가 공유가 되지 않고 있다. 혹은 새로 고침시에도 state가 찾을 수 없다고 한다. 해결방법 이럴 때는 localStorage을 활용해보자. 리액트 사용자는 localStorage를 custom Hook, utils, Context API와 결합하여 사용할 수도 있다. 혹은 중요한 정보는 SessionStorage을 활용하자 *localStorage : 데이터를 사용자 로컬에 보존하는 방식으로, 데이터를 저장하고 덮어쓰기, 삭제 등 자바스크립트로 조작이 가능하며, 모바일에서 사용이 가능하다. *SessionStorage : 로컬스토리지는 브라우저 창을 닫더라도 데이터가 유지되는..
Context API refresh(새로고침)시 State undefined 에러에러 Context API를 이용하여 state를 전역관리하고 있다. 그런데 router.push를 이용하면 state 업데이트가 공유가 되지 않고 있다. 혹은 새로 고침시에도 state가 찾을 수 없다고 한다. 해결방법 이럴 때는 localStorage을 활용해보자. 리액트 사용자는 localStorage를 custom Hook, utils, Context API와 결합하여 사용할 수도 있다. 혹은 중요한 정보는 SessionStorage을 활용하자 *localStorage : 데이터를 사용자 로컬에 보존하는 방식으로, 데이터를 저장하고 덮어쓰기, 삭제 등 자바스크립트로 조작이 가능하며, 모바일에서 사용이 가능하다. *SessionStorage : 로컬스토리지는 브라우저 창을 닫더라도 데이터가 유지되는..
2022.07.17 -
다국어 지원을 위해서 i18n 라이브러리를 사용하게 되는데, 기존 리액트만 쓰게 될 경우 react-i18next 라이브러리를 많이 사용하게 된다. 다만 Next.js 를 쓰게 될 경우에는 react-i18next 도 사용 가능하지만 SSR(Server side Rendering)을 하려고 한다면 next-i18next 사용을 권장한다. 라이브러리 https://github.com/isaachinman/next-i18next 폴더 구조 폴더 구조는 라이브러리 샘플(https://github.com/isaachinman/next-i18next/tree/master/examples/simple) 예시 기준으로 작성하였다. 임의로 바꿔도 상관은 없다. 1. 먼저 해당 라이브러리를 설치 yarn add next..
next-i18next 설치 및 사용법다국어 지원을 위해서 i18n 라이브러리를 사용하게 되는데, 기존 리액트만 쓰게 될 경우 react-i18next 라이브러리를 많이 사용하게 된다. 다만 Next.js 를 쓰게 될 경우에는 react-i18next 도 사용 가능하지만 SSR(Server side Rendering)을 하려고 한다면 next-i18next 사용을 권장한다. 라이브러리 https://github.com/isaachinman/next-i18next 폴더 구조 폴더 구조는 라이브러리 샘플(https://github.com/isaachinman/next-i18next/tree/master/examples/simple) 예시 기준으로 작성하였다. 임의로 바꿔도 상관은 없다. 1. 먼저 해당 라이브러리를 설치 yarn add next..
2021.01.04