웹팩 개발서버에 로컬 인증서(SSL) 설정하는 방법을 몰라서 한참 고생을.... 정확하게는 로컬 인증서를 자동으로 생성하는 방법을 몰라서 고생한거긴 합니다. 문서를 좀더 잘읽었으면 삽질이 좀 줄긴 했을거 같은데 말이죠 ㅎㅎㅎㅎ 연관글 영역 1. 로컬 인증서 생성 'ASP.NET Core'의 'React'템플릿에 보면 다음과 같이 2개의 파일이 있습니다. (참고 : github - dang-gun/AspDotNetSamples/WebpackSslTest/ClientApp/OriginalFils/ ) aspnetcore-https.js : 로컬 인증서를 생성해 주는 파일 aspnetcore-react.js : 생성된 경로를 '.env.development.local'에 넣어주는 파일 이 파일들을 실행하면 로..

예전부터 정규식 개체(Regexp)를 사용할 때 값이 제대로 일치하다 말다 한다는 생각을 많이 했습니다. 그래서 가급적 정규식 개체를 사용하지 않았는데...... 의외로 원인은 쉬운 곳에 있었습니다. 1. 문제의 발견 아래와 같이 정규식 개체를 만들고 /** 정규식 개체 */ reg = /\{\{[a-zA-Z0-9]+:[a-zA-Z0-9]+\}\}|\{\{[a-zA-Z0-9]+\}\}/g /** 테스트 문자열 */ testString = "{{test001}}, {{test001:test1}}, {{test001:a}}, {{aa}}"; 아래와 같이 정규식 개체를 사용하는 함수를 만들어 줍니다. private F1(): void { console.log("F1 : " + this.reg.exec(this..

정규식을 사용할 때 테스트로 다음과 같은 사이트들을 이용합니다. regexr.com regex101.com 1. 문제의 발견 다음과 같은 정규식을 만들면 아래와 같은 결과가 나옵니다. /\{\{[test001]+:[a-zA-Z0-9]+\}\}|\{\{[test001]+\}\}/g //테스트용 텍스트 {{test001}}, {{test001:test1}} 그런데 이걸 자바스크립트에 넣으면 아래와 같이 하나만 적중되는 현상이 일어납니다. //let sReg = "/\{\{[test001]+:[a-zA-Z0-9]+\}\}|\{\{[test001]+\}\}/g";//결과 : null let sReg = "\{\{[test001]+:[a-zA-Z0-9]+\}\}|\{\{[test001]+\}\}/g"; let r..

타입스크립트는 자바스크립트로 변환되어 동작하므로 인터페이스를 비교할 방법은 없습니다. 자바스크립트에서 사용하는 꼼수를 그대로 사용해야 한다는 뜻입니다. 0. 테스트 환경 만들기 테스트를 위해 인터페이스 2개를 아래와 같이 만듭니다. export interface Test1Interface { Test1_string: string, Test1_int: number, } export interface Test2Interface { Test2_string: string, Test2_int: number, } 아래와 같이 인터페이스를 가지고 있는 변수를 만듭니다. (저는 클래스를 선호하기 때문에 클래스로 작성했습니다.) Test1Inf: Test1Interface = { Test1_int: 1 , Test1_s..

일반적인 언어에서 열거형(enum) 코드의 일관성과 가독성을 높이는 강력한 기능 중 하나입니다. (= 높은 생산성) 근데 타입스크립트 관련 글을 보다 보면 열거형을 쓰지 말라는 소리를 종종 볼 수 있습니다. 이것은 타입스크립트가 자바스크립트로 변환되는 과정에서 많은 비용이 드는 형식으로 바뀌기 때문입니다. 1. 타입스크립트(TypeScript)의 열거형이 자바스크립트로 변환될 때.... 타입스크립트가 자바스크립트로 변환될 때 열거형은 두 가지 문제가 발생합니다. 1) 역방향 접근을 위해 함수형으로 변환됩니다. 2) 이 문제 때문에 사용하지 않는 코드 정리(트리 쉐이킹, Tree Shaking)로 제거되지 않는 코드가 생성됩니다. 생성된 코드를 보면 아래와 같습니다. //타입스크립트 enum Test1 {..

1. 문제의 시작 웹팩 개발 서버(webpack dev server)를 'ngrok'로 외부에 노출 시켜서 접속했더니 'Invalid Host header' 에러가 납니다. 2. 'Invalid Host header'의 원인 웹팩 개발 서버에서는 호스트 검사를 해서 외부 접속을 차단하기 때문에 발생한다고 합니다. 3. 해결 방법 외부 접속도 허용하면 됩니다. 웹팩 개발 서버 설정에 다음을 추가합니다. allowedHosts: "all" 예전 버전(3 이전 버전)의 경우 disableHostCheck: true 를 추가해야 합니다. 이제 잘 접속됩니다. 마무리 웹팩 개발 서버로 운영하는 경우는 거의 없을 거 같은데 설정 하다보면 '그냥 운영해도 되지 않을까?' 라는 생각이 들게 합니다 ㅎㅎㅎ

자바스크립트(Javascript)에서 'this'는 일반적인 언어에서의 'this'와 조금 다릅니다. 이것은 자바스크립 특성때문입니다. 0. 테스트 코드 작성 설명하기 전에 테스트에 사용할 코드를 작성해 봅시다. index.html 환영! 클릭!! 클릭2!! 클릭3!! 클릭4!! app.js export default class StartUp { A = "StartUp A"; B = "StartUp B"; constructor() { document.getElementById("btnClick").onclick = this.TestCilck; document.getElementById("btnClick2").onclick = this.TestCilck2; document.getElementById("bt..

자바스크립트(JavaScript)는 엄밀하게 말하면 오버로드(Overload)가 없습니다. 타입스크립트(TypeScript)는 IDE에서나 타입스크립트지 출력되면 자바스크립트입니다. 이런 특성 때문에 오버로드도 자바스크립트의 특성을 따라가게 됩니다. 그렇다면 타입스크립트는 오버로드를 어떻게 구현하고 있을까요? 1. 자바스크립트의 오버로딩(Overloading) 자바스크립트는 오버로드가 없습니다. "앵? 파라미터 다르게 해서 같은 이름으로 받는 거 쓸 수 있는데요?" 라는 말을 할 수 있겠지만 자바스크립트의 오버로드는 엄밀하게 말하면 오버로딩이 아니라 자바스크립트의 특성을 이용한 꼼수입니다. 아래 코드를 봅시다. function Main() { console.log("parameter 1 : " + Ove..

프로젝트가 크지 않으면 웹팩 컨피그(webpack.config.js)를 분리할 이유가 별로 없습니다. 저도 계속 'if'문으로 분리해서 쓰고 있었는데요..... 프로젝트에 이것저것 설정할 게 많아지니 개발(development) 모드와 프로덕션(production) 모드 간의 차이가 많아져서 변수로 관리하는 것이 힘들어졌습니다. 1. 컨피그(webpack.config.js) 분리하기 이럴 때 필요한 것이 컨피그를 분리하는 것입니다. 구조는 다음과 같습니다. 1) 공통으로 사용할 공통 컨피그(webpack.common.js) 파일을 만들고 공통으로 사용할 설정을 넣어줍니다. 2) 개발 모드에 사용할 컨피그(webpack.dev.js)를 만들고 개발 모드에서만 사용할 설정을 넣어줍니다. 3) 배포 모드에 사..

1. 문제의 발견 잘 세팅해서 쓰고 있는데 어느 날 갑자기 타입스크립트가 경로를 못 찾는 에러를 뿜기 시작했습니다. 비주얼 스튜디오에서 에러만 날뿐 빌드도 잘되고 에러 없이 디버깅도 잘됩니다. 2. 원인 및 해결 방법 어느 게 문제인지 찾지 못하던 중에..... 돌아다니는 타입스크립트 설정파일(tsconfig.json)를 보면 'include'에 'src'들어가 있는 게 많다? 그래서 넣어보니 에러가 제거되었습니다. 마무리 일단은 해결됐지만 언제 또 무슨 일이 터질지는.... 원래는 에러가 나야 하는 건데 안 나던 것인지 다른 사람들 설정 파일에는 'src'가 들어있는 게 많습니다. 기존에는 왜 에러가 안 났으며, 빌드에도 지장 없는 게 왜 에러로 잡히며, 왜 지금은 에러로 잡히는지....... 모든 것..