Tistory Blog

🐸 Haguri & Peng's Blog 🐧

Vue3 + Typescript + Vite을 통해 환경을 구성하였으며, Ex-Repository 의 소스를 리팩토링 하였습니다.

Changelog

• 2024/5/27 Add spinner store. Router의 Navigation Guard와 메인(App.vue)에서 LoadingSpinner를 컨트롤.
• 2024/5/25 Vue 3.4에서 안정화된 defineModel 적용. defineEmits 문법 최신화. Aside 영역 세팅하는 부분 개선.
• 2024/5/12 404 Page 수정.
• 2024/3/18 오후부로 이전 theme로 원복하였습니다. 제가 좀 게을러진 탓도 있겠지만 생각보다 공사가 꽤 컸습니다. 기존 기능들은 모두 있으나 최근 게시글의 태그 정보를 가져오는 부분은 현재 작업중입니다.
• 2024/3/5 새벽부터 티스토리 Open API 서비스가 종료됨에 따라 현재 구현해놓은 부분이 원활히 동작하지 않아 수정 작업중입니다. 생각보다 고칠 부분이 많습니다. 😱 기존 페이지들이 정상적으로 동작하게 되면 다시 공지할 예정이며, 그 전까지 계속 소스를 commit 하여 반영할 예정입니다. 현재 블로그는 기본 스킨을 적용한 상태.

Vue

• Vue3
• Vue Router
• Pinia

Pinia (Vuex -> Pinia)

게시글(post)에서 이전 페이지로 이동 시 페이지 정보와 검색어를 저장하기 위해 사용

// category.ts
import { reactive, computed } from 'vue';
import { defineStore } from 'pinia';

import { CategoryInfo } from '@/types';

const setValue = <T>(obj: T, key: keyof T, value: T[keyof T]) => {
  obj[key] = value;
};

export const useCategoryStore = defineStore('category', () => {
  const categoryInfo = reactive(<CategoryInfo>{});

  const getCategoryInfo = computed(() => categoryInfo);

  function setCategoryInfo(pCategoryInfo: CategoryInfo) {
    for (const key of Object.keys(pCategoryInfo)) {
      const categoryKey = key as keyof CategoryInfo;
      setValue<CategoryInfo>(
        categoryInfo,
        categoryKey,
        pCategoryInfo[categoryKey],
      );
    }
  }

  function clearCategoryInfo() {
    const initData = <CategoryInfo>{};
    for (const key of Object.keys(categoryInfo)) {
      const categoryKey = key as keyof CategoryInfo;
      setValue<CategoryInfo>(categoryInfo, categoryKey, initData[categoryKey]);
    }
  }

  return { categoryInfo, getCategoryInfo, setCategoryInfo, clearCategoryInfo };
});

Icon

• Font Awesome

Modal

• Gitart Vue Dialog
  (댓글/방명록 등록, RecentTag)

Libraries

• Axios
• htmlparser2
• cheerio
• jQuery
• Lodash
• tailwindcss
• Moment.js

Color

Color Hunt

Tistory

2024/3/5 이후로 Tistory Open API는 서비스 종료!!

Tistory 에서 제공하는 Open API 를 활용 (Tistory Open API).
제공해주는 Open API 에 한계가 있어 이를 감안하고 개발하였으니 참고 바랍니다.

모바일 페이지는 Tistory에서 자동으로 제공하며,
모바일로 접속하는 경우에 모바일 페이지(/m)로 redirect 처리하고 있습니다.

Open API는 2024년 2월까지 순차적으로 서비스가 종료됩니다.
서비스 종료 안내 링크

공지사항

• Header에 공지사항(Notice) 메뉴 적용

카테고리

• 카테고리 Level(1, 2)별 이동 처리
• 카테고리 클릭 시, 하위 카테고리가 있는 경우 하위 카테고리를 보여줌
• 해당 카테고리가 비어(작성글 0개) 있는 경우 노출하지 않음

기능구현 목록

• 글 목록 페이징 처리
• 검색 및 검색 페이지 이동
• 댓글 등록
• 댓글 수정/삭제
• 방명록 등록
• 방명록 수정/삭제
• 좋아요 설정/해제
• 광고

광고

• Google Adsense: 블로그 전반에 적용
• Kakao Adfit: Side 영역 및 포스팅에 한 개씩 적용
• Tenping: 포스팅에 한 개씩 적용

각 게시글에 적용되는 부분은 작성 시에 에디터에서 수동으로 추가하는 부분입니다.

⚙️ Configuration

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Build & Deploy

npm run build

정상적으로 빌드되면, dist 폴더의 index.html, index-[name].js 파일 내에서 /images/ 로 시작하는 경로 값을 수동으로 변경해서 최종 스킨에 업로드해야 합니다.

https://tistory4.daumcdn.net/tistory/2876097/skin/
/tistory/ 경로 다음에 나오는 숫자 값이 Tistory 블로그마다 가지고 있는 고유 ID 값인 것 같은데, 이 값은 실제 배포한 다음에 console 창에 error 로 나타나는 값을 확인해야 확인할 수 있습니다.

실제 설정되는 값은 다음과 같습니다.
https://tistory4.daumcdn.net/tistory/2876097/skin/images/index-OYSrlsaS.js