사용한 코드는 다음과 같다. { colorArr.map(...) } 해당 코드는 정상동작하지만, 표시된 getContentAnchorEl을 속성으로 설정하지 않으면 다음과 같은 오류가 뜬다. Material-UI: You can not change the default `anchorOrigin.vertical` value when also providing the `getContentAnchorEl` prop to the popover component. Only use one of the two props. Set `getContentAnchorEl` to `null | undefined` or leave `anchorOrigin.vertical` unchanged. material-ui의 popove..

html2canvas + 이미지 호스팅 *예제는 React Hook 환경에서 진행되었습니다. 결과 table을 이미지로 만들어 공유해야하는 요구사항이 있었다. 요구사항을 수행하기 위해서는 다음과 같은 과제를 순차적으로 해내야한다. html table을 이미지로 만들기 만들어진 이미지를 호스팅하기 호스팅된 이미지를 카카오톡 api를 이용하여 공유하기 차례대로 해보자. html table을 이미지로 만들기 DOM요소를 이미지로 만들 때, html2canvas라는 라이브러리가 주로 쓰인다. import html2canvas from 'html2canvas'; const copyDOM = async () => { window.scrollTo(0, 0); let url = ""; await html2canvas(..

React와 Material UI라는 React UI 라이브러리로 프로젝트를 하던 중, 제목과 같은 오류가 발생했다. findDOMNode is deprecated in StrictMode. KOS 프로젝트에서도 발견했던 오륜데 대수롭지 않게 넘겼더니 여기서 걸리적거리는군 ㅠㅠ 어쨌든 해결해보자. 이유 저런 오류가 뜨는 이유는 무엇일까? 먼저, create-react-app을 통해 React 프로젝트를 생성하면, index.js가 다음과 같이 생겼다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM..

React JSX에서 array나 dictionary를 다루기 위해 forEach 문을 썼다면, map으로 변경해야한다. map 함수는 연산 후에 생성된 결과 array / dictionary를 반환해주기 때문에 JSX에서 나타나게 되지만, forEach문은 변수에만 연산 결과가 적용되고 반환해주지 않는다. 따라서, forEach 문을 사용하게 되면 연산만 되고 결과는 JSX로 출력되지 않는다.

module.exports = { 'parser': '@typescript-eslint/parser', 'plugins': ['@typescript-eslint'], 'env': { 'commonjs': true, 'browser': true, 'es2021': true, 'node' : true }, 'extends': [ 'airbnb', 'airbnb/hooks', 'plugin:@typescript-eslint/recommended' ], 'parserOptions': { 'project': './tsconfig.json', 'ecmaFeatures': { 'jsx': true, }, 'ecmaVersion': 12, 'sourceType': 'module', }, 'rules': { 'inden..

Typescript 참고 : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html (Typescript 공식 사이트) 배우는 이유 JS에서는 Type이 계속 체크되지 않는다. 1. 이는 암묵적 형변환, hoisting, 복잡성 문제를 일으킬 수 있다. 이러한 코드 상의 예상치 못한 버그를 없애기 위해 typescript를 주로 사용한다. hoisting : 끌어올린다는 뜻. javascript에서 선언문을 끌어올려 코드에서 사용할 때 순서에 상관없이 사용 가능하도록 하는 기술. typescript는 복잡한 예외처리 코드 없이 이를 수행한다. 2. 협업 시에나 추후에 본인이 짠 코드를 보았을 때 타입이 정의되어 있지 않다면 하나..

TS2691: import .ts file 참고 : https://github.com/microsoft/TypeScript/issues/37582 https://github.com/microsoft/TypeScript/issues/27481 https://github.com/microsoft/TypeScript/issues/39965 이 오류는 typescript 파일을 찾을 수 없어서 나는 오류이다. import A from 'A.tsx'; 위와 같이 파일을 불러오면, import 전에 ts / tsx 파일이 js / jsx 로 변환되기 때문에 해당 파일을 찾을 수 없다는 에러가 뜬다. 따라서, 단순히 확장자를 붙이지 않고 import 해오는 것이 가장 간단한 방법인데 그렇게 하면 esl..

[2021-03-04 최종 수정] 발단 KOS 프로젝트 진행 중에 상태관리 라이브러리(Redux, Mobx)를 추후 도입하기로 하고, 먼저 MVVM 패턴만 사용하기로 하였다. 하지만 기존에 나와있는 폴더 구조들은 모두 react와 Redux / Mobx 를 연동하여 만들어낸 구조들이었다. 다음은 상태관리 라이브러리를 사용하지 않고 MVVM 패턴을 구현한 사이트이다. https://github.com/davinci2015/react-mvvm-pokemon ( Class 이용 ) https://velog.io/@dlrmsghks7/whatismvvmpattern ( Hook 이용 ) 위의 사이트들에서 제안한 구조를 그림으로 나타내보자. View, View Controller, View Model, Model..