-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
21628a0
commit 72c1793
Showing
143 changed files
with
128 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} |
Oops, something went wrong.