Author: 니용 앞의 글에서 Hooks의 용어가 있다는 정도만 말씀드렸었고, 이번 글에서 그 Hooks가 대체 뭐길래 이렇게 강조를 하는 것인지 설명드리려고 합니다. Hooks는 React 문법 중 하나입니다. 저는 문법이라는 것을 처음 알았을 때가 중학교 영어 수업시간이었습니다. 문법이 무엇인지 모르고 영어 문제를 그저 단어 하나하나로 해석으로 푸는 것은 정말 어려웠습니다. 영어를 손절하려고 하였을 때 선생님이 처음 알려준 것은 단어가 아닌 형식이었고, 이것이 나중에는 문법이라는 것을 뒤늦게 깨달아 문법 공부를 시작하게 되었습니다. 프로그래밍 언어도 영어와 마찬가지로 문법이 있습니다. 문법을 알고 React 코딩을 진행하는 것과 그러지 아니한 것은 큰 차이가 있습니다. 최초에 React가 나왔을 때..
앞에서 기본적인 자바스크립트 문법으로 작성을 해보았다면 여기서는 스크립트의 파일을 어떻게 나눌지와 각각 분리되어 있는 여러 가지 파일을 가져와 사용하는 방법을 작성해보려고 합니다. 다시 말해, 디자인 패턴 구조를 상세히 시키는 것입니다. 이전에 알아두어야 하는 것은 React 컴포넌트를 구분하는 방법입니다. 컴포넌트를 구분하는 방법에는 4가지가 있습니다. 1. Container vs Presentational 2. Stateful vs Stateless 3. Smart vs Dumb 4. Pure vs Unpure 사실 이러한 방식은 몰라도 개발에 전혀 문제가 없습니다. 하지만 React의 특성상 컴포넌트이 재사용성이 매우 뛰어난 것에 비해 활용을 하지 못한다면 기존의 자바스크립트를 그대로 사용하는 것이..
지난 글에서 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에는..
1. 언어 React는 대부분의 소스가 JavaScript로 구성되어 있습니다. 물론 CSS나 HTML도 부가적인 요소이지만 가장 큰 비중을 차지하고 있는 것이 JavaScript입니다. 때문에 JavaScript 또는 TypeScript가 선행 과정으로 이수되어야 합니다. 2. 구조 프로젝트를 생성해보신 분들도 아시겠지만 React는 웹 프로젝트 구조를 가지며, Web App Server가 npm에 내장되어 있습니다. 때문에 "npm start"라는 명령어를 통해 WAS를 구동시키게 되는 것과 같은 원리이고, 터미널이 종료된다면 WAS 또한 종료되어 웹 프로젝트가 작동을 멈추게 됩니다. (생성 방법은 여기 글에 작성해두었어요.) React 프로젝트를 생성하게되면 기본적으로 index.js 와 App.j..
사람들은 이전부터 많은 프로그래밍 언어들에 관심을 가져왔습니다. 그 중 자바스크립트는 웹에서 하기 힘든 많은 일들을 실현시켰고, 또 하나의 언어만 알아도 많은 퍼포먼스를 낼 수 있는 역량을 가진 다수의 개발자를 독려하는데 큰 역할을 한 언어입니다. 자바스크립트가 발전하고 점점 범용성이 넓어지게 되면서 사람들은 자바스크립트보다 명확한, 또 개선되고 빠른 언어를 선호하기 시작하였습니다. 이 때문에 여러 자바스크립트 언어를 기반으로 한 프레임워크가 다수 출현하게 되었는데, 그 중 하나는 Node.js입니다. 설치를 하게 되면 아시게 되겠지만, Node는 NPM(Node Package Manager)가 전적으로 관여하게 됩니다. 모든 명령어를 'npm'이라는 단어로 실행시킬 수도 있고, 온라인이라는 상황하에 n..