웹 브라우저 환경에서 File 객체와 FileReader API를 활용하면 사용자가 선택한 로컬 파일의 정보를 확인하고, 그 내용을 직접 읽어 들일 수 있습니다. 이 글에서는 HTML의 파일 입력 요소와 JavaScript를 연동해 파일 이름, 크기, 형식 등의 메타데이터를 표시하고, 텍스트 파일의 실제 내용까지 화면에 출력하는 예제를 살펴보겠습니다.핵심 개념 정리File 객체<input type=file> 요소를 통해 파일을 선택하면 해당 요소의 files 속성에 File 객체 배열이 담깁니다. 각 File 객체는 다음
JavaScript에서 다차원 배열 평탄화란?다차원 배열이란 배열 안에 또 다른 배열이 중첩되어 있는 구조를 말합니다. 예를 들어 [1, 2, 3, [4, 5], [6, [7, 8]]]처럼 요소 자리에 배열이 포함된 형태입니다. 이러한 중첩 구조를 하나의 일차원 배열로 펼치는 작업을 평탄화(flattening)라고 부르며, 데이터를 정렬하거나 순회할 때 매우 유용하게 활용됩니다.JavaScript에서는 ES2019(ES10)부터 도입된 flat() 메서드를 사용하면 별도의 재귀 함수 없이 간단하게 배열을 평탄화할 수 있습니다.fla
JavaScript Blob 객체란?Blob(Binary Large Object) 객체는 JavaScript에서 변경 불가능한(immutable) 원시 데이터(raw data)를 표현하는 데 사용되는 객체입니다. 일반적인 파일(File) 객체처럼 Blob 역시 size(크기)와 type(MIME 타입) 속성을 가지고 있습니다.특히 주목할 점은 File 객체가 사실상 Blob 객체에서 파생된(derived) 형태라는 것입니다. 따라서 File 객체가 사용되는 대부분의 상황에서 Blob 객체도 동일하게 활용할 수 있습니다.Blob 객체
JavaScript 부분 함수(Partial Function)란 무엇인가?부분 함수(Partial Function)는 하나의 함수를 인자로 받고, 그와 함께 다른 타입의 인수들도 추가로 전달받는 기법입니다. 전달된 인수 중 일부를 미리 고정한 뒤, 나머지 인수를 받는 새로운 함수를 반환하는 방식으로 동작합니다. 반환된 함수가 실제로 호출되면, 처음에 고정했던 인수와 자신이 받은 인수를 모두 합쳐서 원래의 부모 함수를 실행합니다.즉, 여러 개의 인수를 필요로 하는 함수에서 일부 인수만 먼저 적용해 둔 상태의 새로운 함수를 만드는 것입
JavaScript 배열에서 고유 값 얻기JavaScript에서 배열에 중복된 값이 여러 개 포함되어 있을 때, Set 객체를 활용하면 간단하게 고유한 값만 추출할 수 있습니다. Set은 중복을 허용하지 않는 자료구조이므로, 배열을 Set으로 변환하는 것만으로 자동으로 중복이 제거됩니다.아래 예제는 숫자와 문자열이 섞여 있는 배열에서 중복 값을 제거하는 전체 코드입니다.예제 코드<!DOCTYPE html> <html lang="ko"> <head> <meta charset=&q
JavaScript 모듈 시스템에서 import as와 export as 구문은 코드의 가독성과 유연성을 높여주는 강력한 기능입니다.import as란?import as를 사용하면 가져오는(named) 모듈을 원하는 다른 이름으로 불러올 수 있습니다. 예를 들어, 원본 함수 이름이 길거나 의미가 명확하지 않을 때 더 직관적인 이름으로 변경하여 사용할 수 있습니다.export as란?export as는 반대로 내보내는 모듈을 다른 이름으로 내보낼 수 있게 해줍니다. 이를 통해 외부에 공개되는 이름을 자유롭게 지정할 수 있습니다.예제
함수형 프로그래밍에서 루프를 중단해야 하는 이유전통적인 for나 while 문에서는 break 키워드를 사용해 언제든지 루프를 빠져나올 수 있습니다. 하지만 forEach() 같은 배열 메서드는 콜백 함수 기반으로 동작하기 때문에 break나 continue를 사용할 수 없습니다.이런 경우 Array.prototype.some() 메서드를 활용하면 됩니다. some()은 콜백 함수가 true를 반환하는 순간 반복을 즉시 중단합니다. 이 특성을 역으로 이용해 조건에 맞는 요소를 발견했을 때 루프를 종료하는 패턴으로 자주 사용됩니다.다
JavaScript의 동적 임포트(Dynamic Import)는 모듈을 필요한 시점에 불러올 수 있게 해주는 강력한 기능입니다. 정적 import 문과 달리, 동적 임포트는 코드 실행 중에 조건부로 모듈을 로드할 수 있어 초기 페이지 로딩 속도를 개선하고 번들 크기를 줄이는 데 유용합니다.동적 임포트란?동적 임포트는 import() 함수 호출 형태로 사용하며, Promise를 반환합니다. 따라서 await 또는 .then()과 함께 사용할 수 있습니다. 버튼 클릭과 같은 사용자 이벤트가 발생했을 때 특정 모듈을 지연 로딩(lazy
전통적인 for 루프나 forEach 메서드에서는 continue 문을 사용해 특정 조건의 반복을 건너뛸 수 있지만, 함수형 프로그래밍 스타일에서는 이러한 제어문을 직접 사용하기 어렵습니다. 대신 Array.prototype.some() 메서드를 활용하면 동일한 효과를 얻을 수 있습니다.some() 메서드로 루프 계속하기some() 메서드는 콜백 함수가 true를 반환하는 순간 반복을 중단하고, false를 반환하면 다음 요소로 계속 진행합니다. 이 특성을 역으로 활용하면 continue와 같은 동작을 구현할 수 있습니다.예제 코드
웹 페이지에서 버튼 하나만 클릭하면 입력된 텍스트가 자동으로 클립보드에 저장되는 클립보드에 복사(Copy to Clipboard) 기능은 사용자 편의성을 크게 높여 주는 대표적인 UI 요소입니다. 이 글에서는 JavaScript를 활용해 이 기능을 간단하게 구현하는 방법을 완전한 예제 코드와 함께 살펴보겠습니다. 예제 코드 다음은 HTML, CSS, JavaScript를 모두 포함한 전체 예제입니다. <!DOCTYPE html> <html lang=ko> <head> <meta charset=U
generator.throw() 메서드란?JavaScript의 generator.throw() 메서드는 제너레이터 함수 내부의 yield 표현식에 에러를 전달하는 데 사용됩니다. 이 메서드가 호출되면 제너레이터는 마치 해당 지점에서 에러가 발생한 것처럼 실행을 재개하며, 그 결과로 done과 value 속성을 가진 객체를 반환합니다.즉, 외부 코드에서 제너레이터 내부로 예외(exception)를 주입할 수 있어, 제너레이터 내부의 try...catch 블록에서 이를 처리할 수 있습니다.generator.throw() 동작 방식제너레
JavaScript에서 reduce() 메서드를 사용하면 배열의 모든 요소를 순회하면서 하나의 값으로 줄일 수 있습니다. 가장 대표적인 활용 예는 배열에 담긴 숫자들의 합계를 구하는 것입니다.reduce() 메서드란?reduce() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행합니다. 이때 콜백 함수는 두 가지 주요 인자를 받습니다.누적값(accumulator): 이전 콜백 호출에서 반환된 값현재값(currentValue): 현재 처리 중인 배열 요소모든 요소를 처리한 후에는 최종적으로 누적된 단일 값을 반환합니다. 필요에 따라
JavaScript에서 현재 문서의 로딩 상태를 확인하려면 document.readyState 속성을 사용하면 됩니다. 이 속성은 문서의 로딩 진행 상황을 문자열로 반환하며, 값이 complete일 경우 페이지 로드가 완료된 것을 의미합니다. readyState 속성이 가질 수 있는 값 loading – 문서를 아직 불러오는 중입니다. interactive – 문서 파싱은 끝났지만 이미지 등 하위 리소스 로딩이 진행 중입니다. complete – 문서와 모든 하위 리소스의 로딩이 완료되었습니다. 다음은 버튼 클릭 시 문서가 준비
JavaScript 모듈 시스템에서는 크게 두 가지 방식으로 값을 내보낼 수 있습니다. 바로 기본 내보내기(Default Export)와 명명된 내보내기(Named Export)입니다.두 방식의 핵심적인 차이는 다음과 같습니다.기본 내보내기(Default Export): 파일마다 단 하나만 존재할 수 있으며, 가져올 때(import) 원하는 이름을 자유롭게 지정할 수 있습니다.명명된 내보내기(Named Export): 한 파일에 여러 개를 만들 수 있으며, 반드시 내보낼 때 사용한 이름 그대로 중괄호({ }) 안에 넣어 가져와야 합
함수 표현식(Function Expression)은 함수를 하나의 변수에 저장하는 방식입니다. 이렇게 저장된 함수는 나중에 변수 이름을 통해 언제든지 호출할 수 있습니다.일반적인 함수 선언(Function Declaration)과 달리, 함수 표현식은 호이스팅(hoisting)되지 않는다는 중요한 차이점이 있습니다. 따라서 코드에서 함수가 정의되기 이전 위치에서 호출하면 오류가 발생합니다.JavaScript 함수 표현식의 주요 특징함수를 변수에 할당하여 값처럼 다룰 수 있습니다.변수 이름 뒤에 괄호 ()를 붙여 함수를 실행할 수 있
이스케이프 문자(Escape Character)는 개발자가 의도한 방식과 다르게 해석될 수 있는 특수 문자를 말합니다. 예를 들어 문자열 안에서 따옴표나 백슬래시는 자바스크립트 문법상 특별한 의미로 처리되기 때문에 그대로 출력할 수 없습니다. 이러한 문자를 원래 형태 그대로 출력하려면 문자 앞에 백슬래시(\)를 붙여주어야 합니다. JavaScript의 주요 이스케이프 문자 목록 다음 표는 자바스크립트에서 사용할 수 있는 대표적인 이스케이프 문자들을 정리한 것입니다. 코드결과 \b백스페이스(Backspace) \f폼 피드(Fo
템플릿 문자열(Template Strings)은 ES6(ECMAScript 2015)에서 새롭게 도입된 문법으로, 문자열 안에 표현식을 간편하게 삽입할 수 있도록 해주는 기능입니다. 기존에는 작은따옴표()나 큰따옴표()로 문자열을 감싸고, 변수나 연산 결과를 넣으려면 + 연산자를 사용해야 했습니다. 하지만 템플릿 문자열은 백틱(backtick, ``)으로 문자열을 감싸고, ${} 구문 안에 변수나 수식을 그대로 작성하면 됩니다. 예를 들어 ${a + b}처럼 표현식을 직접 삽입할 수 있어, + 연산자로 문자열을 이어 붙이는 방식보다
JavaScript의 undefined는 변수가 아직 선언되지 않았거나 값이 할당되지 않았음을 나타내는 특수한 값입니다. 변수를 선언만 하고 초기화하지 않으면, 해당 변수에는 자동으로 undefined가 할당됩니다.undefined가 발생하는 경우undefined는 주로 다음과 같은 상황에서 나타납니다.변수를 선언했지만 값을 할당하지 않은 경우객체에 존재하지 않는 속성에 접근한 경우함수가 명시적인 return 문 없이 종료된 경우예제 코드다음은 undefined를 활용해 변수 age의 정의 여부를 확인하는 예제입니다. 버튼을 클릭하
JavaScript에서 이벤트 전파(Event Propagation)는 크게 이벤트 버블링과 이벤트 캡처링 두 가지 방식으로 나뉩니다. 두 개념은 DOM 트리에서 이벤트가 어떤 방향으로 전달되는지를 결정하며, 실무에서 이벤트 처리 로직을 설계할 때 반드시 이해해야 하는 핵심 개념입니다.이벤트 버블링(Event Bubbling)이란?이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 요소의 이벤트 핸들러가 가장 먼저 실행되고, 그다음 부모 요소로, 마지막에는 document와 같은 최상위 조상 요소까지 거품이 올라오듯 순차적으
JavaScript 배열에서 요소 검색하기 JavaScript에서는 find() 메서드를 사용하여 배열 내에서 특정 조건을 만족하는 요소를 쉽게 검색할 수 있습니다. find() 메서드는 콜백 함수를 인자로 받으며, 조건을 만족하는 첫 번째 요소의 값을 반환합니다. 만약 일치하는 요소가 없다면 undefined를 반환합니다. 아래 예제는 동물 배열에서 lion을 찾는 방법을 보여줍니다. 예제 코드 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF