[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

[React] 제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트 (Controlled Components)제어 컴포넌트는 React의 상태(state)에 의해 관리되는 컴포넌트로 입력 값이나 UI 상태를 React 컴포넌트의 state에 저장해두고 해당 상태를 바탕으로 UI를 갱신한다.예를 들어 필드의 값이 변경되면 해당 변경을 state로 관리하고 이 state를 통해 값이 제어된다.특징단일 데이터 소스: 입력 필드의 값이 컴포넌트의 state에서 관리되므로 입력 필드와 상태 값이 항상 일치하게 된다.변경 감지 및 처리: 값이 변경될 때마다 onChange 이벤트 핸들러가 실행되어 state를 업데이트하고, 이를 통해 UI가 다시 렌더링된다.간편한 데이터 검증 및 수정: 입력값을 실시간으로 검증하거나 변형하는 로직을 쉽게 구현할 수 있다.import..

• format_list_bulleted Frontend/React
• · 2024. 11. 11.
• textsms

tailwind css 반응형으로 디자인하기

Tailwind CSS 반응형 디자인Tailwind CSS는 모든 유틸리티 클래스에 반응형 버전을 제공하여 특정 중단점에서 조건부로 적용할 수 있다. 이를 통해 HTML 코드 내에서 다양한 화면 크기에 적합한 레이아웃을 구성할 수 있다. Tailwind CSS 공식 문서의 예시를 먼저 살펴보자. 1. HTML 문서의 에 다음 뷰포트 메타 태그를 추가하여 기기 화면에 맞게 반응하도록 설정한다. 2. Tailwind의 유틸리티 클래스 앞에 중단점 접두사를 붙여 특정 화면 크기에서만 적용되도록 한다. 위의 예시에서는 md와 lg중단점을 사용하고 있다. 중단점은 Tailwind CSS에서 기본적으로 5가지 중단점을 제공한다고 한다.이 중단점들은 모든 유틸리티 클래스에 사용할 수 있어 특정 조건에 맞춰 문자 간격..

• format_list_bulleted Frontend/CSS
• · 2024. 11. 11.
• textsms

clsx - 클래스를 조건부로 적용해보자

clsx란 무엇인가?clsx는 조건에 따라 여러 CSS 클래스를 조합하여 하나의 문자열로 반환해주는 유틸리티 라이브러리이다. 주로 컴포넌트의 상태에 따라 동적으로 클래스명을 변경해야 하는 상황에서 유용하게 사용된다. clsx의 주요 기능조건부 클래스 적용객체 형태로 조건과 클래스를 전달하여 조건에 따라 클래스가 적용되도록 할 수 있다.여러 클래스의 결합clsx는 문자열, 객체, 배열 등 다양한 형태의 인수를 받아서 하나의 클래스로 결합해준다.중복 클래스 제거동일한 클래스가 중복으로 전달되더라도 clsx는 하나로 처리하여 불필요한 중복을 제거해준다. clsx는 CSS 클래스를 조건에 맞게 효율적으로 구성해주는 유틸리티로 특히 React 개발에서 자주 사용된다. classnames 라이브러리의 대체제로도 많..

• format_list_bulleted Frontend/CSS
• · 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