Eunkwang Shin

// navigator (브라우저)에 serviceWorker 기능이 있는지 확인
if ("serviceWorker" in navigator) {
  // 서비스워커 설치시 DOM 블로킹을 막아준다.
  window.addEventListener("load", function () {
    // 서비스워커를 register 하면 promise를 반환한다.
    navigator.serviceWorker
      .register("/sw.js")
      .then(() => {
        console.log("서비스 워커가 등록되었다.");
      })
      .catch((error) => {
        console.log(error);
      });
  });
}

const PRE_CACHE_NAME = "캐시-스토리지1";
// 캐시하고 싶은 리소스
const urlsToCache = [
  "/public/image/image1.png",
  "/public/css/font-awesome.min.css",
];

// 서비스워커가 설치될 때
self.addEventListener("install", (event) => {
  // 캐시 등록 이벤트가 끝날 때까지 기다려
  event.waitUntil(
    // '캐시-스토리지1'을 연다.
    // @return {Promise} 연결된 Cache Database를 반환한다.
    caches
      .open(PRE_CACHE_NAME)
      .then((cache) => {
        console.log("캐시 디비와 연결됨");
        // addAll 메소드로 내가 캐싱할 리소스를 다 넣어주자.
        return cache.addAll(urlsToCache);
      })
      .then(() => {
        // 설치 후에 바로 활성화 단계로 들어갈 수 있게 해준다.
        return self.skipWaiting();
      }),
  );
});

const DYNAMIC_CACHE_NAME = "다이나믹-캐시-스토리지1";

// fetch event는 어딘가에서 리소스를 가져올 때 모두 실행된다.
// js를 가져오거나 이미지를 가져오거나 페이지를 가져오거나 등등
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // 캐시에 있으면 repsonse를 그대로 돌려준다.
      if (response) {
        return response;
      }

      // 여기서 request를 복사해준다.
      // request는 스트림으로 fetch 당 한 번만 사용해야하기 때문이다.
      // 근데 event.request로 받아도 실행은 된다
      const fetchRequest = event.request.clone();

      // if (response) return response 구문을 하나로 합칠 수도 있다.
      // return response || fetch(fetchRequest)
      return fetch(fetchRequest).then((response) => {
        // 응답이 제대로 왔는지 체크한다.
        // 구글 문서에는 다음과 같이 처리하라고 되어있는데
        // 이 경우 Cross Site Request에 대해 캐싱 처리를 할 수가 없다.
        // if(!response || response.status !== 200 || response.type !== 'basic') {
        if (!response) {
          return response;
        }

        // 응답은 꼭 복사 해줘야한다.
        const responseToCache = response.clone();

        // 캐시 스토리지를 열고 정말 캐싱을 해준다.
        caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
          cache.put(event.request, responseToCache);
        });

        // 여기서 response를 내보내줘야 캐싱 처리 후에 리소스를 반환한다.
        return response;
      });
    }),
  );
});

// 서비스 워커가 활성화 될 때
self.addEventListener("activate", (event) => {
  // 영구적으로 가져갈 캐시 스트리지 화이트리스트
  const cacheWhiteList = [PRE_CACHE_NAME, DYNAMIC_CACHE_NAME];

  event.waitUntil(
    // 캐시 스토리지의 모든 스토리지명을 가져온다.
    caches.keys().then((cacheNames) => {
      // 캐시를 삭제하는 건 Promise를 반환하므로 Promise.all을 사용해 끝날 시점을 잡아야한다.
      return Promise.all(
        // 이 결과는 [Promise, Promise...] 형태가 되시겠다.
        cacheNames.map((cacheName) => {
          // 각각의 캐시 스토리지명이 화이트 리스트와 같지 않을 경우
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            // 캐시를 삭제하는 Promise를 배열에 추가한다.
            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );

  // activate 시에는 clients claim 메소드를 호출해서
  // 브라우저에 대한 제어권을 가져와야한다.
  return self.clients.claim();
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => {
        // ...
      })
      .catch((error) => {
        // 에러 발생시 캐시되어있는 offline.html로 이동시킨다.
        return caches.open(CACHE_NAME).then((cache) => {
          // 들어온 요청의 Accept 헤더가 text/html 을 포함하고 있다면 (페이지 요청이라면)
          if (event.request.headers.get("accept").includes("text/html")) {
            // 캐시된 offline fallback 페이지를 보여준다.
            return cache.match("/offline.html");
          }
        });
      }),
  );
});

(() => {
  const STATIC_CACHE_NAME = "STATIC_CACHE_VERSION_1";
  const DYNAMIC_CACHE_NAME = "DYNAMIC_CACHE_VERSION_1";

  const WEB_CACHE = {
    init() {
      self.addEventListener("install", this.staticCacheStrategy.bind(this));
      self.addEventListener("activate", this.deleteOldCache.bind(this));
      self.addEventListener("fetch", this.dynamicCacheStrategy.bind(this));
    },

    staticCacheStrategy(event) {
      // 스태틱 캐싱
    },

    deleteOldCache(event) {
      // 캐시 삭제
    },

    dynamicCacheStrategy(event) {
      // 다이나믹 캐싱
    },
  };

  WEB_CACHE.init();
})();

const dynamicCacheStrategy = (event) => {
  // 캐싱 처리하고 싶은 content-type
  const cacheContentsTypes = [
    "image/png",
    "image/gif",
    "image/jpeg",
    "application/font-woff",
  ];

  event.respondWith(
    caches.match(event.request).then((response) => {
      const fetchRequest = event.request.clone();

      return (
        response ||
        fetch(fetchRequest)
          .then((response) => {
            if (!response) {
              return response;
            }

            // response header에서 content-type을 가져와 비교한다.
            // 아니면 request.url이 캐싱처리를 할 외부 url인지 확인한다.
            if (
              cacheContentsTypes.indexOf(
                response.headers.get("content-type"),
              ) !== -1 ||
              event.request.url.indexOf("external.url") !== -1
            ) {
              caches.open(DYNAMIC_CACHE_NAME).then((cache) => {
                cache.put(event.request, response.clone());
              });
            }

            return response;
          })
          .catch((error) => console.log(error))
      );
    }),
  );
};

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js",
);

workbox.precaching.precacheAndRoute([
  {
    url: "css/fonts/fontawesome/fontawesome-webfont.eot",
    revision: "674f50d287a8c48dc19ba404d20fe713",
  },
  {
    //...
  },
]);

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js",
);

// importScripts 후 타이밍 차이로 인해 모듈을 못 불러오는 경우를 방지하기 위해
// 캐싱 정책 모듈 로드를 기다린다.
workbox.loadModule("workbox-strategies");

workbox.skipWaiting();
workbox.clientsClaim();

// accept 헤더에 text/html 값이 있으면 (html 페이지 요청일 경우)
// networkFirst 캐싱
workbox.routing.registerRoute((routeData) => {
  return routeData.event.request.headers.get("accept").includes("text/html");
}, workbox.strategies.networkFirst());

// imgur 요청일 경우 cacheFirst 캐싱
workbox.routing.registerRoute(
  /.*(?:imgur)\.com.*$/,
  workbox.strategies.cacheFirst(),
);

// jsdelivr 요청일 경우 stateWhileRevalidate 캐싱
workbox.routing.registerRoute(
  /.*(?:jsdelivr)\.net.*$/,
  workbox.strategies.staleWhileRevalidate(),
);

// bootcss 요청일 경우 stateWhileRevalidate 캐싱
workbox.routing.registerRoute(
  /.*(?:bootcss)\.com.*$/,
  workbox.strategies.staleWhileRevalidate(),
);

workbox.googleAnalytics.initialize();

const moment = use("moment");
const { config } = use("winston");

module.exports = {
  logger: {
    transport: "file",
    file: {
      driver: "file",
      name: "adonis-app",
      // 파일명을 바꿔준다
      filename: `adonis_${moment().format("YYYYMMDD")}.log`,
      level: "debug",
      // json 로그 포맷을 해제하고
      json: false,
      // 원하는 형태로 바꿔준다
      formatter: ({ level, message, meta }) => {
        const now = moment().format("YYYY-MM-DD HH:mm:ss.SSS");
        // 로그 레벨에 색상을 추가하는 작업인데, 굳이 필요하진 않다
        const logLevel = config.colorize(level, level.toUpperCase());
        const formattedMeta =
          meta && Object.keys(meta).length ? "\n\t" + JSON.stringify(meta) : "";

        return `[${now}] ${logLevel} ${message || ""} ${formattedMeta}`;
      },
    },
  },
};

export const FETCH_BOARDS = "FETCH_BOARDS";
export const FETCH_BOARDS_FULFILLED = "FETCH_BOARDS_FULFILLED";
export const FETCH_BOARDS_REJECTED = "FETCH_BOARDS_REJECTED";

export const fetchBoards = () => ({
  type: FETCH_BOARDS,
});

// saga에서 호출하는 액션
export const fetchBoardsFulfilled = (boards) => ({
  type: FETCH_BOARDS_FULFILLED,
  payload: boards,
});

// saga에서 호출하는 액션
export const fetchBoardsRejected = (error) => ({
  type: FETCH_BOARDS_REJECTED,
  error,
});

const INITIAL_STATE = {
  boards: [],
};

export default (state = INITIAL_STATE, { type, payload, error }) => {
  switch (type) {
    case FETCH_BOARDS_FULFILLED:
      return {
        ...state,
        boards: payload,
      };
    case FETCH_BOARDS_REJECTED:
      return {
        ...state,
        showError: true,
        error,
      };
    default:
      return state;
  }
};

import { call, spawn, put, takeEvery } from "redux-saga/effects";
import * as actions from "../actions";
import axios from "axios";

function* fetchBoardsSaga() {
  // try catch finally 구문으로 오류 제어가 가능하다.
  try {
    // 이부분을 call 메소드를 이용해 테스트가 쉽게 바꿀 수 있다.
    // (yeild를 사용하기 때문에 next 명령어로 반복 가능하므로)
    // const { data } = yield call([axios, 'get'], '/boards')
    const { data } = yield axios.get("/boards");
    yield put(actions.fetchBoardsFulfilled(data));
  } catch (error) {
    yield put(actions.fetchBoardsRejected(error.response));
  }
}

function* watchBoard() {
  // type의 action이 실행되면 fetchBoardsSaga도 항상(Every) 실행한다
  yield takeEvery(FETCH_BOARDS, fetchBoardsSaga);
}

// 모든 listener(watcher)를 하나로 묶어준다.
// rootReducer에 묶어주는 그것과 같다고 보면 된다.
export default function* root() {
  yield spawn(watchBoard);
}

import createSagaMiddleware, { END } from "redux-saga";
const saga = createSagaMiddleware();

export default function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(...middlewares),
      inDevelopment && window.devToolsExtension
        ? window.devToolsExtension()
        : (f) => f,
    ),
  );

  store.runSaga = saga.run;
  store.close = () => store.dispatch(END);

  return store;
}

const store = configureStore();
store.runSaga(rootSaga);

export function* testSaga() {
  //  기존 포스팅들에는 이렇게 사용하라는 구문이 많은데
  // deprecated 경고를 뱉는다
  const [response1, response2] = yield [asyncTask1(), asyncTask2()];

  // 아래와 같이 사용하자
  const [response3, response4] = yield all([asyncTask1(), asyncTask2()]);
}

import React, { Component } from "react";
import Loadable from "react-loadable";
import Loading from "./Loading";

const LoadableComponent = Loadable({
  loader: () => import("./Dashboard"),
  /* 컴포넌트 로딩시 보여지는 로딩 컴포넌트 */
  loading: Loading,
});

export default class LoadableDashboard extends Component {
  render() {
    return <LoadableComponent />;
  }
}

new Vue({
  data: {
    members: [],
  },

  created: function () {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const vm = this;

    axios
      .get("/members")
      .then(function (response) {
        vm.members = response.data;

        /* promise가 지원되는 환경에서 */
        return vm.$nextTick();

        // promise 미지원시
        /* vm.$nextTick(function() {
          $('.members').hover();
        });
      */
      })
      .then(function () {
        $(".members").hover();
      });
  },
});

new Vue({
  el: "#memberList",
  data: {
    members: [{ id: 1, name: "gracefullight" }],
  },

  mounted: function () {
    /* member의 logs 데이터는 그냥 배열로 선언된다. */
    this.members[0].logs = [];
    /* 데이터를 넣어도 위 템플릿의 <li> 부분이 반복되지 않는다. */
    this.members[0].logs = [
      { id: 1, message: "test action", created_at: "2017-11-22" },
    ];
  },
});

/* 1안 */
const option = {
  mounted: function () {
    this.$set(this.members[0], "logs", []);
    this.members[0].logs = [
      // ...
    ];
  },
};

/* 2안 */
const option = {
  mounted: function () {
    this.members[0].logs = [];
    this.members[0].logs = [
      // ...
    ];
    this.$forceUpdate();
  },
};

Route.get("/boards", async () => {});

Route.get("/boards/:id", async ({ params }) => {
  const board = await Board.find(params.id);
  return board;
});

Route.get("boards", "BoardController.index");
/* 리소스로 사용시에 */
Route.resource("boards", "BoardController");

/* 리소스에서 create, edit 메소드를 빼고 사용시 */
Route.resource("boards", "BoardController").apiOnly();

/* 구미가 당기는 것만 사용시 */
Route.resource("boards", "BoardController").only(["index", "destroy"]);

/* 구미가 안 당기는 것을 제외할 시 */
Route.resource("boards", "BoardController").except(["index", "destroy"]);

/* /api/boards routes */
Route.group(() => {
  Route.get("/boards", "BoardController.index");
  Route.post("/boards", "BoardController.store");
}).prefix("api");

class Board extends Model {
  // 테이블 명을 변경해야할 경우
  // (테이블 명이 모델명의 복수형이 아닐 경우)
  static get table() {
    return "board";
  }

  // 기본 커넥션이 변경될 경우
  static get connection() {
    return "mysql";
  }

  // PK 컬럼명이 id가 아닐 경우
  static get primaryKey() {
    return "uid";
  }

  // PK의 Auto Increment가 아닐 경우
  static get incrementing() {
    return false;
  }

  // 비밀번호 같은 컬럼을 보여주지 않아야 될 경우
  // 이 경우 모델에서 fetch 또는 first 메소드로 쿼리빌더를 실행해야된다
  static get hidden() {
    return ["password"];
  }

  // 생성일 컬럼이 변경될 경우
  static get createdAtColumn() {
    return "created_at";
  }

  // 업데이트일 컬럼이 변경될 경우
  static get updatedAtColumn() {
    return "updated_at";
  }
}