탐구소년

리액트를 사용해 차트를 표시할 수 있는 라이브러리의 종류는 무척 다양합니다. 여기에서는 그 중에서도 사용이 간편하고 많은 분들에게 비교적 친숙할 만한 라이브러리를 사용해보도록 하겠습니다. 자바스크립트나 제이쿼리를 학습하시는 분들이 많이 사용하시는 차트 라이브러리 중에 Chart.js라는 것이 있습니다. 여기에서 사용해볼 리액트 라이브러리인 react-chartjs-2는 Chart.js의 리액트 래퍼라고 소개되어 있는 라이브러리로써, 쉽게 말해 Chart.js를 통해 그려진 차트를 리액트 앱으로 렌더링할 수 있도록 해주는 라이브러리라고 할 수 있습니다. 따라서 차트를 표시하는 데 필요한 기본적인 방법이나 흐름은 기존 Chart.js의 방식과 별반 다르지 않습니다. 그럼 라이브러리를 사용하기에 앞서 설치를 ..

안녕하세요 탐구소년입니다! 이번 게시글에서는 HTML/CSS/Javascript로 코드를 작성하여 웹 문서를 표시했을 때, 전체 또는 일부의 내용을 이미지 파일로 내보내는 방법에 대해 알아보도록 하겠습니다. 예상컨대 다양한 방법과 관련 라이브러리가 여러가지 경로를 통해 제공되고 있으리라 생각이 드는데요. 여기에서는 dom-to-image 라는 라이브러리를 사용해 목표하는 기능을 구현해보도록 하겠습니다. dom-to-image? 자바스크립트로 작성된 라이브러리로, DOM 요소를 벡터나 래스터 이미지로 변환하는 데 사용할 수 있습니다. filsaver? 파일 내보내기 기능을 구현할 때 곧잘 사용되는 라이브러리입니다. 적용 예 먼저 아래와 같이 html 문서를 작성해줍니다(이미지는 아무거나 사용해도 무관합니다..

리액트 어플리케이션을 작업하다 보면 가상 DOM요소에 직접 접근해야 하는 상황이 있을 수 있습니다. 이와 같은 상황에서 순수 자바스크립트의 경우에는 다음과 같은 접근을 사용합니다. 1 document.getElementById('ID') 위와 같이 요소에 대한 직접 접근을 하고자 할 때, 리액트 컴포넌트에서는 ref 속성값을 이용하면 됩니다. ref 속성값을 이용하면 자식 요소에 직접 접근이 가능합니다. 다음은 ref를 이용한 간단한 예입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import React from 'react'; import './App.css'; class App extends React.Component{ textRef = Reac..

리액트 어플리케이션에 라우팅 기능을 추가하는 간단한 방법을 알아보도록 하겠습니다. 리액트를 사용해 SPA(Single Page App)를 만들면 index.html이라는 정적 파일에 가상 DOM 객체가 동적으로 렌더링되는 방식으로 앱을 동작시키게 됩니다. 이러한 리액트 SPA에 라우팅 기능을 추가하기 위해 많이 사용하는 것이 바로 react-router-dom이라는 이름의 패키지인데요. 여기에서는 create-react-app을 통해 만든 앱에 해당 패키지를 설치하여 라우팅 기능을 구현해보는 예제를 소개하겠습니다. 먼저 프로젝트를 만들 폴더로 이동을 한 다음, 아래의 명령어들을 차례대로 진행해줍니다. 1 npx create-react-app rrd-demo 1 cd rrd-demo 1 npm instal..

파이썬 패키지인 turtle을 이용하면 그림을 그릴 수 있습니다. 이번 게시글에서는 turtle을 사용해 다양한 도형을 그릴 수 있는 코드를 소개할 것인데, 그 전에 선행되어야 하는 것은 거북이가 그림을 그릴 수 있는 환경을 만들어주는 설정에 대한 코드를 작성하는 일입니다. 일단 아래와 같이 코드를 작성해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import turtle # 각종 설정 player = turtle.Turtle() player.color("purple") #색깔 정하기(원하는 색깔 기입 가능) player.shape("turtle") #모양 정하기 player.speed(0) #속도는 숫자가 작을수록 빠름 screen = player.getscreen() ''..

이번에는 axios라는 도구를 사용해 API호출하고, 그에 따라 동적으로 생성되는 컴포넌트를 만들어보도록 하겠습니다. axios는? axios는 크로스 브라우징에 최적화되어 있는 http 통신용 자바스크립트 라이브러리입니다. 리액트 앱에서 이를 사용하기 위해서는 패키지 설치 후 코딩을 진행해야 합니다. => npm install axios 예제 예제는 랜덤으로 강아지 사진을 제공하는 API에 대한 호출로 진행하도록 하겠습니다. App.js에 클래스 기반의 컴포넌트를 다음과 같이 작성해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import React from 'react'; import axios from 'axios'; import './Ap..

async await는 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능입니다. 프로미스가 자바스크립트 표준이 된 이후에 등장한 새로운 표준인데, 프로미스를 대체하는 개념이라기 보다는 보완하는 개념입니다. async await 함수가 프로미스를 반환하기 때문입니다. async 함수 선언의 기본 형태는 다음과 같습니다. 1 2 3 4 5 6 7 // async 함수는 프로미스를 반환합니다 async function getData(){ return "Javascript make me angry"; } // 따라서 then 메소드 호출이 가능합니다 getData().then(data => console.log(data)) async 함수에는 await 식이 포함될 수 있습니다. 이 ..

프로미스(promise)는 비동기 상태를 값으로 다룰 수 있는 객체입니다. 프로미스를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식으로 코드를 작성할 수 있습니다. 프로미스 객체는 비동기 작업의 완료 또는 실패에 대한 결과값을 나타낼 수 있습니다. 프로미스는 최종 결과를 반환하지는 않고, 대신 상태값을 반환해서 미래의 어떤 시점에 결과를 제공합니다. 프로미스는 다음 중 하나의 상태를 가집니다. 대기(pending) : 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled) : 연산이 성공적으로 완료됨. 거부(rejected) : 연산이 실패함. 이행이나 거부가 처리되었을 때, 프로미스에 연결한 핸들러는 해당 프로미스의 then 메소드에 의해 처리됩니다. 아래는 프로미스의 기본 예제 코드..

안녕하세요 탐구소년입니다. 프로그래밍 언어를 공부해 본 경험이 있는 분이라면 누구나 컴파일러 또는 인터프리터라는 단어를 접해 본 일이 있으실 겁니다. 컴파일러와 인터프리터는 둘 다 프로그래밍 언어를 해석하고 실행시키기 위해 필요한 소프트웨어입니다. 예를 들어 대표적인 프로그래밍 언어인 C언어를 실행시키기 위해서는 컴파일러를 사용하고, 파이썬을 실행시키기 위해서는 인터프리터를 사용합니다. 이렇듯 두 소프트웨어는 비슷한 목적을 가지고 있는 소프트웨어인데요. 그러나 둘 사이에는 분명한 차이점 또한 존재하기 때문에, 그에 대해 잘 알아두면 추후 프로그래밍을 공부하는 데 분명 도움이 될 것입니다. 컴파일러 사전적으로 컴파일러는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램을 말합..

리액트 컴포넌트에는 생명주기가 있습니다. 모든 리액트 컴포넌트는 초기화, 업데이트, 소멸의 세 단계를 거치게 되는데, 이러한 단계를 컴포넌트의 생명주기라고 합니다. 그리고 컴포넌트에는 생명주기를 다룰 수 있도록 다양한 생명주기 함수가 존재합니다. 여기에서는 자주 사용하게 될 몇 가지에 대해서만 자세히 알아보도록 하겠습니다. (* 클래스 내부에 위치한 함수를 메소드라 합니다) constructor(props) constructor는 클래스형 컴포넌트가 생성될 때 호출됩니다. props 매개변수는 컴포넌트의 속성값이 적용된 상태로 호출됩니다. constructor 메소드 내부에서 반드시 super() 함수를 호출해야 합니다(규칙이니 그대로 사용하기만 하면 됩니다). 1 2 3 4 5 6 7 8 9 10 11..