진짜 G.O.A.T
제일 많이 사용하는 거 같다.

윈도에는 클립보드라는 이전에 복사해 뒀던 history를 보여주고 바로 붙여 넣을 수 있는 기능이 있다.
그 클립보드 기능을 추가해 주는 프로그램이다.

Maccy

Maccy - macOS clipboard manager

Clipboard manager for macOS which does one job - keep your copy history at hand. Lightweight. Open source. No fluff.

https://maccy.app

기본적으로 무료이고 공식 사이트에서 다운로드하려면 기부해야만 하는 거 같다(?)
maccy github에 Releases에서 다운받거나 brew 써서 받으면 될 거 같다.

brew 명령어

brew install maccy

저장하고 있을 항목 개수를 설정해 줄 수도 있고 단축키 또한 변경할 수 있어서 나는 아래처럼 변경해서 사용하고 있다.

command ⌘ + shift ⇧ + v

일반 복사는 command + v로 똑같이 사용하고 클립보드에서 들고 오고 싶을 땐 shift만 추가로 더 눌러주고 쓴다.
색상 코드를 복사하면 왼쪽에 미리보기 형태로 색상을 보여주고 이미지를 복사하면 복사한 이미지 또한 미리보기로 보여준다.

Aldente

이 프로그램은 배터리 관련이라서 MacBook 사용자만 봐도 된다.

리튬이온 배터리는 20~80%만 사용할 때 베터리에 부담이 제일 적다고 한다.
80 위로 충전하면 수명이 빨리 소모된다는 것이다.
하지만 나처럼 하루 종일 책상에 올려다 놓고 일하는 사람들은 계속 충전을 해주고 있어야 하는 데 수시로 배터리 체크하면서 충전 했다, 안 했다하는 건 매우 귀찮은 일이다.

Aldente github

Home - AppHouseKitchen

It needs AlDente.

https://apphousekitchen.com/

알덴테를 사용하면 맥북의 베터리를 80%까지만 충전되도록 제한을 걸어줄 수 있다.
무료 버전과 pro 버전 2가지가 있는데 80% 제한만 걸어두는 건 무료 버전에서도 지원하고 pro 버전에서는 이것저것 기능이 추가 된다.
그중 제일 맘에 드는 기능은 메뉴 막대의 aldente의 icon을 MacOS 기본 베터리 아이콘처럼 변경해 주는 기능이 있다.

원래 icon

네이티브 배터리 icon 이미지

또한 pro 버전에서는 아래 이미지처럼 이것저것 정보를 알려준다.
(볼 일이 없긴 하다)

위에서 설명해 준 기능 말고도 베터리 교정 모드나 과열 방지 모드 맥세이프 led 제어 등등 다양한 기능이 있으니 한번 구경해보면 좋을 거 같다.

MonitorControl

맥에서 사용하는 모니터마다 밝기를 따로따로 관리해 줄 수 있는 프로그램이다.
모니터에 포커싱하고 있을 때 밝기 조절 단축키를 사용하면 그 모니터만 줄어든다.

MonitorControl

GitHub - MonitorControl/MonitorControl: 🖥 Control your display's brightness & volume on your Mac as if it was a native Apple Display. Use Apple Keyboard keys or custom shortcuts. Shows the native macOS OSDs.

🖥 Control your display's brightness & volume on your Mac as if it was a native Apple Display. Use Apple Keyboard keys or custom shortcuts. Shows the native macOS OSDs. - MonitorControl/Moni...

https://github.com/MonitorControl/MonitorControl

맥북 쓰면서 모니터 밝기 조절하면 맥북 화면만 줄어들거나 둘 다 같이 줄어들어서 모니터가 굉장히 어두워질 수 있는데 이거 쓰고 나서는 편안해졌다.

Macs Fan Control

air는 팬이 없으니 넘겨도 된다.

Macs Fan Control

Macs Fan Control - control fans on Apple computers, also on Windows via Boot Camp

Control fans on Apple computers, also on Windows via Boot Camp. Monitoring of fan speed and temperature sensors. Solve fan noise and overheating problems, iMac HDD replacement

https://crystalidea.com/macs-fan-control

맥에 있는 쿨러의 속도를 조절할 수 있게 해주는 프로그램이다.

혼자 너무 시끄럽게 돌고 있길래 찾아보고 설치해서 쓰고 있다. 보통 4000 정도로 해두면 시끄럽지도 않고 cpu가 시원해하는 거 같지만, 무거운 프로그램을 돌릴 때는 최고속도로 하거나 5500 정도로 설정해서 사용하고 있다.

pro 버전이 따로 있어서 돈을 내면 프로필을 저장해두고 사용할 수 있지만 나는 4000 고정이어서 무료 버전으로 잘 쓰고 있다.

runcat

이번에 소개하는 프로그램 중에 제일 쓸모없다.
하지만 이쁘다. 그래서 쓴다.

runcat

RunCat

Cat living in the menubar.

https://kyome.io/runcat/index?lang=en

이렇게 고양이가 뛰어다니고 cpu 사용량에 따라서 속도가 빨라진다.

그냥 mac의 시스템 현황 같은 거도 보여주고 runner 변경 또한 가능하니 다운받아서 맘에 드는 거로 사용하면 좋을 거 같다. 이모티콘 사듯이 runner를 따로 사서 쓸 수도 있다.

다른 잘 쓰고 있는 앱들이 많긴 한데 이번 포스트랑은 잘 안 맞는 거 같아서 나중에 따로 올려야 할 거 같다. Obsidian이라든지 iTerm2라던지….

완성 코드 바로가기

1. markdown-it-footnote

우선 vitepress는 markdown-it를 통해 markdown을 html로 변환해주고 있다.
그래서 각주를 달려고 하면 markdown-it-footnote이라는 확장 패키지를 통해 각주 기능을 추가 할 수 있다.

1-1. 설치

npm i -d markdown-it-footnote

# or

yarn add -D markdown-it-footnote

# or

pnpm i -D markdown-it-footnote

# or

bun add markdown-it-footnote -d

사용중인 패키지 매니저 사용해서 적절하게 설치해준다.

1-2. 적용 및 사용

<vitepress root>/.vitepress/config.mts에 가보면 vitepress의 기본적인 설정을 해줄수있다.

...
import footnote from 'markdown-it-footnote'
...
export default defineConfig({
  ...
  markdown: {
    config: (md) => {
      md.use(footnote)
    },
    ...
  },
  ...
})

이렇게 markdown-it 라이브러리에 footnote 기능을 사용하도록 해줄 수 있다.

hello[^1]

[^1]: world

hello^[1]

이렇게 사용해 줄 수 있다.
하지만 각주 하나 보겠다고 아래 내렸갔다가 위로 다시 올라갔다가 url에는 이상한 id값 계속 붙고...
지저분하다.

2. 툴팁 제작

기본적으로 툴팁이 있어야 붙이든 말든 하기 때문에 codepen에서 적당히 이쁜 툴팁을 찾아왔다.
맘에 안들면 다른거 찾아와서 똑같이 따라하면 된다.
나는 아래 링크의 tooltip을 사용해서 하려고 한다.

tutsplus - CSS Tooltip Magic

2-1. Tooltip Component

각주는 그대로 놔두고 뭔가 추가로 붙여주기만 하면 될거같아서 slot에는 각주를 넣고 그 각주에 tooltip만 붙여주면 될거같다.

<template>
  <slot></slot>
</template>

<script setup lang="ts">
const props = defineProps({
  footnote: {
    type: [Number, String],
    required: true,
  },
})
</script>

<style lang="scss"></style>

...
export default {
  ...,
  enhanceApp({ app, router, siteData }) {
    ...
    app.component('FootnoteTooltip', FootnoteTooltip)
  },
  ...
} satisfies Theme

FootnoteTooltip 컴포넌트를 만들어준 뒤 어디서든 사용하기 위해서 .vitepress/theme/index.ts 전역 컴포넌트로 지정해줬다.
컴포넌트 이름이 너무 긴거 같으면 맘대로 바꿔넣어두면 된다.

<style> 태그에 scope 달아두면 컴포넌트 안에서만 쓸 수 있으니까 지워야한다.

<template> 부분은 각주를 그대로 받아서 사용할거라 default slot만 추가해서 마무리 한다.

prop으로는 굳이 각주를 다 안가지고 와도 문서 하단에 뿌려둘것이기 때문에 굳이 전문을 가지고 오지말고 각주 번호나 이름을 가져오면 될거같다.

2-2. 본문 각주 바로가기에 data-tooltip 추가

각주의 변환된 html 코드를 확인해 보니 아래와 같은 형태인것을 알 수 있다.

<a
  href="#fn1"
  id="fnref1"
  >[1]</a
>

...

<li
  id="fn1"
  class="footnote-item"
>
  <p>
    world
    <a
      href="#fnref1"
      class="footnote-backref"
      >↩︎</a
    >
  </p>
</li>

본문에 써지는 <a>태그의 id는 #fnref + footnote
하단에 써지는 <li>태그의 id는 #fn + footnote

와 같은 형태인 것을 확인 할 수 있었다.

그래서 li의 텍스트를 긁어와서 a에 dataset.tooltip으로 넣어주면 나중에 스타일 붙일때 사용할 수 있을거 같다.
아래는 위에서 설명한 내용에 대한 코드다.

<script setup lang="ts">
import { nextTick, onMounted } from 'vue'

const props = defineProps({
  footnote: {
    type: [Number, String],
    required: true,
  },
})

onMounted(() => {
  nextTick(() => {
    // <li> 태그 들고오고
    const fn = document.getElementById(`fn${props.footnote}`)!

    // <a> 태그 들고와서
    const fnref = document.getElementById(`fnref${props.footnote}`)!

    // <li> 클론 하나 만들어 준 뒤
    const fnClone = fn.querySelector('p')?.cloneNode(true) as HTMLElement

    // 뒤에 붙는 화살표 지워주고
    fnClone.removeChild(fnClone.querySelector('a')!)

    // <a> 태그에 data-tooltip에 넣어준다.
    fnref.dataset.tooltip = fnClone.innerText
  })
})
</script>

2-3. 스타일 붙이기

코드펜에서 찾은 맘에 드는 툴팁을 아래 코드처럼 [data-tooltip]에 적절하게 적용시켜 준다.

[data-tooltip] {
  /* 여기에 뭔가 하면 각주에 적용될거다 */
}

3. 완성된 코드

hello<FootnoteTooltip footnote="2">[^2]</FootnoteTooltip>

[^2]: world

hello^[2]

<template>
  <slot></slot>
</template>

<script setup lang="ts">
import { nextTick, onMounted } from 'vue'

const props = defineProps({
  footnote: {
    type: [Number, String],
    required: true,
  },
})

onMounted(() => {
  nextTick(() => {
    const fn = document.getElementById(`fn${props.footnote}`)!
    const fnref = document.getElementById(`fnref${props.footnote}`)!

    const fnClone = fn.querySelector('p')?.cloneNode(true) as HTMLElement
    fnClone.removeChild(fnClone.querySelector('a')!)

    fnref.dataset.tooltip = fnClone.innerText
  })
})
</script>

<style lang="scss">
[data-tooltip] {
  position: relative; /* opinion 1 */

  &::before,
  &::after {
    text-transform: none; /* opinion 2 */
    font-size: 0.9em; /* opinion 3 */
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
  }

  &::before {
    content: '';
    border: 5px solid transparent; /* opinion 4 */
    z-index: 1001; /* absurdity 1 */
  }

  &::after {
    content: attr(data-tooltip); /* magic! */

    /* most of the rest of this is opinion */
    font-family: Helvetica, sans-serif;
    text-align: center;

    /*
      Let the content set the size of the tooltips
      but this will also keep them from being obnoxious
      */
    min-width: 3em;
    white-space: nowrap;
    padding: 1ch 1.5ch;
    border-radius: 0.3ch;
    box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
    background: #555;
    color: #fff;
    z-index: 1000; /* absurdity 2 */
  }

  &:hover::before,
  &:hover::after {
    display: block;
    animation: tooltips-vert 300ms ease-out forwards;
    left: 50%;
    transform: translate(-50%, -0.5em);
  }

  &::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #555;
  }

  &::after {
    bottom: calc(100% + 5px);
  }
}

/* don't show empty tooltips */
[data-tooltip='']::before,
[data-tooltip='']::after {
  display: none !important;
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
</style>

INFO

이 포스트는 아래 링크의 포스트에 연결되는 내용이니 혹시나 안 보고 왔으면 보고 오도록
[ci cd] Docker로 Vitepress 배포하기

이번 포스트는 이전에 너무 길게 적어서 짧게 쓰고 넘어가려고 한다.

1. 도커 컴포즈 작성

version: 3 # docker compose가 구버전인 사람만 붙여주면 된다. 난 최신 버전써서 안붙여도 된다.

name: blog
services:
  docs:
    build: .
    container_name: blog
    ports:
      - '8080:80'
    stdin_open: true
    tty: true

1-1. version

이전에 docker-compose.yml 작성해 봤다고 하는 사람들은 version 왜 안 적어도 되냐고 할 수도 있다.
최신 버전의 docker compose에서는 없어졌다. 이제 안 적어도 된다.

1-2. name

docker compose ps

했을 때 나오는 docker compose의 이름이다.

1-3. services

원래 같았으면 services에 다른 docker파일에 있는 이것저것 다 한 번에 띄우고 한 네트워크로 묶겠지만 우리는 정적파일 배포하는 nginx 컨테이너 하나밖에 없기 때문에 이 밑에 하나만 할 거다.

서비스 이름은 마음대로 지어도 되는데 나는 그래도 문서니까 docs라고 이름 붙여뒀다.

1-3-1. build

빌드는 Dockerfile의 위치를 나타내게 된다.
다른 곳에 올려뒀으면 image라고 적어서 외부 저장소의 이미지를 바로 작성해 두거나 로컬에서 빌드한 이미지를 사용하겠지만
나는 이미 빌드하는 것조차 귀찮기 때문에 그냥 docker compose가 알아서 내 dockerfile 가지고 혼자 이미지 만들어서 띄웠으면 좋겠기에 현재 경로인 . (점)으로 적어뒀다.

1-3-2. container_name

안 적어줘도 알아서 아무 이름 붙여다 두는데, 나중에 exec 하거나 할 때 그거 검색해서 찾고 그러는 거 귀찮아서 미리 blog라고 고정해 뒀다.
맘에 드는 거로 바꿔서 작성해 둬도 된다. 오늘은 안 쓸 거니까

1-3-3. ports

docker run 할 때 -p 옵션 줘서 하던 그거다.
모르겠으면 이전글 다시 보고 오는 게 좋을 거 같다.

1-3-4. stdin_open & tty

가끔 컨테이너 내부에 들어가서 확인하거나 할 때가 있을 수도 있는데 그렇게 하려면 이거 적어둬야 한다.

2. 실행

docker compose up -d

# 구버전일 경우
docker-compose up -d

뒤에 붙여주는 -d 옵션은 뒤에서 알아서 혼자 돌고 있으라는 소리다.
더 정확하고 자세히 알고 싶다면 docker compose 공식 문서를 보자

3. 업데이트

docker compose up -d --build

# 구버전일 경우
docker-compose up -d --build

--build 옵션은 위에서 말한 공식 문서 한 번이라도 보고 왔으면 알 텐데 모르겠으면 진짜 한 번만 보러 가라.
해당 명령어가 실패하면 기존에 돌고 있던 컨테이너가 그대로 돌고 있을 것이고 성공하면 업데이트가 바로 된다.
일단 내가 작성한 dockerfile 기준으론 이렇게만 적어도 업데이트가 될 텐데 다른 상황인 사람들은 down한번 해주고 다시 up 해주면 될 거다.

4. 중단

docker compose down

# 구버전일 경우
docker-compose down

마치며

docker run 해가 지고 이것저것 옵션 붙여가면서 꾸역꾸역 실행하는 거보다는 docker compose 파일 하나 작성해 두고 실행하면 편하고 좋은 거 같다.
팀원들 알려줄 때도 명령어 한 줄만 알려줘도 돼서 편하고

1. vitepress build

이 부분 넘겨도 되는데 안 넘겼으면 좋겠다.
아래 명령어를 통해 markdown 파일들을 정적 파일로 빌드 해줄 수 있다.

vitepress build

혹은 처음 세팅할 때 package.json에 script 추가하기를 선택하여 빌드 명령어 등을 추가했다면 아래 명령어로도 사용 가능하다.

<사용한 패키지 매니저> run docs:build

## ex)
pnpm run docs:build

이렇게 빌드하고 나면 .vitepress/dist 폴더에 정적 파일들이 담겨서 나오게 된다.

2. Dockerfile - build stage 작성

위에서 해줬던 빌드는 사실 Docker 컨테이너 내부에서 실행되어도 상관이 없기 때문에 Dockerfile에서 빌드하는 부분을 작성해 준다.

# Build
FROM node:20-alpine as build
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

WORKDIR /app
COPY . .

RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN apk --no-cache add git
RUN pnpm run docs:build

build stage로 하는 이유는 냅다 모든 과정을 다 이미지로 구워 버리면 이미지의 용량이 쓸데없이 커지게 된다.
build 후 dist 폴더만 deploy stage로 옮긴 후 deploy stage만 이미지로 구워서 쓸 예정이다.

2-1. FROM

docs:build를 실행시켜야하기 때문에 node가 있는 컨테이너에서 작업을 해야 한다.
그래서 node:20-apline^[3]을 base image로 사용하여 build stage를 만들어준다.

2-2. ENV

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

이 3줄짜리 코드는 node:20-alpine에서 pnpm을 사용하기 위해 작성했다.
관련 내용은 여기서 확인이 가능하다.

Working with Docker | pnpm

It is impossible to create reflinks or hardlinks between a Docker container and the host filesystem during build time.

https://pnpm.io/docker

2-3. WORKDIR

컨테이너 내부의 어느 경로에서 작업을 할지 정하는 부분이다.
보통 /app에서 한다.

2-4. COPY

컨테이너에 Dockerfile이 위치한 곳의 파일을 복사해 갈 때 사용한다.

COPY <외부 경로> <컨테이너 내부 경로>

# vitepress 위치가 루트에 있다면
COPY . .

# vitepress 위치가 `docs` 폴더에 있다면
COPY ./docs .

나는 COPY . . 이라고 작성했으니 있는 파일 다 들고 가라고 한 것이다.
여기서 불필요한 파일(ex. node_module, dist, README.md, ... )은 굳이 들고 갈 필요가 없으니 .gitignore 파일을 만들어 주듯이 .dockerignore을 통해 제외해 준다.

node_modules
*.log
.DS_Store
.idea
.temp
.vite_opt_cache
.vscode
pnpm-global
build
cache
dist
temp
examples-temp
license
README.md

2-5. RUN

RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile

dependencies 들을 설치해 주는 부분이다.

RUN pnpm install

이렇게만 작성해도 될 텐데 뭐 이렇게 어렵게 작성해 뒀냐고 한다면
docker image를 만들 때마다 처음부터 패키지를 install 할거였으면 pnpm이니 yarn 을 쓸 이유가 없다.
그래서 캐시된 패키지도 사용해서 쓰기 위해 이렇게 작성했다.

RUN apk --no-cache add git

vitepress의 lastUpdate 옵션을 사용하기 위해 git을 설치하는 곳이다.
lastUpdate 안 쓸 거면 안 적어도 되고 2-1. FROM에서도 node:20-slim 사용해도 된다.

RUN pnpm run docs:build

드디어 빌드하는 부분이다.
빌드를 하게 되면 컨테이너 내부에 /app/.vitepress/dist 경로에 빌드가 되어있을 것이다. 이제 배포하기 위한 정적 파일이 준비되었다.

3. Dockerfile - deploy 작성

이제 빌드된 파일을 배포하기 위한 배포용 stage를 만들어 볼 것이다.

# Deploy
FROM nginx:alpine as deploy

COPY --from=build /app/.vitepress/dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

3-1. FROM

정적 html, css, js 및 asset들을 전달하기 위한 웹서버가 필요하다.
nginx로 할 거다.

nginx:alpine 이미지를 베이스 이미지로 사용한다고 작성하고 시작해 보겠다.

3-2. COPY

아까 빌드했던 dist 파일을 deploy stage로 들고 오는 부분이다.

COPY --from=build /app/.vitepress/dist /usr/share/nginx/html

아까는 dockerfile이 존재하는 root에서 파일을 들고 왔지만 --from=build 옵션을 통해 build stage에서 파일을 들고 오게 된다.
nginx의 root 경로인 /usr/share/nginx/html에 dist폴더의 내용을 다 옮겨주도록 하자.

nginx 설정 또한 컨테이너 빌드 할때마다 바뀔 테니 프로젝트 root든 어디에 default.conf라고 nginx 설정 파일을 만들어서 deploy stage로 들고 오도록 하자.

COPY default.conf /etc/nginx/conf.d/default.conf

아래 코드는 내가 사용한 nginx 설정 파일이다.
vitepress 공식 문서의 여기서 들고 왔다.
rss 파일은 .xml 안 보이게 하고 싶어서 따로 /rss로 들어오면 /rss.xml을 전달해 주도록 살짝 수정해 줬다.

server {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    listen 80;
    server_name _;
    index index;

    location / {
        # content location
        root /usr/share/nginx/html;

        # exact matches -> reverse clean urls -> folders -> not found
        try_files $uri $uri $uri/ =404;

        # non existent pages
        error_page 404 /404;

        # a folder without index raises 403 in this setup
        error_page 403 /404;

        # adjust caching headers
        # files in the assets folder have hashes filenames
        location ~* ^/assets/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    location = /rss {
        root /usr/share/nginx/html;
        try_files /rss.xml =404;
        default_type application/rss+xml;
        add_header Content-Type application/rss+xml;
        add_header X-Content-Type-Options nosniff;
    }
}

3-3. EXPOSE

EXPOSE 80

도커 컨테이너 내부에서 열린 포트를 host에서도 쓸 수 있게 해주는 부분이다.
이거 안 넣어두면 말짱 도루묵이니 작성해서 80 포트 오픈해 주도록 하자.

3-4. CMD

CMD ["nginx", "-g", "daemon off;"]

CMD는 해당 컨테이너가 수행하게 될 실행 명령어를 작성하는 부분이다.
컨테이너가 최종적으로 수행할 부분이니 RUN이랑 혼동하지 말자.
우리는 nginx 띄울 거니까 nginx 시작 명령어 작성해 주면 될 거 같다.

4. 완성된 Dockerfile

# Build
FROM node:20-alpine as build
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

WORKDIR /app
COPY . .

RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
RUN apk --no-cache add git
RUN pnpm run docs:build

# Deploy
FROM nginx:alpine as deploy

COPY --from=build /app/.vitepress/dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

5. 이미지 굽기 & 실행

5-1. 이미지 생성

docker build -t <이미지 이름> .

# ex)
docker build -t blog .

맨 마지막 . (점) 빼먹지 말도록 하자.
build 관련 추가 옵션 및 명령어는 공식 문서 확인하는 거로~

5-2. 실행

docker run -it -p <원하는 포트>:80 <이미지 이름>

# ex)
docker run -it -p 80:80 blog

run 관련 추가 옵션 및 명령어는 공식 문서 확인하는거로~

6. 마치는 글

Docker compose를 통해서 실행하고 싶다면 다음 포스트를 확인하거나 내 블로그 github 가서 긁어가면 된다.
서버 없는 사람들을 위해서 어차피 정적 파일밖에 없는 vitepress 파일들을 굳이 서버에 안 올리고 github page에 action을 통해서 main 브랜치에 push 될 때 배포되도록 하는 방법 역시 작성을 해둘 생각이다.

1. 하는 방법

아래 코드 처럼 expose에 함수를 넣어주기만 하면 된다. 그럼 사용은 가능하다.
(typescript에서는 조금 더 해줘야 한다.)

...
<script setup lang="ts">
import { ..., defineExpose } from 'vue'
...

function something() {
  console.log('to do')
}

defineExpose({ something })
</script>
...

<script>
defineComponent({
  method: {
    ...
    somthing: function () {
      console.log('to do')
    },
    ...
  },
  ...
  expose: ['something'],
  ...
})
</script>

2. 사용법

위에서 작성한 Component를 Child 컴포넌트라고 하고 시작하겠다.

<template>
  <Child @click="onClick" />
</template>

<script setup lang="ts">
import Child from 'src/components/path/to/ChildComponent.vue'

const ChildRef = ref<typeof Child>()

function onClick() {
  ChildRef.value?.something()
  // 이러면 console에 `to do`라고 나올 거임
}
</script>

이렇게 작성하면 실행은 될거다.

그런데 문제가 생겼다. 아주 빅 이슈다.

something이라는 method가 자동완성도 안되고 마우스를 얹어봐도 any라고만 나온다.
lint가 함수가 존재하는지 여부도 몰라서 ? 붙이라고 뭐라고 한다.
내가 기대한 건() => void인데...
멋이 없다.. 팀원들도 내가 만든 컴포넌트를 사용하면서 expose된 함수가 뭔지 모를거다...

3. 멋 생성

애초에 import 저렇게 해오는 거부터 멋이 없다. 저거 먼저 해결해 보자.
컴포넌트를 그냥 냅다 파일 경로로 들고오지 말고 깔끔하게 좀 쓰자.

export { default as Child } from './ChildComponent.vue'

이렇게 Child 컴포넌트가 있는 폴더에 index.ts 하나 만들어서 export 해주자.

...
<script setup lang="ts">
import { Child } from 'src/components/path/to'

...
</script>
...

이런 느낌으로 import 해 올 수 있다. 벌써 멋있다. 하지만 이 글을 작성하게 된 이유인 내가 만든 멋있는 함수의 타입이 any라고 나오는 문제가 남아있다. 위 코드처럼 작성해도 여전히 타입을 찾지 못한다.

index.ts를 이렇게 수정해 주자

import { default as Child } from './ChildComponent.vue'

type Child = InstaceType<typeof Child>

export { Child }

이제 Child 컴포넌트를 사용하는 부모 vue 파일에서도 코드를 약간 수정해 준다.
(typeof 라고 작성해준거 제거)

<template>
  <Child @click="onClick" />
</template>

<script setup lang="ts">
import Child from 'src/components/path/to/ChildComponent.vue'

const ChildRef = ref<typeof Child>()  
const ChildRef = ref<Child>()  

...
</script>

이제 자동 완성도 잘 되고 타입 툴팁도 잘 뜨고 멋있다. 위에 index.ts에서 Child컴포넌트의 alias로 타입을 알려주었기 때문에 가능하다.

항상 멋있게 코드를 작성하자

1. PerformanceNavigationTiming

이거 쓰면 다 해결됨

window.performance.getEntriesByType('navigation')

2. 사용법

우리는 바로 전 화면의 타입을 봐야하니 위 코드에서 이렇게 type만 가져온다.

window.performance.getEntriesByType('navigation')?.[0]?.type

2-1. navigate

a태그나 location.href로 넘어왔거나 아래 3개의 경우가 아니면 이거다.

2-2. reload

내가 원하던거다. 새로고침으로 페이지에 들어왔을때 이거로 나온다.

2-3. back_forward

뒤로가기로 페이지에 오면 이거로 나온다.

2-4. prerender

다음 라우팅을 위해 페이지 리소스가 필요할 수 있다는 힌트를 브라우저에게 전달해서 가져올때는 navigate가 아니라 prerender라고 나온다. 사전 렌더링 때는 이거로 나온다는 뜻이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

• 아래 나오는 친구들 모두 원래의 배열은 변형하지 않는다.

1. Map

arr.map(callback(currentValue[, index[, array]])[, thisArg])

공식 문서에는 이렇게 설명하고 있다.
저거보고 이해하는 사람은 이 글 안 보고 나가도 될 거 같다.

Map 메소드는 배열은 반복하여 현재 값, 현재 값의 인덱스, 돌고 있는 배열을 콜백으로 돌려준다.
그리고 콜백의 리턴된 값으로 새 배열을 만들어준다.

const temp = [
  { id: 1, name: '홍길동', age: 20 },
  { id: 2, name: '고길동', age: 30 },
  { id: 3, name: '둘리', age: 10 },
  { id: 4, name: '햄토리', age: 40 },
  { id: 5, name: '루피', age: 50 },
]

// 이렇게 작성하거나
const newArr = temp.map((item, index) => {
  return item.id
})

// 화살표 함수니까 굳이 중괄호해서 return 하지 말고 이렇게도 가능하다.
const newArr = temp.map((item, index) => item.id)

console.log(newArr) // [1,2,3,4,5]

temp는 변경되지 않는다.

2. Filter

arr.filter(callback(element[, index[, array]])[, thisArg])

filter도 크게 다르지 않다.
똑같이 현재 값, 현재 값의 인덱스, 돌고 있는 배열을 콜백으로 돌려준다.
콜백의 리턴 값이 true인 것만 모아서 배열로 만들어준다.

const temp = [
  { id: 1, name: '홍길동', age: 20 },
  { id: 2, name: '고길동', age: 30 },
  { id: 3, name: '둘리', age: 10 },
  { id: 4, name: '햄토리', age: 40 },
  { id: 5, name: '루피', age: 50 },
]
const newArr = temp.filter((item, index) => {
  // item의 age가 20보다 작거나 같으면 true 리턴
  return item.age <= 20
})

console.log(newArr) // [{ id: 1, name: '홍길동', age: 20 }, { id: 3, name: '둘리', age: 10 }]

3. Reduce

arr.reduce(callback[, initialValue])

얘는 공식 문서를 보면 솔직히 좀 특이하게 생기긴 했다.

누산기, 현재 값, 현재 값의 인덱스, 돌고 있는 배열을 콜백으로 돌려준다. 보통 숫자 배열 전부 더할 때 나배 열에 중복 값을 제거하여 사용할 때 쓸 수 있다.

const temp1 = [1, 2, 3, 4, 5]
const temp2 = [
  { id: 1, name: '홍길동', age: 20, type: 'history' },
  { id: 2, name: '고길동', age: 30, type: 'babyDooly' },
  { id: 3, name: '둘리', age: 10, type: 'babyDooly' },
  { id: 4, name: '햄토리', age: 40, type: 'hemtaro' },
  { id: 5, name: '루피', age: 50, type: 'onepiece' },
]
const newArr1 = temp1.reduce((acc, cur) => acc + cur)
const newArr2 = temp1.reduce((acc, cur) => acc + cur, 10) //초기값을 지정해줄 수도 있다.
const newArr3 = temp.reduce((acc, current, index) => {
  if (acc.findIndex((type) => type === current.type) === -1) {
    // acc안에 같은 값이 없을때만 acc에 추가
    acc.push(current.type)
  }

  return acc // 꼭 acc를 리턴 해줘야한다. 리턴 된 결과가 다음에 acc에 들어가서 사용됨.
}, [])

console.log(newArr1) // 15;
console.log(newArr2) // 25;
console.log(newArr3) // ['history', 'babyDooly', 'hemtaro', 'onepiece'];

4. ForEach

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

배열 안 만들어 주는 거 빼면 map이랑 같다. forEach 메소드는 배열은 반복하여 현재 값, 현재 값의 인덱스, 돌고 있는 배열을 콜백으로 돌려준다. for문 대신해서 멋있어 보이게 쓸 수 있을 거 같다.

const temp = [
  { id: 1, name: '홍길동', age: 20 },
  { id: 2, name: '고길동', age: 30 },
  { id: 3, name: '둘리', age: 10 },
  { id: 4, name: '햄토리', age: 40 },
  { id: 5, name: '루피', age: 50 },
]
const newArr1 = []
const newArr2 = []

for (const i = 0; i < temp.length; i++) {
  newArr1.push(temp[i].id)
}

temp.forEach((item, index) => {
  newArr2.push(item.id)
})

console.log(newArr1) // [1,2,3,4,5]
console.log(newArr2) // [1,2,3,4,5]

5. find

arr.find(callback[, thisArg])

find는 현재 값, 현재 값의 인덱스, 돌고 있는 배열을 콜백으로 돌려준다. 정말 고마운 친구다. 배열 안에서 조건에 맞는 첫 번째 요소를 리턴해준다.

const temp = [
  { id: 1, name: '홍길동', age: 20 },
  { id: 2, name: '고길동', age: 30 },
  { id: 3, name: '둘리', age: 10 },
  { id: 4, name: '햄토리', age: 40 },
  { id: 5, name: '루피', age: 50 },
]

const newElement = temp.find((item, index) => item.id === 2)

console.log(newElement) // { id: 2, name: '고길동', age: 30 }

1. 참고

https://v2.ko.vuejs.org/v2/guide/components

컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

https://v2.ko.vuejs.org/v2/guide/components

일단 공식 문서를 보자. 항상 공식 문서를 먼저 확인하자.
저거 새창으로 열고 뒤로가기 눌러도 좋다.

2. 화면

일단 제일 중요한 건 화면이다.
일단 뭐가 보여야 재밌으니 화면부터 들어가겠다.
Template, Setup, Render 이렇게 3곳 중 한 군대를 골라서 화면을 만들어줄 수 있다.

2-1. template

제일 익숙한 html로 짤 수 있다.
pug 언어로도 가능하다. ( 이 포스트에선 다루지 않는다 )

<template>
  <!-- 여기에 html 짜면 화면에 나온다 -->
  <div></div>
</template>

<script setup></script>

<template>
  <!-- 여기에 html 짜면 화면에 나온다 -->
  <div></div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {},
})
</script>

딱 봐도 Optional API는 옛날 Vue2 시절을 못잊은 사람들을 위해 남겨둔거처럼 보인다.
옛날에 data, create, method 넣던곳에 setup 하나만 넣고 끝낼 수 있다.
어짜피 composition api랑 별반 차이 없으니 render 빼고는 composition api 기준으로만 작성하려고 한다.
typescript, javascript 파일에서 컴포넌트 만들 사람들은 optional api 말고는 선택지가 없다.

2-2. render

vue3에서 vue2와 문법이 바뀐 녀석이다.
바뀌어 봐야 createElement를 param으로 넘겨주던걸 h 함수를 import 해오는 식으로 밖에 변경된건 없다.
vue 2 render function

Render Functions & JSX — Vue.js

Vue.js - The Progressive JavaScript Framework

https://v2.vuejs.org/v2/guide/render-function

h 함수를 vue에서 임포트 해와서 코드를 짤 수 있다.
쓸 때 template은 지우고 써야 한다. 걔가 우선순위가 더 높다.

h 함수는 React의 createElement와 매우 유사하다. 라고 해봐야 react에서 createElement 써본 사람 몇 없다는건 말 안해줘도 알거 같다.

<script>
import { defineComponent, h } from 'vue'

export default defineComponent({
  setup() {},
  render() {
    return h(
      'div',
      {
        // 어트리뷰트
      },
      () => [
        // 하위 컴포넌트
      ],
    )
  },
})
</script>

근데 우리는 vue3니까

2-3. setup

여기서도 할 수는 있다. 근데 보통 여기서는 사용할 데이터를 선언해야 해서 잘 안 쓴다. 알아만 두자
진짜로 쓰고 싶으면 template과 render는 지우고 사용해야한다.
근데 웬만해선 여기선 render 하지 말고 template에서 하자
문법은 render와 같이 h 함수를 임포트 해와서 쓴다.

<script>
import { defineComponent, h } from 'vue'

export default defineComponent({
  setup() {
    return h(
      'div',
      {
        // 어트리뷰트
      },
      () => [
        // 하위 컴포넌트
      ],
    )
  },
})
</script>

setup에서는 기존 vue2에서 하던 data, create, method, ... 등의 라이프사이클과 state, method 등을 js, ts 파일에서 작성하듯이 작성할 수 있게 해준다.

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'

// data에서 변수 선언 하던거 이런 느낌으로 바뀜
const temp = ref('')

onBeforeMount(() => {
  // create랑 똑같이 마운트 되기 전에 호출함.
})
</script>

<script>
import { defineComponent, ref, onBeforeMount } from 'vue'

export default defineComponent({
  setup() {
    // data에서 변수 선언 하던거 이런 느낌으로 바뀜
    const temp = ref('')

    onBeforeMount(() => {
      // create랑 똑같이 마운트 되기 전에 호출함.
    })

    return {
      temp,
    }
  },
})
</script>

Optional과 Composition 둘다 setup이 있지만 Composition은 return 안해주고 선언만 해도 template에서 쓸 수 있다.

더 뭐 보고 싶은게 있다면 공식 문서를 보거나 댓글로 질문 남겨주시면 답변 달아드립니다.

3. 컴포넌트 사용

컴포넌트를 만들어 놔도 불러오지 않으면 화면에 뿌릴 수 없다.
전체적으로 사용하는 컴포넌트는 전역으로 처리하고 아닐 경우에 아래 코드처럼 하나하나 import 해와서 사용해주면 된다.

<template>
  <ChildComponenet />
</template>

<script setup lang="ts">
import { defineComponent } from 'vue'
import ChildrenComponent from './ChildrenComponent.vue'
</script>

<script>
import { defineComponent } from 'vue'
import ChildrenComponent from './ChildrenComponent.vue'

export default defineComponent({
  component: {
    ComponenetVue,
  },
  setup() {},
})
</script>

4. Slot

https://vuejs.org/guide/components/slots

Vue.js

Vue.js - The Progressive JavaScript Framework

https://vuejs.org/guide/components/slots

prop으로 냅다 모든걸 보내버릴 생각 말고 slot도 활용을 해주자.

<template>
  <div>
    <slot>
      <!-- default -->
    </slot>
    <slot name="content">
      <!-- custom name -->
    </slot>
  </div>
</template>

<template>
  <ComponentVue>
    <!-- 여기에 적으면 컴포넌트 안에 default slot에 적힌다 -->

    <template #content>
      <!-- 여기에 적으면 컴포넌트 안에 content slot에 적힌다 -->
    </template>
  </ComponentVue>
</template>

<template>
  <ComponentVue>
    <!-- 여기에 적으면 컴포넌트 안에 default slot에 적힌다 -->

    <template v-slot:content>
      <!-- 여기에 적으면 컴포넌트 안에 content slot에 적힌다 -->
    </template>
  </ComponentVue>
</template>

이렇게 컴포넌트 안에 원하는 위치에 따로 커스텀이 가능하다.
컴포넌트의 재사용을 늘릴 수 있다.

h 함수 쓸 때도 slot 사용이 가능하다.

children을 쓰는 곳에 그냥 h 함수나 h 함수의 배열을 쓰면 기본적으로 default 슬롯에 들어가게 된다.
따로 슬롯을 명시하여 사용하면 RawChildren 인터페이스가 아닌 RawSlots 인터페이스로 잡히게 된다.

h(
  ComponentVue,
  {
    // 어트리뷰트
  },
  {
    default: () => [
      h( ... ),
    ],
    content: () => [
      h( ... ),
      h( ... ),
    ]
  }
)

슬롯명: () => h( ... ) 형태로 사용하면 vue JSX에서도 슬롯이 사용 가능하다.

1. 자주 발생하는 오류

fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights and the repository exists.

이거 때문에 고생해서 오는 사람 많을 거 같다.
얘도 똑같이 따라 해 주면 고쳐질 수도 있다. ( 아닐 수도 있다 )

2. Remote 확인

일단 확인부터 하자

git remote -v

실행하고 나면 보통 아래처럼 2줄 정도 뜬다.

origin	https://github.com/leteu/leteu.git (fetch)
origin	https://github.com/leteu/leteu.git (push)

여기서  1번처럼 오류가 난다면 https 가 아니라 http 라고 적혀 있어서 그런 게 대부분일 거라 생각한다.
아니라면 url이 변경되었거나 뭐 그런 거다

2. Remote URL 변경

git remote ser-url <remote 이름 (ex. origin)> <git 주소>

이거면 웬만해선 다 될 거다.
<remote 이름>에 url을 명령어 마지막에 작성하는 <git 주소>로 바꿔준다.

3. Remote name 변경

git remote rename <원래 이름> <바꿀 이름>

<원래 이름>을 <바꿀 이름>으로 바꿔준다. 기존 저장소 이름 바꾸고 새 저장소를 origin으로 바꾸고 싶을 때 쓸 수 있다.

4. Remote 추가

git remote add <remote 이름> <git 주소>

<remote 이름>으로 remote를 하나 더 만들어 준다.

5. Remote 삭제

git remote remove <remote 이름>

위 명령어를 실행하면 로컬에서 <remote 이름> 리모트를 삭제한다.
원격 저장소 지워지는 거 아니니까 걱정 말자.

Vue를 사용하다 보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨주거나 반대로 하위에서 상위로 올려 받아야 하는 경우가 있을 수 있습니다.

2. 간단 요약

3. Props

예시)

<ChildComponent :custom-prop="value" />

<template>
  {{ customProp }}
</template>

<script>
...
props: {
	customProp: {
    type: String,
		default: () => '',
    required: false,
    validator: (val) => true,
  }
}
...
</script>

컴포넌트의 props에서 키을 지정한 뒤 부모 컴포넌트에서 키에 맞는 값을 보내주는 식으로 사용한다.
props는 배열로 작성하여 키값을 텍스트만으로도 지정할 수 있다.

props: ['key1', 'key2']

하지만 이렇게 작성할 경우 키에 대한 타입이 명확하지 않아 협업시 문제가 생길 수 있다.

typescript를 사용할 경우에는 Vue3 기준으로

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    key1: {
      type: Array as PropType<타입>,
    }
  },
  ...
})

이런 식으로 PropType을 불러와 사용해주면 된다.

2023.02.24 추가) Composition API setup에서의 활용을 안적고 올렸길래 추가

<template>...</template>

<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
  customProp: {
    type: String as PropType<'hihi'>,
    default: () => 'hihi',
    required: false,
    validator: (val) => val === 'hihi',
  },
})
</script>

4. Emit

Emit은 하위의 자식 컴포넌트에서 다시 상위인 부모 컴포넌트로 값을 보내줄 때 사용한다.

예시)

<!-- 부모 컴포넌트 -->
<template>
  <ChildComponent @update:text="(val) => (text = val)" />
</template>

<script>
...
data(){
	return {
    	text: '',
    }
}
</script>

<!-- 자식 컴포넌트-->
<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  ...
  emit: [ 'update:text' ],
	created(){
    	this.$emit('update:text', '테스트 텍스트');
	},
  ...
})
</script>

<!-- 자식 컴포넌트-->
<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  ...
  emit: [ 'update:text' ],
	setup(props, { emit }) {
    emit('update:text', '테스트 메시지');
  }
  ...
})
</script>

2023.02.24 추가) setup에서의 활용을 안적고 올렸길래 추가

<template>...</template>

<script lang="ts" setup>
import { PropType } from 'vue'

// 이렇게 하나
const emit = defineEmits(['update:text', 'update:src'])
// 이렇게 하나
const emit = defineEmits({
  'update:text': (txt: string) => txt,
  'update:src': (src: string) => src,
})
// 이렇게 하나 같음
const emit = defineEmits<{
  (e: 'update:text', txt: string): void
  (e: 'update:src', src: string): void
}>()

const emitText = () => {
  emit('update:text', 'text')
}

const emitSrc = () => {
  emit('update:src', 'src')
}
</script>

5. 번외 ( Vuex, Pinia )

만약 동일 선상에 컴포넌트끼리 data를 주고 받으려면 A 컴포넌트에서 상위 컴포넌트로 Emit 하고 상위 컴포넌트에서 B 컴포넌트로 prop으로 넘겨주고 이러한 번거로운 작업이 생겨 버립니다.

이를 해결해주는것이 Store이고 좀 더 편하게 사용할 수 있도록 만들어진 라이브러리가 Vuex, Pinia 등이 있습니다.

Vuex와 Pinia는 이번 포스팅에선 언급만 하고 넘어가고 후에 자세하게 풀어보도록 하겠습니다.

https://v2.ko.vuejs.org/v2/guide/state-management

상태 관리 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

https://v2.ko.vuejs.org/v2/guide/state-management

1. 공식 사이트

https://quasar.dev/

Quasar Framework - Build high-performance VueJS user interfaces in record time

Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both.

https://quasar.dev/

Vuetify 와는 다르게 문서가 좀 더 깔끔하고 상냥한 거 같다. 상단에 컴포넌트의 설명을 검색도 가능하게 해 준 뒤 예제들을 종류별로 다 뿌려두었다. Vuetify는 직접 태그를 추가하며 확인해보는 것에 비해 Quasar는 필요한 걸 바로 확인하고 소스를 긁어 갈 수 있어서 좋았다.

2. Quasar Cli

Quasar는 전용 cli를 지원한다.
Vue 초기 세팅을 못하는 사람이라도 cli를 쓰면 빠르게 세팅이 가능하다.
기본적으로 Typescript와 Vuex, vue-router 등을 지원하고 전역 함수와 전역 스타일을 정리할 수 있게 따로 정리를 해두었다.

기본적으로 SPA(싱글 페이지 애플리케이션)으로 동작하지만 Electron을 사용하여 프로그램으로 빌드하거나 Cordova나 Capacitor를 통해 앱으로 빌드할 수 있다.
PWA도 지원하여 웹을 간단하게 앱으로 만들어버릴 수도 있다.
서버사이드 랜더링 역시 지원하고 있다.

우선 npm 명령어를 통해 전역으로 Quasar를 설치해준다.
( Quasar는 yarn으로 하길 원하지만 나는 npm이 편하다. )

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

cli를 설치한 뒤 프로젝트를 세팅할 폴더에 가서 quasar create <폴더명>을 해준다.

quasar create <폴더명>

eslint나 typescript 등을 선택해주고 css의 전처리기 등등을 선택해주고 나면 기초적인 세팅이 끝난 Vue 프로젝트가 생성된다.

vue.conf.js 대신 quasar.conf.js가 있다. 여기서 퀘이사 cli를 사용하며 필요한 설정, 빌드 타입 등을 설정해줄 수 있다.

quasar.conf.js에 framwork에 lang을 ko-kr로 설정해야 언어가 한국어로 나온다. 달력이 영어로 나오길래 한번 찾아봤었다.

3. 전용 Directive

유용한 Directive도 지원한다.

다 살펴 보진 않았지만 Close Popup은 조건에 따라 QMenu나 QDialog 등의 Quasar가 지원하는 팝업 컴포넌트를 Close (hide) 처리 할 수 있다.

Scroll도 스크롤이 가능한 엘리먼트에 사용하면 스크롤 했을때 Event를 바로바로 받아 볼 수 있다.

Thouch 들은 마우스 뿐만 아니라 모바일에서도 옆으로 넘기거나 꾹 누르는 효과등을 처리해 줄 수 있다.

4. 레이아웃 빌더

https://quasar.dev/layout-builder

Layout Builder | Quasar Framework Tool to build Quasar layouts. Configure the layout parts then export the code. quasar.dev

따로 레이아웃 빌더도 지원하고 있다. 입맛에 맞춰서 메인 레이아웃을 만들어 사용할 수 있다. Export Layout을 누르면 template 코드를 복사할 수 있는 화면이 나온다.

5. 커뮤니티

Vue를 하다보면 질문 사항이 생겨도 검색해 봤을 때 잘 안 나오거나 어떻게 검색해야 할지 모를 때가 있을 수 있다. Quasar는 디스코드 커뮤니티를 운영하고 있는데 한국어 채널이 있긴 하지만 한국어 채널에서 활동하는 사람은 잘 없다. 영어로 질문글 올리면 Quasar 개발자들이나 유저들이 반나절 내외로 답변해준다. 뭐 안되는거 있다고 올리면 codeSandBox 링크 주면서 이런 식으로 수정해라 하고 답변해줄 때도 있다.

https://discord.com/invite/5TDhbDg

6. Quasar 1년 써본 후기

cli 지원 해주는게 엄청 편했다. Vue 깡통 프로젝트 생성해서 모듈을 하나하나 직접 집어넣는 거도 한 번쯤은 해보는 게 좋겠지만 귀찮으니 다 해주는 게 편하다. Vite 유행하니 babel 대신에 Vite로 빌드할 수 있게 해주기도 하고 초기 세팅을 대신 해주는게 가장 큰 장점인 거 같다. 디자인도 Material Design을 따라가기 때문에 호불호도 적다.

Vue를 아예 처음하는 사람이라면 추천한다. 물론 처음부터 한번 싹 세팅해보는 게 좋지만 그럴 시간이 없을 때 쓰기 좋은 거 같다. 다른 프래임워크는 컴포넌트 하나하나에 중심을 줬다면 Quasar는 전체적인 소스를 줘버리기 때문에 그대로 복사해서 붙여 넣으면 크게 어려운 게 없는 거 같다.

1. Watch

그냥 주소만 바꿔서 나가는 경우일 때 사용할 수 있다.
사용하긴 제일 쉽지만 별로 맘에 드는 방법은 아니다.
새로고침 시엔 라우터가 변경되는 게 아니라 확인이 불가해서 동작하지 않는다.

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(
  () => route,
  (to, from) => {
    /* 라우트 변경 감지시 여기가 실행됨 */
  },
  {
    deep: true,
  },
)
</script>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data(){
    return { ... }
  },
  ...

  watch: {
    '$route': function(to, from) {
      // 라우트 변경이 감지되면 여기 실행됨
    }
  },

  ...
})
</script>

• setup에서 route 쓰려면 위 코드처럼 useRoute 불러와서 써주면 된다. ( router는 useRouter )

2. BeforeRouteLeave

라우트 컴포넌트의 내부 가드이다. ( 어려운 말로 썼지만 그냥 vue-router 쓴 컴포넌트이다 )

BeforeRouteLeave 가드를 사용하면 장점이 어떠한 처리를 한 후에 next함수를 통해 라우트를 이동시켜 버릴 수 있다.
사용자가 가려고 하는 라우트에 권한을 체크해서 next()를 하는 식으로 사용하면 좋다.
단점으론 새로고침을 할 경우엔 라우터가 변경되지 않기 때문에 체크하지 못하고 창을 닫는 경우에도 마찬가지이다.

<script>
...
beforeRouteLeave(to, from, next) {
  // to 어디로 가려고 하고
  // from 어디에서 왔고
  // 처리 다 끝나고 next(); 로 이동 가능하다.
}
...
</script>

next 함수는 아규먼트로 아래 예제처럼 사용 가능하다.

next('/') // '/' 주소로 이동한다.
next(from.path) // 왔던 주소로 돌아간다.

3. beforeunload Event

사이트를 나가려고 할 때 정말 나가시겠습니까? 하고 뜨는 알림 창이다.
창 닫기를 할 경우나 새로고침을 할 경우 경고를 띄워줄 수 있다.
비동기 처리가 끝나고 창이 닫히게는 안 되는 거 같지만 창을 닫기 직전에 임시저장 처리 등을 해줄 수 있다.

function leave(event) {
  event.preventDefault()
  event.returnValue = ''
}

onMounted(() => {
  window.addEventListener('beforeunload', leave)
})

onBeforeUnMount(() => {
  window.removeEventListener('beforeunload', leave)
})

이렇게만 하면 알림 창이 나오긴 나온다.

문제는 나가기 버튼을 누른 후에 뭔갈 할 수가 없다.
api를 쏴보려고 해도 빛에 속도로 나가 지더라...

ES6부터 도입된 문자열이다.
백틱 ( ` )을 사용한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

위 문서를 기반으로 포스팅한 글이다.
블로그만 보지 말고 공식 문서도 한번 읽어보면 좋겠다.

2. 줄 바꿈

기존 문자열은 \n과 같은 거로 줄 바꿈 해야 했지만 이젠 그냥 엔터 치고 줄 바꿈 하면 그대로 들어간다.

기존

const temp = '줄바꿈\n줄바꿈'

백틱 사용

const temp = `줄바꿈
줄바꿈`

3. 변수 사용

기존엔 문자열 따옴표 사이사이마다 변수와 플러스(+)의 향연이었지만 이젠 더 이쁘게 사용할 수 있다.
이전엔 띄어쓰기 같은 경우에도 문자열에 넣어주고 더해줬지만 이젠 사이사이마다 ${}로 변수를 넣어줄 수 있다.

기존

const age = 21
const gender = '남'
const nickname = 'leteu'
const temp = '별명: ' + nickname + ' / 나이: ' + age + ' / 성별: ' + gender

백틱 사용

const age = 21
const gender = '남'
const nickname = 'leteu'
const temp = `별명: ${nickname} / 나이: ${age} / 성별: ${gender}`

4. Dom 생성시

자바스크립트에서 Dom Element를 생성시 html 문자열을 짜야하는 상황이 있을 수 있다.
그때도 유용하게 쓸 수 있다.

<!-- index -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    <script src="index.js"></script>
  </body>
</html>

기존

/* index.js */

let temp = ''
temp += '<h3>박스</h3>'
temp += '<div>'
temp += '<span>텍스트</span>'
temp += '</div>'

document.getElementById('box').appendChild(temp)

백틱 사용

/* index.js */

const temp = `
  <h3>박스</h3>
  <div>
    <span>텍스트</span>
  </div>
`
document.getElementById('box').appendChild(temp)