끄적끄적_개발노트

자바스크립트는 변수를 3단계에 걸쳐서 생성하며, 생성하는 순서는 아래와 같다. Javascript 엔진에서의 변수 생성 단계 : 선언 -> 초기화 -> 할당 선언 단계 변수를 실행 컨텍스트(실행 코드에 제공할 정보 객체)의 변수 객체에 등록한다. 초기화 단계 변수 객체에 등록된 변수를 위한 메모리 공간을 확보한다. (이때, undefined로 초기화됨) 메모리가 할당되면 메모리 참조를 통해 변수에 접근할 수 있다. 할당 단계 사용자가 정의한 값을 변수에 할당해준다. var 의 경우, 선언과 초기화(undefined)가 함께 진행되고 let 의 경우, 선언과 초기화가 각각 진행되어 - 정의가 되지 않았다는 ReferenceError가 출력되며, const 의 경우, 선언할 때 초기화 여부를 검증하게 되어 ..

앞서서 package.json (+package-lock.json) 으로 node 에서의 모듈 버전관리에 관해 간략하게 다뤘었고 (https://bans.tistory.com/22) [npm] 어? 그거 그냥 만들어지던데... [ package.json ] npm - Node Package Manager Javascript 환경에서 개발을 하는 데 빼놓을 수 없는것이 바로 npm이다. npm - node package manager 패키지를 프로젝트에 설치하거나 갱신 또는 삭제하는데 사용되는 도구를 패키지.. bans.tistory.com TypeScript의 간략한 개념 및 사용하게 된 배경 등을 다뤘었다. (https://bans.tistory.com/25) [TS] TypeScript란? - 기본개..

https://yozm.wishket.com/magazine/detail/1585/ 웹 개발 시간을 줄여주는 팁 4가지 | 요즘IT 앞서 작성한 웹 개발 생산성을 높이기 위한 방법에 이어서 이번에는 웹 개발 시간을 줄여주는 몇 가지 팁을 살펴볼까 합니다. 항상 일정이 타이트한 웹 개발 프로젝트에서 조금이라도 시간을 아 yozm.wishket.com

TypeScript, 왜 만들어지게 되었는가? - TypeScript 는 Javascript 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다 (관련 페이지) 위키백과에 서술되어있는 TypeScript 의 시작 문단이다. TypeScript 는 Javascript 의 한계를 (단점을) 보완하여 개발된 오픈소스 언어라고 한다. 그럼 Javascript 는 왜 단점이 있었으며, Javascript 내에서는 왜 해결하지 못했던 걸까? Javascript - Interpreter Language 자바스크립트는 1995년, html 안에서의 동적 움직임 및 작용을 표현하기 위해 개발된 인터프리터 언어이다. 인터프리터 언어의 특성상 '컴파일 단계' 를 거치지 않고 로직이 구현되게 되었으며 이러..

스크랩 (Scrap) 주로 신문 기사 등을 오려서 모으는 것을 '스크랩' 이라 표현하곤 했다. 사전에는 스크랩의 뜻을 아래와 같이 표현하고 있다. 이 처럼 '필요한 글' 이나 '사진' 을 오려 내는 일을 '스크랩' 이라 하며 이를 웹 페이지에서 함수(기능) 등을 이용하여 구현해 놓은 것을 (웹)스크래핑 이라고 한다. 위의 내용은 현재 접속한 나의 블로그의 메인 페이지 html 문서 header 에 들어있는 meta tag 들이다. 내 블로그 페이지 (https://bans.tistory.com) 를 복사하여 (혹은, 다른 링크를) 다른 곳 (카카오톡, 디스코드, 블로그 등등)에 링크했을 때 해당 플랫폼에 이렇게 해당 페이지의 정보가 뜨는 것을 본 적 있을 것이다. 이러한 이미지 / 간략한 설명 글은 해당..

npm - Node Package Manager Javascript 환경에서 개발을 하는 데 빼놓을 수 없는것이 바로 npm이다. npm - node package manager 패키지를 프로젝트에 설치하거나 갱신 또는 삭제하는데 사용되는 도구를 패키지 매니저(Package Manager)라고 하며, 현재 자바스크립트 패키지 매니저는 npm, yarn 이렇게 두가지 도구로 나뉘어져 있다. npm : https://npmjs.com yarn : https://yarnpkg.com/ node 를 사용할 때 필요한 모듈들을 install 하고 개발자가 만든 모듈들을 upload할 수 있으며 사용방법 등의 정보가 위의 두 개의 커뮤니티를 통해 공유되고 있다. 하지만, 프로젝트를 만드는 데에는 한 가지의 모듈만 ..

"Hello world! 내 이름은 " + name + "입니다." `그리고 제 이름은 ${name} 입니다.` Javascript 는 Template Literals (ES5까지는 template strings ) - 템플릿 리터럴을 제공한다. MDN 문서에서의 Template Literals의 설명은 아래와 같이 시작한다. 내장된 표현식을 허용하는 문자열 리터럴 - Template Literals 자바스크립트에서 '문자열' 은 데이터의 양 끝에 큰 따옴표(" ") 혹은 작은 따옴표(' ') 로 감싸서 ( '문자열' or "문자열" ) 표현하게 되는데, 이렇게 따옴표로 이루어진 데이터 안에는 특정한 기능이나 변경 없이 string 문자열 데이터만 들어갈 수 있다. 그래서 이 문자열과 문자열 사이에 특정..

Javascript 를 사용하면서, (or 다른 언어에서 이벤트 등의 특정 상황에서) 특정한 이벤트에 실행시키는 함수를 실행할 때 (사실 JS 외에는 실제로 만나보지 못했다.. 화살표함수 이녀석) 우리는 Callback 이라는 개념과 마주하게 된다. 우선 콜백의 정의부터 알아보자. '콜백(Callback)의 정의' 라고 검색했을 때 맨 처음 나오는 위키백과의 정의는 아래와 같이 시작한다. 프로그래밍에서 콜백(callback) 또는 콜애프터 함수(call-after function)[1]는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. Javascript 는 탄생 배경에서부터 웹 브라우저를..

JS 에서 변수를 한번에 담기 위해 사용하는 구조는 '배열 (Array)' 과 '객체 (Object)' 구조로 크게 두 가지로 나누어진다. 데이터를 다루는 데 있어서 이 배열에 담긴 데이터들과 객체의 담긴 데이터들을 분리해서 구별해 저장할 필요가 생길 때 사용하는 기능이 바로 '구조분해할당' 구문이다. let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 });..