블록체인 및 Web3 를 지탱하는 기술 소개 (1) 블록체인은 중아 통제 없이 운영되는 혁신적인 스스템이다 . 이를 통해 웹 사이트나 앱이 여러 서버에 분산되어 저장될 수 있다. 각 서버가 독립적으로 운영되기 때문에 어떤 단일 개인이나 기업도 네트워크를 완전히 통제 할 수 없다. 이것이 바로 블록체인이 새로운 Web3 모델을 가능하게 하는 이유 중 하나 이다. 블록체인은 전 세계에 분산된 많은 컴퓨터와 서버로부터 데이터를 수집하여 하나의 공유 데이터 기록인 원장을 유지한다 이것은 회계의 장부와 유사한 역활을 하며 주로 암호화폐 거래를 기록하는 데 사용된다. 데이터는 '블록'으로 묶여서 연결된다. 새로운 데이터가 처리되면 이전 체인에 계속해서 추가된다. 각 블록은 전체 체인의 무결성을 유지하는 데 매우 중..

리액트 앱 설치 방법 요즘에는 npx create-react-app 이라는 명령어로 간단하게 설치할 수 있다. 우선 예전에는 어떻게 설치했는지 보고 가자 원래 리액트 앱 설치하는 방법 Webpack 이나 Bable 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었다. 웹팩이란 무엇인가? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 이다. 웹팩 장점은 무엇인가? 1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 2. 모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽다. 바벨이란 무엇인가? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을..

리액트의 주요 특징 중 하나는 가상( Virtual ) 돔을 사용하다는 것이다. 그럼 가상돔에 대해서 알아봐야하는데 우선 가상돔을 왜 사용하는지 알기 위해서 먼저 실제 ( Real ) 돔( DOM ) 에 대해서 알아보고 브라우저가 렌더링하는 과정에 대해서도 알아보자 HTML을 이용한 화면에 UI 표현하기 브라우저에서 UI를 볼 수 있는 것은 이 HTML 을 분석해서 보여줄 수 있기 때문이다. 이 HTML은 요소 ( Element ) 들로 구성되어 있다. 돔 이란? ( Document Object model ) 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미한다. 돔 조작 위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용..

리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 된다. 그러면 컴포넌트는 무엇일까? 리액트로 만들어진 앱을 이루는 최소한의 단위 리액트는 여러 컴포넌트 조각으로 되어있다. 만약 하나의 페이지를 리액트로 만든다고 보면 아래 그림처럼 여러개의 컴포넌트가 모여서 하나의 페이지를 이루게 된다. 이 인스타그램 페이지를 보면 여러 개의 컴포넌트로 이루어져 있다. 검색,프로필,스토리,포스트 컴포넌트 등으로 구성되어 있는데 이렇게 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또한 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다. 리액트 컴포넌트는 두가지가 있다. 원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트 Hook..