탐구소년

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, 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에서 원하는 정보를 읽는다. 자바스크립트를 왜 배울까? 가장 중요한 이유. 자바스크립트는 웹 개발자들에게 있어서 필수라고 할 수 있는 언어 세 가지 중 하나이다. 세 가지 언어는 다음의 것들이고, 각 언어가 모두 웹 개발에 있..