option ‘–open ‘ argument missing

By rpf5573
3 Min Read
o

문제상황 webpack, webpack-cli, webpack-dev-server를 깔고, 공식사이트에 나온대로 webpack serve --open 를 쳤다. 근데 다음과 같은 에러가 나왔다. error: option '--open <value>' argument missing npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! hooks@1.0.0 start: `webpack serve --open` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the hooks@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely...

Read onRead later

Webpack4 설정

By rpf5573
6 Min Read
W

React 프로젝트를 시작할때 Webpack을 설정하는게 쉽지 않다. 그래서 한번 기본적인것들을 정리해보려한다. 그래야 다음에 새로 시작할때 덜 헤맬것 같다. 목차 webpack.config.jsentryoutputmodule( + loader)plugindevServerdevtoolBabel 설정기타등등 webpack.config.js Zero configuration Webpack4에와서 webpack.config.js파일은 더이상 필수가 아니다. Create-React-App처럼 별다른 configuration없이 webpack을 사용할 수 있다. 하지만 나는 webpack을 내 입맛대로 사용하고 싶기 때문에 webpack.config.js를 사용한다. 용도 webpack.config.js 파일은...

Read onRead later

publicPath의 역할

By rpf5573
2 Min Read
p

prefix module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "/assets/" } } Webpack설정을 위와같이 했을때, <img src="picture.jpg">라는 코드를 Webpack은 <img src="/assets/picture.jpg">이렇게 바꿀것이다. 그래서 내 앱이 에서 돌아가고 있다면, 브라우저는 파일을 읽어들일것이다. 이런 prefix의 기능을 활용해서 js / css / font파일이 cdn서버에서 가져와질 수 있도록 할 수 있다. publicPath : "" 이렇게 해놓으면 파일들의 root path가 다 cdn.com으로 되서...

Read onRead later

Promise executor functions should not be async

By rpf5573
1 Min Read
P

문제상황 function ready() { return new Promise<void>((resolve) => { console.log('game ready'); resolve(); }); } function end() { return new Promise<void>(async (resolve) => { await matrixReset(); resolve(); }); } function matrixReset() { return new Promise<void>((resolve) => { setTimeout(() => { console.log('matrix is reset!!'); resolve(); }, 2000); }); } async function over() { await end();...

Read onRead later

Function declared in a loop contains unsafe references to variable(s)

By rpf5573
2 Min Read
F

문제상황 run = (timeout: number) => new Promise<void>((resolve) => { let direction = 'r'; const todos = []; for (let i = 0; i < 15; i += 1) { if (i === 6) direction = 'l'; if (i === 10) direction = 'r'; todos.push(() => { this.dragonBGmove(`${direction + 4}`, timeout); }); todos.push(() => { this.dragonBGmove(`${direction + 3}`, timeout); }); } resolve(); }); 7,8번째 줄에서 다음과 같은 에러가 뜬다. Function...

Read onRead later

[ESLint] 특정 파일에서 특정 rule을 disable시키는 방법

By rpf5573
1 Min Read
[

types.ts파일 안에 모든 type들을 다 정의해 놓는 중이었다. // Block export interface IMatrix { ... moveBlock(matrix: MatrixState, block: IBlock): void; } export interface IBlock { ... new (options: BlockOption): IBlock; updateColor(matrix: MatrixState, $matrix: IMatrix, color: number): void 근데 IMatrix 의 moveBlock에서 IBlock쪽에 다음과 같은 에러가 나왔다. 'IBlock' was used before it was defined. 그래서 막 찾아본 결과 다음과 같은 2가지 방법을 알아냈다. 파일...

Read onRead later

[string] vs string[] vs Array

By rpf5573
1 Min Read
[

[string]

튜플처럼 쓰는거다.

let a : [string] = ["a"]
let b : [string, number] = ["b", 100];

string[]

let a : string[] = ["a", "b", "c", "d", "e"];

Array<string>

let a : Array<string> = ["a", "b", "c", "d", "e"];

string[] 하고 Array<string>는 같다!!!

Read onRead later

Property ‘xxxx’ does not exist on type ‘MyComponent’

By rpf5573
1 Min Read
P

class MyComponent extends Component<Props,States> {
constructor(props: Props) {
super(props);
this.spells = 'abc'
}
}

javascript였다면 spells를 추가하는게 문제가 안되는데, typescript에서는 내 맘대로 프로퍼티를 추가하면 안된다. MyComponent라는 타입에다가 먼저 spells라는 프로퍼티가 들어갈것이라고 알려줘야한다.

class MyComponent extends Component<Props,States> {
constructor(props: Props) {
super(props);
this.spells = 'abc'
}
}

Read onRead later

Typescript 기초(5) – Functions

By rpf5573
6 Min Read
T

Typescript Handbook / Developer’s Record 를 참고했습니다. 함수 타입 인자의 타입과 return type을 지정할 수 있다. 또한 익명함수도 만들 수 있어서 변수에 할당도 된다. function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; }; 함수 자체의 타입도 만들 수 있다. let myAdd : (x: number, y: number) => number; myAdd = function(x: number, y: number) { return x + y } console...

Read onRead later

Typescript 기초(4) – Class

By rpf5573
4 Min Read
T

Typescript Handbook / Developer's Record 를 참고했습니다. 기본 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return `안녕 ${this.greeting}`; } } let 병인이: Greeter = new Greeter("만나서 반가워"); console.log(병인이.greet()); // 안녕 만나서 반가워 상속 class Animal { name: string; constructor(name: string) { this.name = name; } move(distance: number) { console.log(`${this...

Read onRead later