Today I Learned (feat.Notion 템플릿)

GODORI·2019년 2월 24일
21
post-thumbnail

TIL 작성을 위한 Notion 템플릿을 사용해서 한달 정도 정리한 내용을 모아봤습니다.

📚 TIL Notion 템플릿

매일 쓰는 킬러 앱이다 보니 TIL도 Notion으로 작성하면 어떨까 했는데 깃헙에 푸시하는 것 보다 자주 쓰게 되고 내용에 더 충실할 수 있어서 좋습니다. TIL보다는 WIL에 가깝긴 하지만 🙄어쨌든 쓰게 되었으니 긍정적!

한 달 정도 사용하다 스터디에만 가볍게 공유했는데 많이들 좋아해주시고 따로 공유해도 되겠냐는 요청을 받아서, 이전에 쓰던 템플릿도 천천히 정리할 겸 템플릿 공유 페이지를 만들어야겠다는 생각이 들었습니다. 다음 링크에 간단한 사용법과 템플릿 커스텀 하는 방법을 추가하여 가이드를 작성해 보았습니다.

Notion TIL 템플릿 공유 페이지

조만간 Notion API가 공개되면 원격 저장소에 일괄 업데이트 할 수 있도록 나름의 규칙을 가지고 작성하고 있습니다. 커스텀이 어렵지 않으니 더 많은 템플릿이 활성화 되기를 기대하면서..!

에블바디 日日新 又日新

2019.01 ~ 2019.02

brew로 이전 버전의 java 설치하기


Category : brew package-manager java

vscode로 java 코드를 간단히 테스트할 일이 있었는데, 회사 코드에 적용하기 위해서는 8버전이 필요했다. 그러나 8은 오래된 버전이라 brew cask install java 혹은 brew cask install java8 과 같은 명령어로 설치할 수가 없다.

이전 버전을 설치하려면 먼저 caskroom의 homebrew-versions을 다운받는다.
brew tap caskroom/versions

완료되면 원하는 버전을 설치한다
brew cask install java8

java_home path를 구하는 명령어
/usr/libexec/java_home

다른 방법

Mac에 Java 여러 버전 설치 & 사용하기 : pyenv처럼 jenv으로 여러 버전을 동시에 쓴다.
Docker를 사용하는 방법도 있다.

forEach() 는 break가 없지


Category : JavaScript

forEach는 컬렉션의 모든 요소를 순회하는 함수이다. 하지만 JavaScript에서는 특정 조건 만족시 멈추고 싶어도 일반적인 for문과 다르게 break로 빠져나갈 수 없다.

언어마다 break 제공 여부가 다르다.
JavaScript에서는 forEach이지만, jQuery에서는 each, Java에서는 for 등이 해당한다.

참고로 IE8에서는 사용할 수 없다. 오늘도 IE없는 세상을 꿈꾼다. (ㅂㄷㅂㄷ)

Ref

forEach에 break문 대신 some 사용하기

Array.from() 으로 배열 만들기


Category : JavaScript ES6

배열은 아니지만 순회 가능한 객체를 배열로 만들어 준다....지만
ES6 부터 사용 가능하다. 당연히 IE 지원이 안되므로 모두 다시 작성했다.(ㅂㄷㅂㄷ)

    console.log(Array.from('foo'));
    // ["f", "o", "o"]
    
    console.log(Array.from([1, 2, 3], x => x + x));
    // [2, 4, 6]

활용법

DOM 에서 element를 뽑아올 때 배열로 만들 수 있다.

Jackson으로 JSON 데이터의 중첩된 제네릭 타입 변수 맵핑하기


Category : java json jackson

리스트 속의 리스트 구조로 되어있는 json 데이터를 받아서 모델에 맵핑할 필요가 생겼다. 단순하게 특정 Collection을 모델의 클래스 멤버로 선언 해서는 매핑이 되지 않고 null 값이 들어가게 된다.

json 데이터에서는 흔한 구조라 공통 코드가 이미 있을 줄 알았는데, 가장 상위의 제네릭 타입 레퍼런스만 맵핑하고 있어서 깊은 파싱을 할 수 없었다. 하지만 @JsonProperty Annotation을 사용하면 중첩된 구조도 맵핑이 가능하다.

가령 객체 리스트 내부에 객체 리스트가 포함된 중첩된 구조의 json 데이터를 가져온다고 하면, 사용자 정의 클래스인 ItemListApi 객체 리스트에 "list"라는 @JsonProperty 를 적용하면 된다.

대략적인 코드는 다음과 같다.

json data

{
  "list" : [
    {
      "user_id": "100",
      "name": "godori"
      "list": [
      {
      "item_id": "1001",
      "item_color": "AEAEAE"
    },
    {
      "item_id": "1002",
      "item_color": "BEB4B3"
    },
  ]
},
{
  "user_id": "200",
  "name": "irodog"
  "list": [
      {
        "item_id": "2001",
        "item_color": "ACACAC"
      },
      {
        "item_id": "2002",
        "item_color": "CCCCCC"
      }
    ]
  }
}

java data model

    // User Model
    public class UserListApi implements Serialize {
    	private int user_id;
        private String name;
    
    	@JsonProperty("list")
        private List<ItemListApi> list;
    
    	// getter/setter/etc...
    }
    
    // Item Model
    public class ItemListApi implements Serialize {
    	private int item_id;
        private String item_color;
    
    	// getter/setter/etc...
    }

Ref

parse-json-to-deeply-nested-generic-with-jackson
Java JSON library Jackson 사용법

hasOwnProperty 메소드를 쓰는 이유


Category : JavaScript

hasOwnProperty()

객체가 특정 프로퍼티를 직접적으로 소유하고 있는지를 확인하는 메소드이다.
따라서 해당 객체의 프로토타입 체인은 확인하지 않는다.

예시

객체 o가 직접 소유한 프로퍼티인 'prop'만 true를 반환하고, 프로토타입 체인의 프로퍼티는 false를 반환한다.

    o = new Object();
    o.prop = 'exists';
    o.hasOwnProperty('prop');             // true
    o.hasOwnProperty('toString');         // false
    o.hasOwnProperty('hasOwnProperty');   // false

활용

for...in 문을 통해 객체의 프로퍼티를 순환한다면, in 연산자를 사용하게 되므로 프로토타입 체인의 프로퍼티도 확인하게 된다. 따라서, 자기 자신에게는 없는 상위 프로토타입의 값이 포함될 수 있는 가능성이 있다.

가령, fruit라는 객체의 모든 키 값들을 출력한다고 하자. 다음 두 코드는 결과적으로 같은 동작을 수행한다.

    const fruit = {'apple':3, 'strawberry': 4, 'banana':2 }
    
    // CODE1 :
    for(let key in fruit){
    	console.log(key + ' is a fruit') 
    }
    
    // CODE2 :
    for(let key in fruit){
    	if(fruit.hasOwnProperty(key)){
            console.log(key + ' is a fruit') 
    	}
    }
    
    // RESULT :
    // apple is a fruit
    // strawberry is a fruit
    // banana is a fruit

그런데 만약 다음과 같이 Object의 프로토타입에 carrot 이라는 프로퍼티가 추가되었다면,

    Object.prototype.carrot = '🥕'

CODE1 을 실행시켰을 때 fruit가 아닌 Object의 프로퍼티까지 포함되어 'carrot is a fruit' 라는 의도치 않은 문장까지 출력하게 된다. 하지만 hasOwnProperty를 사용한 CODE2 에서는 프로타입의 체인을 고려하지 않으므로 새로 추가된 프로퍼티는 걸러지게 된다.

정리하면 hasOwnProperty 를 사용할 때 다음과 같은 장점을 얻는다.

  • 프로토타입 체인을 고려하지 않는다는 의미를 내포하므로, 가독성이 높아진다.
  • 의도하지 않은 결과를 미연에 방지할 수 있다.

Ref

Javascript: hasOwnProperty 쓰는 이유 :: 마이구미
MDN: hasOwnProperty
MDN: in 연산자

Node.js에서 ES6 사용하기


Category : Node.js ES6

module 시스템의 import, export 를 node에서 사용하다가 Node에서는 ES6를 공식 지원하지 않는다는 사실을 알게 되었다.(2019년 1월 최신 LTS 기준) 꼭 쓰고 싶다면 실험적으로 사용할 수 있도록 옵션을 제공하므로, 다음과 같이 사용할 수 있다.

  1. ES6 모듈을 사용하는 파일 확장자를 .js 에서 .mjs 로 바꾼다.
  2. node --experimental-modules index.mjs
profile
잡식개발

4개의 댓글

comment-user-thumbnail
2019년 3월 3일

참고로 IE8에서는 사용할 수 없다
당연히 IE 지원이 안되므로 모두 다시 작성했다

이 두 부분을 인상깊게 잘 읽었습니다 ㅇㅅㅇ

1개의 답글
comment-user-thumbnail
2019년 3월 5일

덕분에 Notion 사용해봤는데 UI도 이쁘고 기능도 생각보다 다양해서 좋네요!!😀

답글 달기
comment-user-thumbnail
2019년 3월 6일

Notion도 처음 써보고, TIL이란 것도 처음 알게 되었는데 정말 좋네요! 감사합니다. 👍👍

답글 달기