sudo apt-get install unzip unrar unzip 과 unrar 패키지를 설치하는 명령어이다. unzip filename.zip filename 부분에 실제 파일 이름을 기재하자. rar도 마찬가지다.

Lesson 3 고급 솔리디티 개념 Chapter 1 컨트랙트의 불변성 스마트컨트랙트는 불변성을 갖는다. 그 누구도 수정/변형 할 수 없다. 따라서 보안적 이슈가 있어도 새로운 스마트컨트랙트를 작성할 수 있을 뿐, 기존의 것을 수정할 수 없다. 이는 곧 코드작성에 있어서도 하드코딩을 기피해야하는 이유가 된다. 얘를 들어 interface에서 사용할 스마트컨트랙트 주소를 하드코드로 넣는 경우, 해당 스마트컨트랙트가 모종의 이유로 폐기된다면 우리가 작성한, 해당 스마트컨트랙트를 사용하고 있었던 스마트컨트랙트도 폐기해야한다. KittyInterface kittyContract; function setKittyContractAddress (address _address) external { kittyContra..

Lesson 2 좀비가 희생물을 공격하다. Chapter 1 개요 Chapter 2 Mapping 과 Address address는 솔리디티에만 있는 독특한 자료형으로서, 지갑주소 등을 저장하는 타입이다. //cryptozombies 예제코드 mapping (address => uint) public accountBalance; mapping (uint => string) userIdToName; 매핑은 일종의 객체 비스무리한 녀석인데, 위 코드 중 첫 번째처럼 작성한다면, accountBalance의 address를 포인팅한 후 uint를 할당할 수 있다. 즉, 아래와 같이 사용할 수 있다. mapping (address => uint) public accountBalance; accountBalanc..

https://cryptozombies.io/ #1 Solidity Tutorial & Ethereum Blockchain Programming Course | CryptoZombies CryptoZombies is The Most Popular, Interactive Solidity Tutorial That Will Help You Learn Blockchain Programming by Building Your Own Fun Game with Zombies — Master Blockchain Development with Web3, Infura, Metamask & Ethereum Smart Contracts and Become cryptozombies.io JS에 대한 기초적인 지식이 있다는 가정하..

흔히 BackEnd라고 불리는 Server 단과 FrontEnd라고 불리는 Browser 단은 지극히 독립적이다. Server는 특정 요청에 따라 특정 응답을 해주는 머신에 불과하고, Browser는 유저와 구체적으로 상호작용하는 부분이다. 이 때, http protocol은 Stateless 를 특징으로 한다. 다시 말해, 특정 상태를 기억하거나 하지 않는다. 이것이 의미하는 바는 크다. Browser에서 유저가 한 동작을 Server는 기억하지 못할 뿐만 아니라, 그 유저가 누구인지도 알 수 없다. 따라서 우리는 매 요청마다 유저가 누구인지에 관한 정보를 담아서 Server로 전송해야하고, Server는 그 정보를 통해 누구인지를 식별할 수 있어야한다. 이를 위해 일반적으로 우리는 express-se..

res.sendFile은 말 그대로 response에 해당 파일을 전송하는 명령어이다. 보통은 이 메소드를 통해 클라이언트 즉, FE단으로 데이터를 전송하는데 쓰인다. 한편, path.join은 경로를 지정해주는 메소드이다. path.join에서는 미리 선언된 __dirname을 사용할 수 있다. __dirname 는 현재 해당 파일이 존재하는 폴더 경로를 뜻한다. (단, CommonJS 모듈에서는 별도의 __dirname 선언 없이도 바로 사용할 수 있지만, ES 모듈에서는 별도의 선언이 필요하다) //CommonJS 모듈 const express = require('express'); const path = require('path'); //ES 모듈 import express from 'expres..

최근 내 노트북의 vmmem 프로세스가 폭주하는 일이 잦다. CPU 점유율 90% 이상은 기본이고(최대한 끌어다 쓴다. 그래서 전체 CPU 사용률은 100%에서 유지), RAM 점유도 장난아니다. 문제의 원인은 아직 불명... 이를 해결하기 위해 컴퓨터를 재부팅하는 방법도 좋지만, WSL을 강제로 종료해버리는 방법도 좋은 방법이다. $ wsl --shutdown Windows Powershell 에서 위 커맨드를 입력하면 WSL이 강제 종료되어 vmmem 프로세스의 폭주를 막을 수 있다.

인증/인가로 불리는 그것의 정체 Authentication과 Authorization은 Back-End(server) 작업시 빼 놓을 수 없는 부분이다. 이 때,.Authentication은 인증, Authorization은 인가(또는 권한부여)로 보통 번역하며, 두 개를 묶어서 '인증/인가'로 부른다. 이러한 관행은 초보 프로그래머로 하여금 인증과 인가를 거의 유사한 개념으로 인식하게 만들고, 양자의 차이를 명확히 구분하지 못하게 만든다고 생각한다. 따라서 나는 인가를 '권한 부여'로 번역하는 스타일을 더 선호한다. 일반적으로 정상적인(?) 프로세스에서는 인증을 진행한 후에야 권한 부여가 진행된다는 점에서 인증과 권한 부여 사이의 시간적 선후관계는 존재한다고 볼 수 있다. 하지만, 인증과 권한 부여는 ..

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 1. 발단 NextJS에서 npm run dev 명령어를 입력했더니 갑자기 에러가 떴다. 에러가 뜨기 전과 비교했을 때, 내가 한 행동은 package들을 싹 최신 버전으로 갈아 엎어줬다는 정도? 패키지 버전업은 함부로 하는게 아니라는걸 다시 한 번 되새기면서 이 에러에 대해 찾아보았다. 2. 해결방법 구글링 결과 원인 및 해결책은 매우 간단했다. autoprefixer의 버전을 10.4.5로 할 것 따라서 이 문제를 해결하기 위해서는 다음 명령어를 통해 다운그레이드 시켜주면 된다. 참고로 에러가 발생한 버전은..

Zone.Identifier란 무엇인가? WSL에 인터넷에서 다운받은 파일을 복붙해서 넣으면 Zone.Identifier 가 붙은 파일이 저절로 생성된다. 어떤 경우에는 생기지 않고, 어떤 경우에는 생기는 걸로 봐서 뭔가 생성 요건이 있는 듯 한데.. 아직 거기까지는 파악을 못한 상태. Zone.Identifier에 대해 알아보니, Windows에 도입된 새로운 ADS라고 한다. ADS란 Alternate Data Stream(대체 데이터 스트림) 의 약자로 NTFS 파일 시스템에 딸려있는 숨겨진 영역이다. 여기에는 일반적으로는 확인할 수 없는 여러가지 데이터가 담길 수 있는데, 이 ADS는 보안상 취약점이 되기도 한다. 어쨌거나 Windows에서 생성하는 Zone.Identifier에는 파일의 출처에 ..

최근 PlanetScale 이라는 서버리스 DB를 공부하고 있다. 근데 PlanetScale의 CLI를 Linux 환경에 설치하려는 과정에서 아래와 같은 상황과 마주하였다. 나의 경우, 데스크탑은 AMD CPU이고, 노트북은 Intel을 쓴다. 그래서 데스크탑에서는 자신있게! amd64를 깔아왔었지만, 노트북은 이제 겨우 2달 남짓 쓴 터라 설치할 일이 그리 많지도 않았고, 그동안은 64가 붙은게 하나뿐이라 눈치껏 64 붙은 녀석으로 설치해왔는데, 이번에는 amd도 64, arm도 64다. 난관이다. 그래서 이번 기회에 여태 미뤄왔던 아키텍처 부분을 조금 정리해보려 한다. 사실 amd64, arm64를 마주한 상황에서의 정확한 나의 심정은 아래와 같았다. arm은 죽었다 깨어나도 아니니 amd일 것 같은..

React로 form의 이벤트를 모두 컨트롤하기 위해서는 발생 가능한 이벤트를 다 상정하여 개별적으로 state를 설정하여 컨트롤 해야하는 문제가 있다. 물론 이 마저도 바닐라 JS에 비해서는 아주 많이 간편해진 셈이지만, 사람의 욕심은 끝이 없고 개발자의 게으른 부지런함(?)도 마찬가지다. form과 관련된 웬만한 이벤트들을 한 번 싸그리 모아다가 상정해두고 이를 컨트롤할 간단한 방법을 만들어두면 두고두고 쓸 수 있지 않을까? 위 고민에 대한 답을 내놓는 React 라이브러리가 바로 React-hook-form 이다. 1. 설치하기 $ npm i react-hook-form 위 커멘드를 입력하면 설치가 진행된다. 2. 기본 개념 React를 기반으로 하고 있으므로 큰 틀은 React와 동일하다. rea..

NextJS는 ReactJS를 바탕으로 만들어진 웹 Front-End 프레임워크이다. 프레임워크다보니, ReactJS에 비해 자유도는 낮지만, 그만큼 정형화/규격화 되어 있어서 협업이 편하고 생산성이 높다. NextJS는 ReactJS의 SEO문제를 해결하고자 등장했다. 대표적인 CSR 라이브러리인 ReactJS는 Request에 대해 Javascript 코드만을 Response하는데, 이 JS 코드가 최종적인 HTML을 만드는 구조라, JS를 돌릴 줄 모르는 검색엔진이 사이트를 크롤링하면 텅 빈 HTML만 인식하게 되어 검색친화적이지 못하다. 반면, NextJS는 Request가 오면, 서버측에서 먼저 Rendering을 거친 후 HTML과 JS를 따로 Response한다. 따라서, 사용자는 HTML코..

얼마 전 주변의 아는 분께서 이번에 길벗에서 개발자 리뷰어 모집을 한다는 소식을 전해주셨고, 여러가지 책 중에서 내 마음을 이끄는 책은 당연 였다. 나는 현재 JavaScript를 이용하여 Front-End와 Back-End 개발을 진행하는 개발자이지만, 동시에 머신러닝, 딥러닝 쪽에 관심이 많은 사람인지라, JS 라이브러리인 TensorFlow.js를 바탕으로 딥러닝을 소개하는 책이 가장 흥미로울 수 밖에 없었다. 그래서 길벗 18차 개발자 리뷰어 모집에 책으로 신청을 하였고, 운 좋게 선정되어 책을 받아보게 되었다. 이 책의 특징 TensorFlow.js를 진심으로 다루는 책 내 개인적으로는 이 책의 가장 큰 장점으로 TensorFlow.js를 사랑하는 사람들이 정말 진심을 담아, 보다 많은 사람들이..

enum enum의 개념 enum은 열거형 타입(Enumerated Type)을 앞 글자를 따와서 만들어진 단어이다. Javascript에는 존재하지 않는 Typescript 만의 몇 안되는 기능이다. Typescript에서는 숫자기반 뿐만 아니라 문자열 기반의 열거형까지도 지원한다. enum의 대표적인 예로 boolean Type을 생각할 수 있다. 일반적으로 JS에서 숫자 1은 True에, 숫자 0은 False에 대응되는데, 일종의 Built-in enum인 셈이다. enum booleanType { False = 0, True = 1 } 위 코드를 JS로 컴파일하면 아래와 같이 바뀐다. "use strict"; var booleanType; (function (booleanType) { boolea..

RAM 95% 달성 기념으로 이전 포스팅에서 RAM 용량에 대한 내용을 다루었다. 개발자 노트북의 RAM은 16GB로는 부족하다 주변에서 컴퓨터 견적이나 노트북 추천을 부탁해오면 항상 하는 말이 있다. 램은 최소 32GB로 맞춰라.. 게이밍 머신으로 데스크탑을 맞추는 용도가 아니면, 램 16GB는 정말 정말 뜯어 말리고 싶다. xpectation.tistory.com 이 포스팅에서 살짝 언급한 WSL2는 램을 얼마나 잡아먹고 있는걸까? 작업 관리자에 표시되는 Vmmem 프로세스가 아마도 VmMemory를 뜻하는 것 같은데, 이 프로세스가 WSL2의 전부는 아니다. WSL2에서 잡아먹고 있는 램은 아래 명령어를 통해 확인 가능하다. $ free -h 보시다시피, 물리 메모리가 7.6GB, Swap기술을 통..

react-router SPA을 위해 React의 Client-side routing을 위해 필요한 녀석이다. Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com 대표적으로 BrowserRouter, Switch, Route 그리고 Link 정도를 import 해서 자주 쓴다. 오늘은 이 중에서 Route와 관련..

Javascript에서 A파일에 작성한 코드를 B파일에서 쓰고 싶을 때 쓰이는 것이 바로 import와 export이다. export는 현재 파일에 있는 어떤 변수나 함수, class 따위를 import 가능한 상태로 전환시켜주는 기능을 하고, import는 현재 파일에서 다른 파일에 export 되어 있는 어떤 변수나 함수, class 따위를 쓸 수 있게 만드는 기능을 한다. 따라서, 먼저 export 부터 살펴보자. export export는 크게 두 가지가 있다. 이름을 지정하여 내보내기 (named) //변수, 함수, 클래스를 선언하고 초기화하면서 동시에 export 하는 방법 export const randomNum = Math.random //변수, 함수, 클래스를 선언하고 초기화한 뒤, 이미..

styled-components를 이용하지 않고 React만을 통해서 웹 퍼블리싱을 하는 방법은 크게 3가지가 있다. 해서... 원래는 3가지 방법을 모두 설명하려 했지만.... 다음에 기회가 되면 하기로 하고, 바로 styled-components로 들어가보자. 어차피 지금 시점에서 React를 쓰면서, styled-components 를 쓰지 않는다는 것은 어불성설이다. 설치 npm i styled-components 주의할 점이 딱 하나 있다. styled-component가 아니라 styled-components 이다. 맨 끝에 s가 반드시 붙어야한다. 실제로 npm 에 styled-component라는 패키지가 이미 존재한다. 따라서 주의가 필요하다. 뭐 악성프로그램은 아니지만, 더 이상 관리가..

NestJS를 이해하려면, Decorator를 알아야하고, Decorator를 알기 위해서는 Closure 개념과 비교하면 좋다. 근데 Closure 개념과 Decorator를 위해서는 First Class Function 이라는 개념에 대해 짚고 가는 것이 먼저이다. 따라서 이번 포스팅에서는 First Class Function, Closure, Decorator를 알아보려고 한다. 참고로 Decorator는 아직 ES의 정식 기능이 아니며, ECMA TC39의 실험적 기능이다. 하지만 Nest 등 최신 프레임워크 중에서는 Decorator를 지원하는 경우가 있고, Babel도 Decorator를 지원하고 있다. 이 이면에는 비밀이 있는데, Decorator는 새로운 문법이 아니라는 점이다! 사실 De..

1. NestJS 시작하기 $ npm i -g @nestjs/cli cli 버전으로 설치하는 이유는 cli 버전을 통해 nest가 지원하는 '프로젝트 초기화' 기능을 활용하기 위함이다. 다시 말해, @nestjs/cli를 설치한다고 해서 nest의 실질적인 패키지가 다운로드 되지는 않는다. 이는 위 코드를 입력한 뒤 성공적으로 설치가 끝나더라도 package.json 파일상에서는 그 무엇도 변하지 않았다는 점을 통해서 확인할 수 있다. 참고로 -g는 global의 약자이다. 그렇다면 이제 진짜 nest를 다운받아보자. 아래의 코드를 입력하면, nest가 지원하는 '프로젝트 초기화' 기능이 작동하여, nest를 통해서 서버를 빌드하는데 있어 필요한 모든 기본적인 툴과 세팅이 제공된다. 가령, @nestjs..

우분투에서 현재 경로를 윈도우 탐색기로 띄워보고 싶을 때가 있다. 그럴 때 쓸 수 있는 코드. $ explorer.exe . explorer.exe 를 실행하라는 명령어 + 현재 디렉토리 전체를 의미하는 마침표 '.' 의 조합이다.

NestJS란, MIT 라이센스 하에서 공개된 Node.js 기반의 프레임워크이다. NestJS는 Javascript계의 django이자, spring 이라고 볼 수 있다. 아래는 공식 홈페이지에 소개된 Nest의 문제 의식 및 철학 In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both front and backend applications. This has given rise to awesome projects like Angular, React and Vue, which improve developer productivity and enable the creation of fast..

1. 준비사항 만약 Tistory에서 제공하는 코드블럭 플러그인을 쓰고 있다면 이를 먼저 해제하자. 안쓰고 있다면 다음 단계로~ highlight.js demo highlightjs.org 위 링크에서 자신이 원하는 테마를 찾자. 마음에 드는 테마를 찾았다면 그 녀석의 이름을 유심히 봐야한다. 2. 코드블럭 테마 입히기 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html편집 에서 HTML의 부분에 아래의 코드를 입력해주자. 이 때, 위 코드상 세번째 줄의 default.min.css 부분에서 'default' 부분에 앞서 유심히 봐둔 마음에 드는 테마의 이름을 입력해줘야한다. 테마의 이름은 소문자로 입력해주면 되고, 만약 띄어쓰기가 있다면 하이픈 (-)으로 표현하자. 예를 들어, Base16/Mat..

[TS] 타입스크립트의 기초(1) - type 키워드 및 Type에 대한 이해 TypeScript(TS)는 기본적으로 Javascript complier다. TS는 Strongly type 언어이고 JS에서 발생할 수 있는 오류를 미리 감지하고 경고해준다. 따라서 TS에서 오류가 없다면 JS에서도 오류가 없을 것이다. 이것은 xpectation.tistory.com TS에서는 Java나 C계열 언어에서의 Class와 거의 동일한 Class문법을 명시적으로 지원한다. 하지만 오해하지 말자. JS도 객체지향적 언어이다. class 키워드를 통한 문법 대신 prototype을 통해 객체지향성을 구현했을 뿐. TS로 Class 를 작성한뒤 컴파일 하면, ES6에서 도입된 JS의 Class 문법으로 코드가 변환되..

TypeScript(TS)는 기본적으로 Javascript complier다. TS는 Strongly type 언어이고 JS에서 발생할 수 있는 오류를 미리 감지하고 경고해준다. 따라서 TS에서 오류가 없다면 JS에서도 오류가 없을 것이다. 이것은 마치 모래를 촘촘한 거름망을 통해 먼저 걸러내는 것과 비슷하다. 촘촘한 거름망으로 걸러내고 나면 더 큰 거름망에서는 아무런 문제 없이 통과할 것. TS는 암묵적 Type과 명시적 Type을 모두 지원한다. Type은 변수를 선언할 때 명시적으로 지정해줘야한다. 그렇지 않으면, 변수 선언 후 처음으로 할당될 때를 기준으로 Type이 추론된다. 따라서 처음 할당된 변수의 Type과 다른 Type을 추후에 섞어서 쓰게 되면 에러가 뜬다. 변수의 Type은 기본적으로..

첫 번째 인자로 어떤 Array를 받아와서 두 번째 인자로 입력된 값을 Array의 가장 마지막에 추가하는 함수를 생각해보자. TS로 이 함수를 작성하려면 다음과 같이 작성 가능하다. type AddItem = (arr:(T|M)[], item : M) => (T|M)[] const addItem : AddItem = (arr, item) => { arr.push(item); return arr } 이 때, arr: (T | M)[ ] 부분이 이해가 안갈 수 있다. 은 item에서 정해져야할 것 같은데 arr에서 을 쓰면 뭔가 엉키지 않을까? 결론부터 말하면 엉키지 않는다. 위 코드를 작성한 뒤 TS의 Call Signature를 뜯어보자. 위 사진에서 볼 수 있듯 첫 번째 인자인 arr까지만 작성한다면..

인터넷상에서 패키지 설치와 관련된 내용을 읽다보면 패키지 설치 코드에서 --save가 들어간 코드를 종종 접하게 된다. 하지만 이는 과거의 흔적이라고 볼 수 있다. 현재의 시점에서 '--save' 플래그는 더 이상 쓰지 않아도 된다. --save 의 뜻과 기능 --save 옵션을 통해 설치된 패키지는 package.json 파일의 dependencies 목록에 기록된다. 따라서 향후 npm install (혹은 npm i)를 입력하게 되면 해당 패키지가 설치된다. 그렇다면, --save를 입력하지 않으면 어떻게 될까? $ npm install 이런 경우 해당 패키지는 임시로 설치되고, package.json의 dependencies에는 추가되지 않기 때문에 언제든 node_modules 폴더를 지운 뒤,..

arr['a'] = 1; 위 코드가 먹힌다는 사실이 제목을 설명해준다. 자바스크립트의 배열은 엄밀히 말해서 배열이 아니다. 바로 객체이다. 아주아주 엄밀히 말하자면, 'JS의 배열은 희소 배열이기 때문에, 일반적으로 의미하는 밀집 배열이 아니다' 라고 말할 수 있겠다. 밀집 배열(협의의 배열)이란, 메모리 공간이 동일한 한 가지 자료형으로만 구성되어 자료가 서로 연속하여 나열된 자료구조이다. 희소 배열(광의의 배열)이란, 하나 이상의 자료형을 허락하는 배열이여서 한 자료가 차지하는 메모리 공간이 불규칙할 수 있고, 그 때문에 서로 연속적으로 나열되어 있지 않을 수도 있는 자료구조이다. 여담이지만, JS 배열은 희소 배열이기 때문에 배열 요소를 인덱스로 접근하려는 경우 밀집 배열인 다른 언어에 비해 상대적..

VSCode 설정 중에는 remote.wsl:connection Method 가 있다. 구체적으로는, WSL1 에 localhost, wslExeProxy 의 2가지 방식 WSL2 에 localhost , wsl2VMAddress, wslExeProxy 의 3가지 방식이 있다. 기존 WSL1에서는 localhost 방식을, WSL2에서는 wsl2VMAddress 방식을 기본값으로 하고 있었다. 즉, WSL2에서는 IP를 통해 로컬환경 외부에서도 WSL2로 접근이 가능했다. 하지만 WSL2가 재시작할때마다 IP값은 매번 달라지는데(유동IP여서 그때 그때 ip를 받아온다고 이해하면 편하다) 이 때문에 시스템이 절전모드에서 깨어나거나 네트워크가 재설정되거나 하는 경우 VSCode의 원격접속이 계속 끊어지는 현..