Web/Javascript 5

javascript map함수 사용법

Map함수를 사용하는 자바스크립트 코드 자바스크립트로 작성한 코드입니다. 배열을 선언하고 출력을 두 번하는 코드입니다. 붙여넣기 하기 쉽게 다음과 같이 텍스트로도 적습니다. const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; console.log(months); months.map((a) => console.log(a)) 다음은 실행화면입니다. map함수를 사용하여 출력했습니다. Map함수 사용법 보기 map함수에 대한 설명을 보려면 visual studio code에서 열린 코드 중에서 map에 커서를 ..

Web/Javascript 2022.07.05

Electron을 이용한 데스크탑앱 개발 시작하기

Electron을 이용하여 데스크탑앱을 개발하는 시작단계를 소개합니다. * 필수 설치 패키지 - Node.js Node.js의 설치는 다음 글을 참고하시기 바랍니다. 2022.03.08 - [Web/Node.js] - Node.js 설치 * 추천하는 설치 패키지 (이 글의 과정에서도 사용합니다) - visual studio code visual studio code의 설치는 다음 글을 참고하시기 바랍니다. 2022.03.08 - [Windows] - Visual Studio Code 설치 이제 폴더를 하나 생성해줍니다. 저는 바탕화면 아래에 'my-electron-app' 폴더를 생성했습니다. my-electron-app 폴더를 열고 목록 부분에 마우스 우클릭 후 "Code로 열기"를 선택합니다. 아래 ..

Web/Javascript 2022.03.08

[javascript] canvas 기초 사각형 그리기

자바스크립트를 이용해서 canvas에 기초적인 사각형을 그리는 예제코드입니다. [소스코드] getContext함수는 canvas에 할당되어있는 drawing context를 반환합니다. 여기서 drawing context는 그리기 위한 속성과 함수를 가지고 있는 객체를 말합니다. 파라미터로 넘긴 '2d'는 2차원 그리기 context를 가져오기 위함입니다. 다른 방식의 사용은 다음과 같습니다. - getContext('webgl') : 3차원 렌더링을 위한 컨텍스트를 가져오기 - getContext('webgl2') : WebGL 버전 2에 해당하는 3차원 렌더링 컨텍스트를 가져오기 - getContext('bitmaprenderer') : ImageBitmapRenderingContext에 해당하는 컨..

Web/Javascript 2022.03.04

JavaScript 소수점 반올림 연산 속도 비교(toFixed, Math.round)

소수점 반올림할때 toFixed()함수를 주로 사용했습니다. 그런데 toFixed()함수가 문자로 값을 반환하다 보니 계산할때 ParseFloat()함수를 추가로 사용해야 하는 경우가 꽤 있습니다. 이렇게 추가함수를 사용할 경우 속도가 떨어지는게 당연할텐데 그게 어느 정도인지 궁금해서 테스트를 해봤습니다. 백만회 반복, 소수점 2자리 반올림 const t0 = performance.now() for (let i = 0; i < 1000000; i++) { let a = 341.348181293 a.toFixed(2) } const t1 = performance.now() console.log('toFixed') console.log(t1 - t0, 'msecs') const t2 = performance..

Web/Javascript 2022.02.15