Next.js i18n 알아보기!
Next.js는 React 기반의 프레임워크로 다국어 지원(i18n)을 간편하게 구현할 수 있습니다. 폴더 구조, 번역 파일 작성 위치, 샘플 데이터를 활용해 방법을 살펴보겠습니다. 기본적인 번역에는 문제가 없고, 필요, 필수 단어에서 사용은 추천드리지만, 우리가 생각...
Prettier를 활용한 코드 포맷팅
개발자들은 코드를 작성하면서 가독성을 높이고 일관성을 유지하는 것이 중요합니다. 이를 위해 코드 스타일을 일정하게 유지하는 것은 깨끗하고 협업에 용이한 코드 작성을 도와줍니다. 하지만 코드 스타일은 주관적이며 공동 작업 시 충돌을 유발할 수 있습니다. 이런 문제를 해결...
ESLint 사용하기!
ESLint는 JavaScript 코드에서 문제를 식별하고 코드 품질을 향상시키기 위한 도구로서 사용되는 오픈 소스 린트 도구입니다. "린트"는 코드베이스에서 스타일, 오류, 버그 및 보안 문제를 찾아내는 도구를 일컫습니다. ESLint는 이러한 문제들을 찾아내고 개발...
작고, 사용하기 쉬운 로딩 바 bar-of-progress
작고, 사용하기 쉬우며, 의존성이 없는 로딩 바 컴포넌트입니다. 특징 의존성 없음: 특정 프레임워크에도 연결되어 있지 않습니다. 작은 크기: Brotli로 압축 시 < 500 바이트 (gzip으로 압축 시 < 600 바이트). 사용하기 쉬움: 몇 줄만 추가하면 바로 사...
Npm Framer-motion 살펴보기
Framer는 React를 위한 오픈 소스 모션 라이브러리로, Framer가 제작하였습니다. 모션은 창의적인 전문가들을 위한 웹 빌더인 Framer를 동작시킵니다. 당신의 꿈의 사이트를 디자인하고 출시할 수 있습니다. 특별한 코드는 전혀 필요 없으며, 최대의 속도를 누...
react-vertical-timeline-component란?
웹 사이트, 웹 애플리케이션에서 이벤트, 개발 이력, 프로젝트 이력, 회사의 마일스톤 등을 시간 순서대로 나열할 때 사용하는 컴포넌트입니다. 특징 재사용, 확장, 유지 관리가 쉽습니다. 사용자의 입력이나 외부 데이터에 따라 동적으로 내용을 업데이트 할 수 있습니다. 설...
UUID에 대해서 알아보자!
고유한 식별자를 생성하는데 사용되는 알고리즘입니다. 이 알고리즘은 네트워크에서 생성된 모든 UUID가 전 세계적으로 고유함을 보장하며, 이는 시간과 공간에 무관하게 중복되지 않음을 의미합니다. 고유성: UUID는 전 세계 어디서든 고유하게 생성될 수 있습니다. 이는 데...
React-simple-typewriter: React에서 타이핑 애니메이션 효과 구현하기
react-simple-typewriter 는 React 애플리케이션에서 타자기처럼 텍스트를 입력하는 시각적 효과를 쉽게 구현할 수 있는 라이브러리입니다. 이를 통해 사용자 경험을 향상시키고 텍스트 콘텐츠를 돋보이게 할 수 있습니다. 주요 특징 간단한 사용법 : 직관적...
Axios: 강력하고 유연한 HTTP 클라이언트
Axios 는 웹 브라우저와 Node.js 환경에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트입니다. 개발자가 REST API를 효율적으로 호출할 수 있도록 설계되었으며, 비동기 작업을 쉽고 깔끔하게 처리할 수 있는 현대적인 JavaScript 개발의 필...
Cheerio: 웹 스크래핑을 위한 JavaScript 라이브러리
Cheerio는 웹 스크래핑 작업을 용이하게 해주는 JavaScript 라이브러리로, jQuery와 유사한 문법을 제공하여 HTML 데이터를 쉽게 조작하고 분석할 수 있게 합니다. 이 라이브러리는 비동기 방식으로 데이터를 처리하며, CSS 셀렉터를 활용해 원하는 정보를...
Next.js를 위한 사이트맵 자동 생성 도구: Next-sitemap 사용 가이드
Next-sitemap은 Next.js 프로젝트의 사이트맵 생성을 간편하게 도와주는 패키지입니다. 사이트맵 생성을 자동화하여 SEO(검색 엔진 최적화)에 도움을 줍니다. 문서를 참고해 직접 정리한 내용입니다. 설치 프로젝트 폴더에서 npm 또는 yarn을 사용해 패키지...