콘요맘떼 개발일지

평가 전략 (Evaluation Strategy) 프로그래밍 언어에서 함수 호출 argument의 순서 혹은 함수에 어떤 값을 전달시킬지 등을 결정하는 것을 말한다. 보다 간단하게 표현하면 함수에 값을 넘겨줬을 때 함수가 어떻게 실행될 것인가를 다룬다고 생각하면 될 것이다. 우리가 'call by ~~'라고 표현하는 것들이 바로 평가 전략이라고 볼 수 있다. Call by Value parameter의 값이 복사되어 argument로 넘어가는 방식을 말한다. 전달된 것은 복사된 값이기 때문에 함수 내부에서 해당 값을 어떻게 변경해도 원본에는 영향이 가지 않는다. Call by Reference parameter로 reference(참조 주소, 메모리 주소)를 넘겨주는 방식을 말한다. reference 값..

가비지 컬렉션 (Garbage Collection) 프로그래밍 언어와 무관하게 메모리는 다음과 같은 생명주기를 공통적으로 가진다. 1) 필요한 메모리를 할당한다. 2) 할당된 메모리를 사용한다. (읽기, 쓰기) 3) 해당 메모리가 필요 없어지면 메모리를 해체한다. 개발자가 메모리의 해체 시기를 직접 결정해야 하는 로우레벨 언어(ex. C, C++)와 달리 자바스크립트는 가비지 컬렉션이라는 자동 메모리 관리 형식을 활용한다. 참고로 가비지 컬렉션은 필요 없어진 메모리만을 해제하지만 필요 없어진 메모리들이 모두 해체되는 것은 아니다. (그렇기 때문에 근사적 작업이라고 볼 수 있다.) 가장 대표적인 가비지 컬렉션 알고리즘에는 크게 두 가지 종류가 있다. 1. 참조-세기 (reference-counting) 다..

자바스크립트의 배열 (Array of Javascript) 자바스크립트의 배열은 사실 우리가 아는 일반적인 배열이 아니다. 자바스크립트의 배열은 해시 테이블로 구현된 객체이며 요소들끼리 메모리상으로 나란히 위치하지도 않는다. 배열을 생성한 후 typeof를 통해 그 타입을 출력하면 'object'가 반환됨을 확인할 수 있다. 또한 객체의 모든 프로퍼티들에 대한 정보를 보여주는 Object.getOwnPropertyDescriptor( ) 메소드를 활용하면 자바스크립트의 Array는 인덱스와 length를 프로퍼티 키로 가지는 Object임을 확인할 수 있다. 그렇기 때문에 자바스크립트 객체에 들어가는 요소들은 서로 연속되어 위치하지도 않으며 서로 동일한 타입이 들어가지 않아도 된다. (파이썬의 list와..

CSS Grid Grid는 현 시점에서 가장 궁극적인 형태의 레이아웃을 제공해준다. 이미 Flex만으로도 레이아웃을 잘 짤 수 있는데 Grid를 공부해야 하는 이유는 무엇일까? Flex는 1차원의 개념에서 그치지만 Grid는 2차원의 레이아웃을 표현할 수 있다. Grid를 활용하게 되면 여러 라인의 아이템을 표현할 때 불필요한 row 혹은 column 컨테이너를 만들어주지 않아도 된다. 물론 Grid가 Flex보다 무조건 좋은 것이라고 볼 수는 없다. Grid는 전체적인 레이아웃을 잡아주거나 2차원의 레이아웃을 표현할 때 강점을 지닌다. 하지만 1차원의 레이아웃을 표현할 때는 단순한 Flex를 활용하는 것이 훨씬 효과적이다. 따라서 상황에 따라 Flex와 Grid 중 필요한 것을 적절히 활용할 수 있는 ..

HTTP Request Method HTTP Request Method는 클라이언트가 웹 서버에게 request를 날릴 때 그 목적 및 종류 등을 표현한다. GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH 이렇게 총 9가지의 종류가 존재한다. 이전에는 GET, POST을 제외한 대부분의 메소드는 실제로 사용되지 않았다. 그러나 Restful API라는 개념이 주목받기 시작하면서 PUT, DELETE, PATCH 등을 포함한 그 외의 메소드들 역시 이전보다 활용도가 높아지게 되었다. Restful API 그렇다면 Restful API가 무엇일까? Restful API는 이름대로 REST 다운 REST API를 말한다. Restful API의 목적..

데이터 속성을 활용하면 자유롭게 HTML element에 추가적인 정보를 저장할 수 있다. HTML에서 사용하기 HTML element에 데이터 정보를 추가해주고 싶다면 data-로 시작하는 속성을 추가해주면 된다. data-로 시작하기만 하면 그 어떤 것도 상관없다. 자 이제 넣은 정보를 활용할 때이다. 물론 화면상으로는 보이지 않으면서 HTML 문서상으로만 무슨 정보를 추가하기 위해 데이터 속성을 활용할 수도 있지만 일반적으로 데이터 속성은 CSS 혹은 Javascript에서 활용하기 위해 등록된다. CSS 정말 마음대로 넣어주기는 했지만 데이터 속성도 엄연한 HTML 속성이다. 따라서 CSS에서도 접근할 수 있다. (1) 속성 선택자에서 활용하기 (2) Property Value에서 활용하기 att..

[참고!] 이벤트 위임에 대해서 공부하기 위해서는 이벤트 버블링과 이벤트 캡쳐링에 대한 이해가 필요하다. 만약 관련된 지식이 없다면 이전 포스트를 먼저 읽고 오길 바란다. 이벤트 위임 (Event Delegation) 이벤트 캡쳐링과 이벤트 버블링을 활용하면 이벤트 위임이라는 강력한 이벤트 핸들링 패턴을 활용할 수 있다. 이벤트 위임은 비슷한 방식으로 작동하는 여러 가지 엘레먼트들이 존재할 때 그들의 공통 조상에 이벤트 핸들러를 부여함으로써 편리하게 이벤트를 핸들링하는 방법이다. 각각의 element에 직접적으로 이벤트 핸들러를 부여하는 것이 더 직관적이고 단순한 방법 같은데 왜 굳이 조상 엘레먼트까지 올라가야할지에 대한 의문이 생길 수 있다. 그래서 예시를 가져와봤다. 위 코드에서 box들은 정상적으로..

이벤트 버블링 (Event Bubbling) 한 아이템에 이벤트가 발생하면 해당 이벤트는 해당 아이템부터 하나씩 그 부모 요소로, 결국은 body element까지 전달된다. 만약 해당 이벤트에 대해서 부모 element 역시 이벤트 핸들러가 존재한다면 하나의 이벤트에 대해서 여러가지 요소들에 대한 이벤트 핸들러가 동작할 수 있다. 이렇게 이벤트가 가장 깊은 곳의 element부터 부모 element로 쭉쭉 거슬러올라가는 방식을 이벤트 버블링이라고 한다. 참고로 모든 이벤트가 버블링되는 것은 아니며 focus 이벤트와 같이 버블링이 적용되지 않는 이벤트들도 존재한다. (물론 거의 모든 이벤트는 버블링이 적용된다.) 위의 예시에서 '아무말'이라는 텍스트를 클릭하면 click이라는 이벤트가 span, div..

실행 컨텍스트에 대한 이해가 없으면 클로저의 개념에 대한 이해가 어려울 수 있다. 만약 실행 컨텍스트에 대한 개념이 잡혀있지 않다면 실행 컨텍스트에 대한 공부를 먼저 진행하는 것을 권한다. 렉시컬 스코프 (Lexical Scope, 어휘적 범위) 자바스크립트는 렉시컬 스코프라는 변수 유효범위를 따른다. 렉시컬 스코프에서는 함수 혹은 변수의 유효범위가 선언된 위치를 기준으로 결정된다. 이와 반대로 호출된 시점을 기준으로 유효범위가 결정되는 방식을 Dynamic Scope라고 부른다. 우리가 자주 사용하는 C, C++, Java, Javascript 등의 언어들은 모두 Lexical Scope 방식을 따르며 Dynamic Scope를 따르는 언어들은 Perl, Bash Shell, APL과 같은 들어보기도 ..

자바스크립트에서 this는 자신을 호출한 객체가 담기는 속성이며 실행 컨텍스트 내부의 this 프로퍼티에 의해 그 값이 결정된다. this의 값이 결정되는 기준은 생각보다 복잡하다. 다음은 대표적인 경우들에 this의 값이 어떻게 적용되는지에 대한 예시들이다. 1) 단독적으로 사용된 this → window 객체 2) 일반 함수 안의 this → window 객체 3) 일반 중첩 함수의 this → window 객체 ※ 만약 this가 window 객체인 경우 this.변수명으로 전역 데이터에 접근할 수 있다. 4) 이벤트 리스터의 this → 이벤트를 발생시킨 객체 (target) 5) 객체의 메소드 안에 위치한 this → 메소드를 호출한 객체 6) 생성자 안의 this → 생성자 함수가 생성하는 객..