nuxt에서 proxy 설정하기

nuxt에서 proxy가 필요했던 이유:

SPA 모드로 로컬에서 개발시 nginx 없이 API 서버를 호출하면서 결과값 기준으로 개발을 하고 싶었습니다.

Webpack의 devServer의 proxy

Nuxt에 webpack이 포함되어 있어서 webpack의 dev server가 들어가 있을거라 생각하고 nuxt의 build 옵션에서 proxy를 설정해봤는데요. 설정이 동작하지 않더군요… nuxt proxy로 검색한 결과물을 찾아보았는데 대부분이 서버렌더링을 사용한 경우라서 원하는 답을 찾지 못해서 nuxt 개발모드 코드를 살펴보았는데요.

dev 모드에서 nuxt 실행 따라가기

node_modules의.bin 폴더에서 dev 모드 실행시 호출 코드를 찾아봤는데요. Nuxt 인스턴스를 생성한 다음 코드 변경을 감지해서 새로운 인스턴스에서 nuxt.listen()을 호출합니다. listen() 코드(lib/core/nuxt.js)를 따라가면 renderer.app.listen()을 다시 호출하는데요.  여기의 app이 node connect 를 서버로 사용하는 것을 확인할 수 있습니다.

serverMiddleware

nuxt 인스턴스가 생성할 때 renderer의 ready()를 호출하는데요. 이 메소드 안에서 setupMiddleware()를 호출하고 여기에서 connect 서버에서 사용할 middleware를 등록합니다. dev인 경우에는 webpack dev middleware와 hot middleware를 등록하게 되며 사용자가 serverMiddleware 옵션을 설정한경우 이들을 connect에 등록하게 됩니다.

여기에서 사용되는 미들웨어는 nuxt의 connect 서버가 호출되기 전에 클라이언트 또는 서버사이드 렌더링 호출하기 전에 호출되게 됩니다. (nuxt의 routes middleware와 전혀 다릅니다.)

-webkit-touch-callout

일단 callout 또는 call-out이 뭔지 찾아봤는데 위키피디아에서는 무언가를 자세히 설명하기 위해 설명과 함께 선, 화살표 또는 비슷한 그래픽을 사용하는 것을 callout이라고 설명하고 있다. (computerhope의 callout 정의)

callout

-webkit-touch-callout은 사용자가 타겟을 터치하거나 꾹 누르는 경우(롱터치) 보여지는 기본 ui를 제어하는 속성이다. 비표준이며 iOS에서 터치 동작을 막고 싶을 때 사용할 수 있다.

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

책 잘 읽는 방법

Book

책을 읽으면 잘 살수 있느냐는 질문에 저는 이렇게 답하고 싶어요. 정해진 운명보다 조금 더 나은 삶을 살 수 있다고요.

by 김봉진 님의 ‘책 잘 읽는 방법’에서

책에서 인용한 김영하 님의 “읽을 책을 사는 것이 아니라 산 책 중에서 읽는것이다.”도 마음에 와 닿는 글이었네요.

 

삼성전기레인지 잠금 해제

samsung_electric_range

거주중인 오피스텔이 정전이 되면서 삼성 전기레인지가 잠금상태로 되었는데요. (잠금상태에서는 자물쇠 아래쪽의 빨간색 등이 점등이 됩니다.)

해제 방법은 전혀 버튼처럼 생기지 않은 자물쇠 버튼을 2분정도 꾹 누르면 해제가 됩니다. 전원 버튼에 대한 안내 이미지처럼 생겼지만 버튼입니다;;;;

passive 옵션 지원여부 체크하는 신박한 방법

vue 코드를 읽기 시작했는데 test-passive 이벤트를 윈도우에 등록하는 듣도 보도 못한 코드가 나와서 한참을 들여다 봤는데요. (바닥부터 다시 공부해야 할 것 같습니다.) 일단 passive옵션은 이벤트 핸들러 등록시 줄 수 있는 옵션 중 preventDefault()를 허용하지 않음으로 스크롤 동작시 성능을 개선하게 해주는 옵션입니다. (공유 받은 기사에서 본 것 같은 기억이 있기는 합니다. 자세한건 Improving scrolling performance~~ 글을 읽어보세요.)

여튼 vue에서 passive 옵션을 지원하는지 여부를 체크하여 지원여부에 따라 분기를 하게 되는데요. 지원여부를 체크하는 방법이 참 신박합니다.

export let supportsPassive = false
if (inBrowser) {
  try {
    const opts = {}
    Object.defineProperty(opts, 'passive', ({
      get () {
        supportsPassive = true
      }
    }: Object))
    window.addEventListener('test-passive', null, opts)
  } catch (e) {}
}

이벤트 핸들러 등록시 넣어주는 옵션 객체의 passive 속성에 getter를 지정해서 넘겨주는데요. 만약 passive 옵션을 지원한다면 해당 값을 읽을 것이고 이러한 기능 여부를 통하여 지원여부를 판단하게 되네요.

신박한 js의 세계네요.

기사단장 죽이기

조금이라도 의식을 되찾으려 애쓰는 중이야. 그러나 의식이 돌아오면 육체적 고통도 함께 돌아오지. 그의 몸은 육체의 고통을 지우기 위한 특수한 물질을 분비하고 있었네. 그런 작용이 있어야 사람은 아주 큰 고통 없이 조용히 숨을 거둘 수 있거든. 그러나 의식이 돌아오면 고통도 뒤따라. 그런데도 그는 의식을 되찾으려고 필사적으로 노력하고 있다네. 설령 육체의 격렬한 고통을 떠안는 한이 있더라도 지금 여기서 꼭 해야 할 일이 있으니까.

기사단장 죽이기|무라카미 하루키