탐구소년

C언어 기본 자료형의 앞에는 경우에 따라 unsigned 라는 키워드를 붙여 사용할 수 있습니다. 여기서 unsigned란 '부호가 없는'이라는 의미인데, 이에 대해 간단히 예를 들어가며 정리해보도록 하겠습니다(초간단 주의!). 데이터의 표현 방식 자료형이란 언어가 데이터를 표현하는 방식으로써, 자료형마다 값을 표현하는 방식과 표현할 수 있는 값의 범위가 서로 다릅니다. 가령 int라는 자료형을 사용한다고 하면, 표현할수 있는 값의 범위는 다음과 같습니다. => int 자료형이 표현할 수 있는 값의 범위 : –2,147,483,648 ~ 2,147,483,647 int 는 4바이트 만큼의 메모리 공간을 차지하는 자료형입니다. 바이트는 8개의 비트가 모여 형성되는 단위이므로, int는 32비트 자료형입니다..

리덕스(redux)는 자바스크립트 어플리케이션을 위한 상태 관리 프레임워크입니다. 그리고 리액트 리덕스는 리액트 컴포넌트의 상태 관리를 위한 리액트 전용 리덕스입니다. 이를 사용하면 리액트 컴포넌트들이 리덕스로부터 데이터를 읽고 리덕스 스토어를 통해 데이터를 관리할 수 있게 됩니다. 리덕스를 사용해 상태값을 변경하는 과정은 다음과 같은 흐름을 따릅니다. 각각의 객체가 각자의 역할을 순서대로(그러나 대개 비동기적으로) 수행합니다. 이번 글에서는 각 파트마다 어떤 역할을 수행하는지에 대해서 소개하도록 하겠습니다. 뷰 뷰(view)는 리액트의 컴포넌트의 의미합니다. 리액트 컴포넌트로부터 상태값의 변경이 시작되고, 변경된 값을 최종적으로 표시하는 역할 또한 리액트 컴포넌트가 담당하게 됩니다. 액션 리액트에서 상..

리액트를 사용해 차트를 표시할 수 있는 라이브러리의 종류는 무척 다양합니다. 여기에서는 그 중에서도 사용이 간편하고 많은 분들에게 비교적 친숙할 만한 라이브러리를 사용해보도록 하겠습니다. 자바스크립트나 제이쿼리를 학습하시는 분들이 많이 사용하시는 차트 라이브러리 중에 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..

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

안녕하세요 탐구소년입니다. HTML로 웹문서를 만들 때 태그를 사용하면 데이터를 입력할 수 있는 양식을 만들 수가 있습니다. 이 양식에 입력된 데이터를 사용자가 서버 프로그램으로 전달하게 되면, 해당 서버가 그것을 처리할 수 있습니다. 이번 포스팅에서는 사용자가 직접 서버의 역할까지 수행할 수 있도록, HTML 웹문서에 자바스크립트 코드를 추가하여 폼에 입력된 데이터를 처리해보도록 하겠습니다. 사용자가 폼을 통해 몇가지 데이터를 입력하고 제출을 하면, 제출된 데이터를 화면 상에 출력하는 흐름으로 코드를 작성해 볼 것입니다. 먼저, 다음과 같이 HTML 코드를 작성하여 간단한 양식을 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ..

안녕하세요 탐구소년입니다. 오늘은 HTML, CSS, JAVASCRIPT 공부를 갓 시작하신 분들이 도전해보시면 좋을 만한 프로젝트(?)를 하나 준비해봤습니다. 이름은 타이핑 게임으로 정해보았습니다. 프로젝트의 결과물은 다음과 같습니다. 페이지가 열리면 위와 같은 화면이 등장하고 여기에는 남은 시간, 영어 단어, 입력창 그리고 점수가 표시됩니다. 시간은 8초부터 시작을 하고, 남은 시간이 0초가 될 때까지 화면에 보이는 영어단어를 타이핑하는 게임입니다. 정확하게 타이핑을 마쳤을 때마다 스코어는 하나씩 올라가고, 영어단어는 새로운 것으로 교체되며 입력창은 리셋이 됩니다. 그리고 점수를 딸 때마다 시간은 소폭 증가하여 게임을 오래 지속할 수 있게 됩니다. 기본적으로 HTML과 CSS를 사용해서 형태를 구성했..

안녕하세요 탐구소년입니다. 오늘은 자바스크립트 코드를 작성해 텍스트를 복사하는 기능을 구현한 예제를 준비하였습니다. 예제 코드를 보관하기 위해 폴더 하나를 만들고, 거기에 index.html, index.css, 그리고 index.js 파일까지 총 세 개의 파일을 생성하였습니다. 그리고 다음은 각각의 파일에 작성된 코드입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 자바스크립트 텍스트 복사 내용 입력 복사 Colored by ColorScripter cs index.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 #container..

안녕하세요! 오늘은 자바 프로그래밍의 첫걸음인 JDK 설치 절차에 대해 정리해보도록 하겠습니다. JDK의 설치를 위해서는 제일 먼저 아래의 링크로 이동을 해주셔야 합니다. https://www.oracle.com/kr/java/technologies/javase-downloads.html 클릭하면 이동합니다. 옛날에는 이렇지 않았던 것 같은데.. 인터페이스가 무척 깔끔하네요. 가운데에 있는 JDK Download가 보이시죠? 여기를 클릭해주시면 됩니다. 그러면 각 운영체제에 맞는 설치파일을 다운로드할 수 있는 페이지가 나타납니다. 저는 윈도우에서의 설치를 가정하고 있습니다. 테이블 내용 중 밑에서 두번째에 있는 Windows x64 Installer의 링크(?)를 클릭해주세요. 그러면 창이 하나 뜰 것입..