Atelier BiCute

티스토리 자체 광고 도입 2일차 후기

BiCute — Thu, 29 Jun 2023 08:00:24 +0900

2023년 06월 27일부터 개별 티스토리 본문 내에 티스토리 자체 광고가 신설되었습니다.

말이 좋아 자체 광고 신설이지 시작 전부터 말이 많았는데 시작되고 나서는 이런저런 문제까지 생겨버려 기념으로(?) 관련 글이나 한번 남겨봅니다.

이 블로그는 아직 개인적인 의견이나 잡다한 이야기는 잘 안적는 편이었고, 어지간하면 그러려니 하고 넘어갈텐데 이렇게 글까지 적는 건 내가 이리도 좋아하던 티스토리가 운영을 어지간히도 그지같이 해대고 있는 모습을 보아하니 답답해서입니다.

어떤 점이 문제인가?

① 남들이 모르게 공지를 하기 시작

자기들도 뻔히 욕먹을 짓이라는 걸 알고 있다는 듯이, 처음부터 당당하게 행동하지를 못했습니다.

운영 정책 사항이면 매우 중요한 것일 텐데도, 티스토리 공식 공지 페이지의 메인화면 어디에도 보여주고 있지 않습니다.

어떻게든 게시물을 검색하며 기껏 찾아서 봐야 하도록 말이죠.

또한 신규 게시물을 작성하는 것이 아닌, 기존의 공지내용을 수정하는 방식으로 내용을 변경하기 시작했습니다.

일단 내용은 적어는 놓지만 새로운 내용이 없었다는 듯 티는 내지 않는 방식으로요.

메인화면 어디에도 보이지 않는 공지 / 5월 게시물을 수정해서 내용을 추가하는 방식으로 공지를 작성

이것뿐이면 그냥 이번에 어쩌다 보니 카테고리가 안 맞았었고, 특별한 의도 없이 동일한 내용이니 저렇게 공지를 했다고 넘어갈 수도 있었습니다만...

② 마음에도 없는 소리를 하기 시작

자신들의 이득을 위해 유저들에게 거짓으로 기만하기 시작합니다.

물론 좋은 의도로 뭔가 일을 시작했지만 그게 좋지 않은 방향으로 끝날수는 있습니다.

이번에 티스토리는 다음과 같은 내용을 이야기했었습니다.

우선 이를 해결하기 위한 결과가 어떻게 되었는지 보도록 합시다.

상단 광고 뷰 / 하단 광고 뷰

무분별한 광고로 다른 유저의 사용성을 해치거나, 가독성이 떨어지는 등의 문제가 발생하고 있습니다. 이를 해결하기 위해...

광고가 2중으로 겹쳐 나와 본문을 볼 수조차 없고, 내 블로그지만 이게 뭐 하는 페이지인가 싶네요.

무분별한 광고를 막고자 없던 광고를 더 때려 박았다?

가독성이 떨어져 본문을 아예 안 보일 정도로 저 멀리 밀어버렸다?

누가 봐도 말도 안 되는 소리라는 걸 알 것입니다.

정말 좋게 개선된다고 해봐야 내 광고를 제거하고 자기들 광고를 넣는 건데 그럼 티스토리가 말한 무분별한 광고와 가독성 문제는 뭐가 달라진단 말인지. 그저 블로그 운영자가 받던 수익이 모두 티스토리에게 넘어갈 뿐입니다.

재주는 곰이 부리고 돈은 되놈이 번다고 했던가...

③ 공지를 숨겨버리기 시작

하지만 얼마 후, 티스토리 메인화면에 언제나 나오던 공지사항을 숨겨버립니다.

모든 탭을 다 확인해 봐도 지금까지 몇 년이나 잘 나오던 공지사항이 보이지 않게 되었습니다.

오늘 내 컴에 뭔가 오류가 있나? 싶어서 어떻게든 찾아서 들어가 봤더니 저 혼자만의 문제가 아니라 의도적으로 숨긴 게 맞더군요.

박살난 민심 1

④ 사용자들에게 피해가 가기 시작

이 내용은 직접 겪은 내용은 아니니 정확한 판단은 못하겠지만, 이번 광고 덕분에 이미 블로그 운영자들에게도 상당한 피해가 간 거 같습니다.

*저 같은 경우에는 블로그를 여러 개 운영하다 보니 기본적으로 몇만 단위 뷰가 발생해서 직접 광고를 클릭한다거나 누가 와서 어느 정도 광고 클릭하며 어그로를 끌어도 경고를 먹지 않는데, 조회수가 아직 얼마 없는 초보 블로거들이나 소규모 블로그에서는 작은 실수라도 경고를 받는 경우가 많습니다.

박살난 민심 2

대충 내용을 정리해 보면 저렇게 위와 같이 광고를 2중으로 때려 박다 보니 구글 쪽에서 무분별한 광고 표출로 인하여 블로그 관리자에게 광고게재 제한을 먹여버렸고, 그로 인하여 특정 기간 동안은 수익을 낼 수 없는 상황이 되었습니다.

잘 들어오던 수익이 갑자기 막혀버리면 당연히 분노하겠죠.

그것뿐이면 다행이지만, 내 광고는 막혔는데 티스토리의 광고는 계속해서 나오고 있다?

또 본인은 광고를 사용하지 않는데, 티스토리의 광고가 이미 나오고 있다거나...

⑤ 애드센스 수익 창출 및 광고 규정 위반

위 과정과는 별개로 애초에 애드센스에서는 광고 수익을 제3자 파트너에게 배분하는것을 금지하고있습니다.

본문에서도 이러한 경우는 매우 드물다고 했으니 불가능까진 아니지만...

출처: https://support.google.com/adsense/answer/1348725?hl=ko&sjid=16486267046165910621-AP

그로인하여 지금 모든 티스토리 블로그는 일반 사용자에게는 보이지 않지만 개발자 모드로 확인할 경우 콘솔에 경고 안내가 계속해서 나타나고 있습니다.

이건 뭐...

+ 나도 추가

⑥ 광고제한 문제는 티스토리 문제가 아니고 니들 문제라고 그렇게 말해오더니, 몇일이 지나고나니 이제는 구글님들에게 문의한 상태라고한다. 이제서야...?

자꾸 공지 은근슬쩍 추가함...

실제로 겪은 피해가 있는가?

아무리 다수라도 누가 지었을 수도 있고 선동일수도 있는 카더라 통신 말고, 실제로 내가 피해를 본 게 있는가?

사실 이거 없었으면 글 안 적었어요.

생각난 김에 난 어떤가 싶어서 봤더니, 광고가 시작된 어제를 기점으로 아주 그냥 개박살이 났습니다.

운영 중인 블로그 중 하나의 자료입니다. 보통 자고 일어나 아침에 보면 조회수가 4천 정도는 되는데 어제는 광고가 송출되기 전까지 시간이 있었으나 엄청 깎인 편이었고(아마 광고가 시작된 고난 후겠죠?), 오늘은 순수하게 광고가 시작되고난 이후의 페이지 뷰입니다.

'처음에는 이놈들 돈 엄청 빼가겠구나, 적게는 20%, 많게는 30% 정도는 영향을 받겠지? 그럼 몇십만 원이야... 어휴...'

정도까지는 생각했습니다.

페이지뷰 실환가...

그런데 거의 90%가 깎였네요???

・・・・・・ 조금 심각해졌습니다.

이 수치면 100만원씩 들어오던 수익이 10만원으로, 200만원씩 들어오던 수익이 20만원으로 줄어들게 됩니다.

월급을 받던 사람에게 기초수급 금액의 반값도 안되는 돈을 쥐어주면서 살라고 하면 살수 있을까요...?

폰으로 애드센스를 확인한 김에 폰으로 블로그도 한번 들어와 봤는데...

본문이 안 보이네요. 더욱 심각해졌습니다...

해결책은?

① 유료화

요즘 다들 이런 서비스를 공짜로 서비스를 해야 한다고 생각하는 경우는 잘 없습니다.

당연히 티스토리가 유료화를 선언한다면 필요한 사람들은 당연하게도 호응해 줄 것입니다.

저 같은 경우도 계속 무료로 운영하기엔 힘들 거 같은데 한 달에 8,000원에서 20,000원 정도가 적당하지 않을까? 라는 생각은 이전부터 했었고, 이번에 수익 때간다고 했을때 한달에 크게 잡아 8만~20만 원까지도 수익을 때 가더라도 그래도 티스토리만의 장점이 꽤 있다 보니 어느 정도 넘어갈까 생각을 하고 있었습니다만...

② 전체 수익의 몇%를 플렛폼 홀더가 취하는 식의 정식 계약을 했었다면 어땠을까?

플렛폼 홀더쯤 된다면 유튜브나 다른 여러곳처럼 분명 정상적인 좋은 방법이 있었을것이다.

지금처럼 광고를 뽑아내는 코드를 중복으로 2개 넣지 않아도 되는 깔끔한 방법이...

이 부분은 그냥 구글같은 대형사를 상대하기 귀찮아서 임시방편으로 일을 처리하다보니 이렇게 됐다고밖에 보이지 않습니다.

정말 카카오스럽다 (출처: 카카오)

가보지 않은길을 가는건 괜찮은데, 남들이 가지 않는길은 가지말자. (출처: 카카오)

어쨌거나 이번엔 좀 타격이 많이 크네요.

이미 일방문객 3만 이상의 몇몇 분들은 워드프레스로 이전을 시작하고 있던데...

저도 떠나야하나 고민이 많아집니다.

이 블로그는 상관없는 내용이지만요...:)

※ 이 블로그는 지금까지 주2~3회정도의 포스팅을 목표로 헀지만,

티스토리의 이러한 운영 덕분에 앞으로는 비정기적으로 생각날때마다 글을 작성할 예정입니다.

Asustor NAS에서 Vue.js 앱 호스팅: 서버 측 라우팅 설정하는 방법

BiCute — Mon, 19 Jun 2023 08:00:33 +0900

Asustor NAS를 웹 서버로 사용하고 있다면, Vue.js 앱을 호스팅하여 사용자에게 제공할 수 있습니다.

그러나 Vue.js 앱은 클라이언트 측에서 라우팅을 처리하기 때문에, 서버 측에서도 라우팅을 지원해야 합니다.

일반적으로 웹 서버는 요청된 경로에 해당하는 파일이나 디렉토리를 반환하는데, Vue.js 앱의 클라이언트 측 라우팅과 웹 서버의 동작이 일치하지 않아서 문제가 발생할 수 있습니다

예를들면, 메인 페이지를 거치지 않고 app.myasustor.com/switch와 같은 하위 경로로 직접 접근하는 경우 웹 서버는 해당 경로를 찾지 못하고 "페이지를 찾을 수 없음"과 같은 오류를 반환합니다.

이 문제를 해결하기 위해서는 서버 측에서도 라우팅 설정을 추가하여 모든 경로를 Vue.js 앱으로 리다이렉트해야 합니다.

이렇게 하면 클라이언트 측에서 라우팅을 처리하면서도 서버 측에서도 올바른 파일을 반환할 수 있습니다.

Asustor NAS에서 Vue.js 앱을 호스팅하는 경우,

기본적으로 Apache 웹 서버를 사용하므로 .htaccess 파일을 통해 라우팅 설정을 조정할 수 있습니다.

.htaccess 파일은 Apache 웹 서버에서 디렉토리별로 웹 사이트의 설정을 수정할 수 있는 파일입니다.

이 글은 Asustor NAS에서 Vue.js 앱을 호스팅하면서 서버 측 라우팅 설정을 추가하는 방법에 대한 글입니다

Asustor NAS에서 서버 측 라우팅 설정을 하려면 다음 단계를 따르면 됩니다:

1. Asustor NAS에 접속합니다.
2. 프로젝트의 루트 디렉토리에 .htaccess 파일을 생성하거나 이미 존재한다면 엽니다.
3. .htaccess 파일에 아래의 코드를 추가합니다:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

위의 설정은 Vue.js 앱의 라우팅을 처리하기 위한 표준적인 방법입니다.

이 설정은 모든 요청을 index.html로 리다이렉트하여 Vue Router로 처리하도록 지시합니다.

이렇게 설정하면 모든 경로를 Vue.js 앱에서 정상적으로 라우팅할 수 있게 됩니다.

4. .htaccess 파일을 저장하고 종료합니다.

위의 단계를 완료하면 Asustor NAS에서 Vue.js 앱의 서버 측 라우팅 설정이 완료됩니다. 이제 메인 페이지 이후에도 /switch와 같은 하위 경로로 직접 접근할 수 있습니다. 이 설정을 통해 사용자들은 메인 페이지를 거치지 않고도 원하는 경로로 직접 이동할 수 있습니다.

자동 커밋 메시지 생성을 위한 aicommits

BiCute — Thu, 15 Jun 2023 08:00:14 +0900

매번 commit 메시지를 뭘 적어야할지 망설이는 그대들을 위한 Open AI 사용법.

aicommits

aicommits는 AI로 git 커밋 메시지를 작성하는 CLI 입니다.

사용 방법은 공식 페이지를 통해 그대로 따라만 해도 되지만, 조금 더 간단히 정리해 보았습니다.

필요한 것

① OpenAI의 API keys를 사용하기때문에 공식 페이지에서 API Keys를 발급 받을 필요가 있습니다.

API 키 발급은 이곳에서 >

② 이전에는 무료로 사용 가능했지만, 2023.04.01 이후라면 지불 방법에 대한 설정이 필요합니다.

Billing 페이지에서 신용카드를 등록해서 결제가 가능하도록 할 필요가 있습니다.

※ 저의 경험으로 판단해보자면 AI를 이용한 commit 1회당 약 $0.005048 정도 사용되는것 같습니다.

사용 방법

(1) "aicommits" 패키지를 설치해야 합니다.

(Node.js는 기본적으로 설치되어있다고 가정)

npm install -g aicommits

Mac의 경우 설치가 안된다면 앞에 sudo를 붙여주세요

sudo npm install -g aicommits

(2) 다음으로, OpenAI에서 발급한 API 키를 사용하여 "aicommits"를 설정해야 합니다.

터미널에서 다음 명령어를 실행하여 API 키를 설정하세요

aicommits config set OPENAI_KEY=********************

위 명령어에서 ******************** 부분에 발급받은 API 키를 입력해야 합니다.

(3) 이제 자동 커밋을 위한 별칭(alias)을 설정해봅시다.

터미널에서 다음 명령어를 실행하세요

git config --global alias.ac '!git add -A && aicommits -a'

이 명령어는 git ac라고 입력하면 자동으로 변경된 파일들을 스테이징하고, 커밋하고, 푸시해줍니다.

이제 모든 설정이 완료되었습니다. 변경된 내용을 커밋하고 푸시하려면 터미널에서 다음 명령어를 사용하세요

git ac

AI가 작업한 내용을 기반으로 커밋 메시지를 제안해 줍니다.

Yes를 선택합니다.

이렇게 하면 "aicommits" 패키지가 실행되어 커밋 메시지를 자동으로 생성하고, 변경된 내용을 스테이징하고 커밋하고, 푸시까지 완료해줍니다.

No를 선택하게 되면 새로운 메시지를 제안받을 수도 있습니다.

이제 매번 커밋 메시지를 작성하는 수고를 덜 수 있게 되었습니다.

"aicommits" 패키지를 사용하면 더욱 효율적으로 Git 작업을 처리할 수 있습니다.

주의사항

설정을 통해 어느정도 커밋 메시지의 제약은 가능하지만,

회사나 업무에서 사용할 경우 그 그룹만의 커밋 방식이 있을테니 주의하시기 바랍니다.

저는 개인용 작업에서 사용중인데 매우 만족중입니다.

가볍게 훑어보는 Vue 3

BiCute — Fri, 9 Jun 2023 08:00:00 +0900

#3. Vue 3 기본 문법

• Template 문법

• 디렉티브(Directive)

• 컴포넌트(Component)

▷ 새로운 컴포넌트를 생성하고 추가하는 방법

▷ 데이터를 전달할 때는 props

▷ 사용자 지정 이벤트(Custom Event)

▷ 데이터를 전달하는 또 다른 방법 Slot

• 라우터(Router)

▷ 페이지 전환하기 (라우터 설치부터 사용까지)

▷ 게시물마다 번호를 달아주자 (라우터 파라미터)

• 상태 관리(State Management)

▷ Pinia (Vue 상태관리 라이브러리)

#4. Vue 3 고급 문법

• Composition API

▷ Composition API 사용방법
  • Teleport
  • Suspense
  • Reactive와 Ref
  • ToRefs
  • Watch

▷ computed, methods, watch 정리

▷ 라이프사이클 훅(Lifecycle hooks)

#6. Vue 3 실전 예제

• 간단한 CRUD 앱 만들기
• 인증 기능 추가하기
• 실시간 채팅 앱 만들기

#7. Vue 3 스타일 가이드

BiCute — Wed, 7 Jun 2023 08:00:27 +0900

# 스타일 가이드란?

스타일 가이드는 코드를 작성하는 방법과 규칙을 정해놓은 문서입니다.

스타일 가이드를 사용하면 다음과 같은 장점을 얻을 수 있습니다.

일관성 유지: 스타일 가이드는 모든 개발자가 동일한 코드 스타일을 따르도록 강제합니다. 이렇게 하면 코드가 일관성 있게 유지되므로 읽기 쉬워집니다.
버그 감소: 일관성 있는 코드 스타일을 따르면 실수를 줄일 수 있습니다. 예를 들어, 잘못된 인덴트, 괄호 누락 등의 문제가 발생할 가능성이 줄어듭니다.
코드 유지보수성 향상: 스타일 가이드는 코드를 더 읽기 쉽고 이해하기 쉽도록 만듭니다. 따라서 코드의 유지보수성이 향상되고 변경이 쉬워집니다.
코드 리뷰 용이: 스타일 가이드는 코드 리뷰를 용이하게 만듭니다. 코드가 일관성 있게 작성되면 리뷰어가 코드를 더 쉽게 이해할 수 있으며, 코드 변경에 대한 의견을 쉽게 제시할 수 있습니다.
개발 시간 절약: 스타일 가이드는 코드 작성에 대한 규칙을 제공하기 때문에 개발자는 이를 준수하기만 하면 됩니다. 이렇게 하면 코드 작성 시간을 줄일 수 있습니다.

따라서, 스타일 가이드를 사용하면 개발자들 간에 일관성 있게 코드를 작성할 수 있고, 코드 유지보수성을 높일 수 있으며, 개발 시간을 절약할 수 있습니다.

# Vue의 스타일 가이드

Vue.js 에서 코드 스타일 가이드는 공식적으로 제공되고 있습니다.

이 가이드는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 돕는 것이 목적입니다.

여기에는 주요한 스타일 가이드 규칙이 포함되어 있습니다.

1. 컴포넌트 이름은 항상 여러 단어인 kebab-case를 사용해야합니다.

// Bad
Vue.component('mycomponent', {
  // ...
})

// Good
Vue.component('my-component', {
  // ...
})

2. 컴포넌트 옵션은 가능한 한 알파벳 순서대로 정렬되어야 합니다.

// Bad
export default {
  name: 'HelloWorld',
  components: {
    ChildComponent,
    AnotherChildComponent,
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    },
    handleInputChange() {
      console.log('Input changed!')
    },
  },
}

// Good
export default {
  name: 'HelloWorld',
  components: {
    AnotherChildComponent,
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    },
    handleInputChange() {
      console.log('Input changed!')
    },
  },
}

3. Prop 이름은 항상 camelCase로 작성되어야 합니다.

// Bad
props: {
  'first-name': String,
}

// Good
props: {
  firstName: String,
}

4. 컴포넌트의 인스턴스를 생성하기 위해 new 키워드를 사용하지 마세요.

// Bad
const vm = new Vue({
  el: '#app',
  // ...
})

// Good
const vm = Vue.createApp({
  // ...
}).mount('#app')

5. 데이터 속성은 가능한 한 초기값을 제공해야합니다.

// Bad
data() {
  return {
    message: undefined
  }
}

// Good
data() {
  return {
    message: '',
  }
}

이외에도 많은 규칙이 있지만, 이러한 규칙은 개발자들이 코드를 작성할 때 가독성과 일관성을 유지하는 데 도움을 줄 수 있습니다.

자세한 내용은 아래 의 Vue.js 공식 홈페이지에서 참조할 수 있습니다.

공식 홈페이지 스타일 가이드: https://vuejs.org/style-guide/

※ 스타일 가이드는 어디까지나 권장일뿐, 반드시 따라야 할 필요는 없습니다.

Apple WWDC23 요약

BiCute — Tue, 6 Jun 2023 03:30:35 +0900

Apple WWDC(WorldWide Developers Conference)

Apple이 매년 6월경 캘리포니아에서 개최하는 대규모 개발자 회의.

WWDC23 - Code new worlds.

멋진 코딩 신세계.

15형 MacBook Air with M2

15.3" 리퀴드 레티나 디스플레이 (최대 밝기 500 nits)

M2 프로세서

4가지 색상 / 맥세이프 충전 포트

두께: 11.5mm / 무게: 1.5kg

18시간의 배터리 타임

6개의 스피커 사운드 시스템

팬리스(무소음) 디자인
8-Core CPU / 10-core GPU
1080p 카메라

색상: 미드나이트, 스타라이트, 실버, 스페이스 그레이

가격: $1,299 부터 시작 / 교육용은 $1,199 부터 시작

오늘부터 주문

6월 13일 화요일부터 고객, Apple Store 위치 및 Apple 공인 대리점에 도착하기 시작

Mac Studio / Mac Pro Apple Silicon

Mac Studio

고대역폭 HDMI를 탑재 (최대 8K 해상도와 240Hz 프레임 속도를 지원)

M2 Ultra를 통해 최대 6개의 Pro Display XDR을 지원

Wi-Fi 6E / Bluetooth 5.3

전면: USB-C 포트 2개와 SD 카드 슬롯

뒷면: Thunderbolt 4 포트 4개, 10Gb 이더넷 포트, 향상된 HDMI 포트 및 USB-A 포트 2개

M2 ULTRA Spec

Mac Studio 가격:

$1,999 부터 시작 / 교육용: $1,799 부터 시작

Mac Pro 가격:

Mac Pro(타워 인클로저): $6,999 부터 시작 / 교육용: $6,599 부터 시작

Mac Pro(랙 인클로저): $7,499 부터 시작 / 교육용: $6,999 부터 시작

오늘부터 주문
6월 13일 화요일부터 고객, Apple Store 위치 및 Apple 공인 대리점에 도착하기 시작

iOS17

FaceTime은 오디오 및 비디오 메시지, 반응을 추가하고 Apple TV로 확장

새로운 모습과 메시지에 대한 대규모 업데이트 

AirDrop 및 NameDrop으로 더 쉽게 공유

자동 수정 및 받아쓰기 개선으로 더 지능적인 입력 제공

StandBy는 iPhone이 충전되는 동안 한 눈에 알아볼 수 있는 정보를 표시

+ @

iPadOS

개인화되고 아름다운 잠금 화면 경험

더 강력한 위젯

더욱 쉬워진 PDF 작업

향상된 커뮤니케이션 도구

건강 앱이 iPad로

+ @

MacOS

대화형 위젯으로 더 많은 작업 수행

더 스마트한 화상 회의 경험

놀라운 새 화면 보호기

하이브리드 및 원격 Pro 워크플로 향상

+ @

watchOS

새롭게 추가된 시계 페이스
사이클링
하이킹
정신 건강
시력 건강

Apple Vision Pro

직장과 가정에서 앱을 위한 무한한 캔버스

매력적인 엔터테인먼트 경험

몰입형 환경

생생한 추억

혁신적인 운영 체제 및 사용자 인터페이스

+ @

내년 초 발매 예정

#6. Vue 3 실전 예제

BiCute — Mon, 5 Jun 2023 08:00:57 +0900

# 간단한 CRUD 앱 만들기

우선 CRUD는 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)의 약자로 데이터베이스나 서버에서 데이터를 다룰 때 가장 많이 사용하는 기능입니다.

이번 예제에서는 간단한 할 일 목록을 다루는 CRUD 기능을 구현해 볼 것입니다

(1) 먼저 src/components 폴더 안에 TodoList.vue 컴포넌트를 만듭니다.

<template>
    <div>
        <h2>할 일 목록</h2>
        <ul>
            <li v-for="(todo, index) in todos" :key="index">
                {{ todo }}
                <button @click="deleteTodo(index)">삭제</button>
                <button @click="editTodo(index)">수정</button>
            </li>
        </ul>
        <div>
            <input type="text" v-model="newTodo" />
            <button v-if="!editing" @click="addTodo">추가</button>
            <button v-if="editing" @click="cancelEdit">취소</button>
            <button v-if="editing" @click="updateTodo">수정</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            todos: ["Vue.js 배우기", "할 일 목록 만들기", "CRUD 기능 추가하기"],
            newTodo: "",
            editing: false,
            editedIndex: null,
        };
    },
    methods: {
        addTodo() {
            if (this.newTodo) {
                if (this.editing) {
                    this.updateTodo();
                } else {
                    this.todos.push(this.newTodo);
                    this.newTodo = "";
                }
                this.editing = false;
                this.editedIndex = null;
            }
        },
        deleteTodo(index) {
            this.todos.splice(index, 1);
        },
        editTodo(index) {
            this.newTodo = this.todos[index];
            this.editing = true;
            this.editedIndex = index;
        },
        updateTodo() {
            if (this.newTodo && this.editedIndex !== null) {
                this.todos.splice(this.editedIndex, 1, this.newTodo);
                this.newTodo = "";
                this.editing = false;
                this.editedIndex = null;
            }
        },
        cancelEdit() {
            this.newTodo = "";
            this.editing = false;
            this.editedIndex = null;
        },
    },
};
</script>

이 컴포넌트는 할 일 목록을 표시하고, 새로운 할 일을 추가하거나 삭제하는 기능을 가지고 있습니다. data 속성에서 todos 배열에 기본 할 일 목록을 설정하고, newTodo 변수에 새로 추가할 할 일을 저장합니다. methods에서는 addTodo 함수를 통해 새로운 할 일을 todos 배열에 추가하고, deleteTodo 함수를 통해 선택한 할 일을 삭제합니다.

(2) 이제 src/views 폴더 안에 HomeView.vue 컴포넌트를 만듭니다.

<template>
  <div>
    <TodoList />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList.vue';

export default {
  name: 'HomeView',
  components: {
    TodoList,
  },
};
</script>

이 컴포넌트는 TodoList.vue 컴포넌트를 불러와서 HomeView 컴포넌트 안에 표시합니다.

(3) 마지막으로 src/router/index.js 파일을 열고, 다음과 같이 코드를 수정합니다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
  ]
})

export default router

이 코드는 라우터 모듈을 초기화하고, 라우트를 정의합니다. / 경로에서 HomeView 컴포넌트를 렌더링하도록 설정합니다.

# 인증 기능 추가하기

Vue.js에서 인증(Authentication) 기능을 구현하기 위해서는 일반적으로 토큰 기반 인증 방식을 사용합니다. 이 방식은 사용자가 로그인하면 서버에서 토큰을 발급하고, 이후 요청에서는 발급된 토큰을 사용하여 사용자를 인증하는 방식입니다.

이를 구현하기 위해서는 먼저 로그인 폼을 구현하고, 로그인 요청을 처리하는 API를 작성해야 합니다. 그리고 로그인 요청이 성공하면, 서버에서 발급한 토큰을 클라이언트에 저장하고, 이후 요청에서는 토큰을 포함하여 보내야 합니다. 또한, 토큰이 만료된 경우에는 새로운 토큰을 발급받아야 합니다.

다음은 Vue.js에서 인증 기능을 구현하는 예제입니다.
실제로 서버와 통신을 하는것이 아니기에 사용자 정보를 하드코딩하여 인증 기능을 구현하고, 사용자 정보가 배열에서 확인되면 로그인이 가능한 형식으로 작성되어있습니다.

<template>
  <div>
    <h2>로그인</h2>
    <form @submit.prevent="login">
      <div>
        <label>아이디</label>
        <input type="text" v-model="username">
      </div>
      <div>
        <label>비밀번호</label>
        <input type="password" v-model="password">
      </div>
      <button type="submit">로그인</button>
    </form>
    <div v-if="error">{{ error }}</div>
    <div v-else-if="token">토큰: {{ token }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      token: null,
      error: null,
    };
  },
  methods: {
    async login() {
      try {
        // 사용자 정보
        const users = [
          { id: 1, username: 'admin', password: 'admin1234' },
          { id: 2, username: 'user1', password: 'password1' },
          { id: 3, username: 'user2', password: 'password2' },
        ];

        // 사용자 정보 확인
        const user = users.find(u => u.username === this.username && u.password === this.password);
        if (user) {
          // 토큰 발급
          const token = '1234567890';
          this.token = token;
          this.error = null;
          // 토큰을 localStorage에 저장
          localStorage.setItem('token', token);
        } else {
          this.token = null;
          this.error = '아이디 또는 비밀번호가 일치하지 않습니다.';
          localStorage.removeItem('token');
        }
      } catch (error) {
        this.error = error.message;
      }
    },
  },
  mounted() {
    // 페이지가 로드될 때 localStorage에서 토큰을 확인
    const token = localStorage.getItem('token');
    if (token) {
      this.token = token;
    }
  },
};
</script>

위 코드에서는 사용자 정보를 하드코딩하여 users 배열에 저장합니다. 로그인 요청이 들어오면, 배열에서 사용자 정보를 확인하고, 사용자 이름과 비밀번호가 일치하는 경우, 하드코딩된 토큰을 발급하고, 발급된 토큰을 클라이언트에 저장합니다. 이후 페이지가 로드될 때, 저장된 토큰을 확인하고, 토큰이 있을 경우 화면에 토큰을 출력합니다.

실제 애플리케이션에서는 이 부분을 서버에서 처리해야 하며, 데이터베이스와 연동하여 실제 사용자 정보를 확인해야 합니다.

token 또한 하드코딩이 아닌, this.token = data.token 처럼 서버에서 암호화되어 받아온 값을 지정해 줍니다.

# 실시간 채팅 앱 만들기

실시간 채팅을 구현하는 경우에는 일반적으로 서버를 사용하여 구현하는 것이 보다 안정적이고 확장성이 높습니다.

가볍게 만드는 만큼 임시로 localStorage를 활용하여, 서버를 사용하지 않고 채팅을 구현하는식으로 작성해 보았습니다.

다음은 localStorage를 활용하여 실시간 채팅 애플리케이션을 구현한 예제입니다.

<template>
    <div class="chat-container">
        <div class="chat" ref="chat1">
            <div v-if="!username1">
                <h2>사용자1의 이름을 입력하세요</h2>
                <input
                    type="text"
                    v-model="tempUser1"
                    v-on:keyup.enter="updateUser1"
                    placeholder="이름 입력"
                    :disabled="username1" />
                <button @click="updateUser1" :disabled="username1">확인</button>
            </div>
            <div v-else>
                <h2>{{ username1 }}</h2>
                <div v-for="(message, index) in messages" :key="index">
                    <div
                        :class="{
                            'other-message': message.username !== username1,
                            'my-message': message.username === username1,
                        }">
                        <strong>{{ message.username }}:</strong>
                        {{ message.text }}
                    </div>
                </div>
                <form @submit.prevent="sendMessage(username1)">
                    <input
                        type="text"
                        v-model="text1"
                        placeholder="메시지를 입력하세요" />
                    <button type="submit">보내기</button>
                </form>
            </div>
        </div>
        <div class="chat" ref="chat2">
            <div v-if="!username2">
                <h2>사용자2의 이름을 입력하세요</h2>
                <input
                    type="text"
                    v-model="tempUser2"
                    v-on:keyup.enter="updateUser2"
                    placeholder="이름 입력"
                    :disabled="username2" />
                <button @click="updateUser2" :disabled="username2">확인</button>
            </div>
            <div v-else>
                <h2>{{ username2 }}</h2>
                <div v-for="(message, index) in messages" :key="index">
                    <div
                        :class="{
                            'other-message': message.username !== username2,
                            'my-message': message.username === username2,
                        }">
                        <strong>{{ message.username }}:</strong>
                        {{ message.text }}
                    </div>
                </div>
                <form @submit.prevent="sendMessage(username2)">
                    <input
                        type="text"
                        v-model="text2"
                        placeholder="메시지를 입력하세요" />
                    <button type="submit">보내기</button>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            username1: null,
            text1: "",
            username2: null,
            text2: "",
            messages: [],
        };
    },
    methods: {
        updateUser1() {
            this.username1 = this.tempUser1;
        },
        updateUser2() {
            this.username2 = this.tempUser2;
        },
        sendMessage(username) {
            const message = {
                username,
                text: username === this.username1 ? this.text1 : this.text2,
            };
            this.messages.push(message);
            localStorage.setItem("messages", JSON.stringify(this.messages));
            if (username === this.username1) {
                this.text1 = "";
            } else {
                this.text2 = "";
            }
        },
        handleStorage(e) {
            if (e.key === "messages") {
                this.messages = JSON.parse(e.newValue) || [];
            }
        },
    },
    mounted() {
        window.addEventListener("storage", this.handleStorage);
        this.messages = JSON.parse(localStorage.getItem("messages")) || [];
    },
    unmounted() {
        window.removeEventListener("storage", this.handleStorage);
    },
};
</script>
<style scoped>
.chat-container {
    display: flex;
    justify-content: space-between;
    width: 800px;
    margin: 0 auto;
}

.chat {
    width: 45%;
    height: 500px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
}

.other-message {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #eee;
}

.my-message {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e6f2ff;
    text-align: right;
}
</style>

HTML 템플릿에서는 채팅방을 나타내는 두 개의 div를 정의합니다. v-if 지시자를 사용하여 사용자 이름이 없는 경우 이름을 입력 받는 폼을 표시하고, 사용자 이름이 있는 경우 채팅을 표시합니다. 이름을 입력 받을 때는 v-on:keyup.enter 지시자를 사용하여 Enter 키를 누르면 updateUser1 또는 updateUser2 메서드가 호출됩니다. 사용자 이름을 업데이트하면 username1 또는 username2 데이터가 갱신됩니다.

sendMessage 메서드는 사용자 이름을 매개변수로 받으며, 메시지를 messages 데이터 배열에 추가합니다. localStorage에 messages 데이터를 저장합니다. 사용자 이름이 username1이면 text1을, username2이면 text2를 사용하여 메시지를 가져옵니다. 마지막으로 사용자 이름이 username1이면 text1을, username2이면 text2를 비웁니다.

handleStorage 메서드는 localStorage에서 messages 데이터를 가져와 messages 배열을 갱신합니다.

이벤트 리스너를 등록하여 localStorage가 갱신될 때마다 handleStorage 메서드가 호출되도록 합니다.

Vue.js 컴포넌트의 라이프사이클 훅을 사용하여 이벤트 리스너를 등록 및 해제합니다.

마운트시 mounted()에서 localStorage에서 messages 데이터를 가져옵니다.

CSS 스타일 시트는 채팅방의 레이아웃과 메시지 스타일을 정의합니다.

각 메시지에 대해 other-message 또는 my-message 클래스를 추가하여 메시지 스타일을 구분합니다.

#5. Vue 3 성능 최적화

BiCute — Fri, 2 Jun 2023 08:00:25 +0900

# 렌더링 최적화

Vue에서 렌더링을 최적화하는 몇 가지 방법은 다음과 같습니다:

(1) 가상 DOM 활용

Vue에서 가상 DOM을 활용하면 실제 DOM을 추상화하여 변경된 부분만 업데이트할 수 있습니다. 아래는 가상 DOM을 사용하여 성능을 개선하는 예시입니다.

<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
  <button @click="shuffle">Shuffle</button>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    shuffle() {
      this.items = this.shuffleArray(this.items);
    },
    shuffleArray(array) {
      // 배열을 셔플하는 함수
      let m = array.length,
          t, i;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }
      return array;
    }
  }
};
</script>

위 코드에서는 key 속성을 사용하여 각각의 li 요소를 고유하게 식별할 수 있도록 하였습니다.

이렇게 하면 Vue가 변경된 부분을 추적하여 성능을 향상시킬 수 있습니다.

(2) 컴포넌트 분할

Vue에서 컴포넌트를 작은 단위로 분할하면 부분적으로 렌더링할 수 있습니다.

아래는 컴포넌트를 분할하여 성능을 개선하는 예시입니다.

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component :items="items" />
    <button @click="shuffle">Shuffle</button>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    shuffle() {
      this.items = this.shuffleArray(this.items);
    },
    shuffleArray(array) {
      // 배열을 셔플하는 함수
      let m = array.length,
          t, i;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }
      return array;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    items: Array
  }
};
</script>

위 코드에서는 ParentComponent와 ChildComponent로 컴포넌트를 분할하여, ChildComponent에서는 items 배열을 렌더링하도록 하였습니다. 이렇게 하면 shuffle 메서드가 호출될 때에도 ChildComponent만 업데이트되므로, 전체 페이지를 다시 렌더링할 필요가 없어서 성능이 향상됩니다.

(3) v-if 대신 v-show 사용

Vue에서 v-if는 조건부 렌더링을 할 때 사용되는데, 컴포넌트를 다시 렌더링하는 과정이 필요하기 때문에 성능이 저하될 수 있습니다.

대신 v-show를 사용하면 CSS를 이용하여 요소를 숨기고 보여줄 수 있어서, 렌더링 성능을 개선할 수 있습니다.

아래는 v-show를 사용하여 성능을 개선하는 예시입니다.

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-show="show">Hello, World!</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

위 코드에서는 v-show를 사용하여 조건부 렌더링을 하였습니다.

이렇게 하면 컴포넌트를 다시 렌더링하는 과정이 필요없어서 성능이 향상됩니다.

(4) 계산된 속성(computed) 사용하기

계산된 속성을 사용하면 템플릿에서 반복적으로 로직을 처리하지 않고, 미리 계산된 값을 재사용할 수 있습니다.

이를 통해 중복 계산을 줄이고, 렌더링 속도를 개선할 수 있습니다.

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

# 로딩 속도 최적화

Vue에서 로딩 속도를 최적화하는 몇 가지 방법은 다음과 같습니다:

(1) Vue 컴포넌트 코드를 비동기적으로 로드하는 방법

사용자가 앱을 처음 로드할 때 모든 컴포넌트를 로드하려고 할 때, 초기 로딩 시간이 길어질 수 있습니다. 이를 개선하기 위해, 컴포넌트 코드를 필요할 때 비동기적으로 로드할 수 있습니다.

const MyComponent = () => import('./MyComponent.vue');

import() 함수를 사용하여 MyComponent.vue 파일을 비동기적으로 로드할 수 있습니다.

이를 사용하면 사용자가 컴포넌트가 필요한 시점에만 로드하도록 할 수 있습니다.

(2) 이미지 최적화

이미지 크기를 최적화하고 이미지를 적절히 압축하여 로딩 속도를 개선할 수 있습니다. 이미지 크기를 최적화하는 방법으로는 이미지 포맷 변경, 이미지 사이즈 조정, 이미지 크롭 등이 있습니다.

<img src="image.jpg" alt="image" width="300" height="200">

(3) 최적화된 라이브러리 사용

라이브러리를 최적화하여 불필요한 부분을 제거할 수 있습니다.

이렇게 하면 파일 크기를 줄이고 로딩 속도를 개선할 수 있습니다. 최적화된 라이브러리는 보통 ***.min.js 형식의 파일 이름을 가지고 있습니다

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>

# 메모리 최적화

Vue에서 메모리 최적화를 위한 몇 가지 방법은 다음과 같습니다:

(1) 메모리 누수 방지

Vue 컴포넌트의 생명주기 훅을 이용하여 메모리 누수를 방지할 수 있습니다. 예를 들어, 이벤트 리스너를 등록할 때 mounted 훅에서 등록하고, unmounted 훅에서 제거할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

<template>
  <div>
    <button @click="startCountdown">Start</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdownInterval: null,
      count: 10
    }
  },
  methods: {
    startCountdown() {
      this.countdownInterval = setInterval(() => {
        this.count -= 1
      }, 1000)
    },
    stopCountdown() {
      clearInterval(this.countdownInterval)
    }
  },
  mounted() {
    window.addEventListener('beforeunload', this.stopCountdown)
  },
  unmounted() {
    window.removeEventListener('beforeunload', this.stopCountdown)
  }
}
</script>

위 예시에서 mounted 훅에서 window 객체의 beforeunload 이벤트에 대한 리스너를 등록하고, unmounted 훅에서 해당 리스너를 제거합니다. 이렇게 함으로써 컴포넌트가 삭제될 때 이벤트 리스너도 함께 제거되므로 메모리 누수가 발생하지 않습니다.

(2) v-cloak 디렉티브의 사용

Vue 애플리케이션이 초기화되는 동안 렌더링 지연이 발생할 수 있습니다.

이 때 v-cloak 디렉티브를 사용하면 초기화되기 전에는 화면에 나타나지 않도록 할 수 있습니다.

예시 코드:

<template>
  <div v-cloak>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

<style>
[v-cloak] {
  display: none;
}
</style>

이 외에도 위에서 언급한 v-if와 v-show의 적절한 사용, watch와 computed 속성의 적절한 사용, v-for를 사용할 때 key 속성 사용 등도메모리 최적화와 성능을 높이는데 도움을 줍니다.

#4. Vue 3 고급 문법

BiCute — Wed, 31 May 2023 08:00:45 +0900

# Composition API

Vue 3에서 새롭게 도입된 Composition API는 Vue.js의 고급 기능 중 하나로, Options API와 달리 코드의 구조화와 재사용성을 높일 수 있습니다.

Composition API는 Vue.js의 함수형 프로그래밍과 React Hooks와 같은 아이디어를 결합하여, 컴포넌트 로직을 보다 작고 독립적인 단위로 분리할 수 있습니다.

아래는 Composition API를 사용하여 구현된 간단한 Counter 애플리케이션 예시입니다.

<!-- Counter.vue -->
<template>
  <div>
    <h1>Counter: {{ counter }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      counter: 0
    });

    const increment = () => {
      state.counter++;
    };

    const decrement = () => {
      state.counter--;
    };

    return { ...toRefs(state), increment, decrement };
  }
};
</script>

위 코드에서는 reactive 함수를 사용하여 state 객체를 생성하고, toRefs 함수를 사용하여 state 객체를 reactive한 ref 객체로 변환합니다. 이후 increment와 decrement 함수를 정의하고, return 문에서 ref 객체와 함수를 합쳐서 반환합니다.

Composition API를 사용하면, Options API보다 더욱 직관적이고 간결한 코드를 작성할 수 있으며, 기능 단위별로 코드를 분리하여 재사용성을 높일 수 있습니다. 또한, reactive, ref, computed, watch 등의 함수를 사용하여 상태와 동작을 정의하므로, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

# Teleport

Vue.js 3에서 도입된 Teleport는 컴포넌트를 DOM의 특정 위치로 이동시키는 기능을 제공합니다. 이 기능은 모달, 드롭다운, 툴팁 등의 UI 컴포넌트에서 유용하게 사용될 수 있습니다.

Teleport를 사용하면, 하위 컴포넌트에서 생성된 DOM 요소를 상위 컴포넌트의 특정 위치로 이동시킬 수 있으며, 이때 하위 컴포넌트는 이전의 위치와 상태를 유지합니다.

아래는 Teleport를 사용하여 모달 창을 구현한 간단한 예시입니다.

<!-- App.vue -->
<template>
  <div>
    <button @click="showModal = true">Show Modal</button>

    <teleport to="#modal">
      <div v-if="showModal" class="modal">
        <h1>Modal Title</h1>
        <p>Modal Content</p>
        <button @click="showModal = false">Close Modal</button>
      </div>
    </teleport>

    <div id="modal"></div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const showModal = ref(false);

    return { showModal };
  }
};
</script>

<style>
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
}
</style>

위 코드에서는 Teleport를 사용하여 모달 컴포넌트를 #modal 위치로 이동시킵니다. 이때, teleport 태그에 to 속성으로 이동시킬 위치를 지정합니다.

모달 컴포넌트는 v-if 디렉티브를 사용하여 showModal 변수에 따라 표시되거나 숨겨집니다. 이때, 모달 컴포넌트는 Teleport를 사용하여 이전 위치와 상태를 유지한 채 #modal 위치로 이동됩니다.

Teleport를 사용하면, Vue.js의 컴포넌트 기반 설계와 함께 UI 컴포넌트를 더욱 유연하게 구현할 수 있습니다.

# Suspense

Vue.js 3에서 도입된 Suspense는 비동기 컴포넌트를 사용할 때, 로딩 상태를 렌더링할 수 있는 기능을 제공합니다. 이 기능을 사용하면, 코드 스플리팅과 같은 최적화 기법을 사용하여 앱의 초기 로딩 속도를 향상시킬 수 있습니다.

Suspense는 템플릿 내부에서 fallback 영역을 지정하여 로딩 상태를 표시하고, 비동기 컴포넌트가 준비되면 해당 컴포넌트를 렌더링하는 방식으로 동작합니다.

아래는 Suspense를 사용하여 비동기 컴포넌트를 로딩하는 예시입니다.

<!-- App.vue -->
<template>
  <div>
    <suspense>
      <template #default>
        <AsyncComponent />
      </template>

      <template #fallback>
        <p>Loading...</p>
      </template>
    </suspense>
  </div>
</template>

<script>
const AsyncComponent = () => import("./AsyncComponent.vue");

export default {
  components: {
    AsyncComponent
  }
};
</script>

위 코드에서는 suspense 태그로 비동기 컴포넌트를 래핑합니다. 이때, fallback 영역을 템플릿으로 지정하여 로딩 상태를 표시합니다. 비동기 컴포넌트는 import 함수를 사용하여 동적으로 로딩됩니다.

Suspense를 사용하면, Vue.js의 컴포넌트 기반 설계와 함께 비동기 컴포넌트를 더욱 쉽게 구현할 수 있습니다. 이를 통해 초기 로딩 속도를 향상시키는 등 앱의 성능을 최적화할 수 있습니다.

# Reactive와 Ref

• Reactive

Vue.js 3에서 도입된 Reactive는 Vue.js의 반응성 시스템을 활용하여, 객체나 배열의 상태를 추적하고 업데이트할 수 있도록 하는 기능입니다.

Reactive는 ref, reactive, computed, watch와 함께 사용하여 데이터의 상태 변화를 감지하고 이를 뷰에 반영할 수 있습니다. 이를 통해 데이터와 뷰가 실시간으로 동기화되어, 뷰의 상태 변화를 쉽게 관리할 수 있습니다.

아래는 Reactive를 사용하여 객체의 상태를 추적하는 예시입니다.

<!-- App.vue -->
<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="incrementAge">Increment Age</button>
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const user = reactive({
      name: "Alice",
      age: 25
    });

    const incrementAge = () => {
      user.age++;
    };

    return { user, incrementAge };
  }
};
</script>

위 코드에서는 reactive 함수를 사용하여 user 객체를 생성하고, name과 age 속성을 추가합니다. 이후 incrementAge 함수를 정의하고, return 문에서 user 객체와 함수를 반환합니다.

user 객체의 속성은 반응성을 가지며, incrementAge 함수에서 user.age++와 같이 속성을 수정하면 해당 속성이 변경되고 이를 사용하는 뷰에 자동으로 반영됩니다.

Reactive를 사용하면, Vue.js의 반응성 시스템을 활용하여 데이터와 뷰를 더욱 효율적으로 관리할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

• Ref

Vue.js 3에서 도입된 Ref는 객체의 속성을 추적하고 수정할 수 있도록 하는 기능입니다. Ref는 reactive와 함께 사용되어, 반응성 있는 데이터를 관리하는 데 유용하게 사용됩니다.

Ref를 사용하면, 객체의 속성을 직접 수정할 수 있으며, 이때 속성 변경이 감지되어 뷰에 자동으로 반영됩니다. 또한, Ref를 사용하여 Vue.js의 반응성 시스템을 우회하여 기본 타입 변수를 관리할 수도 있습니다.

아래는 Ref를 사용하여 숫자를 관리하는 예시입니다.

<!-- App.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};
</script>

위 코드에서는 ref 함수를 사용하여 count 변수를 생성합니다. count 변수의 초기값은 0으로 설정됩니다.

increment 함수에서는 count.value를 사용하여 count 변수의 값을 증가시킵니다.

이때, count.value는 Ref 객체의 속성으로, count 변수가 가리키는 Ref 객체의 값을 반환합니다.

Ref를 사용하면, Vue.js의 반응성 시스템을 활용하여 데이터와 뷰를 더욱 효율적으로 관리할 수 있습니다.

또한, Ref를 사용하여 기본 타입 변수를 관리하면, Vue.js의 반응성 시스템을 우회하여 성능을 향상시킬 수 있습니다.

reactive와 Ref의 차이점, 어떤것을 사용하면 좋은가

reactive와 ref는 모두 Vue.js 3에서 도입된 반응성 시스템을 사용하기 위한 함수입니다.

그러나 두 함수는 다른 방식으로 동작하며, 사용하는 시기와 용도가 다릅니다.

reactive는 객체 또는 배열을 반응성 데이터로 변환합니다.

reactive로 생성한 객체의 속성은 반응성을 가지며, 객체의 속성이 변경될 때 Vue.js의 반응성 시스템을 통해 뷰를 업데이트합니다. 이 때, reactive로 생성된 데이터 객체는 ref 함수를 사용하여 생성된 변수와 달리 .value 프로퍼티를 사용하지 않습니다.

반면, ref 함수는 기본 타입 변수를 반응성 데이터로 변환합니다. ref로 생성한 변수는 .value 프로퍼티를 사용하여 변수의 값을 읽거나 수정할 수 있습니다. ref로 생성한 변수는 reactive 함수를 사용하여 생성한 객체와 달리 Vue.js의 반응성 시스템과 함께 사용할 수 없으며, reactive 함수를 사용하여 객체나 배열을 생성할 때는 ref 함수를 사용하여 기본 타입 변수를 생성하는 것이 일반적입니다.

따라서, 객체나 배열과 같은 참조 타입의 데이터를 반응성 데이터로 관리할 때는 reactive 함수를, 기본 타입 변수를 반응성 데이터로 관리할 때는 ref 함수를 사용하는 것이 좋습니다.

# ToRefs

toRefs는 Vue 3의 Composition API에서 사용되는 함수 중 하나로, 객체를 받아 객체의 프로퍼티들을 각각 ref 객체로 만들어 리턴해줍니다.

toRefs 함수를 사용하면, reactive 객체에서 프로퍼티를 추출하여 각각의 ref 객체로 만들 수 있습니다. 이렇게 생성된 ref 객체들은 이전에 설명한 것과 같이 .value를 사용하여 접근해야합니다.

아래는 toRefs를 사용하는 예시입니다:

import { toRefs, reactive } from 'vue';

const state = reactive({
  person: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  }
});

const refs = toRefs(state.person);

console.log(refs.firstName.value); // John
console.log(refs.lastName.value); // Doe
console.log(refs.age.value); // 30

위 코드에서 toRefs 함수는 person 객체를 받아서, firstName, lastName, age 속성을 ref 객체로 분해합니다.

이렇게 분해한 ref 객체들을 refs 객체에 저장한 후, 템플릿에서 refs.firstName, refs.lastName, refs.age와 같이 사용할 수 있습니다.

# Watch

watch 함수는 reactive 객체나 ref 객체의 변화를 감시하고, 변화가 감지되면 지정된 콜백 함수를 실행하는 함수입니다.

watch 함수는 다양한 형태의 인수를 받을 수 있습니다. 가장 간단한 형태는 watch(source, callback, options)입니다. source는 감시 대상이 되는 reactive 객체나 ref 객체를 지정하고, callback은 속성 값이 변경될 때 실행되는 콜백 함수를 지정합니다. options은 watch 함수의 동작을 설정하는 객체입니다.

아래는 watch 함수를 사용한 예시입니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    const incrementCount = () => {
      count.value++;
    };

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return { count, incrementCount };
  }
};
</script>

위 코드에서는 ref 함수를 사용하여 count 변수를 생성하고, 초깃값을 0으로 설정합니다. incrementCount 함수에서는 count.value를 1 증가시킵니다.

watch 함수에서는 count 변수를 감시하며, 값이 변경될 때마다 콜백 함수가 실행됩니다.

콜백 함수에서는 변경된 값과 이전 값이 인자로 전달됩니다. 콜백 함수에서는 이전 값과 변경된 값의 차이를 이용하여 필요한 로직을 처리할 수 있습니다.

위 코드에서는 간단히 변경된 값을 콘솔에 출력하는 예시를 보여주고 있습니다.

watch 함수는 ref 객체나 reactive 객체에서 속성 값의 변경을 감지하고, 해당하는 로직을 수행할 때 유용하게 사용할 수 있습니다.

아래는 watch 함수를 사용한 또다른 예시입니다:

const count = ref(0);

const handleCountChange = (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} -> ${newVal}`);
};

watch(
  // 첫 번째 인수: 감시할 대상
  count,
  // 두 번째 인수: 대상이 변화할때 실행할 콜백 함수
  handleCountChange
);

위 코드에서는 count 변수를 ref 함수를 사용하여 생성하고, handleCountChange 함수를 정의한 후, watch 함수에서 감시 대상으로 count 변수를 전달하였습니다. 이때, watch 함수에서는 감시 대상을 첫 번째 인수로, 콜백 함수를 두 번째 인수로 전달하였습니다.

따라서, count 변수의 값이 변경될 때마다 handleCountChange 함수가 실행되며, 콘솔에는 count 변수의 이전 값과 최신 값을 출력합니다. 이와 같이 Composition API에서도 watch 함수를 사용하여 감시 대상을 지정하고, 변경 시 실행할 콜백 함수를 등록할 수 있습니다.

#3. Vue 3 기본 문법

BiCute — Mon, 29 May 2023 08:00:44 +0900

# Template 문법

Vue.js에서는 HTML과 유사한 형태의 템플릿 문법을 사용하여 UI를 작성합니다. 템플릿 문법은 Vue.js의 핵심 요소 중 하나이며, 다음과 같은 기능을 제공합니다.

보간(Interpolation): 중괄호({{}})를 사용하여 데이터 값을 표시할 수 있습니다. 이를 통해 Vue.js는 데이터와 UI를 자동으로 동기화할 수 있습니다.
디렉티브(Directive): v- 접두사를 사용하여 Vue.js의 특수한 기능을 사용할 수 있습니다. 예를 들어, v-if 디렉티브를 사용하여 조건부 렌더링을 할 수 있습니다.
이벤트(Event): v-on 접두사를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 예를 들어, v-on:click 디렉티브를 사용하여 클릭 이벤트를 처리할 수 있습니다.
속성(Attribute): v-bind 접두사를 사용하여 HTML 속성을 동적으로 바인딩할 수 있습니다. 예를 들어, v-bind:href 디렉티브를 사용하여 링크의 href 속성을 동적으로 변경할 수 있습니다.
반복(Loop): v-for 접두사를 사용하여 배열의 요소를 반복하여 UI를 생성할 수 있습니다.

아래는 Vue.js의 템플릿 문법을 사용한 간단한 예시입니다.

<div id="app">
  <h1>{{ message }}</h1>
  <button v-on:click="count++">Click me</button>
  <p v-if="count > 0">You clicked {{ count }} times.</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

위 예제에서는 보간, 이벤트, 조건부 렌더링, 반복 등의 기능을 사용하고 있습니다.

Vue.js에서는 템플릿 문법을 사용하여 UI를 작성하고, 데이터와 UI를 자동으로 동기화할 수 있습니다.

# 디렉티브(Directive)

Vue.js에서 디렉티브(Directive)는 v- 접두사를 가지는 특별한 속성으로, Vue.js의 기능을 활용하여 HTML 요소를 제어하고 데이터를 렌더링하는데 사용됩니다.

디렉티브는 Vue.js의 핵심 요소 중 하나이며, 다양한 기능을 제공합니다. 대표적인 디렉티브는 다음과 같습니다.

v-if: 조건부 렌더링을 수행하는 디렉티브로, 지정한 조건에 따라 해당 요소를 표시하거나 숨깁니다.
※ 참고: 조건식 v-if, v-show
v-for: 반복문을 수행하는 디렉티브로, 지정한 데이터 소스를 반복하여 요소를 생성합니다.
※ 참고: 반복문(v-for) 사용하는 방법
v-bind: 데이터를 HTML 속성에 바인딩하는 디렉티브로, 동적으로 속성 값을 변경할 수 있습니다.
v-model: 양방향 데이터 바인딩을 수행하는 디렉티브로, 입력 요소와 데이터를 자동으로 동기화합니다.
※ 참고: 데이터 바인딩하는 방법
v-on: 이벤트 핸들러를 등록하는 디렉티브로, 지정한 이벤트가 발생하면 해당 함수를 실행합니다.
※ 참고: 이밴트 핸들링(v-on)

아래는 Vue.js에서 디렉티브를 사용한 간단한 예시입니다.

<div id="app">
  <p v-if="isDisplayed">Hello, Vue.js!</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <input v-bind:value="message" v-on:input="updateMessage">
  <p>{{ message }}</p>
</div>

위 예제에서는 v-if, v-for, v-bind, v-on 디렉티브를 사용하고 있습니다.

v-if 디렉티브는 isDisplayed 값에 따라 p 요소를 표시하거나 숨깁니다.

v-for 디렉티브는 items 배열의 요소를 반복하여 li 요소를 생성합니다.

v-bind 디렉티브는 message 값을 input 요소의 value 속성에 동적으로 바인딩합니다.

v-on 디렉티브는 input 이벤트가 발생하면 updateMessage 메소드를 실행합니다.

이를 통해 양방향 데이터 바인딩이 수행되며, input 요소와 message 데이터가 자동으로 동기화됩니다.

# 컴포넌트(Component)

Vue.js에서 컴포넌트(Component)는 재사용 가능한 UI 모듈로, HTML, CSS, JavaScript를 포함하는 독립적인 기능 단위입니다. 컴포넌트는 애플리케이션을 더 작고 유지보수 가능한 조각으로 분해하여 코드 재사용성을 높이는데 사용됩니다. Vue.js는 컴포넌트 기반 아키텍처를 기본으로 하며, 다음과 같은 특징을 가집니다.

각각의 컴포넌트는 독립적인 스코프를 가지므로, 이름 충돌을 방지할 수 있습니다.
컴포넌트는 데이터, 이벤트, 라이프사이클 훅 등을 가지며, 이를 통해 컴포넌트 간의 통신과 상호작용을 수행할 수 있습니다.
Vue.js는 전역 컴포넌트 레지스트리를 제공하므로, 애플리케이션 전체에서 사용 가능한 컴포넌트를 등록할 수 있습니다.
Vue.js는 지역 컴포넌트를 통해 필요한 컴포넌트만 로드하여 불필요한 리소스 낭비를 최소화할 수 있습니다.

아래는 Vue.js에서 컴포넌트를 사용한 간단한 예시입니다.

<!-- MyComponent.vue -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <button v-on:click="updateContent">Update Content</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "My Component",
      content: "This is my component"
    };
  },
  methods: {
    updateContent() {
      this.content = "Content updated!";
    }
  }
};
</script>

위 예제에서는 MyComponent.vue 파일에 컴포넌트를 정의하고 있습니다. 컴포넌트는 <template> 요소 내에서 UI를 정의하고, <script> 요소 내에서 데이터와 메소드를 정의합니다. 컴포넌트는 export default로 내보내며, 다른 파일에서 이 컴포넌트를 임포트하여 사용할 수 있습니다.

Vue.js에서는 다음과 같이 컴포넌트를 등록하고 사용할 수 있습니다.

<!-- App.vue -->
<template>
  <div>
    <h1>Welcome to my app!</h1>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    "my-component": MyComponent
  }
};
</script>

위 예제에서는 App.vue 파일에서 MyComponent를 임포트하여 등록하고 있습니다.

등록된 컴포넌트는 <my-component> 태그를 사용하여 App.vue에서 사용할 수 있습니다. 이를 통해 애플리케이션에서 재사용 가능한 UI 모듈을 만들 수 있습니다.

컴포넌트는 다른 컴포넌트 내부에 중첩하여 사용할 수도 있습니다. 이를 통해 컴포넌트의 재사용성을 높이고, 복잡한 UI를 구성할 수 있습니다. 컴포넌트 간의 통신은 데이터와 이벤트를 사용하여 수행됩니다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달되며, 이벤트는 자식 컴포넌트에서 부모 컴포넌트로 전달됩니다. 이를 통해 부모-자식 관계의 컴포넌트 간의 상호작용을 구현할 수 있습니다.

Vue.js는 컴포넌트 기반 아키텍처를 기본으로 하며, 이를 통해 코드의 재사용성과 유지보수성을 높이는데 큰 도움이 됩니다. Vue.js에서는 전역 또는 지역 컴포넌트를 등록하여 필요한 컴포넌트만 로드하여 불필요한 리소스 낭비를 최소화할 수 있습니다. 이를 통해 더 효율적인 애플리케이션을 개발할 수 있습니다.

※ 참고:

새로운 컴포넌트를 생성하고 추가하는 방법

컴포넌트 단위로 스타일 적용하기

# 라우터(Router)

Vue.js에서 라우터(Router)는 SPA(Single Page Application)에서 URL 경로를 사용하여 페이지를 변경하거나 컴포넌트를 로드하는데 사용됩니다. Vue.js는 vue-router 라이브러리를 통해 라우팅 기능을 제공하며, 라우터는 Vue.js의 핵심 요소 중 하나입니다. Vue.js에서 라우터를 사용하면 URL 경로에 따라 다른 컴포넌트를 로드하고 애플리케이션의 네비게이션을 제어할 수 있습니다.

라우터는 Vue.js의 컴포넌트 기반 아키텍처와 잘 결합되어 있으며, 컴포넌트를 라우팅에 사용할 수 있습니다. Vue.js에서 라우팅은 다음과 같은 구성요소로 구성됩니다.

라우터: URL 경로와 컴포넌트 간의 매핑을 관리하는 Vue.js의 핵심 요소입니다.
라우트: URL 경로와 로드할 컴포넌트를 지정하는 구성요소입니다.
컴포넌트: URL 경로에 따라 로드할 Vue.js 컴포넌트입니다.

아래는 Vue.js에서 라우터를 사용한 간단한 예시입니다.

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

위 예제에서는 Vue.js에서 라우터를 정의하고 있습니다. createRouter 함수를 사용하여 라우터를 생성하고, history 객체를 사용하여 브라우저의 히스토리를 관리합니다. routes 배열에는 URL 경로와 로드할 컴포넌트를 지정하여 매핑합니다. 각 라우트는 path, name, component 속성을 가지며, 각각 URL 경로, 이름, 로드할 컴포넌트를 지정합니다.

Vue.js에서는 다음과 같이 라우터를 등록하고 사용할 수 있습니다.

<!-- App.vue -->
<template>
  <div>
    <h1>Welcome to my app!</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

createApp(App).use(router).mount("#app");
</script>

위 예제에서는 App.vue에서 라우터를 사용하고 있습니다. <router-link> 태그를 사용하여 URL 경로를 지정하고, router-view 태그를 사용하여 현재 URL 경로에 맞는 컴포넌트를 렌더링합니다. 이를 통해 애플리케이션에서 라우팅을 구현할 수 있습니다.

Vue.js에서 라우팅을 구현할 때, 라우터에서 지원하는 여러가지 기능을 사용할 수 있습니다. 예를 들어, 동적 URL 매칭, 중첩 라우팅, 프로그래밍 방식 라우팅 등이 가능합니다. 또한, Vue.js에서는 라우터 외에도 상태 관리를 위한 Vuex 라이브러리를 제공합니다. Vuex를 사용하면 컴포넌트 간의 데이터 공유와 상태 관리를 보다 효율적으로 수행할 수 있습니다.

Vue.js에서는 vue-router 라이브러리를 사용하여 라우팅을 구현할 수 있습니다. vue-router는 Vue.js에서 많이 사용되는 라이브러리로, 간단하게 설정할 수 있으며 많은 기능을 제공합니다. 이를 통해 Vue.js에서 라우팅을 구현할 수 있습니다.

※ 참고: 페이지 전환하기 (라우터 설치부터 사용까지)

# 상태 관리(State Management)

Vue.js에서 상태 관리(State Management)는 애플리케이션 전체에서 사용되는 데이터를 관리하는 방법입니다.

상태 관리는 애플리케이션의 규모가 커지고 복잡해질수록 필요한 기능입니다.

Vue의 상태 관리는 Vuex를 사용했었으나, 현재는 공식적으로 Pinia를 사용하라고 권고하고 있습니다.

Pinia는 Vue.js 상태 관리 라이브러리 중 하나입니다.

Vuex와 마찬가지로 상태 관리를 위한 솔루션으로, 컴포넌트 간에 데이터를 공유하고 업데이트하는 데 사용됩니다.

Vuex와 비슷한 기능을 가지고 있지만, 사용하기 더 간단하고 직관적인 API를 제공한다는 점에서 차이가 있습니다.

Pinia는 Vue 3의 Composition API를 기반으로 작성되었으며, 상태 저장소를 쉽게 만들고 액세스 할 수 있는 기능을 제공합니다.

Vuex와는 달리 모듈화된 구성요소를 사용하지 않으며, 훨씬 더 직관적이고 단순한 방식으로 상태를 관리할 수 있습니다.

Pinia는 다음과 같은 주요 개념으로 구성됩니다.

Store: 상태를 저장하고 관리하는 곳입니다.
State: 상태 값입니다.
Getter: 상태 값을 계산하는 메서드입니다.
Action: 상태를 변경하는 메서드입니다.

다음은 Pinia를 사용하는 간단한 예제 코드입니다.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

이 예제 코드에서는 useCounterStore라는 이름의 저장소를 정의하고 있습니다.

이 저장소에는 count라는 상태 값과 doubleCount라는 게터, 그리고 increment라는 액션 메서드가 포함되어 있습니다.

이제 이 저장소를 사용하려면 컴포넌트에서 다음과 같이 가져와 사용하면 됩니다.

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from './store'

export default {
  setup() {
    const counter = useCounterStore()

    return {
      counter,
    }
  },
}
</script>

이렇게 컴포넌트에서 useCounterStore()를 호출하면 store 객체를 반환합니다.

이 store 객체를 통해 count나 doubleCount 등의 상태 값을 읽어오거나 increment 등의 액션 메서드를 호출할 수 있습니다.

이것이 Pinia의 기본적인 사용 방법입니다.

※ 참고: Pinia (Vue 상태관리 라이브러리)

Atelier BiCute

티스토리 자체 광고 도입 2일차 후기

어떤 점이 문제인가?

① 남들이 모르게 공지를 하기 시작

② 마음에도 없는 소리를 하기 시작

③ 공지를 숨겨버리기 시작

④ 사용자들에게 피해가 가기 시작

⑤ 애드센스 수익 창출 및 광고 규정 위반

실제로 겪은 피해가 있는가?

해결책은?

Asustor NAS에서 Vue.js 앱 호스팅: 서버 측 라우팅 설정하는 방법

자동 커밋 메시지 생성을 위한 aicommits

aicommits

필요한 것

사용 방법

주의사항

가볍게 훑어보는 Vue 3

#1. Vue 소개

#2. Vue 3 설치 및 설정

#3. Vue 3 기본 문법

#4. Vue 3 고급 문법

#5. Vue 3 성능 최적화

#6. Vue 3 실전 예제

#7. Vue 3 스타일 가이드

#7. Vue 3 스타일 가이드

# 스타일 가이드란?

# Vue의 스타일 가이드

Apple WWDC23 요약

Apple WWDC(WorldWide Developers Conference)

WWDC23 - Code new worlds.

15형 MacBook Air with M2

Mac Studio / Mac Pro Apple Silicon

M2 ULTRA Spec

iOS17

iPadOS

MacOS

watchOS

Apple Vision Pro

#6. Vue 3 실전 예제

# 간단한 CRUD 앱 만들기

# 인증 기능 추가하기

# 실시간 채팅 앱 만들기

#5. Vue 3 성능 최적화

# 렌더링 최적화

# 로딩 속도 최적화

# 메모리 최적화

#4. Vue 3 고급 문법

# Composition API

# Teleport

# Suspense

# Reactive와 Ref

# ToRefs

# Watch

#3. Vue 3 기본 문법

# Template 문법

# 디렉티브(Directive)

# 컴포넌트(Component)

# 라우터(Router)

# 상태 관리(State Management)