그럼에도 불구하고

FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다. [ 비동기 동작 ] JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 H..

encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI의 하위 개념으로 URL, URN이 있다. URI / URL / URN 이란 무엇인가 오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. despiteallthat.tistory.com /** * 완전한 URI를 문자열로 전달받아 이스케이프 ..

오늘은 this에 대해 기록해보고자 한다. 이론적인 부분에서 공부할 때 너무 어려운 부분이 많았다. 그래서 이해가 안되는 부분이 많았는데 부족할 수 있지만 이번 계기로 확실히 정리해 보자 결론부터 말하자면 1. this는 함수가 호출될 때 결정이 된다. 2. 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승받는다. 실습으로 내가 이해한 대로 적어봐야겠다. ver_1 car라는 객체는 name 값으로 "KIA"를 가지고 있다. 여기서 car.getName(); 으로 car라는 객체의 getName() 메서드를 호출했다. this는 함수가 호출될 때 결정이 된다. 즉, car.getName();는 car가 getName()을 호출한 것이다. 이때 getName() 안에 있는 this는 ..

DOM(document object model)에 대해 알아보자 [ 문서 객체 모델이란 ] 웹이나 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. ※ 문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다. 이처럼 DOM은 웹 문서와 그 안..

오늘은 Symbol.Toprimitive에 대해 알아보자 [ 객체를 원시형으로 변환하기 ] obj1 + obj2처럼 객체끼리 더하는 연산을 하거나, obj1-obj2처럼 객체끼리 빼는 연산을 하면 어떤 일이 발생할까? 그리고 alert(obj)로 객체를 출력할 때는 무슨 일이 발생할까? 위의 두 가지 경우 모두 자동 형 변환이 발생한다. 즉, 객체는 원시값으로 변환되고, 그 후에 의도한 연산이 수행된다. 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생한다. 예를 들어 객체 Date 끼리 차감하면 (date1-date2) 두 날짜의 시간 차..

오늘은 자바스크립트 내장 객체에 대해 알아보자 [ Array 객체 ] Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열을 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다. [ Array 객체의 메서드 ] Array 개체에는 여러 가지 메서드가 있다. 종류 설명 concat 기존 배열에 요소를 추가해 새로운 배열을 만든다. every 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. filter 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. forEach 배열의 모든 요소에 대해 주어진 함수를 실행한다. in..

오늘은 이벤트와 각종 이벤트 처리기에 대해 알아보자 [ 이벤트 ] 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다. 하지만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 예를 들어 브라우저 창 맨 위의 제목 표시줄을 클릭하는 것은 이벤트라고 하지 않는다. 자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. [ 마우스 이벤트 ] 마우스 이벤..

지난번에 다뤄본 변수 호이스팅을 변수별로 알아보자 [ 변수 선언의 실행 시점과 변수 호이스팅 ] console.log(score); // undefined var score; // 변수 선언문 위의 예제에서는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행한다. 따라서 console.log(score);가 실행되는 시점에는 아직 score 변수의 선언이 실행되지 않았으므로 참조 에러(ReferenceError)가 발생할 것처럼 보인다. 하지만 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄..

오늘은 전역 변수의 문제점에 대해 알아보자 전역 변수에는 여러 가지 문제점이 있다. 우선 지역 변수는 (함수 내부에 선언되었다고 가정) 함수가 호출되면 생성되고 함수가 종료하면 소멸된다. 하지만 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 즉, 지역 변수에 비해 생명 주기가 길다. [ 전역 변수의 문제점 ] 1. 암묵적 결합 전역 변수를 선언한 의도는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 뜻이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용한다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다. 2. 긴 생명 주기 전역 변수는 생명 주기가 길다..

오늘은 스코프(scope)에 대해 알아보자 [ 스코프(scope) ] 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 하지만, 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. 그리고 var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 아래의 예시를 보자. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.l..

오늘은 Immutability와 mutable에 대해 알아보자 [ Immutability(변경 불가성)] Immutability(변경 불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 객체는 참조(reference) 형태로 전달하고 전달받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에서 그 영향을 받기 때문인데 이것이 의도한 동작이 아니라면 참조를 가지고 있는 다른 장소에 변경 사실을 통지하고 대처하는 추가 대응이 필요하다. 의도하지 않은 객체의 변경이..

오늘은 Pass by Reference와 Pass by Value에 대해 알아보자 [ Pass by Reference ] object type을 객체 타입 또는 참조 타입이라고 한다. 참조 타입이란 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다. 이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달되..