Merge pull request #159 from Docent-Inc/feature/리소스최적화

Feature/리소스최적화 - 이미지 로딩 개선 및 빌드 옵션 추가

components/common/SkeletonImage.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="skeleton-image">
+        <img v-lazyload="url" ref="imgRef" @load="isLoading = false" v-once />
+        <div class="skeleton" v-if="isLoading"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SkeletonImage",
+    props: {
+        url: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            isLoading: true,
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/scss/mixins.scss";
+.skeleton-image {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+
+    .skeleton {
+        position: absolute;
+        @include skeleton;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

components/diary/BoardDiary.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="item-board-diary" @click="showDetail">
-        <img v-if="diary.image_url !== ''" v-lazyload="diary.image_url" />
+        <SkeletonImage v-if="diary.image_url !== ''" :url="diary.image_url" />
         <div v-else class="diary-contents">
             <div v-if="diary.diary_name === ''">
                 <div class="diary-text-only">
@@ -22,8 +22,10 @@
     </div>
 </template>
 <script>
+import SkeletonImage from "~/components/common/SkeletonImage.vue";
 export default {
     name: "BoardDiary",
+    components: { SkeletonImage },
     props: {
         diary: {
             type: Object,
@@ -58,10 +60,6 @@ export default {
     height: 100%;
     position: relative;
 
-    img {
-        width: 100%;
-        height: 100%;
-    }
     .diary-date {
         position: absolute;
         bottom: 0;

docker/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /app
 
 COPY package.json .
 COPY yarn.lock .
-RUN yarn install 
+RUN yarn install --check-cache --parallel
 
 COPY . .
 RUN yarn build

docker/Dockerfile-dev

@@ -6,7 +6,7 @@ WORKDIR /app
 
 COPY package.json .
 COPY yarn.lock .
-RUN yarn install
+RUN yarn install --check-cache --parallel
 
 COPY . .
 RUN yarn build:dev

plugins/directives.js

@@ -6,16 +6,17 @@
 // v-lazyload (참고: https://url.kr/l5bxa1)
 const lazyloadDirective = {
     mounted(el, binding) {
-        function loadImage(targetElement, imageUrl) {
-            const imgElement = targetElement;
-            imgElement.setAttribute("src", imageUrl);
+        function loadImage(el, imageUrl) {
+            el.setAttribute("src", imageUrl);
+            el.onload = () => {};
         }
 
         function callIntersectionApi() {
             const options = {
                 root: null,
                 threshold: 0.5,
                 rootMargin: "0px",
+                once: true,
             };
 
             const callback = (entries, observer) => {