리액트의 훅(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 ..

어느날 크롬만 CSS애니매이션이 느리게 동작하는 현상이 나왔습니다. 1. 해결방법 *{scroll-behavior: smooth;}를 제거하면됩니다. 제거가 힘들다면 css 아래와 같이 추가하면 됩니다. 1 2 3 :root { scroll-behavior: auto; } cs 2. 원인 부트스트랩과 에는 "*{scroll-behavior: smooth;}"가 들어 있습니다. 이상태에서 "Jquery UI"를 사용하면 애니메이션이 이상하게 동작하는 것을 볼수 있습니다. 원래는 "Jquery"의 에니매이션이 우선됐는데 크롬에서 언제부터인가 "smooth"가 먹혀서 이상한 동작을 하게되었습니다. 파이어폭스에서는 여전히 정상동작하는 것으로 보아 크롬 버그거나 정책이 바뀐거겠죠. 마무리 포스팅이 올라가는 시점에..

자바스크립트(javascript)에서 콜백 대안이라고 프로미스(promise) 내놨을 때는 뭐 하는 짓인가 싶었는데.... 다른 언어들처럼 어싱크/어웨이크(async/await)가 생기면서 이제야 좀 비동기 관리가 편해졌네요 ㅎㅎㅎ 테스트 한번 해봅시다. 1. 패치(fetch) 기존의 XMLHttpRequest대신 패치(fetch)를 사용하는 것이 좋습니다. 패치(fetch)로 네트워크 통신을 하면 프로미스(promise)처리가 가능한 리스폰스가 리턴됩니다. (MDN - Fetch API, Using Fetch, XMLHttpRequest ) 예> fetch('http://example.com/movies.json') .then(response => response.json()) .then(data =>..

ES6(ECMAScript6)에서 생긴 기능 중에 Import/Export라는 기능이 생겼습니다. 개념은 다른 언어들의 using(C#), import(Java) 등등을 구현한 것입니다. 0. 서론 html에서 자바스크립트(Javascript) 파일을 전역 스코프(scope) 불러와 사용하는 것이 기존 방식입니다. 이 방식의 문제는 1) 각자 참조하고 있는 파일이 무엇인지 확인하는 것이 어렵다. 2) 한 번에 스크립트를 모두 메모리에 올리다 보니 첫 로딩이 길다. 3) 전역 스코프에 올리다 보니 외부 라이브러리를 사용할 때 변수명이 겹쳐서 문제가 발생하는 경우가 있기도 하다. (이건 라이브러리 설계를 잘하면 회피 할 수 있습니다.) 이러한 문제들이 있습니다. 그래서 다른 언어들 처럼 참조를 명시하도록 하..

NHN에서 옛날에 스마트 에디터라는 것을 공개한 적이 있는데....너무 옛날 꺼라 그냥 쓰기 안 좋아 쓴 적이 없습니다. 그런데 어느 날 보니 완전 다른 에디터를 공개했군요.심지어 마크다운과 위지웍을 동시에 지원!! 1. 간단하게 사용하기도큐먼트가 애매하게 친절해서 빌드 없이 쓰는게 힘들게 돼있어서 따로 정리합니다. 1-1. 참조 추가하기 - CSS"codemirror"에 CSS의존성이 있으므로 추가해야 합니다. 123cs 1-2. 참조 추가하기 - Javascript기능에 따라 필요한 것만 로드하면 되지만...... 귀찮으니 그냥 All버전 하나만 로드하면 됩니다. 12cs 1-3. 사용하기div로 영역을 지정하고 에디터를 생성해주면 화면에 짠 하고 나타납니다. (참고 : 설치와 기본기능 사용 ) 12..