지난 글에서 Component를 만드는 방법을 알아보았다면 이번 글에서는 본격적으로 JavaScript가 어떻게 적용되는지 살펴보려고 합니다. 가장 먼저 WatchBody부분에 div를 하나 추가하여 시계가 들어갈 위치를 설정합니다. 클래스명을 js-clock으로 추가한 후 위의 div를 선택할 수 있는 선택자를 생성합니다. 이제 선택자를 추가하였다면 스크립트에서 시간에 해당하는 함수를 넣어주어야 합니다. 이전에 JavaScript의 기본 문법에서 확인할 수 있듯이 document.querySelector는 아래와 같습니다. querySelector(".className") : 클래스명이 className으로 정의된 태그를 선택 ( == getElementByClassName와 같은 역할) querySe..
이번에는 React를 사용하여 간단한 시계를 만들어보려고 합니다. 가장 먼저 설치를 안하신 분은 여기 글로 가셔서 설치를 해주시면 되겠습니다! 앞에서 언급한대로, index.js는 React에서 사용하는 가상DOM을 렌더링 시켜주는 소스뿐이 없습니다. 이 소스를 통하여 React는 같은 경로에 있는 App.js 파일을 호출해오고 그 부분에 document.getElementById라는 DOM 선택자를 통하여 렌더링을 진행하는 간단한 소스입니다. import는 상단에 기본적으로 제공하는 React / ReactDOM / App.js와 css 파일을 진행하고 있고, serviceWorker는 해당 서비스가 정상적으로 작동하도록 도와주는 역할을 합니다. 지금은 스킵하도록 하겠습니다! 기본적으로 App.js에는..