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",추가하기 두 방법 중 하나를 사용하면 된다.

개요 YAML : YAML Ain't Markup Language 재귀를 통해 이름짓기 쿠쿠 기존에는 프로그램의 설정을 저장하고 읽는데에 xml 형식을 써왔다. 하지만 작성이 너무 귀찮아서 다른 방식을 강구하게 되었다. 정보를 저장할 수만 있다면 다른 방식도 가능하다. 그래서 나온게 json 파일 형식이다. json은 객체 형식으로 xml보다는 간편한 작성이 가능하다. 허나 더 쉽게 작성할 수 있는 형식이 바로 YAML 형식이다. YAML은 가독성이 좋아서 JSON에 비해 구조가 복잡하지만 사람이 보기에는 자연스러운 형태이다. 이에 따라 YAML은 설정 파일의 목적으로 많이 쓰이고, JSON은 설정 파일을 제외한 분야에서 모두 널리 쓰이고 있다. 이러한 파일 형식들은 상황마다 필요에 따라서 사용하면 된다..

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; // 함수형..