과거의 내가 미래의 나에게

「딥다이브 자바스크립트」 정리 - let, const ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 함수란 1. var 키워드로 선언한 변수의 문제점 중복 선언 가능 같은 스코프 내에서 중복하여 선언이 가능하다. 중복해서 선언한 변수는 var 키워드가 없는 것처럼 동작되어 재할당이 이루어질 뿐 에러는 발생하지 않는다. 함수 레벨 스코프 함수 외부에서 var 키워드로 선언한 변수는 모두 전역변수가 되어버린다. 예를 들어 if문이나 for문 내에서 선언한 변수도 모두 전역변수가 되어버리기에 전역 변수가 남발될 가능성이 높아진다. 변수 호이스팅 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려지고, 그로 인해 변수 선언문 이전에 참조할 수 있게..

「딥다이브 자바스크립트」 정리 - 스코프 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 스코프란? 식별자 참조 가능 유효 범위 모든 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효 범위가 결정된다. 이 유효 범위를 스코프라고 한다. 식별자 검색 시 사용하는 규칙 스코프를 통해 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..

「딥다이브 자바스크립트」 정리 - 데이터 타입 & 연산자 & 제어문& 단축평가 ※ 아래 내용은 책을 통해 학습한 것을 개인적으로 정리한 것으로 내용이 다소 부정확 할 수 있습니다. 1. 데이터 타입 js의 데이터 타입엔 원시(숫자, 문자열, 불리언, undefined, null, 심벌), 객체가 있다. 타입 종류 1. 숫자 C나 자바의 경우 정수와 실수를 구분해서 다양한 숫자 타입(int,long,float…)을 제공하지만 js는 실수로 처리하여 하나의 숫자 타입만 제공한다. 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수도 있는 것이다. 숫자 타입은 실수 외에 Infinity, -Infinity, NaN도 존재한다. 2. 문자열 문자열 표기법으로 “”,’’,``으로 텍스트를 감싸는데 가장 일반..

webpack에 대해 전반적인 학습 정리 강의 중 webpack을 직접 설정하는 법을 배웠고, 더 나아가기 전에 webpack은 무엇이고 어떻게 쓰이는지 먼저 살펴보았다. webpack은 무엇인가? 하나의 웹기능 혹은 무언가를 구현하기 위해서는 수많은 js 코드가 쓰인다. 수많은 코드들을 관리하기 위하여 HTML 파일에 기능별로 분리한 스크립트들을 삽입했더니 A.js에서 쓰인 변수명이 B.js에서 반응하는 등 모든 스크립트가 동일한 스코프를 공유하여 에러가 터지기 일쑤였다. 그렇다고 하나의 js 파일에 모든 코드를 쏟아부으면 가독성이 떨어져 유지보수하기가 어렵게 될 것이다. ES6부터는 이런 단점을 해소하기위해 모듈화를 위한 import/export 구문이 등장했다. 스크립트 삽입 태그에 type 속성으..