Amada Coding Club

패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. 본인 코드에 맞게 적절히 수정하길 참고: El로 끝나는 값-HTML태그 캔버스 작업을 하기 위해선 먼저 캔버스의 context를 가지고 와야 한다. context = 캔버스엘리먼트.getContext('2d와 3d 선택가능'); context는 2d와 3d 선택이 가능하다. 즉, 일반적인 2d작업뿐만 아니라 3d작업도 가능하다는 말! context를 가지고 왔다면 이제 canvas에 이벤트리스너를 등록한다. 그림판에 그림을 그릴 때 나오는 이벤트(행위)는 다음과 같다. 1. 그림판에 마우스를 누르면 그리기 시작(m..

패스트캠퍼스에서 이미지 갤러리 서비스를 연습하던 중 이미지 파일을 브라우저에 드롭할 수 있게 도와주는 react-dropzone에 대해 알아봤다. 신기하게 이번 시간에선 리액트를 타입스크립트로 만졌고 React-dropzone에서 다음 부분에 문제가 생겼다. const onDrop = useCallback((acceptedFiles) => { // Do something with the files }, []) 파일이 브라우저에 드롭됐을 때 그 파일을 처리하는 부분이다. 이 부분의 acceptedFiles 부분에 문제가 생겼다 acceptedFiles가 'any'타입으로 명시되어 오류가 난다는 뜻이다. 해결책은 간단했다. 타입 스크립트이기 때문에 acceptedFiles의 타입을 명시하면 된다. 이 값은 ..

[Eslint & Prettier] Eslint와 Prettier에 대해 알아보자 어느 JS강의를 보던 Eslint와 Prettier 설정은 기본 옵션으로 달고 시작한다. 도대체 이것들이 뭔데 다들 이걸 설정하고 시작하는걸까? Eslint Lint는 보푸라기라는 뜻으로 프로그래밍에서 에러가 있는 amadaclub.tistory.com 시작하기 전에 이 글 참고하시길 이번엔 Eslint와 Prettier를 설치하고 적용해보겠다. npm i -D eslint npm install --save-dev --save-exact prettier 먼저 eslint와 prettier를 설치한다. --save-dev는 -D와 같은 개발용에서만 사용하는 devDependencies 패키지로 설치하겠다는 의미이고 --sav..

어느 JS강의를 보던 Eslint와 Prettier 설정은 기본 옵션으로 달고 시작한다. 도대체 이것들이 뭔데 다들 이걸 설정하고 시작하는걸까? Eslint Lint는 보푸라기라는 뜻으로 프로그래밍에서 에러가 있는 부분에 표시를 하는 행위를 뜻함 Es는 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어 그러니까 자바스크립트 표준 문법에 맞지 않는 코드의 에러 표시를 도와주는 도구라고 생각하면 좋을듯 JS나 JSX의 정적 분석 도구로 코드의 문법적 오류나 안티 패턴을 찾아주고 코드의 일관된 형태를 유지시키는데 도움을 주는 오픈소스 프로젝트다. 정적 분석 도구는 이전에도 많이 있었지만 Eslint는 커스터마이징과 확장성이 우수해 많은 곳에서 사용하고 있다. 오픈소스 프로젝트이기 때문에..

패캠 basic단계에서는 바닐라JS를 통한 간단한 프로젝트를 진행한다. 지난 게시글에서 알아본 웹팩에 대해 간단하게 알아봤으니 설정을 해보자 우선 node.js은 기본으로 설치되어야 한다.(npm은 자동 설치됨) 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 자 설치까지 끝냈으면 우선 package.json 파일부터 생성하자 npm init -y 그리고 웹팩 관련한 패키지들을 설치한다 npm install -D webpack webpack-cli webpack-dev-server webpack-cli는 웹팩을 더 쉽게 사용할 수 있도록 하는 터미널 명령어를 제공해주는 패키지이..

리액트나 다른 npm을 사용하는 개발을 할 때 필수적으로 저장하는 package.json.. 지금까지는 이게 뭔지도 모르고 설치하라니까 설치하고 수정하고 그랬다. 근데 이제 블로그 정리를 시작하려는데 막상 개발환경 설정 게시글을 작성하려니 package.json 이 파일은 도대체 어떤 파일인지 궁금했다. package.json? 프로젝트의 정보와 해당 프로젝트가 의존하는(기능을 사용하는) 패키지에 대한 정보를 가지고 있는 문서이다. npm은 오픈소스 기반이기 때문에 한 사람이 배포한 패키지에 대해 다른 사람들이 사용할 때 관리하기 쉽게 하기 위해 정리해놓은 문서라고 생각하면 편하다. json파일이기 때문에 key:value 관계로 되어 있으며 이때 key(속성)값을 field라고 한다. 기본 구조를 확인..