5월 1주차 기록

휴일인듯 휴일아닌 휴일같은 날

배워가기

앱 스킴(App Scheme)

앱 스킴(App Scheme)은 딥링킹(Deep Linking) 과 액션(Action) 으로 이루어져있다.

• 딥링킹 - DeepLink를 통해서 앱 내, (혹은 다른 앱)의 특정 화면으로 이동하는 것
  • URI 인코딩이 필수적이다
  • 화면의 이름은 Unique 해야한다
  • 파라미터의 키 역시 Unique 해야한다
• 액션 - 딥 링킹을 제외한 특정 동작들을 수행하는 것
  • 웹 뷰 화면 닫기
  • 웹 뷰 리프레시
  • 외부 웹 뷰로 이동하기

react hooks dependencies

react hooks api에 dependencies가 필요한 이유는 클로저 때문이다.

클로저는 메모리 누수에 취약하다는 위험이 있다. 함수를 스코프 밖에서도 사용하게 되면 가비지 컬렉팅이 제대로 작동하지 않을 수도 있다. hooks에 deps를 선언하는 것은 프로그래머로 하여금 명시적으로 의존도를 관리하게끔 한다.

이때 hooks는 deps를 비교하기 위해서 Object.is() 메서드를 활용한다. Object.is() 연산은 non-primitive한 값들에 대해서는 메모리 레퍼런스를 비교한다.

hook을 컴포넌트 밖으로 옮기고, dependencies에 primitive한 값들만 선언함으로서 대부분의 hook 관련 버그를 해결할 수 있다.

원링크(One Link)

• URL - 웹사이트의 페이지 주소
• URI 스킴 - 앱의 페이지 주소
• 딥링크 - 앱에서 메인홈이 아닌 특정 페이지로 갈 수 있는 링크

앱이 설치되지 않은 사람을 그 페이지에 보낼 수 없을 때 사용하는 링크가 원링크 (또는 다이나믹 링크)이다.

앱을 설치한 사람은 바로 프로모션 페이지로 보내지고, 아니면 OS에 맞게 앱스토어로 보내고, 앱을 설치하고 앱열기를 클릭하면 해당 프로모션 페이지에 도달할 수 있게 한다.

앱스플라이어(Appsflyer)는 원링크를 만들어주는 도구이다.

Ref http://minhyun0821.com/onelink/

AbortController

AbortController는 하나 이상의 웹 요청을 취소할 수 있게 해준다.

AbortController.signal이라는 것도 있다 (readonly). AbortSignal 객체 인터페이스를 반환하는데, 이를 fetch 함수의 RequestInit 옵션에 추가한 후 AbortController.abort() 함수로 요청을 취소할 수 있다.

const controller = new AbortController();
const signal = controller.signal;

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

요청을 취소(abort) 하면 AbortError 이름의 DOMException 으로 Promise가 reject 된다.

모든 응답, 스트림을 취소할 수 있기 때문에 다운로드 중 취소, 강제 타임아웃 에러 등 다양한 처리를 할 수 있다.

Ref https://developer.mozilla.org/ko/docs/Web/API/AbortController/signal

offsetHeight vs clientHeight vs scrollHeight

• offsetHeight - 요소의 높이로 패딩, 스크롤 바, border가 포함되고 마진은 제외된 값
• clientHeight - 요소의 inner height로 padding 값은 포함되지만, 스크롤바, border, 마진 값은 포함하지 않는다.
• scrollHeight - 요소에 들어있는 컨텐츠 전체 높이 (overflow되어 보여지지 않는 내용들도 포함된 요소의 높이)로 패딩과 border는 포함되고 마진은 제외된 높이.

브라우저의 캐시

브라우저에 캐시가 저장되면 만료될 때까지 캐시는 브라우저에 남아있게 된다. CDN Invalidation같은 작업이 있더라도 브라우저의 유효한 캐시는 사라지지 않는다.

캐시의 유효기간이 max-age=0 이어도 일부 모바일 브라우저에서 브라우저를 껐다 켜기 전까지 리소스가 만료되지 않는 경우가 있다. 이때는 no-store를 활용해서 캐시자체를 막아야된다.

swimlane UI

직역해서 ‘수영장 레인’이라고 생각했다. 그렇게 나쁜 해석은 아닌 것 같았다. 근데 영어 해석은 그렇지 않았나보다.

검색해보니 위키에서는 아래와 같이 설명하고 있다.

swimlane은 비즈니스 프로세스의 하위 프로세스에 대한 작업 공유 및 책임을 시각적으로 구분하는 프로세스 플로우 다이어그램 또는 플로우 차트에 사용됩니다. swimlane은 수평 또는 수직으로 배열 될 수 있습니다.

이 무슨 재미없고 딱딱한 설명인가.

dribble에서 검색 결과로 나온 것들은 아래와 같은 UI다.

뭘 설명하려는지 잘 모르겠다. 회사에서 이번에 새로운 광고상품이 나가면서 오픈리스트의 우리가게클릭 가게들을 swimlane UI로 바꿨다고 하는 것을 들었는데, 아래처럼 수평 정렬으로 늘어뜨린 것을 말한다고 그냥 생각해야겠다.

p vs div

p와 div 모두 대표적인 블록 요소인데, 각각 어떤 상황에 써야 할까? 복잡한 말은 말고, 심플하게만 알아보자.

• p

  • 문자 단락
  • div를 포함할 수 없다

• div

  • 레이아웃 계층 나누기
  • p를 포함할 수 있다

Ref https://dasima.xyz/div-vs-span-vs-p-차이는-블록-요소와-포함-유무/

이것저것

• navigator의 clipboard API는 secure origin (HTTPS, localhost) 환경에서만 사용가능하다.

• Number wrapper는 string의 앞뒤 공백을 제거한 뒤 Number 타입의 값으로 캐스팅한다.

  Copy

  Number(' 44 ') => 44
  Number(' 44') => 44
  Number('44 ') => 44

• 302 Http Status Code

  • OAuth 흐름에서 자주 사용된다.
  • 302 코드는 요청된 리소스가 지정된 URL로 일시적으로 이동되었음을 나타낸다.
  • 서버가 302를 반환하고 set-cookie가 설정되면 브라우저는 위치 이동을 시작하기 전에 현재 페이지 도메인 아래에 쿠키를 설정할 수 있다. (다른 도메인으로 이동하더라도)

• 유니코드

  • 예전에 세계의 각 언어가 고유 인코딩 방식을 가지고 있었다. 그런데 이게 어떤 나라의 인코딩 방식이 다른 나라에서는 완전히 다른 언어로 인식되는 등 많은 문제가 있었다. 그래서 인코딩 방식에 대한 표준으로 나온 것이 유니코드이다.

• 프로젝트를 npm 으로 관리할 때 버전에 따라서 안에서 사용되는 서버의 변경을 관리할 수 있는지 고민하자.

• IDE와 워크스페이스에서 사용하는 패키지(ex. typescript)의 버전이 다를 수도 있다.

기타

useEvent RFC

React에 추가될지도 모르는 useEvent hook은 가장 최신 상태의 props나 state를 읽지만, 항상 함수의 동일성을 유지한다(stable function identity). useEvent로 정의된 이벤트핸들러는 memoization의 룰을 깨지 않으며, effect를 다시 트리거하지 않는다.

많은 의견들이 달렸는데, hook 자체 기능에 대한 논의보다는 이름을 무엇으로 지을 것인가에 대한 의견이 분분하다. 역시 뭐든 새로 나올 때는 이름을 잘 짓고 봐야…

Ref https://github.com/reactjs/rfcs/pull/220

<dialog> 엘리먼트를 기반의 다이얼로그 컴포넌트 제작기

<dialog>는 대화 상자 요소로, 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타낸다.

<dialog id="dialog">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>OK</button>
  </form>
</dialog>

<button onclick="dialog.showModal()">Open Dialog</button>

기본으로 제공되는 <dialog> 요소에 여러 GUI적인 기능들을 덧붙여 커스텀한 다이얼로그 컴포넌트를 만든 과정을 소개하고 있다.

다이얼로그 모달의 크기에 따른 분류, 다이얼로그가 열렸을 때 포커싱, 다른 요소들 inactive시키기, ESC로 창 닫기 등 UX의 관점에서 섬세한 디테일들을 만들 수 있다.

근데 진짜 뭐가 많다. 진짜 광기…

Ref https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog https://web.dev/building-a-dialog-component/#overview

마무리

사내에서 하는 어떤 프로젝트(?)를 위해서 nest를 공부하고 있다. nest 자체는 크게 어렵지 않은데 (아직까지는…), typeORM을 해보겠다고 MySQL을 공부하고, 그러려고 docker를 배우고..! docker와 종일 싸우느라 nest는 멀어졌다.

어린이날에 친구들 만나고, 새벽에 갑자기 배가 너무 아파서 응급실에 다녀왔다. 뭐가 문제였는지도 모를 만큼 검사 결과는 다 정상이었고 (중대병원은 이미 내 신뢰를 잃었지만 ㅡㅡ) 수액과 진통제 맞고 2시간 만에 퇴원했다. 수납하면서 실비 보험서류 챙겨달라할 만큼 멀쩡해져서 나왔다. 다시 푹 자고 멀쩡히 출근해서 일했당. 근데 징크스가 생긴 것 같다. 5월엔 꼭 발을 다치고, 깁스를 하고, 그 상태로 응급실 갈 일이 생긴다는 것.

결코 평화롭지만은 않은 가정의달도 이렇게 슝슝 지나갈 것 같다.