분류 전체보기
-
01. Grid로 세계 지도 나타내기Projects/세계 여행 지도 2021. 6. 3. 17:37
팀 해체 후 첫 번째 토이 프로젝트 지우님과 팀 해체를 하고 다시 만났다. 단순히 구현하는 것이 목적이 아닌 공부를 목적으로 하는 첫 번째 토이 프로젝트를 진행하기로 했다. 내가 예전 부터 만들어보고 싶었던 앱을 하나 제안했는데, 바로 내가 방문해 본 국가들을 세계 지도에 색칠을 해 나갈 수 있는 간단한 웹 어플리케이션이었다. 지우님은 나라를 검색하고 방문 여부에 관한 데이터를 관리하는 역할을 맡았고 나는 세계 지도를 렌더링하고 컨트롤하는 역할을 맡았다. 우선, 세계 지도를 이미지로 나타내고 싶었지만 일러스트 파일을 찾기가 쉽지 않아서 고민끝에 grid로 한번 나타 내보기로 했다..! node로 매크로 앱 만들기 세계 지도를 픽셀로 나타내기 위해 특정 픽셀 별 위치가 담긴 json 파일이 필요했는데, 이..
-
[JavaScript] 스코프(Scope)와 클로져(Closure)Web/JavaScript 2021. 5. 25. 14:28
스코프(Scope) 호이스팅을 설명하기 전에 스코프에 대한 설명을 먼저 했어야 했는데, 지금이라도 한번 정리 해 봐야겠다. 자바스크립트에서 스코프라는 단어를 많이 접해봤을 것이다. 스코프란 해당 변수에 접근 할 수 있는 범위를 일컫는 말인데, 자바스크립트에서는 Global(전역)과 Local(지역) 두 종류의 스코프가 있다. var name = 'hov'; function print() { var name = 'lee'; console.log(name); } print(); // 출력: lee console.log(name); // 출력: hov 위에서 보면 알 수 있듯, name이라는 동일한 이름을 가진 변수가 각각 독립적으로 불리는 것을 알 수 있다. print() 함수 안에 있는 변수(name)는 ..
-
[JavaScript] 자바스크립트 this의 모든 것Web/JavaScript 2021. 5. 15. 21:12
this란 무엇인가? C++, JAVA 등 다양한 프로그래밍 언어에서도 this가 존재하는데, 여기서 this는 객체 자신을 나타내는 포인터, 레퍼런스다. 하지만 자바스크립트에서 this는 함수의 호출 맥락(Context)를 의미한다. 즉 함수를 어떻게 호출하냐에 따라 this가 가리키는 대상이 달라질 수 있다는 것이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결 시켜주는 역할을 한다. console.log(this); // window function func1() { console.log(this); } func1(); // window 우선 브라우저의 개발자 도구에서 this를 출력 해보면 전역 객체인 window 객체를 출력한다. (node.js에서는 this를 출력하면..
-
[JavaScript] 실행 컨텍스트와 스코프 체인Web/JavaScript 2021. 5. 13. 21:33
실행 컨텍스트(Execution Context)란? context는 한국어로 문맥 이라는 뜻을 가진다. 문맥의 정확한 정의는 그럼 무엇일까? 문맥 어떤 주어진 언어표현이 나타나는 부분과 연관이 되는 언어적인 맥락 또는 환경. (네이버 사전) 즉 실행 컨텍스트는 자바스크립트 코드가 실행되기 위해서 필요한 맥락과 환경을 context라고 한다. 컨텍스트에는 세 가지 종류가 있다. Context의 종류 1. Global Execution Context (전역 컨텍스트) - 코드가 글로벌로 실행이 될 때의 환경 - 자바스크립트는 싱글 스레드 언어이기 때문에 전역 컨텍스트는 딱 하나만 존재 2. Functional Execution Context (함수 컨텍스트) - 함수가 호출이 되어 실행이 될 때 실행되고 있..
-
[JavaScript] 호이스팅 이란?Web/JavaScript 2021. 5. 13. 19:09
호이스팅(Hoisting)이란? 자바스크립트 Parser가 함수를 실행하기 전 함수를 한번 훑는다. 여기서, 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언 하는데, 이를 호이스팅(Hoisting)이라 한다 함수 안 (블록 안 { }) 에서만 유효하고, 실제로 코드가 끌어올려 지는 것이 아니라 자바스크립트 Parser 내부적으로 끌어올려 처리하는 것이다. 때문에 실제 메모리에는 어떠한 변화도 발생하지 않는다. 호이스팅의 대상 1. var 변수 선언 변수 선언의 경우 var에서만 호이스팅이 일어난다. let / const 변수 선언에서는 호이스팅이 발생하지 않는다. 여기서 변수의 선언만 끌어올려지고, 할당은 함께 끌어올려지지 않는다. console.log(hello); // undef..
-
[Browser] <script> 태그의 적절한 위치Web/Browser 2021. 5. 13. 15:52
브라우저 동작 방식에 따른 Script 태그의 위치 앞의 글에서 말했듯, HTML은 맨 윗 줄 부터 차례대로 읽어 내려 가며 파싱이 되어진다. 그러다가 link 태그를 만나면 HTML파싱을 중단하고 CSS 요청, 응답 과정을 실행한다. 작업이 끝나면 중단된 HTML을 다시 읽고 DOM 트리를 완성하고 랜더 트리를 완성한다. 여기서 중간에 script태그를 만나게 되면 파싱을 중단한 뒤 제어 권한을 자바스크립트 엔진에게 넘기고 자바스크립트 코드를 실행한다. 그렇기 때문에 HTML 태그들 사이에 script 태그가 위치하면 두가지 문제가 발생한다. 1. HTML을 읽는 과정에서 스크립트를 만나면 중단 시점이 생기고 랜더링이 지연된다. 2. DOM 트리가 생성되기 이전에 자바스크립트가 생성되지도 않은 DOM의..