eslint 3

[React] React에서 Typescript + ESLint(Airbnb) + Prettier 적용하기

1. ESLint란 코드를 실행하기 전에 코드를 분석해 문법적인 오류나 안티 패턴을 찾아 잠재적 위험요소를 사전에 방지하고, 일관된 코드 스타일로 작성할 수 있도록 도와주는 코딩 컨벤션이다. 코딩 컨벤션: 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(작성 표준)이다. ESLint 특징 직접 코드 규칙(rules)을 설정할 수 있으며 규칙을 어긴 코드에는 error 또는 warnig을 발생시킬 수 있다. airbnb esLint와 같이 큰 기업에서 사용하는 코딩 스타일 가이드를 적용할 수 있다. 팀 프로젝트를 진행하다 보면 팀원 간 각자의 코딩 스타일이 다르다. 세미콜론을 사용하는 사람과 사용하지 않는 사람, 조건문 사용 시 중괄호를 사용하는 사람과 사용하지 않는 사람 등 ESLin..

React 2022.06.11

[React] ESLint - Unexpected `await` inside a loop(no-await-in-loop) error

문제 발생 Redux toolket에서 예시로 아래와 같은 코드를 작성했다. const target = [1,2,3] export const fetchDataCombine = createAsyncThunk( 'project/test', async (target) => { const response = [] // eslint-disable-next-line no-restricted-syntax for (const data of target) { const url = `http://localhost:3000/?target=${data}`; response.push(await axios.get(url)); } return response; } ); // error for..of 문 내부에서 'await'을 작..

React 2021.08.04

[Node.js] Node js + TypeScrpt + ESLint(airbnb) + Prettier 적용

직장에 들어와서 먼저 접한 것 중에 하나가 eslint였다. 물론 내가 직접 프로젝트에 적용했던 것은 아니었고 회사 선임분께서 적용하시고, git에 올리신 프로젝트 위에서 작업을 진행했었다. 언제 한 번 내용을 찾아봐야지라고 생각만 하고 있었던 와중 이번에 내가 직접 처음부터 적용해 볼 기회가 생겨서 이참에 문서로 남겨두기로 했다. 개요 1. ESLint란 코드를 실행하기 전에 코드를 분석해 문법적인 오류나 안티 패턴을 찾아 잠재적 위험요소를 사전에 방지하고, 일관된 코드 스타일로 작성할 수 있도록 도와주는 코딩 컨벤션이다. 코딩 컨벤션: 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(작성 표준)이다. ESLint 특징 직접 코드 규칙(rules)을 설정할 수 있으며 규칙을 어긴 코..

node.js 2021.07.08