JS Ecosystem (44) 썸네일형 리스트형 (Node.js) 명령줄 인수, process 내장객체 > ts-node src/processArgs-test.ts data/fake.csv 10000 node.js 를 실행하면서 위처럼 실행 명령 뒤에 여러 개의 매개변수를 입력할 수 있습니다. Node.js는 process 내장객체를 제공하는데 프로그램의 명령 줄 인수는 이 객체의 argv 배열 속성에서 얻을 수 있다. (Typescript) type 키워드로 별칭 만들기 TS는 type이라는 키워드를 제공한다. type 키워드는 기존에 존재하는 타입을 단순히 이름만 바꿔서 사용할 수 있게 해준다. 이러한 기능을 '타입 별칭'(type alias)라고 한다. type stringNumberFunc = (string, number) => void let f: stringNumberFunc = function(a: string, b: number): void {} 별칭 덕분에 변수 f에 타입 주석을 수월하게 붙였다. 이렇게 type 키워드로 함수의 시그니처를 명시하면 매개 변수의 개수나 타입, 반환 타입이 다른 함수를 선언하는 잘못을 방지한다. (Typescript) 타입스크립트 프로젝트 만들기 타입스크립트 프로젝트 개발은 Node.js 프로젝트를 만든 다음에 개발 언어를 TS로 설정한다. 1. package.json 파일 생성 Node.js 프로젝트를 만들면 package.json 파일이 생성되는데 npm init 명령을 실행해서 생성한다. package.json은 Node.js가 관리하는 패키지 관리 파일로 프로젝트 정보와 관련 패키지가 기록되어 있다. package.json으로 프로젝트를 개발하고 실행하는데 필요한 패키지를 관리할 수 있다. 2. typescript와 ts-node 설치 npm i -D typescript ts-node JS로 개발된 chance, ramda 라이브러리를 TS에서 사용하려면 추가로 @types/chance, @types/ramda와 같은 타입 라이브러리를 제.. (JS) console 객체 console.log('기본'); console.info('정보'); console.warn('경고'); console.error('에러'); console.dir(document.body); // DOM 객체 메서드를 보고 싶을 때 (canvas) 마우스로 사각형 여러개 그리기 (feat.forEach) JS나 React에서 canvas 태그를 활용하여 하나의 캔버스 태그에 여러개의 사각형을 그리는 방법을 설명하겠다. 마우스로 사각형을 그리는 주제를 검색하면 자료가 많이 있지만 한번 그린 사각형에 또 다른 사각형을 추가할 수 있는 방법을 설명한 자료는 찾기가 어려워서 공유하고자 한다. canvas에서 마우스로 사각형을 한번만 그리는 것을 안다는 가정하에 결론을 먼저 말하자면 '현재 내가 그리고 있는 rectagle의 정보를 useState를 활용하여 elements 변수에 배열 형태로 저장해주고 다음 사각형을 그릴 때 저장된 elements와 현재 그리고 있는 rectagle의 정보를 forEach로 순회하며 strokeRect 해주는 것이 포인트이다.' 아래는 마우스가 이동할 때 호출되는 drawing.. [JS] 마우스 클릭 좌표 (feat. canvas) JS 에서 2D로 화면에 그림을 그릴 때 canvas를 많이 활용한다. 이때 마우스 클릭의 좌표의 값을 체크하는데 기본적인 좌표값의 이름들을 알아보자. 중요도 순서 1. clientX, clientY 뷰포트를 기준으로 좌표를 표시한다. 스크롤바가 움직이더라도 마우스로 클릭한 clientX, clientY의 값은 바뀌지 않는다. 2. offsetX, offsetY DOM을 기준으로 좌표를 표시한다. React에서 useRef로 설정한 DOM 객체의 영역에서 왼쪽 상단 모서리 부분(0, 0)을 기준으로 offsetX와 offsetY 좌표값을 출력한다. 나머지 screenX, screenY pageX, pageY도 있다. 추가 참고는 아래 링크 https://hianna.tistory.com/493 Mocha, chai, jsdom을 활용한 JS 테스팅(3) - custom event dispatch 드디어 JS 테스팅의 마지막 이해 단계인 커스텀 이벤트 디스패치 단계까지 왔다. 참고자료 코드를 먼저 보자. const getButtonBy = function (text, buttons) { const result = buttons.filter(function (button) { return button.textContent === text; }); if (result.length > 1) { throw new Error("no extra buttons allowed"); } else if (result.length < 1) { throw new Error("no button"); } return result[0]; }; const clickEvent = new window.MouseEvent("cli.. Mocha, chai, jsdom을 활용한 JS 테스팅(2) - Mocha 와 chai 오늘도 열정, 감사, 겸손! 1편에서 jsdom을 활용하여 테스트할 window.document 객체를 생성하는 부분을 알아 보았다. 2편에서는 실제적인 테스팅 도구인 Mocha와 chai를 가지고 기술을 한다. 테스트 자동화와 Mocha를 알고 싶다면 클릭 Mocha는 js 테스트 프레임워크이고 chai는 Node.js 기반의 assertion 라이브러리이다. 먼저 Mocha의 적용 부터 살펴 볼 예정인데, 아래의 활용 코드를 보자. describe("Step 1 - 숫자 버튼을 누르고 화면에 숫자를 입력하기", function () { it("처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다.", function (done) { const test = ["3", "3"]; co.. 이전 1 2 3 4 5 6 다음
