Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
LEE-YO-HAN committed Dec 26, 2023
1 parent 21628a0 commit 72c1793
Show file tree
Hide file tree
Showing 143 changed files with 128 additions and 128 deletions.
2 changes: 1 addition & 1 deletion 404.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/f9bc783e634631d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f9bc783e634631d2.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-7d0bddee48749f95.js" defer=""></script><script src="/_next/static/chunks/framework-73b8966a3c579ab0.js" defer=""></script><script src="/_next/static/chunks/main-b0c8bcfd40968c52.js" defer=""></script><script src="/_next/static/chunks/pages/_app-80b9c37206a02b35.js" defer=""></script><script src="/_next/static/chunks/pages/404-52999431c1dae751.js" defer=""></script><script src="/_next/static/w3WhLUtIFCRKS7gRP4jaL/_buildManifest.js" defer=""></script><script src="/_next/static/w3WhLUtIFCRKS7gRP4jaL/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div class="sc-c845a976-0 icUnkm"><header class="sc-fe6a8-0 fZHroo"><span style="display:none" class="sc-fe6a8-1 kOlYBJ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 17 17" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g></g><path d="M16 3v2h-15v-2h15zM1 10h15v-2h-15v2zM1 15h15v-2h-15v2z"></path></svg></span><h1><a href="/">Rain Sugar BangBang</a></h1><span style="display:none" class="sc-fe6a8-1 kOlYBJ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></header><section class="sc-c845a976-1 bePtAz"><aside class="sc-226f6af7-0 jzKfYm"><div class="sc-226f6af7-1 eudLNA"><a target="_blank" href="https://portfolio-sigma-wheat-63.vercel.app/"><img alt="profile" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" style="color:transparent" src="/images/profileImage/cat.png"/><span>Go Profile!</span></a><p>Hanbbi</p></div><div class="sc-226f6af7-2 fEJwOM"><a target="_blank" href="https://github.com/LEE-YO-HAN"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg><span>[email protected]</span></a><a target="_blank" href="https://github.com/LEE-YO-HAN"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg><span>Github</span></a></div></aside><article class="sc-c845a976-2 jRRSKe"><div><p style="font-size:2.5rem;text-align:center">잘못된 경로입니다.</p></div></article><aside class="sc-7eadfa91-0 cYGwoY"><nav class="sc-c7d31db6-0 iCXSKe"><ul class="sc-c7d31db6-1 dOoFcu"><p>Category</p><div><p class="sc-c7d31db6-2 buPWJy">FE</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/html">HTML</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/css">CSS</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/javascript">JavaScript</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/typescript">TypeScript</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/redux">Redux</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/react">React</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/nextjs">Nextjs</a></li></div><div><p class="sc-c7d31db6-2 buPWJy">BE</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/nestjs">Nestjs</a></li></div><div><p class="sc-c7d31db6-2 buPWJy">CS</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC">정보처리기사</a></li></div><div><p class="sc-c7d31db6-2 buPWJy">ETC</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/github">Simple Memo</a></li></div></ul></nav></aside></section></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/404","query":{},"buildId":"w3WhLUtIFCRKS7gRP4jaL","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/f9bc783e634631d2.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f9bc783e634631d2.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-7d0bddee48749f95.js" defer=""></script><script src="/_next/static/chunks/framework-73b8966a3c579ab0.js" defer=""></script><script src="/_next/static/chunks/main-b0c8bcfd40968c52.js" defer=""></script><script src="/_next/static/chunks/pages/_app-80b9c37206a02b35.js" defer=""></script><script src="/_next/static/chunks/pages/404-52999431c1dae751.js" defer=""></script><script src="/_next/static/tGE6jCvqtjQ0QiPDqI9WB/_buildManifest.js" defer=""></script><script src="/_next/static/tGE6jCvqtjQ0QiPDqI9WB/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div class="sc-c845a976-0 icUnkm"><header class="sc-fe6a8-0 fZHroo"><span style="display:none" class="sc-fe6a8-1 kOlYBJ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 17 17" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g></g><path d="M16 3v2h-15v-2h15zM1 10h15v-2h-15v2zM1 15h15v-2h-15v2z"></path></svg></span><h1><a href="/">Rain Sugar BangBang</a></h1><span style="display:none" class="sc-fe6a8-1 kOlYBJ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></header><section class="sc-c845a976-1 bePtAz"><aside class="sc-226f6af7-0 jzKfYm"><div class="sc-226f6af7-1 eudLNA"><a target="_blank" href="https://portfolio-sigma-wheat-63.vercel.app/"><img alt="profile" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" style="color:transparent" src="/images/profileImage/cat.png"/><span>Go Profile!</span></a><p>Hanbbi</p></div><div class="sc-226f6af7-2 fEJwOM"><a target="_blank" href="https://github.com/LEE-YO-HAN"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg><span>[email protected]</span></a><a target="_blank" href="https://github.com/LEE-YO-HAN"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg><span>Github</span></a></div></aside><article class="sc-c845a976-2 jRRSKe"><div><p style="font-size:2.5rem;text-align:center">잘못된 경로입니다.</p></div></article><aside class="sc-7eadfa91-0 cYGwoY"><nav class="sc-c7d31db6-0 iCXSKe"><ul class="sc-c7d31db6-1 dOoFcu"><p>Category</p><div><p class="sc-c7d31db6-2 buPWJy">FE</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/html">HTML</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/css">CSS</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/javascript">JavaScript</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/typescript">TypeScript</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/redux">Redux</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/react">React</a></li><li class="sc-c7d31db6-3 cVRIqN"><a href="/nextjs">Nextjs</a></li></div><div><p class="sc-c7d31db6-2 buPWJy">BE</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/nestjs">Nestjs</a></li></div><div><p class="sc-c7d31db6-2 buPWJy">CS</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC">정보처리기사</a></li></div><div><p class="sc-c7d31db6-2 buPWJy">ETC</p><li class="sc-c7d31db6-3 cVRIqN"><a href="/github">Simple Memo</a></li></div></ul></nav></aside></section></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/404","query":{},"buildId":"tGE6jCvqtjQ0QiPDqI9WB","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
File renamed without changes.
File renamed without changes.
1 change: 1 addition & 0 deletions _next/data/tGE6jCvqtjQ0QiPDqI9WB/index.json

Large diffs are not rendered by default.

File renamed without changes.
File renamed without changes.
1 change: 1 addition & 0 deletions _next/data/tGE6jCvqtjQ0QiPDqI9WB/sw-test.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"pageProps":{"title":"sw test","description":"정보처리기사 테스트","category":"정보처리기사","date":"2023-12-27","content":"\r\n# TEST\r\n\r\n# TEST\r\n\r\n# TEST\r\n\r\n# TEST\r\n\r\n# TEST\r\n\r\n# TEST\r\n\r\n```typescript\r\n\r\n// 문자열\r\nlet str: string = \"hello\";\r\n\r\n// 숫자\r\nlet num: number = 100;\r\n\r\n// 배열\r\nlet arr: Array<number> = [10,20,30];\r\nlet arr2: number[] = [10,20,30];\r\nlet arr3: Array<string> = [\"hello\",\"hellololo\" ];\r\nlet arr4: [string, number] = [\"hello\", 182];\r\n\r\n// 객체\r\nlet obj:object = {name:\"hello\", age:29};\r\nlet person:{name: string, age:number};\r\n\r\n// Boolean\r\nlet isAvaliable: boolean = true;\r\n\r\n\r\n// 함수 선언\r\nparameter와 return 값에 대해 타입 선언 가능\r\nconst sum = (a:number, b:number):number => {\r\nreturn a+b;\r\n}\r\n\r\n// optional parameter일 경우 ?를 사용\r\n\r\nconst log = (time: string, result?: string, option?: string) => {\r\nconsole.log(time, result, option);\r\n}\r\nlog(\"2021-10-04\", \"success\");\r\n\r\n```\r\n\r\n# 인터페이스 (interface)\r\n\r\n### 자주 사용하는 타입들을 object 형태의 묶음으로 정의해 새로운 타입을 만들어 사용하는 기능\r\n\r\n```typescript\r\n\r\n// interface 선언\r\ninterface User {\r\nage: number;\r\nname: string;\r\n}\r\n\r\n// 변수 활용\r\nconst hanbbi: User = { age: 30, name: \"hello\"}\r\n\r\n\r\n// 함수 인자로의 활용\r\nconst getUser = (user:User){\r\nconsole.log(user);\r\n}\r\ngetUser({ age:10, name: \"hanbbi\" })\r\n\r\n\r\n\r\n// 함수 구조 활용\r\ninterface Sum {\r\n(a:number, b:number): number;\r\n}\r\n\r\nlet sumFinc: Sum:\r\nsumFunc = function(a: number, b: number): number {\r\nreturn a+b;\r\n}\r\n\r\n\r\n\r\n// 배열 활용\r\ninterface StringArray {\r\n[index:number]: string;\r\n}\r\n\r\nlet arr: StringArray = [\"a\", \"b\", \"c\"];\r\n\r\n\r\n// 객체 활용\r\ninterface StringRegexObject {\r\n[key: string]: RegExp;\r\n}\r\n\r\nconst obj: StringRegexObject {\r\ncssFile: /\\.css$/,\r\n jsFile: /\\.js$/\r\n}\r\n\r\n\r\n// interface 확장 (extends 사용)\r\ninterface Person {\r\nname: string;\r\nage:number;\r\n}\r\ninterface Developer extends Person {\r\nskill: string;\r\n}\r\n\r\nconst juniorDeveloper = {\r\nname: \"hanbbi\",\r\nage:100,\r\nskill: \"JS\"\r\n}\r\n\r\n```\r\n\r\n# 타입 별칭(type aliases)\r\n\r\n### 타입 키워드는 interface와 다르게 새로운 타입을 생성하는 것이 아닌 별칭을 부여하는 것으로, extends 키워드는 사용할 수 없음\r\n\r\n```typescript\r\n\r\n// 타입 별칭 선언 및 활용\r\ntype MyString = string;\r\nconst str: MyString = \"Hello dear\"\r\n\r\ntype Todo = {\r\nid: string;\r\ntitle: string;\r\ndone: boolean\r\n}\r\n\r\nconst getTodo(todo:Todo){\r\nconsole.log(todo);\r\n}\r\n\r\n```\r\n\r\n# 연산자 (Operator)\r\n\r\n## Uinon Type\r\n\r\n### 한 가지 이상의 type을 선언하고자 할 때 사용 가능. | 기호 사용\r\n\r\n```typescript\r\nconst logMessage = (value: string | number) => {\r\n if (typeof value === \"string\") {\r\n value.toString();\r\n } else if (typeof value === \"number\") {\r\n value.toLocaleString();\r\n } else {\r\n throw new TypeError(\"value must be string or number\");\r\n }\r\n};\r\nlogMessage(\"hello\");\r\nlogMessage(1000);\r\n```\r\n\r\n## intersection Type\r\n\r\n### 합집합과 같은 개념으로, 함수 호출의 경우 함수 인자에 명시한 type을 모두 제공해야 한다. & 기호 사용\r\n\r\n```typescript\r\n\r\ninterface Zoo {\r\nname: string;\r\nlocation: string\r\nprice: number;\r\n}\r\n\r\ninterface Animal {\r\nname: string;\r\ncount: number;\r\n}\r\n\r\nconst askZookeeper = ( value : Zoo & Animal ) => {\r\n // value 는\r\n { name:\"어린이대공원\", location: \"서울시 광진구\", price: 10000, count: 10000}\r\n // 와 같이 Zoo와 Animal이 모두 포함되는 인자를 줘야한다.\r\n}\r\n\r\n```\r\n\r\n# Enum\r\n\r\n### enum 키워드를 사용하면 일종의 default 값을 선언할 수 있다.\r\n\r\n```typescript\r\n\r\n// 숫자형 enum\r\n// 자동으로 0에서 1씩 증가하는 값을 부여\r\n\r\nenum Shoes {\r\nNike, // 0\r\nAdidas, // 1\r\nNewBalance //2\r\n}\r\nconst myShoes = Shoes.Nike; // 0\r\n\r\n문자형 enum\r\nenum Food {\r\ncake = \"케익\",\r\ncookie = \"쿠키\"\r\n}\r\nconst player = Food.cookie; // 쿠키\r\n\r\n```\r\n\r\n# 제네릭\r\n\r\n### 제네릭을 활용하면 인자를 넘겨 호출하는 시점에 타입을 결정할 수 있다. 제네릭 활용 시 동일한 기능을 하는 함수를 일일이 만들 필요가 없으며, 타입 추론에 있어 강점을 가진다.\r\n\r\n제네릭 선언\r\n<T>와 같이 타입을 선언한다. 알파벳은 통상 T로 정해져 있다.\r\n\r\n```typescript\r\n\r\nconst logText<T> = (text: T):T => {\r\nconsole.log(text);\r\nreturn text;\r\n}\r\nlogText<string>(\"Hello hanbbi\");\r\n\r\n\r\n// interface에 제네릭 선언\r\n\r\ninterface Dropdown<T> {\r\nvalue: T;\r\nselected: boolean;\r\n}\r\ncosnt obj: Dropdown<string> = { value: \"hamburger\" , selected: true};\r\n\r\n```\r\n\r\n# 제네릭 타입 제한\r\n\r\n## 1. 배열 힌트\r\n\r\n```typescript\r\n\r\nconst logTextLength<T> = (text: T[]): T[] =>{\r\nconsole.log(text.length);\r\ntext.forEach(text =>{\r\nconsole.log(text):\r\n});\r\n}\r\nlogTextLength<string>([\"hi\", \"hello\"]);\r\n\r\n\r\n```\r\n\r\n## 2. 정의된 타입 이용(extends)과 keyof\r\n\r\n```typescript\r\n\r\ninterface ShoppingItem {\r\nname: string;\r\nprice: number;\r\nstock: number;\r\n}\r\n\r\nconst getShoppingItemOption<T extends keyof ShoppinggItem>(itemOption: T): T {\r\nreturn itemOption;\r\n}\r\n\r\n// \"name\", \"price\", \"stock\"만 인자로 가능\r\ngetShoppingItemOption(\"price\");\r\n\r\n```\r\n\r\n# 타입 추론 (Type inference)\r\n\r\n## 1. 기본 변수 타입 추론\r\n\r\n```typescript\r\n\r\n// string으로 추론\r\nlet a = \"abc\";\r\n\r\n// a: number로 추론\r\n// b: string으로 추론\r\n// return value는 string으로 추론\r\nconst getValue(a = 10) {\r\nlet b = \"hello\";\r\nreturn a + b;\r\n}\r\n\r\n\r\n```\r\n\r\n## 2. interface추론\r\n\r\n```typescript\r\n\r\n// interface 1개\r\ninterface Dropdown<T> {\r\nvalue: T;\r\ntitle: string;\r\n}\r\nconst shoppingItem:Dropdown<number> ={\r\nvalue: 10000;\r\ntitle: \"shoe\"\r\n}\r\n// interface 2개\r\ninterface Dropdown2<T> {\r\nvalue: T;\r\ntitle: string;\r\n}\r\ninterface DetailedDropdown<K> extends Dropdown2<K>{\r\ntag: K;\r\ndesc: string;\r\n}\r\nconst detailed: DetailedDropdown<string>{\r\nvalue: \"10000\";\r\ntitle: \"shoe\",\r\ntag: \"10000\",\r\ndesc: \"description\"\r\n}\r\n\r\n```\r\n\r\n# 타입 단언 (Type assertion)\r\n\r\n### as 키워드를 사용해 타입을 정함으로써 typescript에게 타입을 알려줄 수 있다. 주로 DOM API를 조작할 떄 사용한다.\r\n\r\n```typescript\r\n// div가 있는지 장담할 수 없음, HTMLDivElement | null\r\n// 따라서 typescript에게 타입을 단언해 타입을 알려줄 수 있음.\r\nconst div = document.querySelector(\"div\") as HTMLDivElement;\r\ndiv.innerText = \"test\";\r\n```\r\n\r\n# 타입 가드 (Type guard)\r\n\r\n### union type을 사용하는 경우 공통된 속성만 접근 가능하며, 로직상 공통되지 않은 속성에 접근하고자 할 때 불편함을 해소하기 위해 타입 단언으로 공통되지 않은 속성에 접근하고자 하는 방법이 있지만, 코드 가독성을 위해 타입 가드 방법을 주로 사용한다.\r\n\r\n```typescript\r\nconst isDeveloper = (target: Developer | Humanoid): target is Developer => {\r\n return (target as Developer).skill !== undefined;\r\n};\r\nif (isDeveloper(tom)) {\r\n console.log(tom.name);\r\n console.log(tom.skill);\r\n} else {\r\n console.log(tom.name);\r\n console.log(tom.age);\r\n}\r\n```\r\n\r\n# 타입 호환 (Type compatibility)\r\n\r\n### TypeScript에서 더 큰 타입 구조를 갖는 변수에 작은 타입 구조를 갖는 변수를 할당 가능\r\n\r\n```typescript\r\nlet add = function (a: number) {\r\n // ...\r\n};\r\nlet sum = function (a: number, b: number) {\r\n // ...\r\n};\r\n// 아래는 에러가\r\n// add = sum;\r\n\r\n// 에러가 나지 않는 방식. sum의 구조가 더 크다고 볼 수 있음\r\nsum = add;\r\n```\r\n\r\n참조 : https://yeomkyeorae.github.io/typesciprt/basic_typescript/\r\n"},"__N_SSG":true}
Loading

0 comments on commit 72c1793

Please sign in to comment.