Dev's

QueryFunctionContext를 이용하게 된 계기NextJS, React-Query를 이용하여 프로젝트를 진행하며, getServerSideProps 에서 Prefetch 기능을 사용하여, 서버사이드렌더링(SSR)을 진행하고자 하였다.현재 프로젝트에서 사용하고 있는 API 구조는 아래와 같았으며,{ resultCode: 200, data: { ... }}API 에서 전달해주는 데이터를 클라이언트에서 바로 사용하는 구조가 아니라 클라이언트에서 데이터를 한번 가공하는 형태로 사용하고 있는 형태로 사용하고 있다. (BFF 구조가 되었다면 더 편했을까?)// Network.tsasync function fetchPage(): Promise { const response ..

컴파일링(Compiler)과 트랜스파일링(Transpiler)[(Babel)https://babeljs.io/] 공식 홈페이지에 들어가면 Babel is a JavaScript Compiler 라는 설명을 볼 수 있다.또한 위키피디아에서는 Babel에 대해서는 아래와 같이 설명하고 있다. Babel is a free and open-source JavaScript transcompiler ...transcompiler(Transpilier) 라는 설명으로 Babel을 설명한것으로 확인할 수 있는데, 그렇다면 Compiler와 Transpiler가 어떠한 차이가 있을까?컴파일러(Compiler)일반적으로 컴파일러(Compiler)은 한 언어로 작성된 소스 코드를 실행 가능한(excutable) 하위 수준..

한컴오피스 또는 한컴오피스 한글을 설치하게 되면 한컴 입력기가 같이 설치된다. 이러한 환경에서 Visual Sutdio Code(이하 VSCode) 에서 한국어 입력기가 한컴 입력기로 선택되어 있는 경우 키보드 입력이 작동하지 않는 경우가 발생한다. 또한 VSCode 단축키 crtl + v(Comment) 도 정상적으로 작동하지 않는다. 그러기에 해당 내용을 수정하기 위하여 한국어 입력 방식을 Microsoft 입력기로 변경하거나 한컴 입력기를 삭제하는 방법이 있다. 방안 ctrl + shift 키를 누른거나 작업표시줄에서 한국어 입력 방식을 Microsoft 입력기로 변경한다.

REST Client Visual Studio Code(이하 VSCode)의 REST Client는 Visual Studio Code의 확장 프로그램 중 하나입니다. 이를 통해 HTTP 요청을 보내고 응답을 받을 수 있다. 이를 통해 RESTful API를 테스트하고 디버깅하는 등의 작업을 수행할 수 있다. REST Client를 사용하면 텍스트 파일 안에서 HTTP 요청을 작성하고 실행할 수 있으며, 보통 .http 또는 .rest 확장자를 가진 파일 안에 요청을 작성하고, 이를 실행하여 요청을 보내고 응답을 확인할 수 있다. 설치 마켓플레이스에서 rest client를 검색하여 설치한다. 사용법 .rest, .http 확장자 파일을 생성후 아래와 같이 작성한다. GET https://api.githu..

포트로 PID 찾기 lsof -i :port Kill Port kill -9 PID ex) kill -9 1111

ip 주소를 가지고 올때 ipv6 형식으로 전달되었다. const express = require("express"); const app = express(); const port = 3000; app.get("/", (req, res) => { console.debug("req: ", req.ip); // ::1 }); app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); 아래와 같이 listen시 hostname에 0.0.0.0 값을 넣어줄 경우 ipv4 형식으로 전달받을수 있다. const express = require("express"); const app = express(); const port =..

|| 연산자 첫 번째 표현식이 falsy 한 값일 경우 두 번째 표현식을 반환 undefined || 'default'; // default null || 'default'; // default 0 || 'default'; // default ?? 연산자 첫 번째 표현식이 null 또는 undefined 인 경우 두 번째 표현식을 반환 undefined ?? 'default'; // default null ?? 'default'; // default 0 ?? 'default'; // 0 falsy 값 false 0 -0 0n "" null undefined NaN

input과 같이 폼에 값을 입력하게 될 경우 모바일 단말에서 각 상황에 맞는 가상 키보드가 표시된다. type 속성 값에 따라 모바일 단말에서는 활성화되는 가상 키보드가 변경되지만, inputmode 속성 값을 추가하여 type 속성 값과 별개로 가상 키보드의 형식을 지정할 수 있다. 속성 값 none 가상 키보드를 제공하지 않는다. 키보드를 직접 구현하는 경우 사용할 수 있다. text 기본값으로 제공되며, type 속성 값에 따라 제공되는 가상 키보드가 표시된다. decimal 소숫점(, .)을 제공하는 숫자형 가상 키보드가 표시된다. 또한 단말기에 따라 음의 부호(-)를 표시하는 가상 키보드가 제공될 수도, 아닐 수도 있다. numeric 숫자형 가상 키보드가 표시되며, demical과 마찬가지로..

Input 태그 사용시 커서 색상을 변경해야 할 때 caret-color css 속성을 이용하면 된다. See the Pen QWGKQQr by HanDongHee (@handonghee) on CodePen. 참고 자료 https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

전달받은 시간만큼 Sleep 시킨 후 다음코드를 실행한다. function sleep(delay) { return new Promise((resolve) => setTimeout(resolve, delay)); } console.debug('a'); await sleep(1000); console.debug('b'); // 1초후 실행