과거의 내가 미래의 나에게

「딥다이브 자바스크립트」 정리 - 스코프 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 스코프란? 식별자 참조 가능 유효 범위 모든 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효 범위가 결정된다. 이 유효 범위를 스코프라고 한다. 식별자 검색 시 사용하는 규칙 스코프를 통해 js 엔진은 이름이 같은 두 개의 변수 중 어떤 변수를 참조할 지 결정하기도 한다. 즉, 식별자를 검색할 때 사용하는 규칙인 것이다. 네임스페이스 스코프는 식별자에 범위를 제공하는 영역이다. 변수 이름은 이 영역 내에서만 유일하면 된다. 스코프가 있기에 동일한 변수 이름을 다양한 곳에서 사용할 수 있게된다. 스코프 내에서 식별자는 유일해야 ..

「딥다이브 자바스크립트」 정리 - 함수 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 함수란 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수 내부로 입력을 전달 받는 변수를 매개변수, 호출 시 입력하는 부분은 인수, 출력을 반환값이라 부른다. 함수는 함수 정의를 통해 생성하고 호출을 통해 실행한다. 함수는 객체 타입의 값이므로 식별자 이름을 붙일 수 있는데 함수 이름은 자신을 잘 설명할 수 있도록 해야한다. 함수 리터럴 함수는 객체 타입의 값이므로 함수도 함수 리터럴로 생성할 수 있다. var test = function add(x){ return x + 1 } 함수 이름(add)은 식별자이므로 식..

「딥다이브 자바스크립트」 정리 - 객체 리터럴 & 원시 값과 객체의 비교 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 1. 객체 리터럴 객체란 1. 객체 특징 원시 값을 제외한 나머지를 모두 객체 객체는 원시타입과 달리 변경 가능한 값 객체는 0개 이상의 속성(프로퍼티)로 구성된 집합 객체의 속성은 키와 값으로 구성 객체는 속성(객체의 상태를 나타내는 값)과 메서드(속성을 참조하고 조작할 수 있는 동작)로 구성된 집합체 2. 객체 생성 방법 클래스 기반 객체지향 언어(ex:자바)는 객체를 생성하려면 클래스를 정의하고 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성한다. 하지만 js는 프로토타입 기반 객체지향 언어로, 위와 달리 다양한 객체 ..

script 태그를 삽입했는데 아니 글세 요새 바닐라 js만으로 기능을 개발해보는 작업을 하고 있다. 별 어려움없이 DOM객체를 활용하여 이벤트도 넣고 기능도 넣고... 그렇게 js 파일을 작성한 후 HTML 파일의 head에 삽입한 후 실행했다. 그러나 js 코드가 일부 작동조차 하지 않는 것을 발견하고 왜 함수가 실행이 안되지 갸웃갸웃하다 검색을 해보니 script 태그의 위치를 올바르게 삽입하지 않았다는 것을 깨달았다. 덕분에 이런 기초적인 것도 몰랐던 것에 반성하고 기록해둔다. 왜 작동이 안되었을까? 브라우저가 렌더링 되는 순서는 아래와 같다. 이는 간단하게 적은 것이니 꼭 따로 살펴보도록 하자. HTML 파일을 파싱 DOM 트리 생성 렌더 트리 생성 화면에 표출 브라우저가 HTML 파일을 해석하..

여러 방법의 electron 시작 일렉트론으로 개발할 일이 생겼다. 평소처럼 잘 정리된 블로그를 참고하려다 저번 vue 스터디를 통해 깨달은 공식 문서의 중요성을 생각하고 공식문서를 바탕으로 일렉트론에서 Hello World를 띄우는 법을 기록해본다. 또한 이외에도 한 블로그를 참고하여 보일러 플레이트를 활용한 시작, 기존 react 프로젝트에서 일렉트론 추가하기도 기록해볼 것이다. Electron은 무엇인가? 일렉트론은 HTML,CSS,JS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크이다. 크로니움과 node.js를 바탕으로 제작하여 js 코드베이스를 유지하며 windows, mac, linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다. 공식문서와 함께 시작하기 0. 목적 Hello..