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. 협업 시에나 추후에 본인이 짠 코드를 보았을 때 타입이 정의되어 있지 않다면 하나..

의존성 에러 해결 에러 발생 이런 오류가 떴다. CRA가 제공하는 react-scripts 패키지가 eslint 6.6.0 버전에 의존하는데, 7.2.0 버전을 설치해서 그렇다고 한다. 저 밑에 나오는 해결방법이 있는데, 따라해도 해결되지 않는다 ㅎ... 저번에도 같은 문제로 속썩여서 이번엔 제대로 각잡고 해결해보려고 한다. 이유 발견 이유는 구글링하다가 발견했는데(https://github.com/wesbos/eslint-config-wesbos/issues/17) , react-scripts의 eslint 의존성 버전과 airbnb linting에서의 eslint 의존성 버전이 일치하지 않아서 나오는 문제였다. 뻘짓 그래서 일단 react-scripts version을 `npm view react-s..

csuos 블로그에도 같은 글이 있습니다. 👉 csuos.github.io/nera-review-heeeun 안녕하세요, CSUOS의 첫 프로젝트 NERA에서 프론트엔드 개발을 맡고 있는 '우희은'이라고 합니다. 현재(2020-09-04일 기준) CSUOS의 멤버를 모집하고 있는데, 혹시나 지원을 망설이시는 분들께 도움이 될까해서 포스팅을 작성하게 되었습니다. 조금이나마 도움이 되기를 바라며, CSUOS를 접했을 때부터 현재까지 느낀 점이나 얻은 것들을 진솔하게 작성해보겠습니다.😃 CSUOS의 시작 처음 CSUOS를 접하게 된 건 페이스북에서 모집공고를 보았을 때입니다. 현재 NERA의 프로젝트 매니저이신 '이완해' 학우님이 올리신 공고를 보고 지원해야겠다는 생각이 들었습니다. NERA 모집 공고 : h..

React Hook React 공식사이트 참조 : https://ko.reactjs.org/docs/hooks-intro.html Hook 소개 Hook은 어떤 것이고 왜 나오게 되었을까? Hook이란? 우선 Hook은 React 16.8 버전에 새로 추가된 최신 기능으로, 클래스형 컴포넌트의 단점을 극복하고자 나온 함수형 컴포넌트에 대한 기능이다. Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다. 함수형 컴포넌트란? // 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render(){ return ( //jsx ); } } export default App; // 함수형..