ABBO 기술 블로그

지난 글에서 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..

Author: 주니용 웹 프로젝트에서 /resource/static에 들어가는 파일의 대부분은 캐시의 영향을 받습니다. 배포를 하더라도 기존의 캐시가 적용되면 캐시 삭제를 하지 않는 이상 변경되지 않습니다. 대개 *.js 파일이나 *.css 파일이 많이 수정이 되는 경우 이슈가 생겨 배포를 하더라도 클라이언트가 캐시 삭제를 하지 않는 이상 보통은 기존의 파일을 가지고 있게 됩니다. 따라서, 이를 해결하기 위한 Thymeleaf만의 꿀팁이 있습니다. 먼저 Controller의 Model에서 아무 키값에 System.currentTimemillis()를 넣어줍니다. @Controller @RequestMapping("/test") public class TestController { @RequestMappi..

Author: 주니용 앞의 글에서 블록들을 연결시켜주는 로직을 작성해보았습니다. 하지만, 이 상태로는 빈 데이터가 들어오는 경우에도 체인이 되는 형태이고, 또 같은 데이터가 동시에 들어와 해시값이 같더라도 문제가 발생하죠. 그렇기 때문에 검증하는 단계를 추가하여야 합니다. 마지막으로 추가하는 검증 소스는 아래와 같습니다. 먼저 Block 클래스 내부에 타입을 검증할 수 있는 로직을 추가해보려 합니다. static checkStruct = (block: Block): boolean => typeof block.index === "number" && typeof block.hash === "string" && typeof block.data === "string"; 자, 이제 typeof 함수를 이용하여 각..

Author: 주니용 이전에 프로토타입을 만들었다면 이제 본격적으로 활용가치가 있는 함수들을 직접 만들어보아야 하겠습니다. 소스를 간단하게 먼저 수정하고 진행하도록 하겠습니다. import * as CryptoJS from "crypto-js"; class Block { static calcBlockHash = (index: number, hash: string, data: string, ts: number): string => CryptoJS.SHA256(`${index}${hash}${ts}${data}`).toString(); private index: number; private hash: string; private prevHash: string; private data: string; priv..

Author: 니용 지금까지는 TypeScript에 문법에 대해서 다루어보는 시간이었습니다. 그럼 이제부터는 본격적으로 블록체인의 프로토타입을 만들어보려 합니다. 가장 먼저 Class를 생성합니다. 클래스의 프로퍼티는 아래와 정의하면 좋을듯 합니다. class Block { private index: number; private hash: string; private prevHash: string; private data: string; private currentTimestamp: number; } index는 인덱싱을 위한 컬럼으로 number 타입을 가집니다. hash, prevHash는 현재 인덱스가 가지고 있는 해시값과 이전 블록이 가지고 있는 해시값을 의미하고 string 타입을 가집니다. d..