[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(isEmpty(0)); ..

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

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

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

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

크로스 브라우징의 중요성

크로스 브라우징(cross browsing)이란 무엇일까?이전 직장에서 크로스 브라우징 관련 이슈가 생겨 크로스 브라우징에 대한 내용을 처음으로 찾아보게 되었는데 내용을 더 자세하게 정리하려고 한다.. (수정하고 나니 IE에선 작동을 하지 않는?!)크로스 브라우징(Cross Browsing)은 웹 페이지나 웹 어플리케이션이 다양한 웹 브라우저에서 일관되게 작동하고 동일하게 보이도록 하는 것을 뜻한다. 각 브라우저는 웹 표준을 해석하고 렌더링하는 방식에 약간의 차이가 있을 수 있기에 크로스 브라우징은 웹 개발 과정에서 꼭 고려해야할 사항이다. 그럼 어떠한 이유들로 인해서 크로스 브라우징이 중요한지 알아보자.특히 IE와 같은 구형 브라우저와 최신 브라우저 간에는 큰 차이가 있어 구형 브라우저에서도 호환성을 ..

• format_list_bulleted Frontend
• · 2024. 8. 20.
• textsms

JavaScript로 간단한 투두리스트 만들기

STEP1. 투두리스트의 기본 디자인과 기능 완성하기 주요 기능 투두리스트 추가하기 투두리스트 수정, 삭제 체크한 투두리스트 줄 긋기 디렉터리 구조 my-todo-list/ │ ├── src/ │ ├── js/ │ │ └── main.js │ ├── css/ │ │ └── main.css │ └── assets/ │ │ ├── index.html ├── README.md └── package.json 소스파일 index.html TODO 삭제 main.css body { font-family: sans-serif; } header img { position: relative; width: auto; left: -100px; top: 100px; } .todo-wrapper { position: relat..

• format_list_bulleted JavaScript
• · 2024. 3. 11.
• textsms

React란?

React란?React.js는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로,재사용 가능한 컴포넌트를 기반으로 하는 선언적이고 효율적인 UI 개발을 가능하게 한다.가상 DOM을 사용하여 성능을 최적화하고, 단방향 데이터 흐름을 통해 애플리케이션의 상태 관리를 단순화하는데 용이하다.React는 프레임워크가 아닌 라이브러리이고메타(페이스북)와 개발자 커뮤니티에 의해 유지 관리되고 있다.React의 특징컴포넌트 기반 구조가상 DOM (Virtual DOM)단방향 데이터 흐름 (One-way Data Binding)JSX컴포넌트 기반 구조애플리케이션을 독립적이고 재사용 가능한 부분으로 나누어 코드의 유지 관리를 용이하게 하고,대규모 프로젝트의 개발 효율성을 향상시킨다.각..

• format_list_bulleted React
• · 2024. 3. 6.
• textsms

TypeScript란?

TypeScript란?타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 타입을 추가하여 정적 타이핑을 지원하는 언어이다.마이크로소프트에 의해 개발된 오픈 소스입니다. 대규모 애플리케이션을 개발할 때 코드 관리를 용이하게 하도록 도움을 준다.타입스크립트는 자바스크립트와 완벽하게 호환되며 모든 자바스크립트 라이브러리와 프레임워크를 사용할 수 있도록 설계되었다.TypeScript의 특징정적 타입 지정객체지향 프로그래밍 지원컴파일 시간 오류 검출ES6 및 그 이후 버전의 JavaScript 지원JIDE 지원 강화정적 타입 지정변수, 함수 매개변수, 반환 값 등에 명시적인 타입을 지정할 수 있습니다. 이는 개발 단계에서 타입 관련 오류를 쉽게 잡을 수 있게 도와준다...

• format_list_bulleted TypeScript
• · 2024. 3. 6.
• textsms