탐구소년

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

이제 state에 대해 알아보도록 하겠습니다. state는 동적 데이터를 다룰 때 사용합니다. 동적 데이터란 말 그대로 변경 가능한 데이터를 의미합니다. 컴포넌트를 자바스크립트 객체라고 했는데, 객체의 구성 요소 중 일부의 개수가 바뀐다던지, 속성이 바뀌는 상황을 다룰 수 있도록 해 주는 것이 바로 state인 것입니다. state는 함수형 컴포넌트에서는 지원되지 않는 개념입니다. 따라서 이제부터는 클래스형 컴포넌트를 다루어야 합니다. 클래스형 컴포넌트의 작성을 위해서는 기본적으로 다음과 같은 형태로 시작해야 합니다. 1 2 3 4 5 6 7 8 import React from 'react'; import './App.css'; class App extends React.Component{ } expor..

props(속성) props는 컴포넌트에 전달하는 데이터를 의미합니다. 자바스크립트 함수의 매개변수라는 개념을 알고 계실텐데, 컴포넌트의 props 또한 매개변수와 비슷한 역할을 합니다. 전달되어지는 값에 따라서 결과의 차이를 만들어낼 수가 있고, 그로 인해 효율적인 컴포넌트 재사용이 가능해집니다. 컴포넌트 여러 개 사용하기 다음과 같은 구조를 만들고, App.js와 Book.js를 각각 작성해주겠습니다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import './App.css'; import Book from './Book'; function App() { return ( ); } export default App; B..

create-react-app 수정하기 CRA가 만든 리액트 앱의 구조는 단지 구조일 뿐이므로, 사용자가 원하는 형태의 앱을 만들기 위해서는 많은 부분의 수정이 필요합니다. 여기에서는 리액트 앱을 자동 생성된 상태에서 아무 기능도 없는 상태로 수정하는 방법을 보도록 하겠습니다. 먼저 기본적으로 완성되어있는 구조를 보겠습니다. public을 먼저 살펴보겠습니다. public에는 클라이언트 측에 제공되는 요소들이 주로 자리하고 있습니다. 여기에서 현재 주목할 것은 favicon.ico와 index.html 정도입니다. favicon.ico는 브라우저의 탭에 웹문서의 타이틀과 함께 표시되는 작은 이미지입니다. index.html은 웹문서를 표시할 수 있는 기본 내용만이 작성되어 있는데, 앱 동작시 자바스크립트..

create-react-app(CRA)이란? CRA는 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해주는 도구이자 명령어입니다. 특정 환경의 개발을 바로 진행할 수 있도록 만든 기초 환경을 통틀어 보일러 플레이트(boiler plate)라고 부르기도 하는데, CRA는 그러한 보일러 플레이트의 일종입니다. 사용자는 CRA를 통해 훨씬 빠르고 간편하게 리액트 어플리케이션을 개발할 수 있습니다. create-react-app 시작하기 CRA를 시작하기에 앞서 확인해야할 것은, PC에 npm(노드)이 정상적으로 설치되어 있는지 여부입니다. 명령 프롬프트를 열고 위의 명령어를 실행하면 PC에 설치된 npm의 버전이 나타나게 됩니다. 이때 버전이 나타나지 않으면 설치가 제..

안녕하세요 탐구소년입니다. 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..

안녕하세요 탐구소년입니다. 오늘은 제가 최근에야 이게 무엇인지 제대로 깨닫게 된, 자바스크립트의 쌍느낌표(?) 연산자에 대해서 정리해보도록 하겠습니다. 느낌표 두개 연산자라고 많은 사람들이 부르는 것 같은데요. 영어로는 더블 익스클레메이션(double exclamation)이라고 하면 될 것 같습니다. 느낌표 두개 연산자는 확실한 논리 결과(참 또는 거짓)를 얻기 위해 사용하는 연산자입니다. 기존의 느낌표 연산자는 true를 false로, false를 true로 반전하는 기능을 가지고 있는데요. 느낌표 두개 연산은 반전에 반전을 거듭하는 형태이므로 undefined나 null 값을 false로 불리언 형변환하는 데에 사용할 수가 있습니다. 간단한 테스트 코드를 보시면 바로 이해가 되실 겁니다. 예제 코드..

자바스크립트 간단 정의 자바스크립트는 HTML이나 CSS만으로는 부족한 기능을 보충하기 위해 사용하는, 브라우저를 조작하기 위해 사용하는 프로그래밍 언어이다. 자바스크립트는 크롬, 파이어폭스, 인터넷 익스플로러 등에서 실행할 수 있으므로 브라우저를 조작하는 것이 가능하다. 자바스크립트를 사용하면 HTML이나 CSS만으로는 불가능한 것을 할 수 있는데, 예를 들면 다음과 같은 것들이 가능하다. - 브라우저에 표시된 HTML이나 CSS를 변경한다.- 브라우저에 표시된 HTML이나 CSS에서 원하는 정보를 읽는다. 자바스크립트를 왜 배울까? 가장 중요한 이유. 자바스크립트는 웹 개발자들에게 있어서 필수라고 할 수 있는 언어 세 가지 중 하나이다. 세 가지 언어는 다음의 것들이고, 각 언어가 모두 웹 개발에 있..