docs: 타입스크립트 문서 포맷 수정 [deploy]

JunilHwang · Sep 3, 2024 · c48968f · c48968f
1 parent 62c2f29
commit c48968f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 36 deletions.
diff --git a/.vuepress/theme/layouts/Layout.vue b/.vuepress/theme/layouts/Layout.vue
@@ -70,4 +70,14 @@ const relationPosts = computed(() => {
   }
 }
 
+.theme-default-content {
+  h1, h2, h3, h4 {
+    font-weight: 600;
+
+    a {
+      font-weight: inherit;
+    }
+  }
+}
+
 </style>
diff --git a/with-ai/typescript-a-to-z/README.md b/with-ai/typescript-a-to-z/README.md
@@ -48,30 +48,30 @@ console.log(greeting);
 ### Why (왜 타입스크립트를 사용해야 하는가?)
 
 1. 향상된 개발자 경험:
-  - 코드 자동 완성 및 IntelliSense 지원
-  - 리팩토링 시 더 안전하고 효율적인 작업 가능
+    - 코드 자동 완성 및 IntelliSense 지원
+    - 리팩토링 시 더 안전하고 효율적인 작업 가능
 2. 오류 조기 발견:
-  - 컴파일 시점에 타입 관련 오류 감지
-  - 런타임 오류 감소
+    - 컴파일 시점에 타입 관련 오류 감지
+    - 런타임 오류 감소
 3. 더 나은 코드 문서화:
-  - 타입 정의를 통한 자체 문서화
-  - 코드 가독성 및 유지보수성 향상
+    - 타입 정의를 통한 자체 문서화
+    - 코드 가독성 및 유지보수성 향상
 4. 대규모 애플리케이션 개발에 적합:
-  - 복잡한 시스템 설계에 유용한 타입 시스템
-  - 팀 협업 시 코드 품질 유지 용이
+    - 복잡한 시스템 설계에 유용한 타입 시스템
+    - 팀 협업 시 코드 품질 유지 용이
 
 ### Don't (언제 타입스크립트를 사용하지 말아야 하는가?)
 
 1. 소규모 또는 간단한 프로젝트:
-  - 설정 및 컴파일 과정이 오버헤드가 될 수 있음
-  - 빠른 프로토타이핑이 필요한 경우
+    - 설정 및 컴파일 과정이 오버헤드가 될 수 있음
+    - 빠른 프로토타이핑이 필요한 경우
 2. 팀이 TypeScript에 익숙하지 않은 경우:
-  - 학습 곡선으로 인한 초기 생산성 저하 가능성
+    - 학습 곡선으로 인한 초기 생산성 저하 가능성
 3. 런타임 성능이 극도로 중요한 경우:
-  - 컴파일된 JavaScript가 약간의 오버헤드를 가질 수 있음
-  - 단, 대부분의 경우 성능 차이는 무시할 만한 수준
+    - 컴파일된 JavaScript가 약간의 오버헤드를 가질 수 있음
+    - 단, 대부분의 경우 성능 차이는 무시할 만한 수준
 4. 특정 JavaScript 라이브러리와의 호환성 문제:
-  - 타입 정의 파일이 없거나 불완전한 경우 사용이 어려울 수 있음
+    - 타입 정의 파일이 없거나 불완전한 경우 사용이 어려울 수 있음
 
 ## 2. 기본기
 
@@ -204,7 +204,7 @@ TypeScript는 복잡한 타입을 쉽게 조작할 수 있는 여러 유틸리
 
 모든 속성을 선택적으로 만듭니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 interface User {
@@ -219,7 +219,7 @@ function updateUser(user: User) {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 interface User {
@@ -240,7 +240,7 @@ updateUser({ name: "John" }); // 유효
 
 모든 속성을 필수로 만듭니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 interface Config {
@@ -250,7 +250,7 @@ interface Config {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type RequiredConfig = Required<Config>;
@@ -267,7 +267,7 @@ const config: RequiredConfig = {
 
 특정 속성만 선택합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 interface Product {
@@ -279,7 +279,7 @@ interface Product {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type ProductPreview = Pick<Product, 'name' | 'price'>;
@@ -296,7 +296,7 @@ const preview: ProductPreview = {
 
 특정 속성을 제외합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 interface User {
@@ -307,7 +307,7 @@ interface User {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type PublicUser = Omit<User, 'password'>;
@@ -324,7 +324,7 @@ const publicInfo: PublicUser = {
 
 키-값 쌍의 타입을 정의합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 const fruitInventory = {
@@ -335,7 +335,7 @@ const fruitInventory = {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type Fruit = 'apple' | 'banana' | 'orange';
@@ -353,7 +353,7 @@ const fruitInventory: Stock = {
 
 모든 속성을 읽기 전용으로 만듭니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 interface Config {
@@ -363,7 +363,7 @@ interface Config {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type ReadonlyConfig = Readonly<Config>;
@@ -381,7 +381,7 @@ const config: ReadonlyConfig = {
 
 함수의 반환 타입을 추출합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 function fetchUser() {
@@ -390,7 +390,7 @@ function fetchUser() {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type User = ReturnType<typeof fetchUser>;
@@ -408,7 +408,7 @@ const user: User = {
 
 함수의 매개변수 타입을 튜플로 추출합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 function greet(name: string, age: number) {
@@ -417,7 +417,7 @@ function greet(name: string, age: number) {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 type GreetParams = Parameters<typeof greet>;
@@ -760,7 +760,7 @@ React와 TypeScript를 함께 사용할 때 특히 유용한 타입 유틸리티
 
 컴포넌트의 props 타입을 추출합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 import { Button } from 'some-ui-library';
@@ -773,7 +773,7 @@ type ButtonProps = {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 import { Button } from 'some-ui-library';
@@ -787,7 +787,7 @@ type ButtonProps = ComponentProps<typeof Button>;
 
 props 타입에 children을 추가합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 type CardProps = {
@@ -797,7 +797,7 @@ type CardProps = {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 import { PropsWithChildren } from 'react';
@@ -812,7 +812,7 @@ type CardProps = PropsWithChildren<{
 
 인라인 스타일 객체의 타입을 정의합니다.
 
-AS-IS:
+**AS-IS:**
 
 ```tsx
 function StyledDiv({ style }: { style: any }) {
@@ -821,7 +821,7 @@ function StyledDiv({ style }: { style: any }) {
 
 ```
 
-TO-BE:
+**TO-BE:**
 
 ```tsx
 import { CSSProperties } from 'react';