Before we look at some common commands, I just want to note a few keyboard commands that are very helpful:
Up Arrow: Will show your last commandDown Arrow: Will show your next commandTab: Will auto-complete your commandCtrl + L: Will clear the screen
graphql 백엔드와 통신하면서 프론트 작업을 할 때에는 graphql-codegen 사용해서 graphql schema를 기준으로 types을 generate해서 사용했었습니다. 그래서 따로 parameters, body, 그리고 response에 대해서 type을 따로 신경쓸 필요 없었고 type-safe하게 작업할 수 있었습니다. 그런데 이번에 시작한 프로젝트에서는 graphql가 아닌 rest api로 구성되어있는 백엔드와 통신해야하는 상황이 생겼고, 직접 type들을 타이핑을 해야한다고 생각하니 그렇게 하기가 싫었습니다. (물론, Paste JSON as Code을 사용하면 조금 더 편하게 할 수 있긴 하지만 모든 문제를 해결해주는 것은 아니기 때문에)
예전에 최태건님이 FEConf에서 발표했던 OpenAPI Specification으로 타입-세이프하게 API 개발하기: 희망편 VS 절망편 영상을 보면서 백엔드에서 OpenApi 스펙을 제공해준다면 이 정보를 이용해서 typing을 만들어 낼 수 있다는 사실을 배웠던 것이 생각이 났고 새로운 프로젝트를 시작하는 김에 OpenApi를 사용해서 type을 generate하고 type-safe하게 react-query hook을 사용하고 싶었습니다. 그래서 개인적으로 어떻게 OpenApi 스펙과 몇 가지 라이브러리들을 활용해서 어떻게 react-query hook을 사용하고 있는지 정리해보려고합니다. 바로 그냥 코드만 보고 싶으신 분들은 [아래 링크](https://gist.github.com/seonghyeonkimm/977b58387f9f4e11afeee8c7685c2e89#file-1-use-oai-query-examp
| <body onload=z=c.getContext`2d`,setInterval(`c.width=W=150,Y<W&&P<Y&Y<P+E|9<p?z.fillText(S++${Y=`,9,9|z.fillRect(p`}*0,Y-=--M${Y+Y},P+E,9,W),P))):p=M=Y=S=6,p=p-6||(P=S%E,W)`,E=49) onclick=M=9><canvas id=c> |
| /* | |
| Copy this into the console of any web page that is interactive and doesn't | |
| do hard reloads. You will hear your DOM changes as different pitches of | |
| audio. | |
| I have found this interesting for debugging, but also fun to hear web pages | |
| render like UIs do in movies. | |
| */ | |
| const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
| //Self-Signed Certificate for using with VS Code Live Server | |
| //Save both files in a location you will remember | |
| 1. create a private key | |
| openssl genrsa -aes256 -out localhost.key 2048 | |
| // you will be prompted to provide a password | |
| //this will create localhost.key (call it whatever you like) | |
| 2. create the certificate |
AWS 학습 링크집 시리즈
(by @andrestaltz)
(orginal source: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| // limits value to the range min..max | |
| function clamp(val, min, max) { | |
| return Math.max(min, Math.min(max, val)) | |
| } | |
| // Find the closest point to the circle within the rectangle | |
| // Assumes axis alignment! ie rect must not be rotated | |
| var closestX = clamp(circle.X, rectangle.x, rectangle.x + rectangle.width); | |
| var closestY = clamp(circle.Y, rectangle.y, rectangle.y + rectangle.height); |