React 프로젝트를 시작할때 Webpack을 설정하는게 쉽지 않다. 그래서 한번 기본적인것들을 정리해보려한다. 그래야 다음에 새로 시작할때 덜 헤맬것 같다. 목차 webpack.config.js entry output module( + loader) plugin devServer devtool Babel 설정 기타등등 webpack.config.js Zero configuration Webpack4에와서 webpack.config.js파일은 더이상 필수가 아니다. Create-React-App처럼 별다른 configuration없이 webpack을 사용할 수 있다. 하지만 나는 webpack을 내 입맛대로 사용하고 싶기 때문에 webpack.config.js를 […]
Archives: 프론트엔드
prefix Webpack설정을 위와같이 했을때, <img src=”picture.jpg”>라는 코드를 Webpack은 <img src=”/assets/picture.jpg”>이렇게 바꿀것이다. 그래서 내 앱이 http://server.com/에서 돌아가고 있다면, 브라우저는 http://server.com/assets/picture.jpg파일을 읽어들일것이다. 이런 prefix의 기능을 활용해서 js / css / font파일이 cdn서버에서 가져와질 수 있도록 할 수 있다. publicPath : “http://cdn.com/” 이렇게 해놓으면 파일들의 root path가 다 cdn.com으로 되서 저 서버에서 해당 파일들이 가져와질것이다. (같은 이야기지만) file-loader에서도 […]
문제상황 end함수의 Promise에서 Promise executor functions should not be async. 라는 에러 메세지가 뜬다. 문제 해결 과정 참고 링크 https://velog.io/@hanbinleejoy/Promise-%EC%83%9D%EC%84%B1%EC%9E%90-%EB%82%B4-async-await-%EB%84%A3%EA%B8%B0 https://stackoverflow.com/questions/43083696/cant-throw-error-from-within-an-async-promise-executor-function promise executor함수에 async를 쓰면 안된단다. 해결 방법 왜 쓰면 안되는지는 잘 모르겠지만, 일단 이렇게 고쳤다.
문제상황 7,8번째 줄에서 다음과 같은 에러가 뜬다. Function declared in a loop contains unsafe references to variable(s) ‘direction’. 왜 이런 에러메세지가 나왔는지 짐작은간다. todos를 루프 돌리면서 안에있는 함수를 호출할때는 이미 direction이 내가 의도한 값이 아니기 때문이다. 예를들어서, 실행해보면 12만 계속 나온다. 당연하다! 실행시점에서 a를 찾아 찾아 위로 올라갔을때(scope chain) 이미 a값은 12가 되어있기 때문이다. 그래서 […]
types.ts파일 안에 모든 type들을 다 정의해 놓는 중이었다. 근데 IMatrix 의 moveBlock에서 IBlock쪽에 다음과 같은 에러가 나왔다. ‘IBlock’ was used before it was defined. 그래서 막 찾아본 결과 다음과 같은 2가지 방법을 알아냈다. 파일 맨 위에 적기 나쁘지는 않은데,, 아래 방법이 더 깔끔하다고 생각한다. .eslintrc.js 파일 수정 overrides 해주면 된다.
[string] 튜플처럼 쓰는거다. string[] Array<string> string[] 하고 Array<string>는 같다!!!
javascript였다면 spells를 추가하는게 문제가 안되는데, typescript에서는 내 맘대로 프로퍼티를 추가하면 안된다. MyComponent라는 타입에다가 먼저 spells라는 프로퍼티가 들어갈것이라고 알려줘야한다.
Typescript Handbook / Developer’s Record 를 참고했습니다. 함수 타입 인자의 타입과 return type을 지정할 수 있다. 또한 익명함수도 만들 수 있어서 변수에 할당도 된다. 함수 자체의 타입도 만들 수 있다. 인자의 이름이 같을 필요는 없다. 타입 추론 Parameters Optional 굳이 있어야 하는건 아니다~ 라는 의미로 ?를 쓴다. Default 기본으로 parameter의 값을 지정할 수 있다. 만약에 default parameter가 앞에 […]
Typescript Handbook / Developer’s Record 를 참고했습니다. 기본 상속 접근 제어 public protected Person을 바로 intialize하면 name에 접근 할 수 없다. private 호환문제 구조가 같으면 할당이 된다! 하지만, 그렇다고 없던걸 쓸 수 있는건 아니다. 마치 Typecasting느낌이랄까.. Readonly Parameter Property 이거 편하다. 인자값 앞에 접근제한자를 붙이면 된다. Getter/Setter 그닥 쓸모있어 보이지는 않는다. Static Abstract 그 자체로 […]
Typescript Handbook / Developer’s Record 를 참고했습니다. 기본 Object에 바로 Interface 지정해서 쓰는거는 모양이 딱 맞아야 한다. 하지만, 함수의 인자값으로 들어갈때는 모양이 조금 안맞아도 된다. 그런데 또…인자값에서 바로 object를 넣는거는 모양이 딱 맞아야 한다.으이구. 왜 이런 혼란스러운 규칙이 있는지 모르겠다. 그냥, 모양이 딱 맞아야 함수의 인자값으로 넣을 수 있다고 생각하는게 맘 편하겠다. Optional 아니면 3항 […]