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
| <!-- | |
| When an input element gets focused, iOS Safari tries to put it in the center by scrolling (and zooming.) | |
| Zooming can be easily disabled using a meta tag, but the scrolling hasn't been quite easy. | |
| The main quirk (I think) is that iOS Safari changes viewport when scrolling; i.e., toolbars shrink. | |
| Since the viewport _should_ change, it thinks the input _will_ move, so it _should_ scroll, always. | |
| Even times when it doesn't need to scroll—the input is fixed, all we need is the keyboard— | |
| the window always scrolls _up and down_ resulting in some janky animation. | |
| However, iOS Safari doesn't scroll when the input **has opacity of 0 or is completely clipped.** |
To setup some key bindings in Xcode with the same like VSCode
Add this to /Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Versions/A/Resources/IDETextKeyBindingSet.plist
Thanks to: https://gist.github.com/emotality/b1bcb2bb8a07921f9c8cad1c969daedf
<key>Duplication</key>
| <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)