React (3) 썸네일형 리스트형 [Project / React] 리액트로 그림판 만들기 #1 Canvas를 활용하여 선과 도형을 그릴 수 있는 간단한 그리기 앱을 만들어 보고자 합니다. 공식 문서와 여러 포스팅을 참고하여 만든 것이므로, 최적의 방법은 아닐 수 있습니다! 우선 canvas에 대해 간단하게 알아보고 가겠습니다. 캔버스 튜토리얼에 따르면, canvas는 Javascript를 통해 그래픽을 사용할 수 있는 HTML요소 라고 합니다. 그래프를 그리거나, 사진을 결합하거나 간단한 애니메이션을 만드는데에도 사용할 수 있습니다. Canvas tutorial - Web APIs | MDN This tutorial describes how to use the element to draw 2D graphics, starting with the basics. The examples provided .. [React] React(Typescript)에 ESLint/Prettier/Airbnb Rule 적용하기 + Husky 코딩스타일은 팀마다 다르지만 이를 개인에게 지키도록 하는 것은 한계가 있고, 강제성이 없기에 취약합니다. 그리고 코딩 스타일과 관련한 논쟁이 이어지다 보면 정작 신경 써야 할 프로젝트에 에너지를 쏟지 못하는 상황이 발생합니다. 이러한 불필요한 에너지 소모를 줄이기 위해 코딩 스타일 자동화 툴이 필요합니다. 처음 설정은 복잡하지만 한번 적용해 두면 추후에 적용하기 쉽고, 처음에 적용해 둔 것이 지속적인 개발 생산성 향상에 도움이 됩니다. 협업 시 많이 사용되고 있는 ESLint Airbnb rule 세팅을 해보도록 하겠습니다. 1. CRA 먼저 터미널을 키고 create-react-app을 통해 Typescript 리액트 프로젝트를 만들어 줍니다. npx create-react-app [프로젝트 이름] -.. [Project / React] CRA부터 Prettier, ESLint, Husky 설정 실습(Typescript) 1. CRA 타입스크립트를 기반으로 하는 리액트 프로젝트를 만들기 위해서 터미널을 키고 명령어를 작성해줍니다. npx create-react-app [프로젝트 이름] --template typescript 2. ESLint eslint : eslint 라이브러리 @typescript-eslint/eslint-plugin : TypeScript관련 linting 규칙을 처리하는 플러그인 @typescript-eslint/parser : Typescript 코드에 대한 *AST 생성 ESLint 설정을 위해 세가지 라이브러리를 설치합니다. npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev 그 후 ro.. 이전 1 다음
