투투

요즘 함수형 프로그래밍에 흥미가 생겼다. 리액트로 프로젝트를 진행하면서 좀 더 좋은 코드를 작성하기위해 노력을 하고있는데 이 과정에서 함수형 프로그래밍의 필요성을 알게되었다. 아직 함수형 프로그래밍에 대해 완벽히 이해하지는 못했지만 조금씩 공부를 하던 중에 ES6에서 도입된 제너레이터 함수라는 재미있는 개념이 등장해서 정리를 해보려고 한다. 일반적인 함수를 호출 했을 때 제어권이 함수에게 넘어가고 함수가 모두 실행이 되었을 때 다시 제어권을 함수 호출자가 가져가게된다. 하지만 제너레이터 함수를 호출하면 제어권을 함수가 가져가는 것이 아니라 함수 호출자에게 제어권을 양도(yield)한다. 다음은 1부터 10까지의 수 중에서 홀수를 출력하는 함수를 작성한 것이다. 1부터 10까지의 수가 포함된 배열인 num..

자바스크립트를 사용하여 DOM 요소를 조작한다. 이때 빈번하게 DOM 요소를 조작한다면 웹 성능이 떨어지기 때문에 최대한 적게 DOM 요소를 조작하거나 조작한 것을 한 번에 렌더하도록 해야한다. 또는 React처럼 Virtual DOM을 활용하여 이전의 DOM 요소들과 비교하여 변경사항만 업데이트하여 웹 성능을 최적화시킬 수 있다. 그렇다면 왜 DOM 요소 조작을 많이하면 웹 성능이 떨어지는지 궁금했고 이를 브라우저의 렌더링 과정을 이해하면서 궁금증을 해결하려고 한다. 브라우저의 기본적인 렌더링 과정을 아래의 순서로 알아본다. HTML 문서 파싱 및 DOM 생성 CSS 파싱과 CSSOM 생성 렌더 트리 생성 자바스크립트 생성 리플로우와 리페인트 1. HTML 문서 파싱 및 DOM 생성 브라우저(클라이언트..

자바스크립트에서 함수를 정의하는 방법에는 4가지가 있다. 정의하는 방법에 따라 함수의 특징도 다르기 때문에 확실히 이해하고 넘어갈 필요가 있다. 또한 자바스크립트에서 함수는 일급객체로서 어떠한 성질을 갖고있는지 알아본다. 함수의 기본 형태 아래의 코드는 두 개의 숫자를 인자로 받은 후에 두 수를 더한 값을 반환하는 함수이다. 먼저 함수의 이름은 "my_sum"이며 이 함수의 매개변수는 "a", "b"로 2개가 존재하며 중괄호 내의 함수 몸체에서 a+b를 반환하고 있다. 정의된 함수를 사용하기 위해서 함수 호출을 하고있으며 정수 3과 5를 인자로 전달하고 있다. function my_sum(a, b) { return a+b; } my_sum(3, 5); 위의 코드처럼 함수는 함수 이름, 매개변수, 반환값 ..

클로져는 자바스크립트 뿐만 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 개념이다. 클로져를 좀 더 쉽게 이해하기 위해서는 실행 컨텍스트를 이해하는 것이 중요하다고 생각한다. 클로져의 개념과 특징을 알아보자. 함수 객체의 Environment 자바스크립트 엔진은 함수가 어디에서 호출되었는지가 아니라 함수가 어디에서 정의되었는지에 따라 상위 스코프를 결정하게 된다. 그리고 상위 스코프를 함수 객체의 내부 슬롯인 Evironment은 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 참조한다. 다음 코드를 보자 전역 코드가 평가되는 과정에서 apple 함수는 전역 환경에서 정의되었기 때문에 apple함수의 Evironment는 전역 렉시컬 환경을 참조하게 된다. const a = 1; ..

자바스크립트 엔진은 소스코드를 어떻게 실행할까? 소스코드가 정상적으로 실행되기 위해서는 신경써줘야 할 것들이 많다. 선언한 변수를 찾을 수 있어야하고 함수가 실행되고 종료되었을 때 함수가 호출된 시점으로 돌아갈 수도 있어야한다. 자바스크립트 엔진은 실행 컨텍스트를 통해 소스코드가 실행하는 데 필요한 환경을 만들어주고 관리한다. 자바스크립트 엔진은 소스코드를 평가하고 실행한다. 자바스크립트 엔진은 소스코드를 평가하고 실행하는 2개의 과정을 거치게된다. 평가 과정에서는 선언문으로 작성한 변수와 함수에 대한 식별자를 실행 컨텍스트가 관리하는 스코프에 등록한다. 이어서 소스코드를 순차적으로 실행하게 된다. 실행 과정에서는 평가 과정에서 변수와 함수의 식별자를 등록한 스코프에서 필요한 것을 검색한다. 또한 자바스..

호이스팅으로 인해 변수에 값을 할당하기 전에 참조할 수 있다. 참조 후에 변수를 선언하더라도 코드가 실행되면 변수를 맨 위로 끌어올린 후에 실행되기 때문에 이러한 현상이 발생한다. 즉 아래와 같은 코드를 호이스팅이 발생한 코드라고 할 수 있다. var로 선언한 변수 x에 도달하기 전에 참조하여 출력할 수 있다. 이때 x에는 undefined가 저장되어있을 것이다. console.log(x); // undefined가 출력된다. var x = 5; 호이스팅이이 무엇인지는 알 수 있다. 하지만 호이스팅이 왜 발생하는지 알아볼 필요가 있다. 자바스크립트가 코드를 실행하는 방법 먼저 자바스크립트가 코드를 어떻게 실행하는지 이해할 필요가 있다. 자바스크립트 엔진은 소스코드를 평가하고 실행하는 2가지의 과정으로 진..

React, Vue, Angular와 같은 프론트엔드 프레임워크는 컴포넌트 기반의 개발을 지향한다. 각각의 기능을 세분화하여 하나의 파일에서 구현한다. 이렇게되면 재사용, 유지보수가 용이해진다는 장점이 있다. 자바스크립트 기반으로 복잡한 프로젝트를 작성한다면 많은 어려움이 존재한다. 다음은 공식문서에 나와있는 내용이다. 1. 모든 구성요소에 대해 각각 다른 고유한 이름을 지정해야하는 어려움이 있다. 2. 문자열 템플릿을 사용하면서 HTML에 보기 안좋은 슬래시가 많이 생긴다. 3. HTML과 JS가 컴포넌트로 모듈화되어 있지만 CSS가 빠져있다. 4. 빌드단계가 없어 ES5로 제한된다. 이를 해결하기위해 Vue.js는 Webpack 또는 Browserify와 같은 빌드 도구를 활용하여 .vue 확장자를 ..

Vue에는 computed와 watch라는 속성이 존재한다. 두 개의 속성의 역할은 비슷하지만 분명히 차이점이 존재한다. computed와 watch를 어떻게 사용하고 언제 사용하는지 알아보자. 언제 사용할까? computed와 watch는 비슷하게 동작하여 쉽게 이해되지 않았다. 하지만 언제 사용해야하는지 알고난 후에 이해할 수 있었다. 두 개의 속성은 모두 참조하고 있는 값이 변할 때 작동한다. 하지만 computed는 계산된 결과를 반환하고 watch는 값이 변경될 때 함수가 실행된다. 따라서 watch는 특정 값에 어떠한 조건이 성립되었을 때 실행되는 함수를 등록하고 트리거로 사용할 수 있으며 computed는 일반 methods처럼 사용된다. 어떻게 사용할까? 공식문서에 나와있는 예제는 다음과 ..

MVVM 패턴 Vue는 MVVM 패턴에서 부분적으로 영감을 받았다고 한다. 그렇기 때문에 MVVM 패턴을 알고있어야 할 필요가 있다. MVVM 패턴은 다음 세 가지를 포함한다. Model : 데이터 관리를 의미하며 Vue에서는 Javascript Object를 의미한다. View : 사용자들에게 출력되는 화면이며 Vue에서는 디렉티브를 사용한다. View Model : Model과 View의 인터페이스 역할을 한다. Vue의 인스턴스가 하는 역할이다. 위에 3개의 역할이 독립적으로 동작하여 의존성을 낮추고 유지보수가 용이하도록 하였다. Vue는 각각의 기능을 다음과 같이 분리하였다. View에서는 Vue의 디렉티브를 통해 데이터를 사용자에게 출력한다. {{ message }} Model은 화면에 보여줄 ..

사용자 입력 핸들링 사용자와 앱이 상호작용할 수 있도록 이벤트 리스너를 사용하는데 Vue에서는 v-on을 통해 할 수 있다. 다음은 버튼을 눌렀을 때 문자열을 뒤집는 것이다. v-on에 이벤트를 등록할 수 있으며 여기서 click 이벤트가 발생했을 때 reverseMessage함수를 등록한다. 함수 등록은 methods 안에 정의한다. {{ message }} 문자열 뒤집기 위와 똑같은 기능을 바닐라 자바스크립트로 아래와 같이 작성할 수 있다. 아래의 코드에서는 DOM을 직접 조작하여 기능을 만들지만 Vue에서는 내부에서 DOM조작을 도와준다. Javascript 문자열 뒤집기 v-model을 통해 입력과 동시에 데이터가 변경되는 양방향으로 바인딩할 수 있다. 아래의 코드를 통해 input이 messag..