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기술을 통..

주변에서 컴퓨터 견적이나 노트북 추천을 부탁해오면 항상 하는 말이 있다.램은 최소 32GB로 맞춰라..게이밍 머신으로 데스크탑을 맞추는 용도가 아니면, 램 16GB는 정말 정말 뜯어 말리고 싶다. 게다가 게이밍으로 맞추는 경우에도 굳이 16GB로 타협하는 이유는 금전적인 부담이 크기 때문이지 16GB가 넉넉해서 그런 것은 아니다. 게임을 할 때는 다른 프로그램을 멀티태스킹 하는 일이 '적다'. (없다고는 안했다) 따라서 멀티태스킹 성능은 상대적으로 덜 중요하다. 그러다보니 견적 최적화의 결과, 램 용량을 낮추더라도 램 효율을 극대화하는 세팅이 일반적이게 자리 잡게 된 것뿐이다. 게임 프레임성능을 뽑아내면서 동시에 멀티태스킹 성능까지 확보하려면 금전적 부담이 확 뛰기 때문. 조금 더 부연 하자면, 게이밍 ..

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와 관련..