Torch for new way

지금까지 공부한 ts 문법을 이용해 block을 생성해보자. merkleRoot를 만들어주는 라이브러리 merkle은 ts 전용으로도 존재하므로 이를 먼저 설치한다. merkleRoot에 대해서는 https://liferesetbutton.tistory.com/59?category=944752로. npm i merkle npm i --save-dev @types/merkle // 둘 모두 설치해야 문제없이 작동한다. 1. Block, BlockHeader 셋업 Block class를 우선 선언을 해주되, 전역으로 사용할 수 있도록 @types 폴더에 파일을 만들어 선언한다. /* @types/Block.d.ts */ declare interface IBlockHeader { version : string..

이제 typescript, class 문법을 이용해 변수를 선언하고 군집형 데이터를 표현하는 법에 대해 알아보자. 1. class 선언 ts에서 하나의 객체 class를 생성할 때는 interface 명령어를 이용해 이 객체가 어떤 key들을 가질지, 그 key의 value의 데이터 타입은 어떤지를 미리 지정해주며 선언해야한다. src/core 에 ex_class 폴더를 만들고 interface.ts 파일을 생성해 작성해주자. /* src/core/ex_class/interface.ts */ interface User { name : string birth : number activation : boolean address : string } 이렇게 User class를 선언했을 때, 이 class는 반..

1. typesrcipt javascript와 비슷한데, 이보다는 조금 strict한 문법을 제공한다고 볼 수 있다. 대표적으로 우리가 변수를 선언할 때 JS에서는 데이터의 종류를 따로 지정하지 않고 자유롭게 쓸 수 있었지만 (배열인지 숫자인지 문자열인지 등..) TS에서는 변수 선언시 데이터 종류(type)을 반드시 함께 선언해주어야한다. 우리가 class 문법을 이용해 객체 (이제부턴 보통 블럭) 를 사용할 때, 그 class안에 있을 요소와 그 데이터 타입을 지정해 class를 선언해주면 앞으로 해당 class에 속하는 객체를 생성 할 때, 선언시 지정된 속성, 데이터 타입과 다를 경우 그 사실을 알려줄 것이다. 우선 ts 파일을 하나 만들고, 이를 js로 변환하는 가장 간단한 작업을 하는 것부터 ..

Blockchain을 크게 두 부분으로 나누면 block과 chain이다. 여러 개의 block들을 chain으로 이었다는 의미에서 우리는 이를 blockchain이라고 부른다. 이에 대해 이해하기 위해, 우선 개별 block이 무엇인지, 이 각각의 block들에는 어떤 정보들이 담겨 있는지 알아보는 것으로 시작하자. 다음은 실제 비트코인의 제네시스 블럭이다. https://www.blockchain.com/btc/block/0 해시 값, 확인 횟수, 시간, 난이도, 채굴 보상 등 다양한 정보가 담겨 있는 것을 알 수 있다. 여기서는 이 중 hash, merkleroot에 대해 알아보자. 1. hash 블럭에서 hash는 블럭 내 정보를 sha256 알고리즘으로 암호화한 정보이다. 이 hash 값을 활용..

리액트 앱에서 컴포넌트의 모든 요소를 전부 동시에 보여줄 필요는 없다. 사용자가 한 번에 그 기능을 다 사용하지도 않을 뿐더러 리소스 사용 측면에 있어서도 이는 비효율적이다. 그래서 router기능을 이용해 각 기능들을 다른 주소에 분리하고, 원할때만 이를 가져와 보여줄 수 있다. 정확히 말하자면 다른 주소에 있는 다른 화면을 보여주는 것이 router이다. 이를 이용해 메뉴를 클릭하면 다른 탭을 보여준다거나 하는 기능을 추가할 수 있다. 이는 react 내장 기능은 아니므로 npm을 이용해 라이브러리를 설치해야한다. npm i react-router-dom /* src/app.js */ import { BrowserRouter as Router, Link, Routes, Route } from 'rea..

지난번에 배운 redux의 기능을 약간 더 응용해 사용해보자. 우리가 SPA를 만들 때, 다양한 변수들이 다양한 형태로 state에 저장되어 관리를 받을 것이고, 페이지의 기능이 늘어날수록 그 상태의 형태 또한 굉장히 복잡해질 것이다. 예를 들어 간단한 게시판을 만드는데도 다음과 같이 복잡한 initialState가 필요하다. /* app.js */ const redux = require('redux') const { createStore } = redux const initialState = { user:{ userid:'web7722', username:'ingoo' }, comment:{ list:[{ idx:0, content:'asdf', date:'2022-05-03' }] }, categor..

리덕스에 대해 알아보자. 리덕스란 리액트의 상태를 관리해주는 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리할 수 있어 더 효율적인 관리가 가능하다. 그렇다고 리액트에 종속된 라이브러리는 아니다. 단독으로 사용으로 하거나, 다른 것과 같이 써도 된다. 이번에는 redux만을 사용해 state를 어떻게 관리하는지 가장 쉬운 예시로 알아보도록 하자. 1.용어 정리 우선 state 관리에 관련된 용어를 다시 정리하고 넘어간다. 1.1 action action은 state의 변화를 야기하는 첫 번째 단계이다. 객체 형태로 전달되며 여기서 type은 반드시 들어간다. 그 이외의 값은 payload로, 이는 필수적이지는 않다. /* action 객체의 예시 */ { type ..

React는 변화를 감지할 경우 컴포넌트를 다시 렌더링한다. 그런데 이 과정에서 불필요하게 연산을 다시 하는 일도 많이 나타나며, 이런 것들이 누적되면 성능의 저하로 이어진다. 이런 불필요한 연산을 막아 성능을 개선시켜주기 위해 사용하는 훅이 useMemo, useCallback이다. 1. useMemo useMemo는 특정 값이 바뀌었을 때만 연산을 수행하고, 그 값이 바뀌지 않았다면 이전 연산 결과를 재사용한다. 다음과 같이 입력한 수들의 평균값을 계산하는 툴이 있다고 하자. /* src/useMemo/UseMemo.jsx */ import React, {useState} from 'react' const Average = () => { const [list, setList] = useState(''..

다음으로 useReducer에 대해 배워보자. useState와 비슷하게 현재 상태, 그리고 상태의 업데이트에 필요한 정보를 담은 action 값을 전달 받아 새로운 상태값을 return해주는 함수이다. 사용 방법도 비슷한데, useReducer는 상태를 바꿔주는 코드를 한 블럭에 몰아 넣고 이를 컴포넌트 밖으로 빼낼 수 있다는 것이 장점이다. src 폴더에 useReduce 폴더를 만들고 Reduce.jsx 파일을 만든다. /* src/useReduce/Reduce.jsx */ import react, { useReducer } from 'react' const Reduce = () => { return( How to use Reducer show userid show userpw add list --..

우리가 컴포넌트에서 다른 컴포넌트로 변수나 함수등 데이터를 전달할때 여러 단계를 거쳐야 하는 경우가 있다. 이럴 때 좀 더 편하게 그 과정을 지날 수 있도록 전역 변수를 설정하는 것이 가능하다. 그 기능을 하는 것이 createContext와 useContext이다. 각각은 전역변수를 생성하고 사용하는 기능을 한다. 다음과 같이 src 폴더 안에 useContext 폴더를 생성하고, Context.jsx 파일을 생성 후, 훅들을 import 한다. /* src/useContext/Context.jsx */ import React, { useState, useContext, createContext } from 'react' const Context = () => { const [name, setName]..

지난 글에서 한 회원가입 기능에 간단하게 두 번째 훅인 useEffect를 이용해 기능을 추가해보자. 보통 우리가 뭔가를 입력하고 form을 submit 하면 잠시간은 submit 버튼이 disabled 상태가 된다. 이를 useEffect 훅을 통해 구현할 수 있다. useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 해주는 훅이다. 클래스 컴포넌트의 componentDidMount, componentDidUpdate를 합친 기능이라고 생각하면 된다. useEffect 또한 react 내장 훅이므로 첫 줄에 다음과 같이 useEffect를 import 해오자. /* practice/src/Form/Form.jsx */ import React, { useState, useEffect ..

이제 클래스형 말고 함수형 컴포넌트를 hook과 함께 사용해 비슷한 일을 해보자. 회원가입 기능을 함수형 컴포넌트를 이용해 구현해볼 것이다. 새 react 폴더를 만든 후, src 폴더 안에 Form.jsx를 만들고, App에서 이를 import하자. 생성될 폴더명은 여기서는 practice로 정했다. npm init -y npx create-react-app practice /* practice/src/Form/From.jsx */ import React from 'react' const Form = () => { return( userid password ) } export default Form 보는것처럼 class가 아닌 화살표 함수로 컴포넌트를 만든 후, 이를 export 했다. form ele..

지난 번에 이어서 댓글의 수정, 삭제 기능을 구현해보자. 1. 댓글 수정 댓글의 내용을 누르면 그게 input element로 바뀌면서 글을 지우고 쓸 수 있게 되고, 이를 제출하면 수정한 input box의 내용이 나타나는 방식으로 수정 기능을 구현할 것이다. 이를 위해 우선 CommentList 컴포넌트의 {v.content}에 클릭시 이를 인식해 클릭한 댓글을 특정해 input box로 바꾸는 기능을 추가한다. /* practice/src/component/comment/CommentForm.jsx */ import React from 'react' class CommentList extends React.Component { state = { value: '', update:null } items..

JS를 이용한 것과 비슷하게 React를 사용해 댓글 기능을 렌더, 생성, 수정, 삭제 순으로 구현해보자. 1. Set up 곱셈 때와 마찬가지로, 댓글다는 기능을 가진 컴포넌트를 크게 몇 개의 하위 컴포넌트로 쪼개 구성할지를 가장 먼저 생각해봐야한다. 이번에도 댓글 내용을 쓰고 submit할 부분 (이하 commentForm), 이미 작성된 댓글들을 불러와 렌더링해주는 부분 (이하 commentList) 이렇게 2개 파츠로 컴포넌트를 구성해 코드를 작성할 것이다. 우선 component 폴더 안에 comment 폴더를 만들고 comment.jsx 파일을 만든다. /* practice/src/component/comment/Comment.jsx */ import React from 'react' clas..

react를 이용해, 숫자를 입력하면 그 숫자의 x9 한 값까지 출력하는 n단 계산 프로그램을 만들어보자. 우선 컴포넌트의 구성부터 생각을 해보자. 계산기 전체를 담을 컴포넌트 이름을 Multiple이라고 하면 이 Multiple은 숫자를 입력하고 submit할 input 부분, 결과를 출력해줄 list 부분 이렇게 두 개의 컴포넌트로 나눌 수 있다. 우선 가장 상위 컴포넌트가 될 Multiple 컴포넌트를 작성하자. 개발 환경은 #5~#6에서 사용한 것과 동일하다. src 폴더 안에 copmonent 폴더를 만들고, 그 안에 multi 폴더를 만든 후, 그 안에 Multiple.jsx 파일을 생성한다. /* practice/src/component/multi/multiple.jsx */ import R..