IE11에서 쿠키가 만들어지지 않는 문제

Nginx Lua Module을 개발하면서 크롬에서는 쿠키가 저장이 되는데, IE11에서는 쿠키가 저장되지 않는 문제가 발생했다.

몇 가지 점검해야할 부분이 있었다.

첫째, 서버 시간과 브라우저 시간이 일치하는지 확인해야한다. 쿠키 삭제를 클라이언트 시스템 시간 기준으로 하니까 서버와 클라이언트와 시간차이가 있는지 확인하는 것이 먼저다.

둘째, expires 필드의 날짜 포맷이 맞는지 확인한다.

정확한 포맷 :

비슷해 보였었는데, 약간 다른 부분을 확인했다.

그래서 포맷을 정확하게 바꿨다.

셋째, 도메인을 지정하지 않는 것이다. IE11에서는 도메인을 지정하지 말아야 한다.

넷째, max_age를 사용하지말고, expires를 사용하는 것이 좋다. Old IE에서 지원하지 않는다.

쿠키는 시간이 다른 문제를 교정하는데 문제가 있어서 결국, 쿠키의 expires로 만료시간을 지정하지 않고, nginx의 공유 메모리에 만료시간을 지정하는 방식을 썼다.

Hot Module Replacement(HMR)

React Hot Loader 사이트에 있는 비디오를 보고, 호기심을 가졌다. 전에 live-reload 기능이 있긴 하지만, 페이지 전체를 다시 불러오는 형태라서 비효율적으로 볼 수도 있다. 에디터에서 수정 후 저장하자마자 깜빡임도 없이 브라우저에 있는 UI가 바로 바뀌는 모습이 인상적이었다. 특히 CSS 수정했을 때 유용해보였다.

React Hot Loader는 React 컴포넌트를 수정할 때 상태를 잃지 않고, 즉각적으로 live refresh를 할 수 있게 해주는 Webpack 플러그인이다. 그래서 React.js와 Webpack을 사용해야한다. React.js만 지원한다.

간단하게 Webpack은 모든 Static Web Resource를 하나의 자바스크립트 파일로 만들 목적으로 사용하고, React.js는 페이스북에서 만든 뷰 구현을 돕는 프레임웍이다. 추가로 gulp와 coffee script를 사용했다.

Webpack

HMR 기능을 사용하려면 Webpack을 사용해야한다. require, configuration, cli 3가지 방법으로 로더를 사용할 수 있다.

CLI 방식:

require로 사용하는 방법:

!로 리소스와 로더를 분리할 수 있다.

configuration 방식 :

설정해야할 것이 많기 때문에, configuration을 정의한 후 gulp에서 사용하는 방식이 좋을 것 같다.

각각의 로더는 모두 설치해야한다. devDependency로 두는 것이 좋다.

개발서버 띄우기

HMR 기능을 사용하기 위해서 간단하게 데몬을 띄울 수 있다.

CSS작업만 한다면 이렇게 CLI모드를 사용해서 작업할 수 있다.

inline과 hot 옵션은?

  • –inline : webpack-dev-server 런타임 코드를 번들(.js)에 추가한다.
  • –hot : HotModuleReplacementPlugin 을 추가하고, hot mode로 서버를 교체한다. (모듈 변경 여부를 알려주는 역할)

HotModuleReplacementPlugin을 두 번 추가하지 않도록 주의해야한다.

윈도에서 경로 문제

윈도에서 웹팩 개발 서버가 제대로 변경된 파일을 감시하지 못하는 문제가 있었는데 설정파일에서 경로를 다음과 같이 변경해야 한다.

Webpack 관련 링크 모음