본문 바로가기

전체 글62

아토믹 디자인 패턴(atomic design) 정의 사용자 인터페이스를 작고 단순한 컴포넌트로 분리하여 효율적으로 관리하는 방법론 역사 2013년 6월 브래드 프로스트(Brad Frost)라는 스타일 가이드 관련 경험도가 높은 웹디자이너가 제시한 디자인 패턴입니다. 아토믹 디자인 구조 구조는 원자(Atoms) -> 분자(Molecules), 유기체(Organisms), 템플릿(Templetes), 페이지(Pages)로 이루어져 있습니다. 1. 원자(Atoms) 사용자 인터페이스에서 더 이상 쪼갤 수 없는 가장 작은 컴포넌트입니다. 대표적인 원자 컴포넌트는 레이블(Label), 텍스트(Text), 컨테이너(Container), 버튼(Button), 아이콘(Icon) 등입니다. 2. 분자(Molecules) 두 개 이상의 원자로 구성된 컴포넌트입니다. .. 2022. 1. 3.
The Graph 란? 정의 블록체인에 등록된 데이터를 관리하기 위한 인덱싱 프로토콜 왜 이 기술이 나왔을까? 블록체인에서 스마트 계약에 작성된 데이터 정보를 비즈니스에 맞게 가공하는 게 예상보다 고려해야 할 부분들이 많습니다. 예를 들어 페이징 처리, 통계 정보 조회 등 디테일한 기능들을 스마트 계약에 추가할 순 있지만, 블록체인 네트워크에 지불할 수수료가 늘어나기 때문에 기능들을 추가하기엔 여러 가지 고려사항들이 많습니다. 이러한 문제들을 해결하기 위해 Graph에서 분산 프로토콜을 사용하는 The Graph를 만들었습니다. 동작 방식 Dapp은 스마트 계약의 트랜잭션을 통해 이더리움에 데이터를 추가합니다. 스마트 계약은 트랜잭션을 처리하는 동안 하나 이상의 이벤트를 생성합니다. Graph Node는 이더리움에서 새 블록과.. 2021. 12. 9.
TypeScript 란? 정의 JavaScript를 기반으로 하는 강력한 타입형 프로그래밍 언어 탄생 배경 JavaScript로 작성된 프로그램의 크기, 범위 및 복잡성은 기하급수적으로 커졌지만, 다른 코드 단위 간의 관계를 표현하는 JavaScript 언어의 능력은 그렇지 못했습니다. JavaScript의 다소 특이한 런타임 의미 체계(runtime semantics)와 더불어, 언어와 프로그램 복잡성 간의 불일치는 JavaScript 개발을 규모에 맞게 관리하기 어려운 작업으로 만들었습니다. 이러한 문제를 해결하기 위해 MS(마이크로소프트)에서 TypeScript를 개발했습니다. 특징 자바스크립트로 트랜스 파일 해야 브라우저나 자바스크립트 엔진에서 실행됩니다. 자바스크립트의 상위 집합으로 모든 ECMA 버전의 자바스크립트 파.. 2021. 11. 30.
GraphQL 이란? 정의 API를 제공하기 위한 쿼리 언어 쿼리 언어란 뭘까? 사용자에게 필요한 정보를 데이터베이스나 정보 시스템에 보여달라고 요청할 수 있게 하는 컴퓨터 언어입니다. 쿼리 언어 종류는 여러 가지가 있지만 대표적으로 알려진 언어로는 SQL(Structured Query Language)이 있습니다. SQL과 GraphQL은 어떤 차이점이 있을까? 언어적 구조, 사용법 등 여러 가지 차이가 존재하나 가장 큰 차이점은 언어의 목적이 다르다는 점입니다. SQL은 데이터베이스에 저장된 데이터를 효율적으로 가져오는 것이 목적이며, GraphQL은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적입니다. 왜 이 기술이 생겨났을까? 기존에는 API 개발을 할 경우 주로 REST API를 사용했었습니다. .. 2021. 11. 16.

티스토리툴바