본문 바로가기
반응형

전체 글

 (501)
[Error] should be listed in the project's dependencies 해결법 1. module을 설치할 때 --save-dev를 끝에 붙혀 설치한다. 2. ESLint 설정파일에 다음과 같은 코드를 추가해준다. module.exports = { "rules": { "import/no-extraneous-dependencies": [ "error", {"devDependencies": true} ] }, }; 참고한 블로그) https://bobbyhadz.com/blog/eslint-should-be-listed-in-projects-dependencies-not-devdependencies 'X' should be listed in the project's dependencies, not devDependencies | bobbyhadz A step-by-step gui..
[React] 리액트 캐러셀 라이브러리 react-slick 사용 해보기 메인페이지에 있는 캐러셀 컴포넌트를 만들게 되었다. 직접 만들까, 라이브러리를 사용할까 하다가 좋은 건 가져다 쓰라고 있는거니까... 하며 구글링 끝에 쉽게 캐러셀 컴포넌트를 만들 수 있는 라이브러리를 찾게 되었다! react-slick이라는 이름의 라이브러리며, 사용법이 상당히 간단하며 종류도 다양하다. 나는 Lazy Load를 선택했다. 1. 설치 $ npm install react-slick --save-dev // 라이브러리 설치 $ npm install slick-carousel --save-dev // css 설치 2. 원하는 캐러셀 고르기 https://react-slick.neostack.com/docs/example/lazy-load Neostack The last react carous..
[Error] ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' 해결 방법 1. npm i @babel/preset-react 을 진행한다. 2. ESLint 설정파일에 다음 코드를 추가한다. "parser": "@babel/eslint-parser", "parserOptions": { ... "babelOptions": { "presets": ["@babel/preset-react"] }, } https://stackoverflow.com/questions/68677437/eslint-parsing-error-this-experimental-syntax-requires-enabling-one-of-the-fol ESLint: Parsing error: This experimental syntax requires enabling one of the following ..
[ESLint&Prettier] React CRA 후 ESLint & Prettier 설정하기(feat. javascript) 지금까지 팀 프로젝트 또는 개인 프로젝트에서 내가 ESLint 및 Prettier 등의 초기 세팅을 진행해본 적이 없었다. 이번 프로젝트 '나무'는 스터디원분과 함께 총 2인으로 구성된 팀 프로젝트인 만큼 서로가 할 수 있는, 해보고 싶은 최대한의 다양한 경험을 하기로 했다. 우리 하고 싶은거 다 해~ 나의 첫 미션은 나무 프로젝트의 프로젝트 초기 세팅(CRA + ESLint + Prettier)이다. ESLint와 Prettier는 협업을 위해 꼭 필요한 존재이다. 각자의 코딩 스타일이 다르기에 이러한 도구들을 사용해 우리의 프로젝트에 하나의 일관된 규칙을 적용해줄 수 있다. 먼저 ESLint와 Prettier가 무엇인지 간략하게 정리하고 넘어가자. ESLint와 같은 Linter 는 소스 코드에 문제..
[리팩토링] 자바스크립트로 작성한 프로젝트 타입스크립트로 마이그레이션하기 드디어, 오심테의 타입스크립트 마이그레이션을 진행했다. 미루고 미뤄뒀는데 손이 근질근질해서 생각난김에 바로 해버렸다. 처음엔 자바스크립트로 개발하고, 전체적인 개발을 마친 후 타입스크립트로 전환했다. 한 입 크기로 잘라먹는 타입스크립트 강의를 수강하고 배운 내용을 적용해보고자 하였다. 사실 아직 타입스크립트에는 더 익숙해져야 한다는 걸 느꼈다. 그래도 강의를 수강한 덕분에 이전에 '맛피' 프로젝트를 할 때보다는 아주 조금? 더 다양한 타입스크립트 문법을 적용해본 것 같다. 앞으로 타입스크립트와 더 친해질 수 있도록 간간히 강의 내용을 복습해야겠다. 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 과정을 간단히 기록해보고자 한다. 먼저 타입스크립트 관련 패키지를 설치한다. npm i typescri..
[한 입 크기로 잘라먹는 타입스크립트] 리액트와 타입스크립트 1. 타입스크립트 리액트 시작하기(JS 프로젝트에서 마이그레이션) 1) 타입선언 npm i @types/node @types/react @types/react-dom @types/jest 2) tsconfig.json { "compilerOptions" : { "target" : "ES5", "module" : "CommonJS", "strict" : true, "allowJs" : true, "esModuleInterop" : true, "jsx" : "react-jsx" }, "include" : ["src"] } 3) 모든 js 파일을 jsx로 4) 각 파일의 에러 해결 2. 상태관리와 Props // onChange 이벤트 타입 React.ChangeEvent interface를 코드 여기저기에서..
[한 입 크기로 잘라먹는 타입스크립트] 유틸리티 타입 1. 유틸리티 타입이란 유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입들입니다. 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아 놓은 것을 의미한다. 다음과 같이 Readonly와 같은 유틸리티 타입을 이용해 특정 객체 타입의 모든 프로퍼티를 읽기 전용 프로퍼티로 변환할 수 있다. interface Person { name : string; age : number; } const person : Readonly ={ name : "이정환", age : 27 } person.name = '' // ❌ name은 Readonly 프로퍼티입니다. 또는 다음과 같이 Partial 유틸리티 타입을 이용해 특정 객체 타입의 모든 프로퍼티를..
[한 입 크기로 잘라먹는 타입스크립트] 조건부 타입 1. 조건부 타입 조건부 타입은 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법이다. type A = number extends string ? number : string; 조건부 타입은 위 코드 처럼 number extends string ? 과 같은 조건식이 있고 이 조건이 참이라면 ? 우측의 타입인 Number 타입이 결과가 되고 아니라면 : 우측의 타입인 String 타입이 결과가 된다. 위 조건부 타입의 조건식 number extends string은 number 타입이 string 타입의 서브타입이 아니기 때문에 거짓이 되고 그 결과 타입 A는 string 타입이 된다. type ObjA = { a: number; }; type ObjB = { a: ..
반응형

티스토리툴바