[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

[JavaScript] 배열 비교하기

JavaScript에서 배열 비교JavaScript에서 배열과 객체는 참조형 데이터이다.이는 변수에 배열 자체가 아닌 배열을 가리키는 참조(주소)가 저장된다는 의미이다.따라서 두 배열이 같은 요소를 가지고 있어도 다른 메모리 주소에 저장되어 있다면 엄격 비교(===)나 동등 비교(==) 연산자를 사용할 때 동등하지 않다고 판단된다.let arr1 = [1, 2, 3];let arr2 = [1, 2, 3];console.log(arr1 === arr2); // false 1. JSON 문자열 변환으로 비교배열을 JSON 문자열로 변환하여 비교하는 방법이다. 배열의 요소와 순서가 같아야 동등하다고 판단되며 중첩 배열도 비교할 수 있다.let arr1 = [1, 2, 3];let arr2 = [1, 2, 3]..

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