sehyunchung / til Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 211 KB

today I learned... using this as a cms

Home Page: https://sehyunchung.dev/til

til's Introduction

til's People

Contributors

til's Issues

Xcode 터미널에서 실행하기

$ xed .

How to find out what font is actually rendered

See 'Rendered Fonts' section in devtools.😛

css grid border collapse (sort of)

parent:

grid-gap: 1px;

child:

box-shadow: 0 0 0 1px <color>;

rebase를 하다가 이건 아니다 싶으면

git rebase --abort를 하면 된다.

merging interfaces

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

IB?

Interface Builder

U+001D

https://www.htmlsymbols.xyz/unicode/U+001D

`nvm is not compatible with the npm config "prefix" option: currently set to "/usr/local" Run `npm config delete prefix` or `nvm use --delete-prefix * --silent` to unset it.`

?

system에 설치된 node랑 충돌하는 것

!

brew uninstall --ignore-dependencies node

오늘부터 여기에 작성

til을 이슈로 작성해보자.

Delegation Pattern

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()
}

Links

sourceViewController -> source

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)
        }
    }

blob?

Is an abbr of Binary Large OBject.

wikipedia

chmod

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.

Unexpected use of 'isNaN'. (eslintno-restricted-globals), Argument of type 'string' is not assignable to parameter of type 'number'. ts(2345)

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!

히스토리가 다른 git repo를 합치려면

merge하면서 --allow-unrelated-histories를 사용한다.

Create a chrome shorcut to a bookmarklet

https://seankilleen.com/2013/01/chrome-tip-add-a-keyboard-shortcut-to-a-bookmarklet/#:~:text=Type%20CTRL%20%2B%20L%20(this%20activates,my%20case)%2C%20then%20enter.

vscode에서 preview mode로 파일 열리지 않게하기

vscode에서 file explorer나 search를 통해 찾은 파일을 클릭하면 탭에서 italic으로 파일명이 표시되면서 preview mode로 열리고, 같은 방식으로 다른 파일을 열면 preview mode였던 파일은 사라진다. 때때로 그래서 귀찮은 일이 생기는데, 이것을 막으려면 settings.json에 아래를 추가하면 된다.

{
  "workbench.editor.enablePreview": false,
}

...근데 이렇게 해놓고 무작정 다 열다 보면 램이 터질 수 있다...

:active on mobile safari

webkit-tap-highlight-color 쓰기 -> 근데 :active 랑 동작이 다름
body에 <body ontouchstart=""> 넣기
필요한 컴포넌트에 onTouchStart={() => false} 넣기

symlinks

path 의 alias 라고 생각하면 쉽다.

ln -s /PATH/TO/ORIGINAL /PATH/TO/LINK

Vertical rulers in vscode

rulers?

settings.json에 아래 코드를 추가하면,

"editor.rulers": [
  80,
  100,
  120
],

위와 같이 80, 100, 120자 위치에 세로줄이 생긴다.
안 보이던 게 보이는 건 역시 좋은 일이다.

customization

세로줄의 컬러를 아래와 같이 커스텀 할 수도 있다.

"workbench.colorCustomizations": {
    "editorRuler.foreground": "#ff4081"
}

References

Declaring Global Variables in TypeScript

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이 되기 때문.

Ref.

https://mariusschulz.com/blog/declaring-global-variables-in-typescript

asdf nodejs

asdf를 설치한다.
```
brew install asdf
```
gpg를 설치한다.
```
brew install gpg
```

asdf nodejs plugin을 설치한다.

asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git

nodejs release team의 gpg key를 추가한다.

bash -c '${ASDF_DATA_DIR:=$HOME/.asdf}/plugins/nodejs/bin/import-release-team-keyring'

nvm등 사용중이던 vm이 있다면 호환성을 위해 ~/.asdfrc에 아래를 추가한다.
```
legacy_version_file = yes
```
됫다.

how to uninstall node

https://reactgo.com/uninstall-node-npm-from-macos/

How to show code info in Xcode (like vscode)

option + click

What's the difference between JSX.Element vs React.ReactNode

JSX.Element -> Return value of React.createElement
React.ReactNode -> Return value of a component

via React Typescript Cheatsheet

checkout to prev branch

git checkout @{-1}

더 짧게는

git checkout -

vscode가 포맷팅 하면서 자꾸 jsx에 빈칸을 넣으면

원인

.jsx 파일의 File Association이 Babel JavaScript로 되어있어서 생기는 문제.

해결 1

화면 하단의 language mode 영역을 클릭 -> JavaScript React로 바꾸면 해결

해결 2

물론 settings.json에서 바꿀수도 있다.

"files.associations": {
  "*.jsx": "javascriptreact"
}

Warning: Cannot update a component () while rendering a different component ().

setState에서 다른 컴포넌트의 setState를 호출할 경우 뜨는 경고 메시지로, 16.13.0에서 추가되었다. prop으로 넘어온 함수가 setState를 하는 경우에 발생한다.

해당 케이스가 발생하면, 호출하는 컴포넌트에서 useEffect로 감싸라고 공식 사이트에서 안내해주고 있다.

"String interpolation produces a debug description for an optional value; did you mean to make this explicit?"

default:
-   fatalError("Unexpected Segue identifier; \(segue.identifier)")
+   fatalError("Unexpected Segue identifier; \(String(describing: segue.identifier))")

Uncaught TypeError: Cannot read property '__k' of null

preact app을 렌더할 DOM el이 현재 존재하지 않기 때문에 발생하는 에러

delete all branches except current

git branch -D $(git branch)

fix eslint no-undef errors by jest globs

?

!

// .eslintrc.js
...
env: {
  jest: true
}
...

Array._proto__.length

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 되어버림.

vscode에서 swift language server 돌리기

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
공식엔 여기까지 하면 된다고 나와있긴 한데, vscode에서 Starting client failed Launching server using command sourcekit-lsp failed. 라며 에러가 발생했다.
$ xcrun -f sourcekit-lsp 로 sourcekit-lsp가 설치된 경로를 알아내서 복사한다.
vscode settings.json에 아래를 추가한다.

  "sourcekit-lsp.serverPath": "<경로>"

vscode를 reload 한다.
굳
https://marketplace.visualstudio.com/items?itemName=vknabel.vscode-swiftlint 도 설치하면 좋다 카더라.

React.memo vs useMemo

`React.memo`

Higher order component.
prop change만을 체크함. 감싼 컴포넌트 안에 useState, useContext등이 있다면, 역시 해당 state 변경에 따라 rerender됨.

`useMemo`

Hook.
deps array에 포함된 deps가 변경되지 않으면 memoized value를 반환하는 함수.

fix firefox color render

?

firefox의 컬러가 뭔가 좀 더 채도가 높게 렌더링 되는 경향이 있다.

chrome

safari

firefox

요걸 없애려면?

!

일단 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:
- 찾는 중

Refs

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.5/ICC_color_correction_in_Firefox

DFS

https://en.wikipedia.org/wiki/Depth-first_search

"Type aliases can only be used in TypeScript files.ts(8008)" in .js files

vscode가 flow type 정의에 .ts가 아닌데 타입 머시기가 있다고 깝치는 에러. settings.json에 아래를 추가한다.

  "javascript.validate.enable": false

Header vs Heading

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."

via https://diffsense.com/diff/header/heading

Xcode 프로젝트의 Team을 바꾸려면

애플 디벨로퍼 프로그램에 기존 xcode에 등록되어있던 것과 다른 apple id를 사용하게 되어, 등록되어있던 Team을 바꿀 일이 생겨서 알아보았다. 아래와 같이 간단하게 해결할 수 있었음.

Config Github CLI

default editor가 nano로 되어있어 불편하다. vim으로 바꾸려면?
```
gh config set editor vim
```
pr 시 default base가 master로 되어있어 불편하다. develop으로 바꾸려면?
```
gh pr create --base develop
```

Reference

https://cli.github.com/manual/

how to stash single file

git stash -- <filename>

git stash push -m "<message>" <filename.ext>

google fonts에서 특정 캐릭터만 불러오기

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 으로 요청하면 된다.

Get list of globally installed packages

npm:

npm list -g --depth 0

yarn:

yarn global list --depth 0

PR에 PR 날리기

gh pr create -R <USER_NAME>/<REPO_NAME> --base <ORIG_PR_BRANCH_NAME>

"Could not insert new outlet connection" error

문제

FoodTracker를 신나게 만드는 중이었는데, save 버튼을 MealViewController에 연결시키려던 순간!

위와 같은 메시지를 보여주면서 안되는 경우가 생겼다.

해결

cmd+shift+K를 눌러 product를 clean 한다.
cmd+R로 build + run을 한다.
한 번 해본다.
안되면 xcode를 재시작한다.

UIImagePickerControllerOriginalImage

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`

flex-grow, flex-shrink, + flex-basis의 shorthand이다.

syntax

One-value syntax:
the value must be one of:
- a <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.
- one of the keywords: none, auto, or initial.
Two-value syntax:
the first value must be a <number> and it is interpreted as <flex-grow>. The second value must be one of:
- a <number>: then it is interpreted as <flex-shrink>.
- a valid value for width: then it is interpreted as <flex-basis>.
Three-value syntax:
the values must be in the following order:
- a <number> for <flex-grow>.
- a <number> for <flex-shrink>.
- a valid value for width for <flex-basis>.

chrome 에서 command palette 사용하기

shift + cmd + /

이것은 사실 Help/Search 단축키이지만 vscode의 shift + cmd + p 와 같은 용도로 사용할 수 있다.

type argument default value

예를 들어, 첫번째 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) => /* ... */

sehyunchung / til Goto Github PK

til's Introduction

til's People

Contributors

til's Issues

?

!

Links

rulers?

customization

References

Ref.

how to uninstall node

원인

해결 1

해결 2

?

!

React.memo

useMemo

?

!

Refs

Reference

subset

text

문제

해결

flex

syntax

Step 1

Step 2

Step 3

Done!

Recommend Projects

Recommend Topics

Recommend Org

Jobs

`React.memo`

`useMemo`

`subset`

`text`

`flex`