꿈이 많은 어른 아이

this this는 JavaScript 예약어로, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. 대부분 this의 값은 함수를 호출한 방법에 의해 결정된다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다. Binding 프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것이다. 쉽게 식별자와 값을 연결하는 과정을 의미하며, this바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다. 전역..

자바스크립트에서 헷갈릴 수 있는 정의들을 정리해보자. null 빈 값 null 이라는 빈 값을 할당했을 때, 생기는 타입이다. var test; test = null; // 선언한 변수 test에 null값을 할당 console.log(test); // null console.log(typeof test); // object undefined 정의되지 않음 var 선언문의 경우, 호이스팅이 되었을 때 변수 선언과 초기화가 동시에 일어나기 때문에, 변수가 undefined 된다. (타입 결정 안됨) console.log(test); // undefined console.log(typeof test); // undefined var test; undeclared 선언되지 않음 let, const 선언문의 경..

브라우저 저장소 (Web Storage) Web Storage란 HTML5에서 추가된 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능을 의미한다. 이는 쿠키(Cookie)와 비슷한 기능이다. 브라우저 저장소는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. 또, 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다. 이는 데이터의 보안 측면에서 당연하다. LocalStorage 로컬 스토리지는 저장..

Java, Javascript 등 언어들의 개념을 찾아보면 객체 지향 언어라는 단어를 볼 수 있다. 객체 지향 이란 무엇이며, 이 전에는 어떤 언어의 형태였는지를 알아보자. 절차 지향 프로그래밍 (Procedural Programming) 절차 지향 프로그래밍이란 물이 위에서 아래로 흐르는 것처럼 순차적인 처리가 중요시 되면 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법이다. 대표적인 절차지향 언어에는 C언어가 있다. 자동차 제조를 예를 들면, 자동차는 엔진, 차체, 핸들, 의자, 바퀴 순으로 차례대로 만들어져야 한다. 서로 분리되서도 안 되고, 순서가 틀려도 안된다. 하지만 핸들이 고장났다고해서 엔진부터 바퀴까지 전부 수리해야한다면 얼마나 비효율적인가? 예전에는 하드웨어와 소프트웨어의 개..

웹 페이지는 3가지 언어를 이용해 작성된다. HTML : 웹 페이지의 구조와 내용 CSS : 웹 페이지의 모양, 디자인 JavaScript : 웹 페이지의 동적 변경과 응용프로그램 작성 JavaScript 사용을 함에 있어 그 본질을 조금 더 이해하고자 이 글을 작성한다. 자바스크립트는 프로토타입 기반 언어이며, 싱글 스레드이다. 프로토타입 기반 언어란 무엇일까? 싱글 스레드란 뭘 의미하는 걸까? 자바스크립트란 프로토타입 기반 언어와 싱글 스레드 라는 단어를 알기 전에 자바스크립트의 기본적인 개념부터 알고 넘어가려한다. 자바스크립트 코드 위치 HTML 태그의 이벤트 리스너 속성 자바스크립트 파일 URL 부분 자바스크립트의 용도 자바스크립트의 일반적인 용도는 웹페이지에 기능을 더해 HTML 웹 페이지를 동..

다양한 프로그래밍 언어가 존재함에 따라 각기 다른 분야에서 다른 언어들이 사용되고 있다. 어떤 언어들이 존재하고, 그 언어들이 가진 장단점에 따라 어디서 사용되는지 알고 있어야 한다고 생각이 들어 정리해보았다. 프로그래밍 언어 (Programming Language) 컴퓨터 시스템을 구동시키는 소프트웨어를 작동시키기 위한 형식 언어를 의미한다. 쉽게 말하면, 컴퓨터를 이용하기 위한 언어이다. 이는 저급 언어와 고급 언어로 나뉘는데, 우리가 흔히 볼 수 있는 자바스크립트나 파이썬 등은 고급 언어에 해당한다. 고급 언어일수록 사람이 사용하는 언어와 가깝다. 저급 프로그래밍 언어 & 로우 레벨 프로그래밍 언어 (low-lever programming language) 컴퓨터가 이해하기 쉽게 작성된 프로그래밍 ..

REST API REST의 원칙을 기반으로 서비스 API를 구현한 것이다. 최근 OpenAPI(누구나 사용할 수 있도록 공개된 API ex. 구글맵, 공공 데이터 등), 마이크로 서비스(하나의 큰 어플리케이션을 여러 개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처) 등을 제공하는 기업 대부분은 REST API를 제공한다. 그렇다면 REST, API는 뭘까? REST(Representational State Transfer) 자원을 이름으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representaion)에 의한 상태 전달을 뜻한다. 자원 : 해당 소프트웨어가 관리하는 모든 것 (문서, 그림, 데이터, 해당 소프트웨어 ..

Padding, Margin Padding : 안쪽 여백 Margin : 바깥쪽 여백 Position static : 요소를 일반적인 문서 흐름에 따라 배치한다. relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. sticky : static + fixed 특징을 동시에 가진다. - 오프셋(offset) : top, left, right, bottom 값을 의미하고 기준이 되는 곳으로 부터 얼마만큼..

클로저(Closure) 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. - 어휘적 범위 지정 (Lexical scoping) function init() { var name = "test"; function displayName() { console.log(name); } displayName(); } init(); 여기서 주의할 점은 displayName() 내부에는 자신만의 지역 변수가 없다는 점이다. 하지만 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init() 에서 선언된 변수 name에 접근할 수 있다. 만약 displa..

호이스팅(Hoisting) 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기전에 컴파일을 한다. - 인터프리팅(Interpreting) : 컴파일과 다르게 소스 코드를 한 번에 읽어서 번역하지 않고, 런타임 상태의 소스코드를 한 줄 한 줄 번역하면서 프로그램을 구동하는 방식이다. 한 줄씩 번역한 코드가 바로 기계어가 되는 것은 아니고 중간 코드(intermediate code)로 번역된다. 이 중간 코드는 다른 프로그램에 의해 기계어로 번역되어 실행된다. 예를 들어보자 console.log(a); var a = 2; 컴파일 단계에서 자바스크립트 엔진은 이를 2개의 구문으로 확인한다. var a a = 2 var..