본문 바로가기

자바스크립트86

[220619] jsonwebtoken 라이브러리 사용방법 설치 & 세팅 $ npm install jsonwebtoken const jwt = require('jsonwebtoken'); jwt.sign = 토큰 생성 jwt.sign(payload, secretOrPrivateKey, [options, callback]) payload : 페이로드 값 secretOrPrivateKey : 시크릿키 또는 프라이빗키 = salt [options, callback] : 필요한 나머지 정보들을 모아서 만든 객체 (예 : 알고리즘, 유효시간, 발급자 정보...) 토큰 생성 : 실사용 예 const jwt = require('jsonwebtoken'); const secreatkey = 'saltRole'; const option = { algorithm: 'HS256',.. 2022. 6. 19.
상속 : extends와 implements / 호출 : super() extends와 implements의 차이 extends 부모의 메서드를 그대로 사용할 수 있으며 오버라이딩(재정의)를 하지 않아도 됨. 변수까지 모조리 사용이 가능하나 다중상속은 안된다. 일반 클래스와 abstract을 상속할때 사용한다. class가 class를 상속받을때는 extends, class가 interface를 상속받을때는 implements interface가 interface를 상속받을때는 extends, interface는 class를 상속받을 수 없다. class extends classA (O) class implements interfaceA (O) interfaceE extends interfaceP (O) interfaceR extends classA (X) interface.. 2022. 6. 16.
[220609] prettier, eslint 설치 / 테스트코드(test.ts), 선언파일(d.ts) [ 사전 세팅 ] 문법을 맞춰주는 Prettier 확장프로그램 설치 prettier와 함께 사용할 라이브러리 설치 prettier 말고도 eslint 라이브러리도 설치하는 코드. $ npm install -D eslint prettier eslint-plugin-prettier eslint-config-prettier prettier의 기본값을 세팅하는 config 파일 만들기 // eslint라이브러리를 세팅하는 .eslintrc 파일 { "extends":["plugin:prettier/recommended"] } // prettier라이브러리를 세팅하는 .prettierrc 파일 { // 줄바꿈할 폭이 길이 "printWidth": 120, // 탭을 누를때 얼마나 공간을 둘건지 "tabWidth".. 2022. 6. 10.
[220609] 타입스크립트 개발환경 만들기 라이브러리 설치 언제나 그랬듯 새로운 기능을 위해 라이브러리를 설치해주자. $ npm init -y $ npm install -D typescript ts-node @types/node 이제 해야할것 자바스크립트는 해석해주는 프로그램이 브라우저, nodejs가 있지만 타입스크립트를 해석해주는 프로그램이 없어서 런타임이 없다. 리액트는 웹팩을 통해 번들링을 해서 나온 자바스크립트 파일로 브라우저가 실행해주는것처럼, 타입스크립트도 번들링이라는 작업을 해서 자바스크립트로 바꿔줘야함. 타입스크립트 실행하기 ts-node는 타입스크립트를 알아듣는 실행기. 개발용이라서 배포는 안됨. -D는 디렉토리 내에서 선언. -g는 전역적으로 선언. npx는 패키지를 임시 설치해서 실행하는 npm 소속 도구. $ npx ts-.. 2022. 6. 9.
[220608] 블록체인의 구조를 만들어보기 블록체인의 기본적인 구조는 이렇다. const block = { header:{ version:'1.0.0', pervoiusHash:'', hash:'', merkleRoot:'', difficult:0, nonce:0, }, body:{ data:["ada","sdfasd","ere","eaaaa","zzzz","bbbbb"] } } 이를 토대로 객체를 만들어보면 다음과 같이 나온다. const Block { constructor(_version,_height,_timestamp,_previousHash,_merkleRoot,_hash,_data){ this.version = _version; this.height = _height; this.timestamp = _timestamp; this.pre.. 2022. 6. 8.
[220608] 블록체인 초기설정하기 / 구조 알아보기 라이브러리 설치 언제나 그랬듯 새로운걸 시작할때는 라이브러리부터 설치하자 $npm install crypto-js 블록체인 구조 블록의 버전 = version 이전 블록의 해시값 = previousHash 블록 해시값 = hash body값의 해시값 = merkleRoot 지금 수준으로는 이해할 수 없는 값 = difficult, nonce const block = { header:{ version:'1.0.0', pervoiusHash:'', hash:'', merkleRoot:'', difficult:0, nonce:0, }, body:{ data:["ada","sdfasd","ere","eaaaa","zzzz","bbbbb"] } } 단방향 암호화로 만들어지는 hash 변수 a를 sha256 형식의.. 2022. 6. 8.
[220518] 판매 버튼 만들기 입력창에 가격을 입력하고 Sell 버튼을 누르면 가격이 등록되게 만들기 MyAnimalCard.tsx import { Box, Button, Input, InputGroup, InputRightAddon, Text, } from "@chakra-ui/react"; import React, { ChangeEvent, FC, useState } from "react"; import { saleAnimalTokenContract, web3 } from "../web3Config"; import AnimalCard from "./AnimalCard"; export interface IMyAnimalCard { animalTokenId: string; animalType: string; animalPrice: s.. 2022. 5. 18.
[220506] 미들웨어) redux-saga redux-saga란? redux-saga는 redux-thunk 다음으로 가장 많이 사용되는 라이브러리다. redux-thunk는 함수를 디스패치 할 수 있게 해주는 미들웨어였다. redux-saga는 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용한다. redux-saga는 redux-thunk로 못하는 다양한 작업들을 처리 할 수 있다. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있다 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 할 수 있다. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리 할 수 있다. API 요청이 실패했을 때 재요청하는 작업을 할 수.. 2022. 5. 11.
[220504] 미들웨어) redux-thunk 디렉토리 구조 미들웨어란? dispatch가 reducer를 실행시켜서 state를 반환하려고할때 그 중간을 가로막는 함수라고 생각하면 된다. 미들웨어의 종류 - 1. thunk : 함수를 디스패치 해주는 미들웨어 핵심은 10줄짜리인 짧은 코드. 그만큼 사용하기 쉽고 잘못짜면 터짐. 짧은 코드인만큼 기능이 없으면 내가 만들어서 사용해야함. action 객체가 아닌 함수를 dispatch할 수 있음. action에 응답을 줄 수 없다. 미들웨어의 종류 - 2. saga : 특정 작업이 이루어지는 액션에 대한 리스너 thunk보다 길고 규칙에 따라 사용해야해서 자유성이 적다. 하지만 기능이 thunk보다 많고 규칙을 지켜야해서 이슈가 적다. 액션을 모니터링하고 있다가 특정 액션이 발생했을 때, 미리 정해둔.. 2022. 5. 10.
[220502] styled-component 사용하기 디렉토리의 역할 src component - 공통적으로 들어갈 컴포넌트 모음 hook - 훅에 관련된 내용을 넣는 컴포넌트 pages - 화면에 출력할 영역을 넣음 reducer - reducer 모음 (useReducer가 아닌 redux 관련) store - Context와 같이 전역상태를 만들어주는 디렉토리 컴포넌트별로 기능을 부여할 수 있는 리액트 특성상 디렉토리는 파일 정리 이상의 의미를 가진다. 보통 기능별로 이렇게 디렉토리를 나누니 가이드 삼자. styled-component 설치하기 $ npm install styled-components styled-components 세팅하기 import styled from 'styled-components' styled-components 사용하기 .. 2022. 5. 8.

티스토리툴바