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..

의존성 에러 해결 에러 발생 이런 오류가 떴다. 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..

VScode에서 eslint가 적용이 안되고 자꾸 해당 에러가 뜨길래 검색해봤다. 버전이 안 맞아서 그런 것이니 VScode를 다시 깔면 버전 업데이트되면서 eslint가 잘 된다. 다운로드 : code.visualstudio.com/download 참고 : https://github.com/typescript-eslint/typescript-eslint/issues/2020

참고 : https://hoilzz.github.io/webpack/11-eslint-prettier/ eslint의 parser가 공식적으로 ES 표준만을 지원하기 때문에, ES6~7 파싱 시 문제가 생긴다. 따라서, .eslintrc.js 파일의 export default를 module.export로 변경하기 export는 ES6 syntax이고, module export는 commonJS syntax이다. babel-eslint 설치 후 .eslintrc.js에 "parser": "babel-eslint",추가하기 두 방법 중 하나를 사용하면 된다.

오픈채팅방 문제 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. [닉네임]님이 들어왔습니다. 채팅방에서 누군가 나가면 다음 메시지가 출력된다. [닉네임]님이 나갔습니다. 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다. 예를 들어, 채팅방에..