JWT란 JSON Web Token의 약자로, 두 개체에서 JSON 객체를 사용하여 가볍고 자가 수용적인(self-contained) 방식으로 정보를 안전성 있게 전달해준다. 자가수용적이라는 것은 필요한 모든 정보를 자체적으로 지니고 있다는 뜻이다. JWT 시스템에서 발급된 토큰은 토큰에 대한 기본정보, 전달할 정보 (로그인 시스템에서는 유저 정보) 그리고 토큰이 검증됐다는 것을 증명해주는 signature를 포함한다. JWT를 만들때는 JWT를 담당하는 라이브러리가 자동으로 인코딩 및 해싱 작업을 해준다. 다양한 프로그래밍 언어에서 지원 자가 수용적(self-contained). 사용자 인증에 필요한 모든 정보를 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요없음. 쉽게 전달 될 수 있음. 두 ..

CI/CD란? CI/CD는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 더욱 짧은 주기로 고객에게 제공하는 방법이다. CI/CD의 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포이다. CI/CD는 새로운 코드 통합으로 인해 개발 및 운영팀에 발생하는 문제(일명 "통합 지옥(integration hell)")를 해결하기 위한 솔루션이다. 특히, CI/CD는 애플리케이션의 통합 및 테스트 단계에서부터 제공 및 배포에 이르는 애플리케이션의 라이프사이클 전체에 걸쳐 지속적인 자동화와 지속적인 모니터링을 제공한다. 이러한 구축사례를 일반적으로 "CI/CD 파이프라인"이라 부르며, 개발 및 운영팀의 애자일 방식 협력을 통해 DevOps 또는 SRE(사이트 신뢰성 엔지니어링) 방식으로 지원된다..

웹 기술의 진화 웹은 1993년 HTML 기반의 정적 페이지에서부터 시작되었다. 이 때 모든 웹사이트의 주요 기능은 단순히 링크가 전부였다. 사람들이 정적 웹사이트에 지루함을 느끼기 시작할 때, 누군가가 "정적인 페이지를 동적으로 만들자"라고 외쳤고, 그렇게 자바스크림트(Javascript)가 탄생했다. 그로부터 몇 년 후, 존 레식은 여러 브라우저에서 정상적으로 작동하는 자바스크립트 코드를 개발자들이 쉽게 작성할 수 있도록 jQuery를 만들었다. 이후 2010년 구글에선 강력한 단일 페이지 웹 애플리케이션(single-page web application)을 구축할 수 잇는 Angular JS를 소개해, 큰 인기를 끌었다. 그리고 2013년에는 페이스북의 소프트웨어 엔지니어인 Jordan Walke가..

Material-UI는 리액트 UI Framework이다. Material-UI 홈페이지 : https://material-ui.com/ Material-UI 블로그 : https://medium.com/material-ui MUI Core: Ready to use components, free forever Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind. mui.com MUI Blog – Medium MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design..

카톡처럼 앱의 다른 페이지에 있거나, 앱이 실행되지 않고 있을 때 푸시알람을 보내기 위해서는 FCM과 같은 Cloud Messaging 서버를 통해 상대방에게 데이터를 전달해야 한다. 그렇다면 FCM(Firebase Cloud Messaging)은 무엇이고 동작원리는 무엇인지 알아보자. FCM(Firebase Cloud Message)이란? FCM은 타겟 모바일에 푸시 알림(이하 푸시)을 보낼 수 있도록 하는 서비스로, Firebase 콘솔이나 서버에서 푸시를 보낼 수 있다. FCM 동작 원리 앱을 위한 키를 FCM 서버를 통해 얻는 단계 모바일에 앱이 설치되는 순간, Firebase 서버에 키 획득을 위한 요청을 보냄 Firebase 서버에서 키를 만들어 모바일에 전달 모바일 앱에 전달된 키를 서버에 ..

ESNext의 주요 문법 살펴보기 (1) 비구조화 할당(destructuring assignment) ESNext는 '비구조화 할당(destructuring assignment)'이라고 하는 구문을 제공한다. 비구조화 할당은 객체와 배열에 적용할 수 있다. 다음 코드는 비구조화 할당을 적용한 예이다. let person = {name: "Jane", age: 22} let {name, age} = person // name = "jane", age = 22 let array = [1, 2, 3, 4] let [haed, ...rest] = array // head = 1, rest = [2, 3, 4] let a = 1, b = 2; [a, b] = [b, a] // a = 2, b = 1 02행을 살펴..

세 종류의 자바스크립트 자바스크립트는 현재 세 가지 종류가 있다. 웹 브라우저에서 동자갛는 표준 자바스크립트인 ES5(ECMAScript 5)와 2015년부터 매년 새로운 버전을 발표하는 ESNext, 그리고 ESNext에 타입(type) 기능을 추가한 타입스크리트(TypeScript)이다. 다음 그림은 ES5, ESNext, 타입스크립트 간의 관계를 보여준다. ESNext는 ES5의 모든 문법을 포함하고, 타입스크립트는 ESNext의 모든 문법을 포함한다. 따라서 타입스크립트로 개발했더라도 타입 기능을 사용하지 않는다면 ESNext 소스나 마찬가지이다. *ESNext 자바스크립트란? 자바스크립트의 공식 표준은 ECMAScript(줄여서 ES)이다. 2009년 발표된 ES5 버전이 있었는데 2015년에 ..

Virtual DOM 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다. DOM이란? Virtual DOM을 알아보기 전에, 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가자. DOM은 'Document Object Model'의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. DOM은 과연 느릴까? 요즘 DOM API를 수많은 플랫폼과 웹 브라우저에서 사용하는데, 이 DOM에는 치명적인 한 가지 문제점이 있다. 바로 동적 UI에 최적화되어 있지 않다는 것이다. HTML은 자체적으로는..

리액트 이해 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(View)만 신경쓰는 라이브러리이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다.템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 사용자 홤녀에 뷰를 보여 주는것을 렌더링이라고 한다. 리액트 라..

UTXO란? UTXO는 Unspent Transaction Outputs의 약자로서, 미사용 트랜잭션 출력값을 말한다. 비트코인은 이더리움의 ‘계좌 잔고 모델’(Account Balance Model)과 달리 계정이나 잔고가 없고, 블록체인에 기록된 “소비되지 않은 출력값”을 통해 거래의 유효성을 검사하여 코인의 존재 여부를 확인한다. UTXO를 이용해, 이중 지불(Double Spending) 문제를 방지한다. 왜 UTXO를 써야 할까? 기존 은행시스템에서 송금 방식은 매우 간단하다. 송금 신청을 하면 은행에서 ‘잔액'을 확인하고, 잔액이 있다면 상대방의 통장으로 송금을 해준다. 이런 변동 내역은 고스란히 DB에 저장 되고, 잔액을 확인하게 될 때는 단순히 이름에 매칭 되어 있는 잔액을 확인해 준다. ..