update

src/ko/posts/upbit/upbit-chart.md

@@ -7,6 +7,8 @@ order: 2
 차트에서는 처음 로드시에 차트를 그려줄 분봉 데이터를 가져와야합니다. <br/>
 처음에는 50개만 가져 오겠습니다.
 
+::: info Codes
+
 ```ts
 // upbit-store.ts
 export const useUpbitSocketStore = defineStore("upbitSocket", {
@@ -31,6 +33,10 @@ declare global {
 }
 ```
 
+:::
+
+::: info Codes
+
 components 로 `UpbitChart.vue` 를 만들어주고, 차트를 그릴 데이터를 먼저 가져옵니다.
 
 ```vue
@@ -67,10 +73,16 @@ onBeforeMount(() => {
 </script>
 ```
 
+:::
+
+::: tip
+
 다음과 같은 결과물을 얻을 수 있습니다.
 
 <div style="font-size: 12px">[{{ candleOneData[0] }} ... ]</div>
 
+:::
+
 차트를 그리기 위해 필요한 데이터는 `opening_price, high_price, low_price, trade_price, candle_acc_trade_volume, (candle_date_time_kst | candle_date_time_utc)` 입니다.
 
 <!--

src/ko/posts/vuepress/start-blog.md

@@ -44,34 +44,22 @@ initialize repo
 <br/>
 <br/>
 
-프로젝트가 만들어졌으면, 깃허브 홈페이지로 들어가서 `username.github.io` 라는 이름으로 github public repo 를 만들어줍니다.
+프로젝트가 만들어졌으면, 깃허브 홈페이지로 들어가서 `username.github.io` 라는 이름으로 github public repo 를 만들어줍니다. 아무것도 건들지 말고, repo 이름만 적고 만들어줍니다.
 
-::: info
+::: info 권한 수정하기
 
 repo 를 만들고 Settings 탭 => Actions => General 로 들어가서 Workflow permissions의 옵션 중 Read and write permissions 로 바꿔주고 Save를 해줍니다.
 
 :::
 
-vuepress로 만든 프로젝트에서 터미널을 열어주고 깃 저장소에 연결하겠습니다.
-
-```sh
-$ git init
-$ git remote add origin [url]
-$ git branch -m master main
-$ git add .
-$ git commit -m "message"
-$ git push
-```
+<br/>
 
-git push에서 브랜치 에러가 난다면 다음 명령어를 입력해주세요.
-
-```sh
-$ git push --set-upstream origin main
-```
+::: warning deploy-docs.yml
 
 vuepress hope 에서는 기본적으로 github actions 템플릿을 제공해줍니다.
 
-```
+```yml
+# deploy-docs.yml
 - name: Install pnpm
   uses: pnpm/action-setup@v2
   with:
@@ -80,16 +68,103 @@ vuepress hope 에서는 기본적으로 github actions 템플릿을 제공해줍
 
 중간쯤에 `Install pnpm` 이란것이 있는데 다음과 같이 version을 넣어주어야 합니다.
 
-```
+```yml
+# deploy-docs.yml
 - name: Install pnpm
   uses: pnpm/action-setup@v2
   with:
     version: 8
     run_install: true
 ```
 
+:::
+
+<br/> <br/>
+
+::: note 깃에 소스를 올리기 전 빌드 테스트를 해보겠습니다.
+
+::: code-tabs#shell
+
+@tab:active pnpm
+
+```bash
+pnpm run docs:build
+```
+
+@tab yarn
+
+```bash
+yarn docs:build
+```
+
+@tab npm
+
+```bash
+npm run docs:build
+```
+
+:::
+
+::: tip 'useXXX() is called without provider' 에러 발생시
+
+vuepress와 호환되지 않는 버전의 라이브러리가 있을시 해당 에러가 발생합니다.
+vp-update를 하면 자동으로 버전이 vuepress와 호환되는 버전으로 맞춰집니다.
+
+::: code-tabs#shell
+
+@tab:active pnpm
+
+```bash
+$ pnpm dlx vp-update
+```
+
+@tab yarn
+
+```bash
+$ yarn dlx vp-update
+```
+
+@tab npm
+
+```bash
+$ npx vp-update
+```
+
+:::
+
+<br/>
+
+정상적으로 빌드가 되었다면 이제 깃 저장소에 소스를 올려보도록 하겠습니다.
+
+<br/>
+
+vuepress로 만든 프로젝트에서 터미널을 열어주고 깃 저장소에 연결하여 소스를 올려주겠습니다.
+
+```sh
+$ git init
+$ git remote add origin [url]
+$ git branch -m master main
+$ git add .
+$ git commit -m "message"
+$ git push
+```
+
+<br/>
+
+::: tip 브랜치 에러
+
+git push에서 브랜치 에러가 난다면 다음 명령어를 입력해주세요.
+
+```sh
+$ git push --set-upstream origin main
+```
+
+:::
+
+<br/>
+
 여기까지 모두 git repo에 올렸으면, 이제 빌드가 되면서 따로 .yml 파일을 수정하지 않았다면 gh-pages 라는 브랜치가 새로 생겼을겁니다.
 
 이번에는 Settings tab => Pages 로 들어가 Build and deployment 에서 Branch를 gh-pages로 바꾸고 Save 해주겠습니다.
 
-잠시 기다린 뒤, username.github.io 로 들어가면 예쁜 홈페이지가 보일겁니다.
+잠시 기다린 뒤, username.github.io 로 들어가면 예쁜 홈페이지가 보일겁니다. 만약 홈페이지에 올라가지 않았다면 한번더 깃 저장소에 푸쉬를 해주세요.

src/posts/upbit/upbit-chart.md

@@ -7,6 +7,8 @@ order: 2
 The chart needs to get the sequencing data to draw the chart on first load. <br/>
 I'll only bring 50 at first.
 
+::: info Codes
+
 ```ts
 // upbit-store.ts
 export const useUpbitSocketStore = defineStore("upbitSocket", {
@@ -31,6 +33,10 @@ declare global {
 }
 ```
 
+:::
+
+::: info Codes
+
 Create `UpbitChart.vue` as components, and first import the data to draw the chart.
 
 ```vue
@@ -67,11 +73,17 @@ onBeforeMount(() => {
 </script>
 ```
 
+:::
+
 You'll get something like this:
 
-<div style="font-size: 12px">[{{ candleOneData[0] }} ... ]</div>
+::: tip
+
+<div style="font-size: 12px; padding-bottom: 20px">[{{ candleOneData[0] }} ... ]</div>
+
+:::
 
-The data needed to draw the chart is `opening_price, high_price, low_price, trade_price, candle_acc_trade_volume, (candle_date_time_kst | candle_date_time_utc)`.
+- The data needed to draw the chart is `opening_price, high_price, low_price, trade_price, candle_acc_trade_volume, (candle_date_time_kst | candle_date_time_utc)`.
 
 <br />
 

src/posts/vuepress/start-blog.md

@@ -44,34 +44,22 @@ initialize repo
 <br/>
 <br/>
 
-When the project is created, go to the GitHub homepage and create a github public repo with the name `username.github.io`.
+When the project is created, go to the GitHub homepage and create a github public repo with the name `username.github.io`. Don't touch anything, just write the repo name and create it.
 
-::: info
+::: info Edit Permissions
 
 Create a repo, go to Settings tab => Actions => General, change the Workflow permissions option to `Read and write permissions` and click Save.
 
 :::
 
-I'll open a terminal in the project created with vuepress and connect to the git repository.
-
-```sh
-$ git init
-$ git remote add origin [url]
-$ git branch -m master main
-$ git add .
-$ git commit -m "message"
-$ git push
-```
+<br/>
 
-If you get a branch error in git push, please enter the following command.
-
-```sh
-$ git push --set-upstream origin main
-```
+::: warning deploy-docs.yml
 
 vuepress hope provides a github actions template by default.
 
-```
+```yml
+# deploy-docs.yml
 - name: Install pnpm
   uses: pnpm/action-setup@v2
   with:
@@ -80,16 +68,103 @@ vuepress hope provides a github actions template by default.
 
 There is something called `Install pnpm` in the middle, and you need to put the version as follows.
 
-```
+```yml
+# deploy-docs.yml
 - name: Install pnpm
   uses: pnpm/action-setup@v2
   with:
     version: 8
     run_install: true
 ```
 
+:::
+
+<br/> <br/>
+
+::: note Before uploading the source to Git, let's test the build.
+
+::: code-tabs#shell
+
+@tab:active pnpm
+
+```bash
+pnpm run docs:build
+```
+
+@tab yarn
+
+```bash
+yarn docs:build
+```
+
+@tab npm
+
+```bash
+npm run docs:build
+```
+
+:::
+
+::: tip When 'useXXX() is called without provider' error occurs
+
+An error occurs when there is a version of the library that is not compatible with vuepress.
+vp-update will automatically set the version to a version compatible with vuepress.
+
+::: code-tabs#shell
+
+@tab:active pnpm
+
+```bash
+$ pnpm dlx vp-update
+```
+
+@tab yarn
+
+```bash
+$ yarn dlx vp-update
+```
+
+@tab npm
+
+```bash
+$ npx vp-update
+```
+
+:::
+
+<br/>
+
+If the build was successful, let's upload the source to the Git repository.
+
+<br/>
+
+I will open a terminal in the project created with vuepress and upload the source by connecting to the git repository.
+
+```sh
+$ git init
+$ git remote add origin [url]
+$ git branch -m master main
+$ git add .
+$ git commit -m "message"
+$ git push
+```
+
+<br/>
+
+::: tip Branch error
+
+If you get a branch error in git push, please enter the following command.
+
+```sh
+$ git push --set-upstream origin main
+```
+
+:::
+
+<br/>
+
 If you have uploaded everything up to this point in the git repo, a new branch called gh-pages should have been created if you did not modify the .yml file separately during the build.
 
 This time, I will go to Settings tab => Pages and change Branch to gh-pages in Build and deployment and Save.
 
-After waiting for a while, go to username.github.io and you will see a pretty home page.
+After waiting for a while, go to username.github.io and you will see a pretty home page. If it is not uploaded to the home page, please push it to the Git repository once more.