자바스크립트(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'가 들어있는 게 많습니다. 기존에는 왜 에러가 안 났으며, 빌드에도 지장 없는 게 왜 에러로 잡히며, 왜 지금은 에러로 잡히는지....... 모든 것..

리액트의 훅(hook)은 클래스 컴포넌트(Class Component)에서 지원하지 않습니다. 그래서 클래스에서 사용할 수 있는 다른 기능들을 제공하는데..... 제공 안되는 기능들이 있습니다. 이럴 때 사용하는 방법이 고차 컴포넌트(HOC, Higher Order Component)입니다. (참고 : React Docs - 고차 컴포넌트 ) 1. 원리 원리는 1) 함수형 컴포넌트(Function Component)를 만들고 2) 필요한 훅을 'props'에 넣도록 구성하고 3) 클래스형 컴포넌트를 감싸서(랩퍼 구현, Wrapped) 4) 'props'를 전달받습니다. 이렇게 구현하면 클래스 컴포넌트에서 사용할 수 없었던 'useNavigate'나 'useLocation'같은 훅들도 사용할 수 있습니다...

오류 내용만 보면 "뭔 소린가?" 싶겠지만 정확하게 오류 원인을 설명하고 있습니다. Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. '창'에서 '가져오기' 실행 실패: GET/HEAD 메서드를 사용한 요청은 본문을 가질 수 없습니다. 1. 원인 'fetch'를 'GET'이나 'HEAD'로 호출했을 때 바디(body)이 있다면 발생하는 에러입니다. 이 두 메소드는 본문을 가질 수 없고 대신 URL 쿼리로 데이터를 전달합니다. 그래서 바디가 있다면 에러가 나게 됩니다. 2. 해결 방법 인터넷을 뒤져보면 'POST'로 바꾸라는 소리도 나오는데..... 그건 'REST(Representational Stat..

프론트엔드 디버깅을 위해 소스 맵(Source Map)이 필요한 경우가 있습니다. 1. 소스 맵 확인하기 크롬 브라우저 기준으로 개발자 모드 > 소스 > webpack:// 소스 맵이 제대로 생성됐다면 여기에 원본 파일들을 볼 수 있습니다. (설정에 따라서 'webpack://'부분이 다를 수 있습니다.) 2. 웹팩에서 소스 맵 생성 설정 웹팩에서 소스 맵을 생성하려면 'webpack.config.js'에서 'devtool' 옵션을 소스 맵을 생성하는 옵션으로 지정합니다. (참고 : webpack.kr - Devtool ) 만약 'devtool' 옵션을 설정했는데도 소스 맵이 생성되지 않는다면 아래와 같이 플러그인을 추가해 줍니다. const webpack = require('webpack'); ... ..

'npm'을 사용하면서 경고에 신경 쓰는 게 웃기기 합니다만.... 그래도 중간중간 확인하면서 경고도 제거하는 것이 미래의 문제를 미연에 방지할 수 있습니다. 1. 문제의 발견 'postcss-loader'와 'mini-css-extract-plugin'를 사용하는 프로젝트에서 웹팩 빌드하면 다음과 같은 경고가 나오는 경우가 있습니다. WARNING in ./src/sass/index.scss 22:17-24 export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js!../../..

리액트에서 html을 리액트 개체로 바꾸려면 'html-react-parser'라는 패키지를 사용하면 됩니다. 이렇게 간단하면 포스팅을 할 리가 없겠죠? 이 패키지는 단순히 html을 리액트 개체를 바꾸는 기능만 있어서 html(혹은 문자열)에 포함된 변수는 변환하지 않습니다. 이벤트의 경우 XSS 공격위험때문에 변환을 해주지 않는다고 합니다. 1. 리터럴(Template literals) 처리 리터럴도 섞어 써도 됩니다. (참고 : Mdn Docs - Template literals) 그러려면 순서가 리터럴 처리 -> 리액트 변수 처리 -> 이벤트 처리 로 해야 합니다. 자바스크립트 안에서 단순 문자열을 선언하는 경우라면 그레이브(`)를 사용해도 됩니다. 하지만 'html-react-parser'쓸 정..

리액트(react) 공부하려고 'create-react-app'로 프로젝트 생성하고 돌리는데.... npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN ..