본문 바로가기

Language/JavaScript(ES6)

(48)
타입 스크립트 시작하기(with Next) 여태까지 필요성을 크게 못 느껴서 사용은 커녕 뭐하는 건지도 몰랐는데, 사용 방법이 어렵지 않아서 이번 기회에 정리 하고 자주 사용해보려고 한다. Typescript란 1 2 3 4 5 6 7 8 9 10 11 const areYouCool: boolean = true; const answer: number = 42; const typescript: string = "great"; const greetings: string = ` Hello, Readers! Welcome to TypeScript. `; const hasType: Object = { TypeScript: true, JavaScript: false }; 위와 같이 변수:타입 과 같은 방식으로 변수에 타입을 지정해줄 수 있다. 이로써 기존의..
Javascript로 Hash 처리하기 c++이나 자바 파이썬의 map, Hashmap, dictionary과 같이 Hash처리하기 위해 마땅히 좋은 방법이 없는거 같다. 아니면 내가 모르는 거겠지... 오랜만에 한 번 사용해봤는데 너무 미숙해서 정리를 하고자 한다. 1 var a = [1,2,3,1,2,2,2,3,1,4,6]; // 실험 배열 해당 배열을 중복 처리, 객체 정렬등을 해보도록 한다. 중복값의 누적 다른 언어를 사용하다가 자바스크립트를 사용할 때 가장 헷갈리는 부분이다. 자바스크립트는 객체의 키를 배열처럼 접근 할 수 있다. 1 2 3 4 5 6 7 obj = {} obj[1] = 1; obj // { 1: 1} obj[1] = ++obj[1]; obj // { 1: 2} obj[2] = 1; obj // { 1: 2, 2 : ..
비동기(Promise, Axios, Redux-thunk,async/await) 비동기 전체 로직 중 A로직의 처리를 기다리지 않고 처리 하다가 A로직이 처리를 완료 하면 A로직을 완료하는 기법이다. 웹에서 사용시에는 보통 데이터 처리는 화면의 렌더링보다 느리니, 화면의 렌더링을 일단 처리하고 데이터 처리는 요청이 완료 되었을 때, 화면에 뿌려주는 형식으로 사용된다. 그런데 단지 비동기를 그냥 처리만 할 경우에는 다음과 같은 문제점이 생긴다. 1 2 3 4 5 6 7 function a(){ let greet; setTimeout(function(){greet="hello"},1000); console.log(greet); } a() //undefined a() 의 콘솔 결과는 undefined이다. setTimeout은 비동기적으로 작동하는데 greet를 선언하고 setTimout..
[Javascirpt]함수형 자바스크립트 강의 정리(2) 1에서 만든 함수를 가지고 값이나 배열을 받는 개량된 함수를 만든다. map으로 만드는 values 배열 안에 있는 배열, 혹은 객체를 순회하며 모든 값 or 키값을 받아 배열에 담아 리턴한다. function _identity(val) { return val;}var _values = _map(_identity); 해당 코드는 다음과 같은데_identity는 값을 받아 그대로 그 값을 리턴하는 함수이다. 그리고 이 함수를 _map에 파라미터로 넣었다. 일단 이를 이해하기 위해서_map함수를 다시 보자 function _map(list, mapper) { const new_list = []; _each(list, function(val) { new_list.push(mapper(val)); }); ret..
[Javascirpt]함수형 자바스크립트 강의 정리 함수형 자바스크립트 뿐만 아니라자바스크립트 문법에 대해서도 다시 재정립 할 필요를 느꼈다. 함수형 자바스크립트는 true나 false값도 if문이 아니라 함수로 만들어서 완전히 값들을분해하고 조립하는 식으로 짜여진다. function _is_object(obj) { return typeof obj == "object" && !!obj;} 객체인지 확인하는 코드 역시 함수로 만들었다. 자바스크립트에선 배열 역시 object 타입이다. 고로 배열과 객체는 True를 반환함 function _keys(obj) { return _is_object(obj) ? Object.keys(obj) : [];} 다음은 객체의 키를 반환하는 함수이다. 객체 일시 Object.keys메소드를 이용하여 파라미터의 키들을 배열로..
[ES6]Destructuring assignment Destructuring assignment구조 분해 할당이라고 번역 되어진다. 예시를 보자 var colors = ["red", "white", "orange"];var first = colors[0];var second = colors[1];var third = colors[2];console.log(first, second, third); 기존에 배열마다 변수를 선언 하기 위해선 다음과 같은 방식을 이용해야 했다. 이를 es6에서는 var colors = ["red", "white", "orange"];const [first, second, third] = colors;console.log(first, second, third); 이와 같이 사용 될 수 있다. 객체도 구조 분해 할당을 할 수 있다...
[ES6]default parameter 함수에서 파라미터를 다룰 때 사용 할 수 있는 기술을 알아보자 default parameter const f1 = function(x, y, z) { console.log(x, y, z);}; 이러한 함수가 있다고 가정할 때 f1(0, null); 이러한 값을 불러온다고 치자 x는 0을 불러왔기 때문에 0을 리턴할 것이고y는 null을 불러왔기 때문에 null을 리턴할 것이고z 는 아무것도 불러오지 않았기 때문에 undefinded가 리턴 될 것이다. 그런데 아무것도 불러오지 않았을 때의 기본값을 주고 싶다면 다음과 같이 만들 수 있 을것이다., const f2 = function(x, y, z) { x = x ? x : 4; y = y || 5; if (!z) { z = 6; } console.log(..
[Tool]Webpack 구성하기 각각 무슨 역할을 하는지 정도는 알고 가야 할 것 같다. 설치는 webpack과webpack-cli webpack-cli은 터미널에서 웹팩을 사용할 수 있게 도와주는 도구 예시로scss와 모던js를 전환해주는 설정을 보자 const path = require("path");const autoprefixer = require("autoprefixer");const ExtractCSS = require("extract-text-webpack-plugin"); const MODE = process.env.WEBPACK_ENV;const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");const OUTPUT_DIR = path.join(__dir..