[JavaScript] 배열과 객체 빈 값 비교하기 - null, undefined ...

Falsy 값 체크JavaScript에서 빈 값을 검사할 때 가장 간단한 방법은 Falsy 값을 확인하는 것이다. JavaScript의 Falsy 값에는 null, undefined, "" (빈 문자열), 0, NaN, false가 있습니다. 이러한 값들은 조건문에서 false로 평가되기 때문에 간단하게 if (!value) 문을 통해 빈 값 여부를 검사할 수 있습니다. function isEmpty(value) { return !value;}// 사용 예시console.log(isEmpty(null)); // trueconsole.log(isEmpty(undefined)); // trueconsole.log(isEmpty("")); // trueconsole.log(i..

• format_list_bulleted Frontend/JavaScript
• · 2024. 11. 13.
• textsms

[JavaScript] 바벨과 폴리필의 개념 + 적용까지

Babel(바벨)이란?Babel은 널리 사용되는 자바스크립트 트랜스파일러로 최신 ES6+ 자바스크립트 코드를 ES5 이하로 변환하여 구형 브라우저에서도 최신 기능을 활용할 수 있도록 해준다. Babel은 플러그인과 프리셋(preset) 설정을 통해 유연하게 구성할 수 있으며 다양한 자바스크립트 기능을 지원한다. Babel의 주요 기능문법 변환: 화살표 함수, 클래스, 템플릿 리터럴 등 ES6+ 문법을 ES5 이하로 변환폴리필 지원: 특정 기능을 구형 브라우저에서도 사용할 수 있도록 폴리필 추가모듈 시스템 변환: ES6 모듈을 CommonJS 또는 AMD와 같은 다른 모듈 시스템으로 변환플러그인 및 프리셋 관리: 필요한 기능에 맞춰 플러그인이나 프리셋을 추가하여 변환을 최적화 Babel 의 예시// 변환 ..

• format_list_bulleted Frontend/JavaScript
• · 2024. 11. 12.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 3

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Learn Next.js: Optimizing Fonts and Images | Next.jsOptimize fonts and images with the Next.js built-in components.nextjs.org 지난 장에서는 Next.js 애플리케이션의 스타일링에 대해 알아보았습니다. 이번에는 홈페이지에 커스텀 폰트와 히어로 이미지를 추가하는 방법을 배워보겠습니다. 이번 장에서 다룰 주제는 다음과 같습니다. next/font를 사용하여 커스텀 폰..

• format_list_bulleted Frontend/Next.js
• · 2024. 11. 11.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 2

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Learn Next.js: CSS Styling | Next.jsStyle your Next.js application with Tailwind and CSS modules.nextjs.org 다음은 Next.js 애플리케이션 스타일링 방법에 대한 설명입니다. 이번 챕터에서는...다음 주제를 다룹니다. 애플리케이션에 전역 CSS 파일을 추가하는 방법두 가지 스타일링 방법: Tailwind와 CSS 모듈clsx 유틸리티 패키지를 사용해 조건부로 클래스 이름을 추..

• format_list_bulleted Frontend/Next.js
• · 2024. 11. 10.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 1

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Learn Next.js: Getting Started | Next.jsCreate a new Next.js application using the dashboard starter example and explore the project.nextjs.org  새 프로젝트 생성패키지 매니저로 pnpm을 사용하는 것이 npm이나 yarn보다 빠르고 효율적이기 때문에 권장합니다. pnpm이 설치되어 있지 않다면 다음 명령어로 전역 설치할 수 있습니다.npm inst..

• format_list_bulleted Frontend/Next.js
• · 2024. 11. 10.
• textsms

[Next.js] Next 공식 튜토리얼 진행하기 - Introduction

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.오타 또는 오역된 부분이 있다면 댓글 부탁드립니다. Next.js 배우기Next.js 앱 라우터 강좌에 오신 것을 환영합니다! 이 무료 인터랙티브 강좌에서는 풀스택 웹 애플리케이션을 만들어가며 Next.js의 주요 기능을 배울 수 있습니다. Learn Next.js | Next.jsLearn how to build a full-stack web application with the free, Next.js App Router Course.nextjs.org우리가 만들 프로젝트이 강좌에서는 다음과 같은 기능을 포..

• format_list_bulleted Frontend/Next.js
• · 2024. 11. 9.
• textsms