소비하는 사람에서 생산하는 사람으로

Javascript 작동 원리에 대해서, Event Loop Javascript는 싱글스레드 기반으로 동작 Node.js는 이벤트 루프를 기반으로 하는 싱글스레드 자바스크립트가 동작하는 환경과 자바스크립트를 해석하고 실행시키는 엔진에 대해 알아보겠습니다. Javascript Engine ? Javascript를 해석하는 Javascript Engine과 웹 브라우저에 화면을 그리는 Rendering Engine은 다른것입니다. Rendering Engine은 HTML과 CSS로 작성된 마크업 관련한 코드들을 콘텐츠로서 웹 페이지에 'rendering'하는 역할을 합니다. Javascript Engine이란 Javascript로 작성한 코드를 해석하고 실행하는 인터프리터 입니다. 주로 웹 브라우저에서 이용..

this는 호출 패턴에 따라 다른 객체를 참조합니다. 실행컨텍스트(EC)가 생성될 때마다 this의 바인딩이 일어나며 우선순위 순으로 나열해보면 다음과 같습니다. 바인딩 프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것을 말합니다. EC 실행 컨텍스트(Execution Context)의 약자이며 scope, hoistiong, this, function, closure 등의 동작 원리를 담고 있는 자바스크립트의 핵심 원리 1. new 를 사용했을 때 해당 객체로 바인딩됩니다. var name = 'global'; function Func() { this.name = 'Func'; this.print = function f() { console.log(this.name..

클로저란 ? MDN 참조 클로저는 함수와 그 함수가 선언되었을 때의 어휘적 환경의 조합이다. 클로저를 이해하려면 Javascript가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)을 먼저 이해해야 한다. 어휘적 범위 지정(Lexical scoping) 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 어디에서 선언되었는지 고려한다는 것을 의미한다. let과 const를 사용한 범위 지정 ES6이전 전통적인 Javascript에는 함수 스코프와 전역 스코프 두 가지만 존재했다. var로 선언한 변수는 함수 내부 또는 외부에서 선언되었는지에 따라 함수 스코프 또는 전역 스코프를 가진다. 이때, 중괄호로 표시된 블록이 스코프를 생성하지 않는다는 점에서 혼란을 일으킬 수 있다. 예..

호이스팅? MDN 용어사전 Javascript에서 호이스팅 이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 예시 catName("레용"); function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } /* 결과: "제 고양이의 이름은 레용입니다" */ Javascipt는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당합니다. 그래서 함수를 호출하는 코드를 선언보다 앞서 배치할 수 있습니다. 예시에서 함수 호출이 함수 ..

목차 배경 Atomic Design 문제점 결론 배경 지금까지 개발해 온 프론트 페이지들의 구조는 어떻게 보면 대부분 비슷하지만, 자세히 들여다보면 제대로 된 구조가 없어서 (스스로 정해놓은 규칙이 없어서) 손이 가는데로 개발이 된 경우가 많았습니다. 스스로 어느정도 정형화 된 패턴을 통해 규칙을 정해두면 가독성도 좋아지고 재활용성도 좋아질거라 생각했습니다. 그래서 디자인 패턴을 서치중 아토믹 디자인이 눈에 들어와 정리해 봤습니다. Atomic Design Designing Systems Atomic Design Methodology Tools of the Trade The Atomic Workflow Maintaining Design Systems 페이지를 만들때 구조화 하는 부분인, 아토믹 디자인 패..