공부 시작하며 자바스크립트에서의 자기 자신을 가리킬 수 있는 this는 사용하는 방식에 따라 가리키는 대상이 다릅니다. 그 원리와 어떠한 상황에서 어떻게 동작하는지 알아보기 위해서 공부를 하게 되었습니다. 책 모던 자바스크립트 Deep Dive를 통해서 공부하였습니다. 자기 자신을 참조할 수 있는 객체(object) 다음 원의 반지름과 지름의 정보를 담고 있는 circle 객체가 있습니다, const circle = { radius: 5, getDiameter() { // 자기 자신인 circle을 참조하고 있습니다. return 2 * circle.radius; }, }; console.log(circle.getDiameter()); // 출력 : 10 위의 circle 객체에서 지름을 반환하는 get..
[자바스크립트] 스코프 scope
공부를 시작하며 앞으로 공부할 내용인 클로저, 실행 컨텍스트와 관련이 있으며 이를 이해하는데 어려움이 없도록 공부를 하게 되었습니다. 책 모던 자바스크립트 Deep Dive를 통해 공부하였습니다. 스코프 스코프(scope)는 자바스크립트를 포함하여 다른 프로그래밍 언어에서도 있는 개념이지만 자바스크립트의 스코프는 다른 언어들과 다른 특징이 있습니다. 변수 선언문에서 var의 변수 선언문과 let, const 변수 선언문이 다르게 동작하는것을 하나의 예시로 들 수 있습니다. 다음과 같이 var은 함수 단위의 유효범위를 가집니다. var test1 = 1; console.log("1:", test1); // 출력 : 1 if (true) { var test1 = 2; console.log("2:", test..
공부를 시작하며 "use strict"; 가 엄격 모드를 사용한다! 라는 정도로만 알고 있고, 이 모드를 사용함으로써 정확하게 동작하는것이 무엇인지 알지 못했습니다. 이 공부를 통해서 strict mode 가 어떠한 특징을 가지고 있는지를 배워갑니다. 공부는 책 모던 자바스크립트 Deep Dive를 통해 진행하였습니다. strict mode strict mode, 엄격 모드는 자바스크립트 언어의 문법을 엄격하게 적용시켜 오류가 발생할 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 명시적인 에러를 발생시킵니다. 다음의 예제를 통해서 이 부분에 대해서 설명하겠습니다. function foo() { x = 1; } foo(); console.log(x); 위의 예제에서 con..
[웹 개발자] 브라우저의 렌더링 과정
공부 시작 배경 그동안 웹 프론트엔드 개발을 하면서 결과물을 보여주는 웹 브라우저가 어떻게 동작하는지, 그 원리에 대해서 무심하게 지나치는 경우가 많았는데요. 제가 이 일을 하면서 "원리조차 모르고 있으면서 제대로 된 개발을 할 수 또는 하고 있을까?" 라는 생각이 들 때즘 "차근차근 공부해 나가야겠다" 라는 생각을 했습니다. 공부는 " 모던 자바스크립트 Deep Dive "라는 책을 바탕으로 진행하였습니다. 브라우저의 렌더링 과정 브라우저는 간단하게는 HTML, CSS, 자바스크립트 문서를 파싱하여 브라우저에 렌더링하는 순서대로 브라우저에 페이지를 띄워줍니다. 좀 더 세부적으로 과정을 살펴보자면 다음과 같은 순서입니다. 1. 브라우저의 렌더링에 필요한 리소스인 HTML, CSS, Javascript, ..
◆ 변수의 선언 (모던 자바스크립트 Deep Dive 책을 통해 공부한 글입니다.) ES6가 나오기 이전에 변수를 선언하기 위해서는 var을 사용해야 했습니다. var로 선언한 변수는 어떠한 문제점이 있고 특징이 있는지 살펴보고 let 과 const에 대해서 설명합니다. ◆ var 변수의 선언 var은 다음과 같이 변수를 선언합니다. 여러 타입을 변수에 넣을 수 있는데, 다음 예제와 같이 function과 같은 자바스크립트에서 이미 사용되고 있는 키워드는 변수 이름으로써 사용이 불가합니다. var foo = 'this is foo'; var one = 1; // 다음과 같은 function 키워드는 자바스크립트에서 함수로써 사용되고 있는 // 키워드입니다. 따라서 변수 이름으로 지정할 수 없습니다. va..
[ javascript ] Input File Dialog(파일 창) , 취소 눌렀을때 어떻게 감지할까?
이번에 업무를 보면서 퍼블리셔분을 도와줄 일이 있었습니다. 문제는 input으로 연 파일 창(file dialog)을 열면 배경이 dimmed 처리 되고 아래 사진과 같이 파일을 선택할 때 말고 취소 버튼을 눌렀을때를 감지해 dimmed처리를 해제해야하는 상황이였습니다. 리액트로 프로젝트를 진행하고 있어서 취소 이벤트를 감지해 상태변화로 dimmed처리를 관리하면 될것 같아 쉬워 보였고, 열기를 통해 파일을 넣었을 때엔 파일 상태를 관리하는 state의 변화를 감지하거나 input의 onChange를 통해서 처리하면 되겠다고 판단했습니다. 파일 열기는 쉬웠지만 취소상태를 감지하기에는 어려움이 있었습니다. 인터넷에 검색을 통해 알게된 것은 window의 포커스를 감지해 취소인지를 판별하는 방법이 보편적이라..