자바스크립트

리덕스 핵심 개념 10분만에 배우기

리덕스란? 리덕스란 무엇이고 왜 사용하는 것인지 알아보자. 리덕스는 사실 알고나면, 정해진 구조를 배신하지 않는 형태이고 단방향으로 데이터를 제어하기 때문에 전혀 어렵지 않다. 리덕스를 배우기 전에: '상태' 란? 리덕스를 공부하다보면 '상태' 란 말을 많이 사용한다. 여기서 말하는 '상태' 란, 간단히 '변수'라고 생각해도 된다. '상태'는 보통 리액트와 같은 SPA 프레임워크에서 UI 가 변하는 기준점이 되는 변수를 말한다. 리덕스는 보통 '상태 관리' 라이브러리라고 불리우며, 리액트 앱의 전역에서 사용되는 '상태' 를 관리할 때 주로 사용된다. 예측 가능한 앱 작성을 도와준다. 리덕스로 만든 앱은....

자바스크립트 클래스 간단 정리

개요 클래스는 오브젝트를 만들기 위한 템플릿이다. 데이터와 데이터를 조작하는 코드를 하나로 추상화한다. JS 클래스는 프로토타입을 기반으로 빌드되었지만 ES5 의 클래스 같은 의미와는 다른 문법과 의미를 가진다. 클래스 정의 JS 의 '특별한 함수'이다. JS 에서는 모든 것이 오브젝트로 표현 가능하다는 점을 염두에 두자. 구조 클래스 문법에는 2가지 구성 요소가 있다. 클래스 선언 (Class Declaration) 클래스 표현식 (Class Expression) 클래스 선언 (Class Declaration) 알아보기 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 호이..

자바스크립트 호이스팅 매우 간단히 정리

정의 자바스크립트 호이스팅은 인터프리터가 코드 실행 전 함수, 변수, 클래스 선언 등을 스코프의 맨 위로 올리는 프로세스를 말한다. 호이스팅은 코드가 선언되기 전 함수가 안전하게 사용될 수 있게 한다. 변수와 클래스 선언 또한 호이스팅된다. 그래서 선언 전에도 참조될 수 있다. 그러나 그런식으로 코드를 작성하는 것은 권장하지 않고, 예상치 못한 에러를 낼 수 있다. 에러를 예방하고 싶다면, 자바스크립트는 선언만 호이스팅하고 초기화는 호이스팅하지 않는다는 것을 기억해야 한다. let, const 를 포함한 ECMAScript 2015 언어 명세 이전에는 호이스팅이 Javascript 의 실행 컨텍스트에서 동작방식을 표현하는 일반적인 방법이었다. 함수 호이스팅 예제 catName("Tiger"); funct..

자바스크립트 클린코드 원칙 간단 정리

클린 코드의 특징 응집도, 단일책임, 적당한 추상화를 지키는 코드이다. 찾고 싶은 로직을 빠르게 찾을 수 있는 코드이다. 유지보수 시간을 줄여주는 코드이다. 클린 코드는 짧은 코드가 아니다. 응집도 하나의 목적을 가진 코드가 흩뿌려져 있으면 안 된다. 같은 목적의 코드는 뭉쳐두자. 단일 책임 하나의 함수는 하나의 역할만 해야 한다. 하나의 일을 하는 뚜렷한 함수 이름을 짓자. 함수가 뚱뚱해진다 싶으면 이 함수가 1개 이상의 일을 하고 있는 것은 아닌지 점검해보자. 때때론 함수 이름을 한글로 먼저 지어보고 가장 핵심을 짚는 이름이 무엇인지 고민해보자. 추상화 함수의 세부 구현 단계가 제각각이면 안 된다. 추상화 단계를 조절해 핵심 개념을 필요한 만큼만 노출해야 한다. 너무 추상화 단계가 높아서 보여주어야 ..

자바스크립트 DOMContentLoaded vs load (onload) 의 차이

개요 바닐라 자바스크립트에서 페이지 시작 시에 DOM 에 이벤트 리스너를 붙여주고 싶다면, document.addEventListener() 혹은 window.addEventListener() 와 같이 이벤트를 붙이는 것으로 시작하는데, 보통 아래의 두 이벤트 타입 중 하나를 사용한다. DOMContentLoaded load (onload) 위의 두 방법은 소스코드가 비슷하여 얼핏 같은 역할을 한다고 이해하기 쉬우나 미세한 차이가 있다. DOMContentLoaded 를 이용하는 방법 document.addEventListener( "DOMContentLoaded", function () { // attach event listeners here. }, false ); 이 이벤트는 말 그대로 '모..

자바스크립트 클로저 (Closure) 란 무엇인가?

개요 Closure 란, Lexical Scope 개념에서 스코핑 개념을 조금 더 확장시킨 것이다. 외부 함수가 값을 반환했음에도 Lexical Scope 에 의해 내부 함수에서 외부 함수 스코프에 존재하는 변수에 접근 가능하다는 것이 핵심이다. 클로저 예제 코드 1: 기본 개념 function outerFunction() { const outerVariable = "Mozilla"; function innerFunction() { console.log(outerVariable); } return innerFunction; } const myFunc = outerFunction(); myFunc(); innerFunction() 에서는 outerFunction() 스코프에 존재하는 outerVariabl..

자바스크립트 var , let , const 의 스코프 차이에 대해 알아보자.

개요 자바스크립트에서 변수를 선언할 수 있는 키워드는 var, let, const 3가지가 있다. 엄밀히 따지자면, const 는 상수를 선언하는 키워드라고도 할 수 있다. 자바스크립트 코딩 시 무조건 var 의 사용은 지양해야 한다. var 와 let, const 의 가장 큰 차이는 스코프이다. var 는 Function Scope 혹은 Global Scope 에 사용된다. 이는 많은 자바스크립트 개발자들이 실수할 여지를 만들어주었다. 예제 코드 var 는 블록 스코프를 지원하지 않는다. if (Math.random() > 0.5) { var x = 1; } else { var x = 2; } console.log(x); // window.x; 다른 언어를 사용하다 왔다면, 보통 위의 코드가 에러가 날..

자바스크립트 숫자 범위 배열 만들기

코드 최소 값부터 최대 값까지의 숫자가 들어있는 배열을 만들 필요가 있어서 작성해보았다. /** * min 에서 max 까지의 숫자를 배열로 반환한다. * * @param min * @param max * @return {*} */ function getArrayFromRange(min, max) { return [...Array(max - min + 1).keys()].map((i) => i + min); }

자바스크립트의 Proxy 란?

프록시(Proxy)란? Proxy 오브젝트는 다른 오브젝트를 감싸 연산을 가로챈다. 이를테면 프로퍼티를 읽고 쓰거나 다른 자체적인 오브젝트 조작 연산등을 가로챈다. 혹은 아무런 핸들러도 등록하지 않아 오브젝트가 프로퍼티를 다루는 것을 투명하게 허용할 수도 있다. 일반적으로는 중간에 get 과 같은 연산을 가로채 프로퍼티 접근 로그를 남기거나 set 으로 값이 입력 되기 전 값 검증하기, 값 포맷팅하기, 입력된 값을 깔끔하게 만드는 등의 작업을 추가하여 해당 연산이 일어날 때마다 개발자가 입력한 추가 작업이 수행되도록 하는 방식으로 많이 사용한다. 많은 라이브러리나 브라우저 프레임워크에서 사용된다. 문법 let proxy = new Proxy(target, handler); target: 감쌀 오브젝트이다..

자바스크립트 fetch API 알아보기 (feat. ajax)

개요 네트워크에서 HTTP 통신을 이용하여 리소스를 가져오는(fetch) 역할을 한다. Fetch API 이전에는 XMLHttpRequest 와 Ajax 가 있었다. 다만, XMLHttpRequest 는 스펙 자체가 사용하기 조금 불편하다는 단점이 있었고, Ajax 는 JQuery 의존성이 걸려있다는 단점이 있었다. 이러한 문제들을 해결한 유연하고 강력한 API 가 fetch API 이다. 특징 요청으로 Request 인터페이스를 이용하고 반환 값으로 Response 오브젝트를 이용하는데, 응답은 비동기이기에 이를 resolve() 하여 Promise 형태로 반환한다. Promise 에 대한 설명 fetch() 의 결과로 반환되는 Promise 객체는 오직 네트워크 에러가 발생했을 때만 reject 를 ..

자바스크립트 Promise 알아보기

개요 Promise 객체는 비동기 작업을 코드로 깔끔하게 표현하기 위해 사용되는 포장지같은 것이다. 아직 결정되지 않은 값에 대한 유연한 처리를 제공하여 비동기 코드가 잘 녹아들 수 있게 해준다. The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. 상세 Promise 는 Promise 가 생기는 시점에는 불가피하게 알 수 없는 값(not necessarily known)에 대한 프록시이다. 이를 통해 비동기 작업의 최종 성공으로 도출되는 값이나 실패에 대한 이유 처리를 담당하는 핸들러를 구성할 수 있다. 이를 이용해 비동기 메서드를 동기 메서..

자바스크립트 XMLHttpRequest 알아보기

개요 XMLHttpRequest 객체는 브라우저에서 서버와 통신하기 위해 사용된다. 페이지의 전체 새로고침 없이 새로운 데이터를 가져올 수 있어서 유용하다. 사용자가 현재 하는 일을 방해하지 않고 웹페이지를 일부 업데이트하는 것을 가능하게 한다. JQuery 사용자가 많이 쓰는 AJAX 는 XMLHttpRequest 를 사용하기 편하게 만들어놓은 것일 뿐이다. 이름과 달리 XMLHttpRequest 는 XML 데이터 이외에도 다양한 데이터를 주고 받는 것이 가능하다. 서버로부터 이벤트 데이터 혹은 메시징 데이터를 받는 것이 통신에 포함되어 있다면, EventSource 인터페이스를 통한 server-sent event 를 사용하는 것을 고려하자. 완전한 양방향 통신의 경우는 WebSockets 가 보통은..