Web Programming/Javascript

단순히 for(let i =0;i<n;i++)를 대체하고 싶은 경우

[...new Array(n)].forEach((v,index)=>console.log(index)); //0 1 2 3 4

0 ~ n-1 까지의 수가 필요한 경우(map등을 사용해야 하는 경우)

Array.from(Array(n).keys()).map(v=>v) // 0 1 2 3 4

m ~ n -1 까지의 배열(m=5, n=10)

Array.from(Array(n - m).keys()).map(v=>v+m).map(v=>v); // 5 6 7 8 9


물론 더 좋은 방법이 있을 수도 있다.

아래의 isEmptyArray 함수는 빈 배열이거나, Array가 아니면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

JavaScript

TypeScript

Jquery를 사용하지 않는 순수한 자바스크립트 코드입니다.

원리

array.reduce에서 기본 인자 값을 빈 배열을 넣어줍니다.
그 다음 누적 배열에 현재 값이 있으면 누적 배열을 반환하고, 없으면 합쳐서 반환합니다.
이때, 거꾸로 출력 됩니다. (예: [deduplicate([1, 2, 3, 1, 2, 3]) //  [3, 2, 1])
원래대로 출력하려면 .reverse()함수를 사용하세요.
또한 ES6 이상에서만 사용 가능한 함수입니다.

TypeScript

function deduplicate(array: Array<any>): Array<any> {
return array.reduce((temp, now) => temp.includes(now) ? temp : [now, ...temp], []);
}


const zero = num => num < 10 && num >= 0 ? "0" + num : num;
const dateKo = date => `${date.getFullYear()}${zero(date.getMonth() + 1)}${zero(date.getDate())}${zero(date.getHours())}${zero(date.getMinutes())}${zero(date.getSeconds())}초`;

자바스크립트 날짜(Date)를 한글로 표시하는 함수입니다.

xxxx년 xx월 xx일 xx시 xx분 xx초로 나오게 합니다. 인자값의 타입은 Date입니다.

const zero = num => num < 10 && num >= 0 ? "0" + num : num;

0 이상 10 미만이면 숫자의 앞에다가 0을 붙여주는 함수 입니다.

Vue.js에서 배열이나 오브젝트의  v-for은 정말 짜증나는 관계가 아닐 수가 없습니다.


Vue.js 2를 기준으로, 배열이나 오브젝트는 감시가 불가능합니다.

그리고 이는 매우 더러운 코드를 양산하게 되는 이유가 됩니다.


배열이나 오브젝트의 감시를 위해서는 Vue.set(vm.$set) 또는 array.splice를 반드시 써야합니다.

안 쓰면 감시가 안됩니다.


한마디로, v-for을 사용할 때, v-for의 데이터를 바꾸는 일이 생긴다면, 반드시 주의해야할 부분입니다.


단순히 this.oldValue = newValue;로는 절대로 리 랜더링이 되지 않습니다.


다행이도 Vue.js 3.0에는 객체 감시 시스템을 바꿔서 된다고는 하니, Vue.js 3.0을 기다리는 수 밖에 없습니다.

https://github.com/webpack-contrib/webpack-command/blob/master/README.md의 Differences With webpack-cli 항목을 2018년 8월 3일에 번역하였습니다. 의역이 포함되어 있습니다.

webpack-command는 webpack-cli와 동등성을 목표로 하지만, 주목할 만한 차이가 있습니다. 이러한 차이점에는 이 모듈에 webpack CLI를 제공하는 최소한의 명령만 포함되어 있다는 점이 포함됩니다. 초기 설정, 마이그레이션 및 업데이트와 같은 명령은 사용자가 설치한 개별 모듈로 이전됩니다. 


webpack-cli를 사용했었다면 아래와 같은 차이에 주의해야 합니다.

--env 플래그는 사용할 수 없습니다. (The --env Flag is Nuked)

환경변수(Environment Variables)는 매우 오랫동안 사용되어 왔습니다. webpack-cli는 사용자가 flag를 통해 환경변수를 지정할 수 있지만, webpack-command는 해당 기능을 포함하지 않습니다. 대신에 사용자는 환경변수를 기존의 표준 방식으로 사용해야 합니다.

$ NEAT_VAR=woo webpack ...

process.env로 값에 접근하세요. 대신에 사용자가 크로스 플랫폼간 환경변수 (cross-platform environment variables)를 필요로 한다면, cross-env 와 같은 도구를 활용해야합니다.

key=value는 지원되지 않습니다.

webpack-cli로 전달되는 플래그는 --entry name=file같은 문법을 허용합니다. 그러나 이 모듈은 CLI 표준 접근 방식을 채택하여 --flag.key value를 대신 사용하며, key=value문법을 허용하지 않습니다.

항목(Entry)

플래그(--flag또는 입력(webpack <file>)으로 항목을 지정하려면 지정된 파일 또는 디렉터리가 있어야합니다.

쉼표로 구분된 값으로 전달되는 --entry file,file2는 더 이상 사용되지 않으므로 CLI 표준인--entry file --entry file2 문법을 사용하도록 마이그레이션 해야합니다.

--entry name=file을 사용하여 webpack-cli에서 플래그로 전달되었던 항목은 이제 --entry.name file문법을 사용하도록 마이그레이션 해야합니다.

별칭(Alias)

webpack-cli에서 --resolve-alias alias=value같이 전달되었던 별칭은 --resolve-alias.{alias} {value} 문법으로 마이그레이션 해야합니다.

로더 별칭(Loader Alias)

webpack-cli에서 --resolve-loader-alias alias=value같이 전달되었던 로더 별칭은 --resolve-loader-alias.alias value 문법으로 마이그레이션 해야합니다.



오역에 대해서는 댓글로 알려주세요.

+ Recent posts

티스토리 툴바