sehyunchung / til Goto Github PK
View Code? Open in Web Editor NEWtoday I learned... using this as a cms
Home Page: https://sehyunchung.dev/til
today I learned... using this as a cms
Home Page: https://sehyunchung.dev/til
$ xed .
parent:
grid-gap: 1px;
child:
box-shadow: 0 0 0 1px <color>;
git rebase --abort
를 하면 된다.
interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
let box: Box = {height: 5, width: 6, scale: 10};
https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
Interface Builder
system에 설치된 node랑 충돌하는 것
brew uninstall --ignore-dependencies node
til을 이슈로 작성해보자.
https://en.wikipedia.org/wiki/Delegation_pattern
class Rectangle(val width: Int, val height: Int) {
fun area() = width * height
}
class Window(val bounds: Rectangle) {
// Delegation
fun area() = bounds.area()
}
Implement Navigation을 진행하다가 아래 워닝을 만났다.
//MARK: Actions
@IBAction func unwindToMealList(sender: UIStoryboardSegue) {
- if let sourceViewContoller = sender.sourceViewController as? MealViewController, let meal = sourceViewContoller.meal {
+ if let sourceViewContoller = sender.source as? MealViewController, let meal = sourceViewContoller.meal {
// Add new meal.
let newIndexPath = IndexPath(row: meals.count, section: 0)
meals.append(meal)
tableView.insertRows(at: [newIndexPath], with: .automatic)
}
}
Is an abbr of Binary Large OBject.
chmod +rwx <filename>
to add permissions.chmod -rwx <directoryname>
to remove permissions.chmod +x <filename>
to allow executable permissions.chmod -wx <filename>
to take out write and executable permissions.let val = '123'
isNaN(val) // nah! Argument of type 'string' is not assignable to parameter of type 'number'. ts(2345)
isNaN(123) // nah! Unexpected use of 'isNaN'. (eslintno-restricted-globals)
then use
Number.isNaN(val) // yay!
merge
하면서 --allow-unrelated-histories
를 사용한다.
vscode에서 file explorer나 search를 통해 찾은 파일을 클릭하면 탭에서 italic으로 파일명이 표시되면서 preview mode로 열리고, 같은 방식으로 다른 파일을 열면 preview mode였던 파일은 사라진다. 때때로 그래서 귀찮은 일이 생기는데, 이것을 막으려면 settings.json
에 아래를 추가하면 된다.
{
"workbench.editor.enablePreview": false,
}
...근데 이렇게 해놓고 무작정 다 열다 보면 램이 터질 수 있다...
webkit-tap-highlight-color
쓰기 -> 근데 :active
랑 동작이 다름
body에 <body ontouchstart="">
넣기
필요한 컴포넌트에 onTouchStart={() => false}
넣기
path 의 alias 라고 생각하면 쉽다.
ln -s /PATH/TO/ORIGINAL /PATH/TO/LINK
settings.json
에 아래 코드를 추가하면,
"editor.rulers": [
80,
100,
120
],
위와 같이 80, 100, 120자 위치에 세로줄이 생긴다.
안 보이던 게 보이는 건 역시 좋은 일이다.
세로줄의 컬러를 아래와 같이 커스텀 할 수도 있다.
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff4081"
}
daum 주소검색등 window
에 뭔가 끼워넣는 외부 기능 사용시, window.someApi
등으로 호출하게 될 때가 있는데, TS에서 당연히 Property 'someApi' does not exist on type 'Window & typeof globalThis'.
라고 뭐라고 한다. 요걸 해결하기 위해 보통은:
(window as any).someApi
혹은
(<any>window).someApi
를 쓰라고 하는데 아래가 더 나은 것 같다.
declare global {
interface Window {
someApi: any; // 혹시 타입 정의를 제공해준다면 somApiType
}
}
요게 되는 것은 interface는 merging이 되기 때문.
https://mariusschulz.com/blog/declaring-global-variables-in-typescript
brew install asdf
brew install gpg
asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git
bash -c '${ASDF_DATA_DIR:=$HOME/.asdf}/plugins/nodejs/bin/import-release-team-keyring'
nvm
등 사용중이던 vm이 있다면 호환성을 위해 ~/.asdfrc
에 아래를 추가한다.
legacy_version_file = yes
option + click
JSX.Element
-> Return value of React.createElement
React.ReactNode
-> Return value of a componentgit checkout @{-1}
더 짧게는
git checkout -
setState
에서 다른 컴포넌트의 setState
를 호출할 경우 뜨는 경고 메시지로, 16.13.0
에서 추가되었다. prop으로 넘어온 함수가 setState
를 하는 경우에 발생한다.
해당 케이스가 발생하면, 호출하는 컴포넌트에서 useEffect
로 감싸라고 공식 사이트에서 안내해주고 있다.
preact app을 렌더할 DOM el이 현재 존재하지 않기 때문에 발생하는 에러
git branch -D $(git branch)
js array는 object이고 length
프로퍼티를 갖고 있다. 그래서 아래가 가능.
const {length, [0]: first, [length - 1]: last} = [1, 2, 3];
console.log(first, last); // 1 3
주의: length
를 선언해두지 않으면 length - 1
을 알 수 없고 last
가 undefined
되어버림.
xcode에선 vim key 바인딩, hover action 등등이 간단하게 안되는 것 같아 vscode에 개발 환경 꾸미는 게 가능할까 알아보았다.
sourcekit-lsp
를 클론 받는다.$ cd sourcekit-lst/Editors/vscode
$ npm run createDevPackage
$ code --install-extension out/sourcekit-lsp-vscode-dev.vsix
Starting client failed Launching server using command sourcekit-lsp failed.
라며 에러가 발생했다.$ xcrun -f sourcekit-lsp
로 sourcekit-lsp
가 설치된 경로를 알아내서 복사한다.settings.json
에 아래를 추가한다. "sourcekit-lsp.serverPath": "<경로>"
React.memo
useState
, useContext
등이 있다면, 역시 해당 state 변경에 따라 rerender됨.useMemo
firefox의 컬러가 뭔가 좀 더 채도가 높게 렌더링 되는 경향이 있다.
요걸 없애려면?
about:config
를 입력해 신비의 세계로 들어가서,color_management
를 쳐보면 아래와 같은 설정값들을 볼 수 있다. 이중에서,gfx.color_management.mode
를 1
로 바꾼다.gfx.color_management.enablev4
를 true
로 바꾼다.이것들이 뭐냐?
gfx.color_management.mode
:
0
: Color management disabled.1
: Full color management.2
: Color management applied only to tagged images.gfx.color_management.enablev4
:
vscode가 flow type 정의에 .ts
가 아닌데 타입 머시기가 있다고 깝치는 에러. settings.json
에 아래를 추가한다.
"javascript.validate.enable": false
Header: "The upper portion of a page (or other) layout."
Heading: "The title or topic of a document, article, chapter, or of a section thereof."
default editor가 nano로 되어있어 불편하다. vim으로 바꾸려면?
gh config set editor vim
pr 시 default base가 master
로 되어있어 불편하다. develop
으로 바꾸려면?
gh pr create --base develop
git stash -- <filename>
git stash push -m "<message>" <filename.ext>
google fonts를 url로 불러오는 방식으로 사용시 unicode-range
를 사용할 수 없다.
query string 옵션으로 subset
혹은 text
를 줄 수 있다.
subset
subset
은 언어 기준으로, 영문에만 특정 폰트를 적용하고 싶을 경우 사용한다. Roboto를 영문과 숫자에만 쓰고 싶다면?
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
이라고 하면 된다.
text
text
가 좀 더 재밌는데, 개별 캐릭터를 옵션으로 추가할 수 있다. 예를 들어 Roboto를 0과 1에만 쓰고 싶다면?
https://fonts.googleapis.com/css2?family=Roboto&text=01
으로 요청하면 된다.
npm:
npm list -g --depth 0
yarn:
yarn global list --depth 0
gh pr create -R <USER_NAME>/<REPO_NAME> --base <ORIG_PR_BRANCH_NAME>
FoodTracker를 신나게 만드는 중이었는데, save
버튼을 MealViewController
에 연결시키려던 순간!
cmd+shift+K
를 눌러 product를 clean 한다.cmd+R
로 build + run을 한다.FoodTracker 예제 중 Work with View Controllers 튜토리얼에 버그... 는 아니고 옛날 자료라서 지금 안돌아가는 게 있었다.
요 링크를 찾아 아래와 같이 해결
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
// The info dictionary may contain multiple representations of the image. You want to use the original.
- guard let selectedImage = info[UIImagePickerControllerOriginalImage] as? UIImage else {
+ guard let selectedImage = info[.originalImage] as? UIImage else {
fatalError("Expected a dictionary containing as image, but was provided the following: \(info)")
}
// Set photoImageView to display the selected image.
photoImageView.image = selectedImage
// Dismiss the picker.
dismiss(animated: true, completion: nil)
}
flex
flex-grow
, flex-shrink
, + flex-basis
의 shorthand이다.
<number>
: In this case it is interpreted as flex: <number> 1 0;
the <flex-shrink>
value is assumed to be 1
and the <flex-basis>
value is assumed to be 0
.none
, auto
, or initial
.<number>
and it is interpreted as <flex-grow>
. The second value must be one of:
<number>
: then it is interpreted as <flex-shrink>
.<flex-basis>
.<number>
for <flex-grow>
.<number>
for <flex-shrink>
.<flex-basis>
.shift + cmd + /
이것은 사실 Help/Search 단축키이지만 vscode의 shift + cmd + p 와 같은 용도로 사용할 수 있다.
예를 들어, 첫번째 arg는 보통 string이고 두번째 arg는 보통 number인데 아닐 수도 있고 두번째 arg가 있을 수도 없을 수도 있는 함수의 타입을 정의한다면 아래와 같이 선언할 수 있을 것이다.
type ExampleFn<T, U> = (arg0: T, arg1?: U) => SomeReturnType;
근데 쓸 때 마다 아래와 같이 하기는 매우 귀찮은 일이다.
const implmentedFn1: ExampleFn<string, number> = (val: string) => /* ... */
그래서 ts는 type argument에도 default value를 정해놓을 수 있는데, 함수 default value랑 동일한 형태로, 아래와 같이 하면 된다.
type ExampleFn<T = string, U = number> = (arg0: T, arg1?: U) => SomeReturnType;
이제부턴 굳이 명시할 필요가 생기지 않으면 그냥 편하게 쓸 수 있다.
const implmentedFn2: ExampleFn = (val: string) => /* ... */
그러고보니 아예 arg에 타입 어노테이션을 안해도 된다.
const implmentedFn3: ExampleFn = (val) => /* ... */
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.