판교너굴맨의 개발노트

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

React를 사용한 토이 프로젝트를 진행하면서 반응형을 고려하게 되었다. 반응형을 구현할 때 가장 많이 접했을만한 미디어쿼리를 사용할까 했다가 react-responsive라이브러리를 추천 받아서 사용해보려고 한다. 1. 설치 # npm npm i react-responsive # yarn yarn add react-responsive Typescript를 사용한다면 아래 명령어를 추가한다. # npm npm install @types/react-responsive # yarn yarn add @types/react-responsive 2. useMediaQuery react-responsive 라이브러리는 useMediaQuery라는 Hook을 제공합니다. import React from "react"..

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

문제발생 react typescript로 Plotly.js 차트 라이브러리를 사용하는데 문제가 발생. 히스토그램 차트의 속성 중에 xbins 와 ybins가 있다. 수직 히스토그램에서 xbins 속성은 잘 사용 되지만, 수평 히스토그램에서 ybins 속성은 에러가 나며 사용이 되지 않았다. 해결 과정 공식 홈페이지 차트 에디터에서는 ybins속성이 적용되는 걸 확인했다, 타입스크립트 문제라 생각하고 data 속성의 Data[] 타입을 타고 들어가서 xbins와 ybins를 검색해봤다. 그 결과 xbins 속성은 있었지만 ybins속성은 없었다.. 해결 타입스크립트의 타입 단언으로 해결할 수 있었다. //타입 단언 예제 type TestType = { a: string }; const test = { a:..