레퍼런스 마이닝

yarn eject를 구성한 뒤 yarn start시 아래와 같은 에러가 나타나는 경우가 있다. Cannot find module '@babel/plugin-syntax-jsx' node_modules 폴더를 삭제 후 다시 yarn install로 재 설치하면 오류가 사라진다.

React에서 Back end API 요청 시 CORS 관련 오류를 접하게 된다. 이런 경우에는 React에 Proxy 설정을 적용하면 해결이 된다. Proxy 설정에는 2가지 방법이 있다. 기본 Proxy 설정(package.json) ... "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all", "ie >= 11" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie >= 11" ] }, "proxy": "https://reference-m1.tistory.com" ... 수동 Proxy 설정(setu..

Node를 사용하면 패키지 관리를 위해서 npm 또는 yarn을 사용한다. 설치가 필요한 패키지들이 package.json 파일에는 프로젝트가 의존하고 있는 모든 패키지의 이름과 버전이 나열되어있으며 npm, yarn 명령어로 패키지를 설치할 수 있다. 그런데, 여러 명의 개발자들이 서로 다른 Node의 버전과 설치하는 시점에 따라 패키지 버전이 달라질 수 있다. 서로 다른 패키지를 설치해서 개발자 간의 혼선을 막을 수 있는 파일이 lock 파일이다. npm - package-lock.json yarn - yarn-lock.json lock 파일이 지원이 안될 때는 개발자 간의 버전이 맞지 않아 패키지 충돌과 버전 차이로 정상 동작하지 않는 경우가 빈번하였다. 이러한 이유로 만들어진 lock 파일이 만들..

React를 접한 지 벌써 오랜 시간이 지났다. 오랜만에 다시 React 프로젝트를 하게 되어 node를 최신 버전으로 올려 세팅을 하던 중 절대 경로 설정이 변경이 되었다는 사실을 알았다. Compoent나 Container를 import를 할 때 상대 경로를 사용하면 불편한이 있어 파일 구조에 맞게 절대 경로를 사용한다. 기존에는 package.json NODE_PATH에 src를 지정하여 절대 경로를 사용하였다. window이면 cross-env 모듈 필요 mac이면 cross-env 모듈 불필요 package.json "scripts": { "start": "cross-env NODE_ENV=production NODE_PATH=src react-scripts start", "build": "cr..

HTML에서 textarea 태그는 기본적으로 지정된 높이에서 내용이 많아지면 스크롤이 생긴다. 또한 마우스로도 높이를 조절할 수도 있다. 하지만 때에 따라서 스크롤이 없고 높이를 가변적으로 조절해야 할 때가 있다. 이때 사용하는 방법이다.

HTML 파싱&렌더링 1. DOM 트리 구성 HTML 파서로 파싱 해서 HTML 데이터를 메모리에 1:1로 로딩하는데, 이때 모든 데이터는 트리 구조로 처리된다. 이 자료구조의 최상위를 document라고 하고, 이렇게 구성된 메모리의 데이터를 DOM(document Object Model)이라고 한다. 2. Render 트리 구성 화면에 보이는 시각적인 구성 요소들을 분류해 두고 화면에 보일 수 있도록 데이터를 담는 과정이라고 할 수 있다. 3. Render 트리 배치 이전 과정에서 분류한 데이터를 화면의 어디에 두어야 할지 배치하는 작업이다. 이 작업을 Layout을 구성한다고 한다. 4. Render 트리 페인팅 Layout을 모두 구성하고 그 결과를 UI 백엔드를 통해서 화면에 출력하는 과정이다...

// 공통 Ajax call // auth: Authorization // type: Method(GET, POST, PUT, DELETE) // data: 객체 리터럴 형식 data={page: 1, recordsPerPage: 10} // dataType: 데이터 타입 // async: 비동기 여부 (Deafult true 비동기) // successFn: 성공시 // failFn: 실패시 // completeFn: 성공이후 function ajaxCall(auth, type, url, data, dataType, async, successFn, failFn, completeFn) { type = type.toUpperCase(); const options = { type: type, url: url..

#slider { pointer-events: none; } #slider::-moz-range-thumb { pointer-events: auto !important; } #slider::-webkit-slider-thumb { pointer-events: auto !important; } #slider::-ms-thumb { pointer-events: auto !important; } #slider::-ms-track { pointer-events: none !important; }

let previousLineNum = 0; $(document).on('blur keyup paste input click', '[contenteditable]', function(e) { const selection = window.getSelection(); if (null != selection.anchorNode) { const range = selection.getRangeAt(0); const lineNum = range.startOffset; if (13 === e.keyCode && previousLineNum < lineNum) { const scrollHeight = $(this).get(0).scrollHeight; $(this).scrollTop(scrollHeight); prev..

React에서 setTimeout을 사용하는 경우 state 또는 선언된 function을 인신하지 못한다. 이런 경우에는 Function.prototype.bind를 사용하여 아래와 같이 명시적으로 바인딩하면 해결된다. setTimeout(function() { ... }, 250); setTimeout(function() { ... }.bind(this), 250);