기술 블로그
웹과 앱을 만들며 남긴 기록 447편입니다.
nodemon 은 Node.js 애플리케이션을 개발할 때 매우 유용한 도구입니다. 파일 변경이 감지되면 자동으로 Node 애플리케이션을 재시작해주는 기능을 제공합니다. 이로 인해 개발 과정이 훨씬 더 빠르고 효율적이 됩니다. Nodemon 설치 로컬 설치 (프로젝트별)...
Node.js 애플리케이션 개발 시 환경 변수 관리를 위해 dotenv 패키지가 널리 사용됩니다. dotenv 사용 시 process.env 가 예상대로 작동하지 않는 경우가 있을 수 있습니다. 이러한 문제는 주로 환경 변수 파일( .env )이 올바르게 로드되지 않았...
Husky를 이용한 Commit 메시지 규칙 설정 방법입니다. 이 프로세스는 프로젝트의 Commit 메시지가 일관되고 명확하게 유지되도록 도와주며, 협업 시 팀원 간의 이해도를 높일 수 있습니다. 1. 필요한 패키지 설치 Husky, @commitlint/cli, @c...
GitHub와 Git은 현대 소프트웨어 개발에서 중요한 역할을 하는 도구 중 하나입니다. 이 가이드는 초보 개발자를 대상으로 GitHub와 Git의 주요 명령어를 간략하게 설명합니다. 아래에서는 Git의 주요 명령어 중 몇 가지를 자세히 설명하겠습니다. git init...
Git은 협업하거나 프로젝트를 관리할 때 중요한 역할을 하는 버전 관리 시스템입니다. Git을 사용하면 여러 개의 브랜치를 생성하고, 각 브랜치에서 작업한 내용을 효과적으로 관리할 수 있습니다. 이번 블로그 글에서는 Git에서 브랜치를 생성하고 관리하는 방법에 대해 알...
기본적인 Metadata 사용 방법 검색 엔진 최적화(SEO)와 사용자 경험을 향상 시키는 데 중요합니다. <head> 태그 내의 Metadata를 설정하는 것으로, 동적 데이터에 따라 Metadata를 변경할 수도 있다. 기본 설정 외 Metadata Setting ...
Next-SEO 도입은 pages directory를 사용하는 경우에 한합니다. app directory를 사용하는 경우에는 내장된 metadata를 사용하는 것이 SEO에 효과적입니다. pages directory를 사용하는 경우에는 아래를 참고해주세요. next-s...
Express.js에서 Sequelize를 사용하는 기본 절차와 설정 방법, Sequelize를 활용한 데이터베이스 연결, Sequelize 구성 파일 생성, 모델 정의 및 연결에 관한 글입니다. Sequelize 설치 Express 애플리케이션에서 Sequelize를...
CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인의 리소스를 요청하는 것을 가능하게 하는 웹 보안 표준입니다. 웹 브라우저는 기본적으로 보안 상 Same-Origin Policy를 따르기 때문에, 현재 웹 페이지와 다른 출처에서...
미들웨어(Middleware)는 Express.js에서 매우 중요한 개념입니다. 미들웨어는 요청(request)과 응답(response) 사이에 위치하여 요청을 처리하고 응답을 생성하는 함수입니다. Express.js 애플리케이션에서 미들웨어는 요청에 대한 처리 과정을...
Tailwind CSS는 매우 강력한 CSS 프레임워크이며, 아래에 각 기능에 대한 간단한 설명과 사용 방법을 정리해드리겠습니다. 설명 Tailwind CSS의 사용하면 웹 디자인과 개발을 더욱 쉽고 빠르게 만들어 줍니다. 각 기능들에 대한 기본적인 기능 이해와 효과적...
MVC (Model-View-Controller) 패턴은 소프트웨어 디자인 패턴으로, 애플리케이션을 모델, 뷰 및 컨트롤러 세 가지 주요 구성 요소로 분리하여 개발하는 방법입니다. Node.js와 Express.js를 활용하여 MVC 패턴을 구현하려면 다음과 같은 구조...
다크 모드는 사용자에게 더 편안하고 시각적으로 매력적인 경험을 제공하는 핵심적인 웹 디자인 트렌드 중 하나입니다. 이제 Tailwind CSS를 활용하여 웹 애플리케이션에 Dark Mode를 구현하는 방법을 알아보겠습니다. 시작하기 전에: Tailwind CSS 설치하...
Node.js와 Express.js를 사용하여 기본적인 서버를 구축하는 방법을 설명드리겠습니다. 이를 기반으로 더 복잡한 기능을 추가하거나 데이터베이스와 연동하여 실제 웹 애플리케이션을 개발할 수 있습니다. Happy coding! Node.js란 Node.js는 Ch...
App Directory에서는 기존 Head 대신 metadata를 활용해 <head> HTML 요소를 수정할 수 있습니다. metadata는 layout.js 또는 page.js 파일에서 export const metadata 를 통해 정의할 수 있습니다. 설명 ex...
Next.js 프로젝트에서 모듈 import 시 경로 별칭(alias)를 사용하는 방법에 대해 알아보겠습니다. 이 기능을 활용하면 코드의 가독성을 높이고, 프로젝트의 구조 변경에도 유연하게 대응할 수 있습니다. alias란? 경로 별칭(alias)는 특정 디렉토리에 대...
이벤트 버블링(Event Bubbling)은 HTML 문서 구조에서 이벤트가 발생했을 때, 그 이벤트가 부모 요소로 계속해서 전파되는 현상을 말합니다. 이것은 이벤트의 처리를 조금 더 직관적으로 만들어주는데 기여합니다. 예를 들어, HTML 구조가 있다고 가정해봅시다....
Clerk는 웹 및 모바일 애플리케이션을 위한 사용자 인증 및 관리 플랫폼입니다. 이 서비스는 개발자가 사용자 계정, 로그인 프로세스, 보안 등을 손쉽게 관리할 수 있게 해주는 도구를 제공합니다. Clerk는 특히 React 및 Next.js와 같은 JavaScript...
Next.js는 React 기반의 프레임워크로 다국어 지원(i18n)을 간편하게 구현할 수 있습니다. 폴더 구조, 번역 파일 작성 위치, 샘플 데이터를 활용해 방법을 살펴보겠습니다. 기본적인 번역에는 문제가 없고, 필요, 필수 단어에서 사용은 추천드리지만, 우리가 생각...
작고, 사용하기 쉬우며, 의존성이 없는 로딩 바 컴포넌트입니다. 특징 의존성 없음: 특정 프레임워크에도 연결되어 있지 않습니다. 작은 크기: Brotli로 압축 시 < 500 바이트 (gzip으로 압축 시 < 600 바이트). 사용하기 쉬움: 몇 줄만 추가하면 바로 사...