Per ardua ad astra.

- [Next.js] <Link> 컴포넌트 클릭 시, 최상단으로 스크롤 되는 현상 막는 방법

컴포넌트 클릭 시, 최상단으로 스크롤 되는 현상 막는 방법들어가며Next.js의 @@ 컴포넌트를 클릭하면, 기본적으로 화면의 최상단으로 스크롤이 된다.이러한 현상을 막는 방법을 정리해본다. 방법간단하다. 다음과 같이 @@ 컴포넌트의 @scroll@ 속성의 값을 @false@로 지정해주면 된다.import Link from 'next/link'; Move 참고 사이트 | Next.js" data-og-description="Enable fast client-side navigation with the built-in `next/link` component." data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/app/api-refe..

Contentful들어가며Headless CMS 중 하나인 Contentful 서비스에 대하여 정리해본다. Contentful개념2013년 독일 베를린에서 만들어진  Headless CMS(Content Management System, 컨텐츠 관리 시스템) 서비스현재 Spotify, Red Bull, IKEA 등 굵직한 글로벌 기업들이 이 서비스를 이용하고 있다.프론트엔드와 백엔드(컨텐츠 저장 및 관리)가 결합된 구조와 달리, 프론트엔드와 백엔드가 분리된 형태의 컨텐츠 관리 시스템이다. Content that takes you everywhereBusiness moves faster when teams producing content have a platform that empowers them to ..

Expo CLI vs. React Native CLI들어가며리액트 네이티브(React Native) 프로젝트 생성 방법으로 Expo CLI 와 React Native CLI 방법 2가지가 있다.이 두 방법의 차이점을 간단하게 정리해본다. Expo CLI개념리액트 네이티브로 앱을 개발할 때 사용되는 도구프로젝트 생성, 관리, 실행을 간단하게 해주는 명령줄 인터페이스(Command Line Interface)리액트 네이티브 프로젝트를 생성할 때 기본적으로 권장되는 접근 방식 새 프로젝트 생성하기$ npx create-expo-app@latest # 새 프로젝트 생성 주요 특징기본 템플릿을 제공하여 초기 설정 없이 바로 앱 개발 시작 가능카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 쉽게 사용할 ..

React Hook Form 라이브러리들어가며리액트(React.js) 애플리케이션에서 폼(Form)의 상태 관리를 쉽게 해주는 라이브러리인 React Hook Form에 대해 정리해본다. React Hook Form개념리액트 애플리케이션에서 폼(Form)의 상태를 관리해주는 라이브러리간단하고 효율적이며 퍼포먼스가 뛰어나다.리액트의 훅(Hook)을 활용하여 사용하며, 폼 상태 관리를 위한 기본적인 기능과 유효성 검증(Validation) 기능을 제공한다. React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-..

Auth0들어가며인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Auth0 서비스에 대해 정리해본다.이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다. Auth0개념사용자가 애플리케이션의 인증 및 권한 관리를 간단하고 안전하게 구현할 수 있도록 지원하는 인증 및 권한 관리 플랫폼개발자는 Auth0를 이용하여 복잡한 인증 시스템을 직접 개발하지 않아도 되고, 다양한 인증 방식을 쉽게 통합할 수 있다. 주요 특징다양한 인증 방식 지원이메일/비밀번호소셜 로그인 (Google, Facebook, GitHub, Twitter 등)다중 인증(Multi Factor Authentication)SSO(Single Sign-On)Passwor..

FusionCharts 라이브러리들어가며자바스크립트(JavaScript)의 FusionCharts 라이브러리에 대해 정리해본다. FusionCharts개념웹 기반 대시보드와 데이터 시각화를 위한 자바스크립트(JavaScript) 차트 라이브러리개발자와 기업이 다양한 형태의 데이터를 차트, 그래프, 게이지(Gauge), 지도 등으로 시각화 할 수 있다.무료 및 유료 플랜이 있어 프로젝트의 필요에 따라 선택 가능하다.공식 홈페이지 : JavaScript charts for web & mobile | FusionCharts 특징선 차트, 파이 차트, 게이지, 히트맵 등 100개 이상의 차트 유형 지원복잡한 비즈니스 대시보드나 보고서를 쉽게 만들 수 있다.모든 차트는 반응형 디자인이 적용되어 모바일, 태블릿, ..

헤더에 인증 정보 추가하는 방법들어가며Axios를 사용하여 헤더에 인증(Authorization) 정보를 추가하는 방법을 정리해본다.이 글은 리액트(React) 코드로 작성되었다. 방법① 파일에 인증 헤더 부분 추가하기API 호출을 하고자 하는 파일 안에 인증 정보를 담은 변수를 생성하여 추가하는 방법이다.// 인증 정보를 담은 변수const authHeader = (thunkAPI) => { return { headers: { authorization: `Bearer ${thunkAPI.getState().user.user.token}`, }, };};export const createJobThunk = async (job, thunkAPI) => { try { const..

객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식들어가며리덕스 툴킷(Redux Toolkit, RTK)의 객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식에 대해 정리해본다. 객체 표기법(Object Notation) 방식 vs. 빌더 콜백 표기법(Builder Callback Notation) 방식RTK 버전 1.6.0 이상부터 기존의 객체 표기법(Object Notation) 방식에서 빌더 콜백 표기법(Bulder Callback Notation) 방식으로 작성해야 한다.기존의 객체 표기법은 더 이상 사용되지 않는다. 객체 표기법(Object Notation)..

.js 파일에서 Uncaught SyntaxError: Unexpected token '들어가며@.js@ 파일에서 @Uncaught SyntaxError: Unexpected token '이 문제는 Vite로 만든 프로젝트에 발생하는 문제이다.  문제 발생 상황@/src/utils/links.js@ 파일에서 컴포넌트(Component)가 @value@로 들어 있는 @key@가 들어 있는 객체를 외부 컴포넌트에서 import 하여 사용하려고 할 때, 다음과 같은 오류가 발생하였다. /src/utils/links.js@icon@ 키의 값을 외부 컴포넌트에서 불러올 때 위와 같은 오류가 발생하였다.const links = [ { id: 1, text: 'stats', path: '/', ..

컴포넌트와 컴포넌트 비교 (React Router)들어가며리액트 라우터(React Router)에서 @@ 컴포넌트와 @@ 컴포넌트의 차이점에 대해 정리해본다.  컴포넌트개념리액트 라우터에서 제공하는 가장 기본적인 링크(Link) 컴포넌트특정 경로로 이동할 수 있는 내비게이션 링크를 생성한다.HTML의 @@ 태그와 유사하지만, 페이지 새로고침 없이 SPA(Single Page Application) 내에서 라우팅을 처리한다. 특징페이지를 새로 고침하지 않고, 클라이언트 측 라우팅을 수행한다.단순한 라우팅에 적합하다.선택된 상태에 따른 스타일링 기능은 없다. 사용 예시 코드import { Link } from "react-router-dom";function App() { return ( ..

리덕스(Redux), 리덕스 툴킷(Redux Toolkit)들어가며리액트(React.js)의 전역 상태 관리 라이브러리 중의 하나인 리덕스(Redux)와 리덕스 툴킷(Redux Toolkit)에 대해 정리해본다.  리덕스(Redux)개념자바스크립트 애플리케이션에서 상태 관리를 위해 사용되는 상태 컨테이너애플리케이션의 상태를 중앙에서 관리함으로써 상태 변화를 쉽게 추적하고, 디버깅을 단순화하며, 다양한 컴포넌트 간에 상태를 공유하는 것을 쉽게 해준다.리덕스를 사용하기 위해서는 아래의 명령을 실행하여 관련 패키지를 설치해준다.$ yarn add redux # npm install redux$ yarn add react-redux # npm install react-redux  리덕스..

모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법 (normalize.css)들어가며모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법에 대해 정리해본다. 방법normalize.css 사용하기normalize.css@normalize.css@는 다양한 브라우저에서 HTML 요소의 스타일을 일관되게 보이도록 만들어주는 CSS 파일이다.웹 브라우저마다 기본 스타일이 다르게 적용되기 때문에, 웹 페이지가 각각 다른 브라우저에서 다르게 보일 수 있다.이러한 불일치를 해결하기 위해 @normalize.css@는 각 브라우저의 기본 스타일을 초기화하거나 표준화하여, 웹 페이지가 어디서든 일관되게 보이도록 해준다.@normalize.css@는 모든 기본 스타일을 제..

Recharts 라이브러리들어가며리액트(React) 기반의 데이터 시각화 라이브러리인 Recharts에 대해 정리해본다. Recharts개념리액트(React) 기반의 데이터 시각화 라이브러리다양한 차트를 쉽게 생성하고 데이터를 시각적으로 표현할 수 있도록 도와준다.선언형 방식으로 리액트와 잘 맞으며, 그래프를 구성하는 데 필요한 여러 컴포넌트를 제공해 직관적으로 차트를 구성할 수 있도록 도와준다. 특징리액트 컴포넌트를 사용하여 차트를 구성하므로, 리액트의 상태(State)와 속성을 활용해 동적으로 차트를 업데이트할 수 있다.Recharts는 내부적으로 D3.js 라이브러리를 활용하여 차트를 렌더링한다.D3.js의 강력하고 다양한 기능을 리액트 컴포넌트 형태로 간편하게 사용할 수 있다.차트를 구성하는 요소..

PropsWithChildren들어가며리액트(React.ts)에서 사용할 수 있는 @PropsWithChildren@ 타입에 대해 정리해본다.이 타입은 리액트와 타입스크립트를 함께 사용할 때 사용할 수 있다. PropsWithChildren개념타입스크립트(TypeScript)에서 리액트 컴포넌트에 자식 요소(@children@)를 허용하고자 할 때 사용하는 유틸리티 타입보통 컴포넌트에 전달되는 기본 @props@ 외에도 자식 요소를 포함할 수 있을 때 유용하게 사용된다.@PropsWithChildren@ 타입은 컴포넌트가 자식 요소를 가질 수 있도록 명시하며, @children@을 명시적으로 정의하지 않고도 사용할 수 있도록 해준다. 사용 예제import { PropsWithChildren } from ..

const Component vs. function Component들어가며리액트(React.js)에서 @const Component@ 형태의 화살표 함수 방식과 @function Component@ 형태의 함수 선언 방식으로 컴포넌트를 선언할 수 있다.위의 두 가지 방법에 대한 차이점을 정리해본다. ① 화살표 함수 방식const MyComponent = () => { return( .. )} 화살표 함수(Arrow Function)로 작성할 수 있으며, 짧은 코드로 작성할 수 있다는 장점이 있다.예를 들어, 한 줄로 반환하는 경우, @return@ 키워드를 생략할 수 있다.const MyComponent = () => ( ... ) 컴포넌트 선언과 동시에 @export default..

React Share 라이브러리들어가며React Share 라이브러리에 대해 정리해본다. React Share개념리액트 애플리케이션에서 다양한 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 해주는 라이브러리여러 소셜 미디어 플랫폼에 링크를 공유할 수 있는 버튼을 제공하며, 간단한 설정을 통해 버튼을 커스터마이징할 수 있다. 주요 특징간단하게 설치할 수 있다.필요한 소셜 미디어 공유 버튼을 컴포넌트로 불러와 사용할 수 있다.버튼의 크기, 모양, 스타일을 쉽게 커스터마이징할 수 있으며, SVG 아이콘을 사용하여 스타일을 자유롭게 변경할 수 있다.다양한 소셜 미디어 플랫폼을 지원한다.Facebook, X(Twitter), LinkedIn, Pinterest, Telegram, WhatsApp, Line, R..

환경 변수 사용 방법들어가며Next.js에서 환경 변수(Environment Variable)를 사용하는 방법을 정리해본다. 방법① 환경 변수 파일 설정하기Next.js는 @.env@ 파일을 통해 환경 변수를 불러올 수 있다.프로젝트 최상위 경로(@/@)에 다음과 같은 @.env@ 파일을 생성한다. /.env.localNEXT_PUBLIC_API_URL=https://api.example.comAPI_SECRET_KEY=your-secret-key ⇒ 다음과 같이 @.env@뒤에 용도에 따라 다양한 접미어를 붙일 수 있다. 환경변수 파일명설명@.env.local@로컬 개발 환경에서 사용하는 환경 변수 (Git에 추가하지 않는 것이 좋다.)@.env.development@개발 환경에서 사용하는 환경 변수@..

Clerk들어가며Next.js 애플리케이션에서 인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Clerk 서비스에 대해 정리해본다.이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다. Clerk개념Next.js 애플리케이션에서 인증(Authentication) 및 사용자 관리 기능을 쉽게 구현할 수 있도록 돕는 서비스소셜 로그인, 멀티팩터 인증(MFA), 세션 관리 등을 기본 제공한다.Next.js의 서버리스 환경과도 잘 맞기 때문에 API 라우트와 미들웨어에서 유용하게 사용된다.Clerk을 이용하면 쉽게 소셜 로그인(Google, Facebook, GitHub 등) 기능을 구현할 수 있다.  회원가입 및 프로젝트 생성 Cler..

use-debounce 패키지들어가며리액트(React.js)와 Next.js 같은 환경에서 컴포넌트가 자주 업데이트 되지 않도록 해주는 @use-debounce@ 패키지에 대해 정리해본다. use-debounce개념리액트(React.js)와 Next.js 같은 환경에서 컴포넌트가 자주 업데이트되지 않도록 특정 동작을 디바운스(Debounce) 하기 위해 사용할 수 있는 유틸리티 훅사용자가 입력을 빠르게 반복할 때 불필요한 리렌더링이나 API 호출을 방지하는 데 유용하다. 디바운스(Debounce)사용자가 마지막으로 발생한 이벤트 이후, 일정 시간 동안 추가 이벤트가 발생하지 않았을 때만 함수를 실행하는 패턴주로 API 요청이나 리소스가 많이 필요한 이벤트 처리에 사용된다.검색창에서 사용자가 입력할 때마다..

antd 컴포넌트 라이브러리들어가며리액트(React.js) 기반의 UI 컴포넌트 라이브러리 중 하나인 antd(Ant Design)에 대해 정리해본다. Ant Design(antd)개념알리바바 그룹이 만든 리액트(React.js) 기반의 UI 컴포넌트 라이브러리디자인 일관성을 유지하면서 생산성을 높이는 것을 목표로 만들어졌으며, 기업용 시스템 개발에 많이 사용된다.주로 관리 시스템, 대시보드, 기업용 웹 애플리케이션 개발에 적합하다. 주요 특징버튼, 입력 필드, 테이블, 모달, 폼, 차트 등 다양한 UI 컴포넌트를 제공한다.@@, @@, @@, @@, @@, @@대부분의 컴포넌트가 미리 스타일링되어 있어, 최소한의 설정으로 빠르게 개발 가능하다.디자인 가이드라인을 따르며, 여러 컴포넌트를 조합해도 통일된..

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며@antd@ 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(@컴포넌트명.style.js@)이나 컴포넌트 파일(@컴포넌트명.js/jsx/tsx@)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)` 속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

shadcn/ui들어가며간단하게 복사 & 붙여넣기로 사용할 수 있는 shadcn/ui에 대해 정리해본다. shadcn/ui개념다양한 웹 애플리케이션 개발에 사용할 수 있는 접근 가능하고 커스터마이즈 가능한 UI 컴포넌트 모음일반적인 라이브러리와는 다르게 npm 패키지로 설치하는 대신, 사용자가 필요한 컴포넌트를 복사해서 직접 프로젝트에 붙여넣는 방식으로 사용한다.불필요한 의존성을 피할 수 있고, 자신만의 커스텀 컴포넌트 라이브러리를 구축할 수 있다.리액트(React.js)를 기반으로 작성되었고, Tailwind CSS 및 Radix UI와 같은 오픈 소스 기술들을 적극적으로 활용하여 만들어졌다.Next.js와 같은 프레임워크와 잘 통합되도록 설계되었다.MIT 라이센스로 공개되어 있어 누구나 자유롭게 수정..

폴더 구조 및 동적 경로 설정하기들어가며Next.js를 이용하여 폴더 구조 및 동적 경로를 설정하는 방법을 정리해본다. 방법① 비공개 폴더(Private Folder) 생성하기앱(@app@) 폴더는 기본적으로 URL 세그먼트가 된다.비공개 폴더(Private Folder)를 만들고 싶을 경우, 폴더 이름 앞에 밑줄(@_@)을 추가한다._css ⇒ @_css@ 폴더 생성 시, 해당 폴더는 URL 세그먼트로 노출되지 않으며, 만약 해당 경로에 접속할 경우 404 페이지를 반환한다. 비공개 폴더는 라우팅에 직접 포함되지 않는 폴더이다.일반적으로 내부 관리 목적으로 사용된다.  ② 라우트 그룹(Route Group) 생성하기라우트 그룹(Route Group)은 특정 페이지나 경로를 그룹화한다.이러한 그룹의 이름..

일반 CSS와 CSS Module 비교들어가며리액트(React.js)에서 CSS Module과 일반 CSS의 차이점에 대해 정리해본다.두 방식의 큰 차이점은 CSS 클래스의 범위(Scope)와 이름 충돌 방지이다 일반 CSS 방식일반적으로 사용되는 CSS는 전역적으로 동작한다.스타일 시트에서 정의된 클래스 이름이 프로젝트의 모든 컴포넌트에 영향을 미칠 수 있다.모든 컴포넌트는 같은 CSS 파일을 참조할 수 있고, 클래스 이름이 겹치면 스타일이 덮어씌워질 가능성이 있다. HomePage.css.button { background-color: blue; color: white;} HomePage.jsximport './HomePage.css';const HomePage = () => { return (..

caseReducers (Redux Toolkit) 속성들어가며리덕스 툴킷(Redux Toolkit)의 @caseReducers@ 속성에 대해 정리해본다.이 속성을 이용하면 슬라이스 내의 개별 리듀서 함수에 직접 접근하고 호출할 수 있다. createSlice() 함수와 caseReducers 속성createSlice() 함수슬라이스(Slice)를 정의하기 위해 사용된다.슬라이스는 특정 상태(State)와 그 상태를 변경하는 리듀서(Reducer)들을 한 곳에 모아놓은 것이다.슬라이스는 자동으로 액션 생성자(Action Creators)와 액션 타입(Action Types)을 생성해준다.reducers 옵션@createSlice@ 함수의 @reducers@ 옵션은 슬라이스의 상태를 변경하는 여러 개의 리..

URL의 파리미터(Parameter) 값 가져오기들어가며리액트(React.js)에서 URL의 파라미터(Parameter) 값을 가져오는 방법을 정리해본다. 파라미터(Parameter)개념URL 경로의 일부분으로, 주로 특정 리소스를 식별하는 데 사용된다.RESTful API 설계에서 흔히 사용되며, 리소스의 고유 식별자를 나타낸다.URL 파라미터를 사용하면 동적인 경로를 생성할 수 있어, 다양한 리소스에 대해 동일한 컴포넌트를 재사용할 수 있다. 종류종류설명경로 파라미터(Path Parameter)- 특정 리소스를 식별하는 데 사용- 예: @/users/:userId@쿼리 파라미터(Query Parameter)- URL의 @?@ 뒤에 위치하며, @키-값@ 쌍으로 다양한 옵션을 전달한다.- 예) @?sea..

index.js로 컴포넌트(Component), 페이지(Page) 관리하기들어가며다음과 같이 @src@ 폴더 내부에 있는 @components@, @pages@ 폴더 안에 @index.js@ 파일을 생성하여 여러 컴포넌트와 페이지들을 하나의 파일에서 관리할 수 있다.이와 관련된 내용을 정리해본다. index.js개념리액트(React.js) 프로젝트에서 @pages@나 @components@ 폴더 안에 위치한 @index.js@ 파일은 해당 폴더 내의 여러 컴포넌트들을 한 곳에서 쉽게 불러올 수 있도록 다시 @export@ 해주는 역할을 한다.@index.js@ 파일 안의 내용은 다음과 같이 구성할 수 있다. 사용 방법@pages@ 또는 @components@ 폴더에 @index.js@ 파일을 생성한 후,..

Thunk API (Redux Toolkit)들어가며리덕스 툴킷(Redux Toolkit)의 Thunk API에 대해 정리해본다. Thunk API개념비동기 작업을 간편하게 처리할 수 있는 도구로, 여러가지 기능을 제공한다.주로 API 호출과 같은 비동기 작업을 처리할 때 사용되며, 액션(Action)을 디스패치(Dispatch)하고 애플리케이션의 상태를 관리할 수 있다. 구성기본적으로 2개의 매개변수를 제공한다.@dispatch@액션을 디스패치할 수 있는 함수비동기 작업의 결과에 따라 다른 액션을 보낼 수 있다. @getState@현재 스토어의 상태(State)를 가져오는 함수상태에 따라 로직을 다르게 처리할 수 있다. 사용 방법@createAsyncThunk@를 사용하여 비동기 액션 크리에이터를 생성..

리액트 라우터(React Router)들어가며리액트(React.js)에서 라우팅을 할 때 많이 사용하는 리액트 라우터(React Router) 라이브러리에 대해 정리해본다.v6을 기준으로 정리하였다. 리액트 라우터(React Router)개념리액트 애플리케이션에서 클라이언트 사이드 라우팅을 처리하기 위한 라이브러리리액트 라우터를 사용하면, 사용자가 페이지를 전환할 때 전체 페이지를 새로고침하지 않고도 URL에 따라 서로 다른 컴포넌트를 렌더링할 수 있다. 구성 요소BrowserRouterHTML5의 History API를 사용하여 URL을 관리한다.주로 애플리케이션의 최상위 컴포넌트로 사용된다. Routes각 경로에 대한 라우트를 정의하는 컨테이너하나 이상의 @Route@를 자식으로 가질 수 있다. Ro..

라우팅 관련 기능들 정리 (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate들어가며리액트(React.js)에서 라우팅을 위해 사용되는 관련 기능들에 대해 간단하게 정리해본다.페이지 이동 및 라우팅을 위해 리액트 라우터(React Router)의 여러 훅과 컴포넌트, 함수들을 사용할 수 있다. ① useNavigate()개념리액트 라우터(React Router) v6 에서 제공하는 훅프로그래밍적으로 다른 경로로 이동하기 위해 사용된다.컴포넌트 내에서 버튼 클릭, 이벤트 발생 시 특정 페이지로 이동할 때 사용한다. 특징@push@와 @replace@를 설정할 수 있어 히스토리에 추가..