투투

함수형 프로그래밍으로 프로그래머스 문제 풀면서 함수형 프로그램을 이해하고 연습하기 처음에는 코드가 이상할 수도 있지만 공부를 하면서 점점 좋은 코드로 다듬기 https://programmers.co.kr/learn/courses/30/lessons/77884 코딩테스트 연습 - 약수의 개수와 덧셈 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주 programmers.co.kr 이번 문제를 풀 때는 역할 별로 함수를 구분하는 것에 신경을 썼다. 약수인지 판단하는 함수, 홀수인지 짝수인지 판단하는 함수, 약수의 개수를 구하는 함수,..

요즘 함수형 프로그래밍에 흥미가 생겼다. 리액트로 프로젝트를 진행하면서 좀 더 좋은 코드를 작성하기위해 노력을 하고있는데 이 과정에서 함수형 프로그래밍의 필요성을 알게되었다. 아직 함수형 프로그래밍에 대해 완벽히 이해하지는 못했지만 조금씩 공부를 하던 중에 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가지의 과정으로 진..

Vue를 학습하면서 명령형 프로그래밍과 선언형 프로그래밍을 자세히 알아야 할 필요성을 느꼈다. 특히, 선언형 프로그래밍은 처음 들었으며 웹을 컴포넌트 기반으로 개발할 때의 핵심이라고 생각했다. 따라서 이번 글에서는 명령형 프로그래밍과 선언형 프로그래밍의 차이와 선언형 프로그래밍에 집중할 것이다. 어떻게 vs 무엇을 명령형 프로그래밍은 "어떻게" 할 것인가에 집중을 하고, 선언형 프로그래밍은 "무엇을"에 집중을 한다. 이를 확실히 이해하기위해 택시를 탔을 때 택시 기사의 질문에 각각 어떻게 대답을 하는지 알아보자. 택시기사 : "어디로 갈까요?" 어떻게 : "500m 직진 후에 사거리에서 좌회전을 합니다. 이후 1km 직진을 하고 삼거리에서 우회전하여 다섯 번째 건물로 갑니다." 무엇을 : "백화점으로 가..

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처럼 사용된다. 어떻게 사용할까? 공식문서에 나와있는 예제는 다음과 ..