metadata와 Next-SEO를 동시에 사용할 필요가 있을까?
Next-SEO 도입은 pages directory를 사용하는 경우에 한합니다. app directory를 사용하는 경우에는 내장된 metadata를 사용하는 것이 SEO에 효과적입니다. pages directory를 사용하는 경우에는 아래를 참고해주세요. next-s...
Next.js에 대해서 알아보기
안녕하세요, 오늘은 FrontEnd Framework: Next JS 13에 대해 알아보도록 하겠습니다. 현재는 14 버전까지 출시됐습니다. 하지만 13버전을 설명드리는 이유는 12버전에서 13버전으로 변경될 때 많은 변화가 있었기 때문에 13버전을 우선적으로 설명드리...
FrontEnd Styling: Tailwind CSS 사용해보기
Tailwind CSS는 클래스 기반의 유틸리티(utility) CSS 프레임워크로, HTML 요소에 직접 적용되는 클래스들을 제공합니다. 각 클래스는 개별적인 스타일을 담당하며, 이러한 유틸리티 클래스들을 조합하여 레이아웃, 텍스트 스타일링, 반응형 디자인, 그리드 ...
FrontEnd Styling: Tailwind CSS 기초 정리
Tailwind CSS는 매우 강력한 CSS 프레임워크이며, 아래에 각 기능에 대한 간단한 설명과 사용 방법을 정리해드리겠습니다. 설명 Tailwind CSS의 사용하면 웹 디자인과 개발을 더욱 쉽고 빠르게 만들어 줍니다. 각 기능들에 대한 기본적인 기능 이해와 효과적...
Tailwind CSS를 활용한 Dark Mode 구현하기
다크 모드는 사용자에게 더 편안하고 시각적으로 매력적인 경험을 제공하는 핵심적인 웹 디자인 트렌드 중 하나입니다. 이제 Tailwind CSS를 활용하여 웹 애플리케이션에 Dark Mode를 구현하는 방법을 알아보겠습니다. 시작하기 전에: Tailwind CSS 설치하...
FrontEnd Next.js 13 App Dir: Metadata 적용
App Directory에서는 기존 Head 대신 metadata를 활용해 HTML 요소를 수정할 수 있습니다. metadata는 layout.js 또는 page.js 파일에서 export const metadata 를 통해 정의할 수 있습니다. 설명 ex...
Next.js에서 Map 함수를 활용한 코드 효율화
매주 금요일 작성된 코드를 다시 한 번 살펴보고 개선할 수 있는 부분이 있는지 확인하고 있습니다. 반복되는 패턴을 발견할 수 있었고, 코드의 효율성을 높이고 유지 관리를 용이하게 하기 위해 수정을 통해 코드를 효율화할 수 있습니다. Next.js에서 map 함수를 사용...
Next.js에서 경로 별칭(Alias) 사용하기
Next.js 프로젝트에서 모듈 import 시 경로 별칭(alias)를 사용하는 방법에 대해 알아보겠습니다. 이 기능을 활용하면 코드의 가독성을 높이고, 프로젝트의 구조 변경에도 유연하게 대응할 수 있습니다. alias란? 경로 별칭(alias)는 특정 디렉토리에 대...
이벤트 버블링: HTML 문서에서 이벤트의 전파 원리와 활용 방법
이벤트 버블링(Event Bubbling)은 HTML 문서 구조에서 이벤트가 발생했을 때, 그 이벤트가 부모 요소로 계속해서 전파되는 현상을 말합니다. 이것은 이벤트의 처리를 조금 더 직관적으로 만들어주는데 기여합니다. 예를 들어, HTML 구조가 있다고 가정해봅시다....
이벤트 루프: 비동기 프로그래밍의 핵심 이해
이벤트 루프 (Event Loop)는 대부분의 현대적인 웹 브라우저 및 JavaScript 실행 환경에서 비동기 코드 실행을 관리하는 메커니즘입니다. 이벤트 루프는 코드 실행의 흐름을 제어하고, 이벤트 발생, 콜백 함수 호출 및 다른 비동기 작업을 관리하여 프로그램이 ...
Canonical 태그란 무엇인가?
Canonical 태그는 HTML 문서의 섹션에 위치하는 태그로, 검색 엔진에 중복 콘텐츠 문제를 해결하도록 돕습니다. 이 태그는 여러 URL이 동일하거나 유사한 콘텐츠를 가질 때 사용되어, 검색 엔진에 어떤 URL을 원본으로 간주해야 하는지 알립니다. 이...