본가 머지

Author: narusas

ko-KR/src/about/team/members-partner.json

@@ -16,6 +16,28 @@
       "twitter": "MariaLamardo"
     }
   },
+  {
+    "name": "Daniel Roe",
+    "title": "Framework Architect",
+    "company": "Nuxt",
+    "projects": [
+      {
+        "label": "nuxt",
+        "url": "https://github.com/nuxt"
+      },
+      {
+        "label": "typed-vuex",
+        "url": "https://github.com/danielroe/typed-vuex"
+      }
+    ],
+    "location": "United Kingdom",
+    "languages": ["English"],
+    "socials": {
+      "github": "danielroe",
+      "twitter": "danielcroe",
+      "linkedin": "daniel-roe"
+    }
+  },
   {
     "name": "Pratik Patel",
     "avatarPic": "https://pbs.twimg.com/profile_images/1541624512/profile-pic-09-11-2011_400x400.png",

ko-KR/src/api/ApiIndex.vue

@@ -31,7 +31,9 @@ const filtered = computed(() => {
             return item
           }
           // filter headers
-          const matchedHeaders = item.headers.filter(matches)
+          const matchedHeaders = item.headers.filter(
+            ({ text, anchor }) => matches(text) || matches(anchor)
+          )
           return matchedHeaders.length
             ? { text: item.text, link: item.link, headers: matchedHeaders }
             : null
@@ -92,8 +94,8 @@ function slugify(text: string): string {
         >
           <h3>{{ item.text }}</h3>
           <ul>
-            <li v-for="h of item.headers" :key="h">
-              <a :href="item.link + '.html#' + slugify(h)">{{ h }}</a>
+            <li v-for="h of item.headers" :key="h.anchor">
+              <a :href="item.link + '.html#' + slugify(h.anchor)">{{ h.anchor }}</a>
             </li>
           </ul>
         </div>

ko-KR/src/api/api.data.ts

@@ -4,12 +4,17 @@ import fs from 'fs'
 import path from 'path'
 import { sidebar } from '../../.vitepress/config'
 
+interface APIHeader {
+  anchor: string
+  text: string
+}
+
 export interface APIGroup {
   text: string
   items: {
     text: string
     link: string
-    headers: string[]
+    headers: APIHeader[]
   }[]
 }
 
@@ -34,7 +39,7 @@ export default {
 const headersCache = new Map<
   string,
   {
-    headers: string[]
+    headers: APIHeader[]
     timestamp: number
   }
 >()
@@ -50,15 +55,19 @@ function parsePageHeaders(link: string) {
 
   const src = fs.readFileSync(fullPath, 'utf-8')
   const h2s = src.match(/^## [^\n]+/gm)
-  let headers: string[] = []
+  let headers: APIHeader[] = []
   if (h2s) {
-    headers = h2s.map((h) =>
-      h
-        .slice(2)
-        .replace(/<sup class=.*/, '')
-        .replace(/\\</g, '<')
-        .replace(/`([^`]+)`/g, '$1')
-        .trim()
+    headers = h2s.map((h) => {
+        const text = h
+          .slice(2)
+          .replace(/<sup class=.*/, '')
+          .replace(/\\</g, '<')
+          .replace(/`([^`]+)`/g, '$1')
+          .replace(/\{#([a-zA-Z0-9-]+)\}/g, '') // hidden anchor tag
+          .trim()
+        const anchor = h.match(/\{#([a-zA-Z0-9-]+)\}/)?.[1] ?? text
+        return { text, anchor }
+      }
     )
   }
   headersCache.set(fullPath, {

ko-KR/src/api/general.md

@@ -125,6 +125,18 @@ A type helper for defining a Vue component with type inference.
   type FooInstance = InstanceType<typeof Foo>
   ```
 
+  ### Note on webpack Treeshaking
+
+  Because `defineComponent()` is a function call, it could look like that it would produce side-effects to some build tools, e.g. webpack. This will prevent the component from being tree-shaken even when the component is never used.
+
+  To tell webpack that this function call is safe to be tree-shaken, you can add a `/*#__PURE__*/` comment notation before the function call:
+
+  ```js
+  export default /*#__PURE__*/ defineComponent(/* ... */)
+  ```
+
+  Note this is not necessary if you are using Vite, because Rollup (the underlying production bundler used by Vite) is smart enough to determine that `defineComponent()` is in fact side-effect-free without the need for manual annotations.
+
 - **See also:** [Guide - Using Vue with TypeScript](/guide/typescript/overview.html#general-usage-notes)
 
 ## defineAsyncComponent()

ko-KR/src/ecosystem/themes/themes.json

@@ -165,6 +165,20 @@
         "url": "https://www.primefaces.org/layouts/diamond-vue?af_id=4218",
         "image": "https://www.primefaces.org/vue-templates/diamond.jpg"
       },
+      {
+        "name": "Poseidon",
+        "price": 59,
+        "description": "PrimeOne Design Admin Template",
+        "url": "https://www.primefaces.org/layouts/poseidon-vue?af_id=4218",
+        "image": "https://www.primefaces.org/vue-templates/poseidon.jpg"
+      },
+      {
+        "name": "Verona",
+        "price": 49,
+        "description": "PrimeOne Design Admin Template",
+        "url": "https://www.primefaces.org/layouts/verona-vue?af_id=4218",
+        "image": "https://www.primefaces.org/vue-templates/verona.jpg"
+      },
       {
         "name": "Sapphire",
         "price": 49,

ko-KR/src/guide/essentials/computed.md

@@ -278,7 +278,7 @@ const fullName = computed({
 ### getter에서 사이드 이펙트는 금물
 
 계산된 속성의 getter 함수는 오로지 계산만 수행해야 함으로써, 사이드 이펙트는 없어야 함을 기억하는 것이 중요합니다.
-예를 들어, getter에서 비동기 요청을 하거나 DOM을 변경하면 안됩니다!
+예를 들어, **getter에서 비동기 요청을 하거나 DOM을 변경하면 안됩니다!**
 계산된 속성은 다른 값을 기반으로 의도한 값을 도출하는 방법을 선언적으로 정의한 것으로 이해해야 합니다.
 이것의 유일한 기능은 해당 값을 계산하고 반환하는 것이어야 합니다.
 가이드의 뒷부분에서 상태 변경에 반응하는 [감시자](./watchers)를 사용하여 사이드 이펙트를 수행하는 방법에 대해 알아볼 것입니다.

ko-KR/src/guide/scaling-up/sfc.md

@@ -5,7 +5,7 @@
 
 ## Introduction
 
-Vue Single-File Components (aka `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
+Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
 
 ```vue
 <script>
@@ -30,14 +30,14 @@ export default {
 </style>
 ```
 
-As we can see, Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. The `<template>`, `<script>`, and `<style>` blocks encapsulates and collocates the view, logic and styling of a component in the same file. The full syntax is defined in the [SFC Syntax Specification](/api/sfc-spec).
+As we can see, Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. The `<template>`, `<script>`, and `<style>` blocks encapsulate and colocate the view, logic and styling of a component in the same file. The full syntax is defined in the [SFC Syntax Specification](/api/sfc-spec).
 
 ## Why SFC
 
 While SFCs require a build step, there are numerous benefits in return:
 
 - Author modularized components using familiar HTML, CSS and JavaScript syntax
-- [Collocation of inherently coupled concerns](#what-about-separation-of-concerns)
+- [Colocation of inherently coupled concerns](#what-about-separation-of-concerns)
 - Pre-compiled templates
 - [Component-scoped CSS](/api/sfc-css-features)
 - [More ergonomic syntax when working with Composition API](/api/sfc-script-setup)
@@ -51,7 +51,7 @@ SFC is a defining feature of Vue as a framework, and is the recommended approach
 - Static Site Generation (SSG)
 - Any non-trivial frontend where a build step can be justified for better development experience (DX).
 
-That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 6kb subset of Vue optimized for progressive enhancement.
+That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 6 kB subset of Vue optimized for progressive enhancement.
 
 ## How It Works
 
@@ -77,8 +77,8 @@ In actual projects, we typically integrate the SFC compiler with a build tool su
 
 Some users coming from a traditional web development background may have the concern that SFCs are mixing different concerns in the same place - which HTML/CSS/JS were supposed to separate!
 
-To answer this question, it is important for us to agree that **separation of concerns is not equal to the separation of file types.** The ultimate goal of engineering principles is to improve the maintainability of codebases. Separation of concerns, when applied dogmatically as separation of file types, does not help us reach that goal in the context of increasingly complex frontend applications.
+To answer this question, it is important for us to agree that **separation of concerns is not equal to the separation of file types**. The ultimate goal of engineering principles is to improve the maintainability of codebases. Separation of concerns, when applied dogmatically as separation of file types, does not help us reach that goal in the context of increasingly complex frontend applications.
 
-In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.
+In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic, and styles are inherently coupled, and colocating them actually makes the component more cohesive and maintainable.
 
 Note even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files using [Src Imports](/api/sfc-spec.html#src-imports).

ko-KR/src/guide/typescript/overview.md

@@ -132,7 +132,9 @@ export default defineComponent({
 })
 ```
 
-참고사항: [`defineComponent`를 위한 타입 테스트](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
+참고사항: 
+- [웹팩에서 트리쉐이킹](/api/general.html#note-on-webpack-treeshaking)
+- [`defineComponent`를 위한 타입 테스트](https://github.com/vuejs/core/blob/main/test-dts/defineComponent.test-d.tsx)
 
 :::tip 
 `defineComponent()` 는 일반 자바스크립트로 정의된 컴포넌트에 대한 타입 추론을 가능하게 합니다. 

ko-KR/src/partners/components/PartnerCard.vue

@@ -98,7 +98,7 @@ h3 {
 .partner-card.hero .big {
   display: inline-block;
   margin-left: auto;
-  width: 60%;
+  max-width: 60%;
   max-height: 360px;
   object-fit: cover;
 }
@@ -115,6 +115,7 @@ h3 {
   }
   .partner-card.hero .big {
     width: 100%;
+    max-width: 100%;
   }
 }
 

ko-KR/src/partners/components/PartnerPage.vue

@@ -30,7 +30,7 @@ function genMailLink(email: string) {
 
     <div class="description">
       <h2>About {{ p.name }}</h2>
-      <p v-for="desc in p.description">{{ desc }}</p>
+      <p v-for="desc in p.description" v-html="desc"></p>
     </div>
 
     <div class="actions">