Javascript

React 이미지 미리보기 구현 방법

by

이미지 파일을 선택해서 해당 이미지를 웹 상에서 바로 볼 수 있게 해야 할 때가 있습니다. React 이미지 미리보기 구현 방법을 살펴보겠습니다. React 이미지 미리보기 구현에 필요한 재료들 이미지 미리보기를 하기 위해서는 우선 파일을 선택할 수 있는 <input type=”file”> HTML 엘리먼트가 필요합니다. 아래 그림 1에서 파란 상자로 표시되어 있습니다. 그리고 두번째로 선택한 이미지를 보여줄 <img> 태그가 … Read more

React 엘리먼트 접근/제어 방법: ref 사용법

by

React를 이용해서 개발하다보면 특정 HTML Element에 접근해야 하는 경우가 있습니다. React 엘리먼트 접근/제어 방법인 ref 사용법을 살펴보도록 하겠습니다. React 엘리먼트 접근을 위한 ref property React로 개발하면서 엘리먼트에 직접 접근하거나 제어해야 하는 경우에 useRef를 사용할 수 있습니다. 보통 Javascript에서는 document.getElementById()와 같은 메서드를 활용해서 객체에 직접 접근하고 제어합니다만, React에서는 useRef()를 이용해서 해당 엘리먼트에 접근합니다. 예제: 보이지 않는 … Read more

Javascript Canvas 이미지 그리기 방법 3: crop, slicing

by

이미지를 읽어와서 캔버스에 그림을 그려야 할 때가 있죠. Javascript Canvas 이미지 그리기 방법을 살펴보겠습니다. Javascript Canvas 이미지 그리기 방법(crop, slicing) canvas에 이미지를 그리는 방법은 canvas의 context를 가져와서 drawImage() 메서드를 이용하면 됩니다. 이미지의 특정 부분만 canvas에 그리는 방법 역시 drawImage() 메서드를 이용하는 방법인데 전달해야 하는 파라미터의 개수에 차이가 있습니다. 우선 코드부터 살펴보시죠. 아래 그림은 위의 코드를 … Read more

Javascript Canvas 이미지 그리기 방법 2: 확대, 축소

by

캔버스에 이미지를 그릴 때 확대나 축소해야 하는 경우가 있죠? Javascript Canvas 이미지 그리기 방법 중 확대, 축소 기능을 살펴보겠습니다. Javascript 이미지 그리기 확대, 축소 방법 이미지 객체를 가져와서 확대, 또는 축소해서 canvas에 그리는 방법을 다음 코드로 살펴보겠습니다. 사용한 방법은 라인 11, 12에 있는 drawImage() 메서드를 이용한 방법입니다. 위의 코드를 실행한 결과는 아래와 같습니다. 왼쪽에는 img … Read more

Javascript Canvas 이미지 그리기 방법 1: copy

by

Javascript Canvas 이미지 그리기 방법 중 원본 이미지를 그대로 캔버스에 그리는 방법을 알아보겠습니다. Javascript Canvas 이미지 그리기(copy) 코드를 통해서 간단히 사용 방법을 알아보도록 하겠습니다. 코드에서 사용한 캔버스의 크기는 200 x 300입니다. 위의 코드를 실행한 결과는 아래와 같습니다. 좌측은 img 태그로 표현된 원본 이미지이며 우측의 빨간 상자로 표시한 것은 캔버스입니다. 캔버스의 (20, 20)부터 원본 이미지가 그려진 … Read more

ERR_PACKAGE_PATH_NOT_EXPORTED 해결 방법(node v18)

by

기존에 React.js로 개발했던 프로젝트를 간만에 열었는데, 오류가 나면서 개발 모드 실행이 되지 않나요? ERR_PACKAGE_PATH_NOT_EXPORTED 오류 해결 방법을 함께 알아보겠습니다. ERR_PACKAGE_PATH_NOT_EXPORTED 오류 발생 원인 기존에 개발했던 프로젝트를 열고, yarn install 후 아래 그림 1과 같이 오류 메시지를 만났습니다. 메시지를 보면 postcss-safe-parser 패키지에 Package subpath 가 정의되지 않았다고 합니다. 그런데 분명 이전에 작업할 때는 이런 문제가 생기지 … Read more

JavaScript 문자열 뒤집기 3가지 방법

by

Javascript에서 문자열을 뒤집어야 할 때가 있죠? Javascript 문자열 뒤집기 3가지 방법을 하나씩 알아보도록 하겠습니다. Javascript 문자열 뒤집기 개요 JavaScript에는 기본적으로 문자열을 뒤집는 내장 메서드가 없습니다. 하지만 이용할 수 있는 손쉬운 방법들이 있습니다. 우선은 가장 많이 사용하는 Array.prototype.reverse 메서드를 활용하는 것을 살펴볼 것입니다. 그리고 for loop을 이용해서 직접 뒤집어 줍니다. 마지막으로는 재귀함수를 이용해서 뒤집어 볼 것입니다. … Read more

Javascript 문자열 자르기 방법 3가지

by

프레임워크를 막론하고 Javascript를 기반으로 사용한다면 문자열을 자르는 작업은 필수적입니다. 이번엔 Javascript 문자열 자르기 방법 3가지를 알아보겠습니다. Javascript 문자열 자르기 Javascript에서 문자열을 자르는 방법에는 prototype method인 substring과 slice가 있습니다. 과거에는 substr도 사용했었지만 2018년부로 deprecated 된 상태입니다. 아직 웹 표준에서 사라진 건 아니지만, substr()은 앞으로 사용처가 없어지면 명세에서 제거된다고 합니다. 따라서 substr 사용은 지양하고 substring과 slice를 사용하는 … Read more

Javascript 천단위 콤마 찍는 3가지 방법(toLocaleString 추천)

by

숫자 값에 천단위 콤마를 찍어서 표현해야 할 때가 있으시죠? 방법은 매우 다양합니다만, 시간을 아껴야겠죠. 피해야 할 2가지 방법 간단히 소개하고, 추천하는 방법도 함께 안내해 드리겠습니다. 천단위 콤마 직접 찍어주기 이건 정말 말 그대로 직접 처리해 주는 것입니다. 숫자를 문자열로 변경한 다음 문자열을 판독해서 3자리마다 콤마를 찍어주는 방식이죠. 문제는 직접 찍어주는 함수를 작성하거나 누군가가 제작한 코드를 … Read more