Dart의 Null Safety는 “값이 없을 수 있는(null) 상황”을 런타임 오류가 아니라 타입 시스템 단계에서 미리 다루도록 만든 기능이다. 즉, null로 인해 앱이 실행 중에 터지는 문제를 줄이기 위해, 컴파일 단계에서 “이 변수는 null이 될 수 있는가?”를 명확히 구분한다. Flutter로 앱을 만들 때도 null 관련 오류는 빈번하게...

네임스페이스(namespace)는 “이름이 들어갈 수 있는 공간”을 의미한다. 같은 이름을 가진 변수나 함수가 여러 곳에서 생길 수 있기 때문에, 이름 충돌을 막고 코드를 구조화하기 위해 네임스페이스 개념이 사용된다. 자바스크립트는 C#이나 Java처럼 언어 차원에서 namespace 문법을 제공하지는 않지만, 실제 개발에서는 다양한 방식으로 “네임스...

Dart는 “한 번 작성한 코드”를 여러 환경에서 실행할 수 있도록 설계된 언어이다. 이를 가능하게 하는 핵심은 컴파일 방식이 하나로 고정되어 있지 않다는 점이다. 개발 단계에서는 빠른 피드백을 위해 JIT(Just-In-Time) 컴파일을 활용하고, 배포 단계에서는 성능과 안정성을 위해 AOT(Ahead-Of-Time) 컴파일을 활용한다. 또한 웹 ...

단축 평가(short-circuit evaluation)는 논리 연산자(&&, ||)가 왼쪽부터 평가될 때, 결과가 이미 확정되면 오른쪽을 평가하지 않고 멈추는 동작을 의미한다. 옵셔널 체이닝(optional chaining, ?.)은 객체의 중첩 속성에 접근할 때, 중간 값이 null 또는 undefined이면 에러를 내지 않고 즉시 ...

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 정의하자마자 곧바로 실행되는 함수 표현식을 의미한다. 과거에는 전역 스코프 오염을 막고, 임시 변수를 안전하게 숨기기 위한 용도로 매우 자주 사용되었다. 현대 자바스크립트에서는 let/const와 모듈(ESM)이 보편화되며 사용 빈도가 줄었으나, 특정...

DOM 조작에서 생성·추가·삭제는 화면의 구조 자체를 바꾸는 작업이다. 단순히 텍스트나 클래스만 바꾸는 수준을 넘어, 요소를 새로 만들고 원하는 위치에 끼워 넣거나 제거함으로써 UI를 동적으로 구성할 수 있다. 본 글에서는 바닐라 JavaScript에서 DOM 요소를 생성하고, 추가하고, 삭제하는 대표 방법을 예시 HTML과 함께 정리한다. ...

DOM 요소 수정은 화면에 보이는 값이나 상태를 실제로 바꾸는 단계이다. 사용자 입력에 따라 텍스트를 갱신하거나, 버튼 상태를 변경하고, 클래스·스타일을 조정하며, 필요하다면 DOM 구조 자체를 추가·삭제하기도 한다. 본 글에서는 바닐라 JavaScript에서 DOM을 수정하는 대표 방법을 예시 HTML과 함께 정리한다. 1. 텍스트 수정...

DOM 요소 읽기는 화면에 있는 정보를 자바스크립트 로직으로 가져오는 단계이며, 유효성 검사, 조건 분기, 렌더링 동기화, 사용자 입력 처리의 기반이 된다. 본 글에서는 바닐라 JavaScript 환경에서 DOM 요소로부터 값을 “읽는” 대표 방법을 정리한다. 1. 텍스트 읽기: textContent, innerText, innerHTML ...

Vanilla JS에서 DOM을 다루는 첫 단계는 요소 선택이다. 이 글에서는 DOM 요소를 선택하는 대표 방법과 각각의 차이, 그리고 실전에서 자주 쓰이는 선택 패턴을 정리한다. 1. DOM 요소 선택이란? DOM(Document Object Model)은 HTML 문서를 자바스크립트에서 다룰 수 있도록 만든 객체 구조이다. DOM 조작은...

React에서 ref는 렌더링 결과물 중 특정 대상을 “직접 참조”하기 위한 수단이다. 일반적으로 React는 상태(state)와 props로 UI를 선언적으로 구성한다. 그러나 때로는 DOM에 직접 접근해야 하거나, 값의 변경이 렌더링을 유발하지 않기를 원하는 상황이 존재한다. 이때 ref가 사용된다. Ref의 대표적인 용도 ref는 크게...