-
Notifications
You must be signed in to change notification settings - Fork 0
/
rss.xml
15 lines (15 loc) · 283 KB
/
rss.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Minimal Blog - @lekoarts/gatsby-theme-minimal-blog]]></title><description><![CDATA[도묵의 기술 블로그입니다]]></description><link>https://domuk-k.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Thu, 26 Nov 2020 02:54:45 GMT</lastBuildDate><item><title><![CDATA[[일상] 프론트엔드반 매니저 == 조교]]></title><link>https://domuk-k.github.io/frontend-school-log</link><guid isPermaLink="false">https://domuk-k.github.io/frontend-school-log</guid><pubDate>Fri, 20 Nov 2020 15:00:00 GMT</pubDate><content:encoded><style data-emotion-css="1hycliv">body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}</style><style data-emotion-css="tm2q0o">*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><style data-emotion-css="12k12li">.css-12k12li{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.875rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-12k12li{font-size:2.25rem;}}@media screen and (min-width:768px){.css-12k12li{font-size:3rem;}}</style><h2 class="css-12k12li">프론트엔드 스쿨 👨💻 클래스 매니저의 기록</h2><style data-emotion-css="1ccrm8j">.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}</style><p class="css-1ccrm8j">모 학원에서 프론트엔드 스쿨의 클래스매니저로서 계약하고 일하고 있습니다.
클래스매니저 - 조교 역할을 하면서 수강생들에게 배우고 가르친 내용을 기록하고자 합니다.</p><style data-emotion-css="170hkfz">.css-170hkfz{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.5rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-170hkfz{font-size:1.875rem;}}@media screen and (min-width:768px){.css-170hkfz{font-size:2.25rem;}}</style><h3 class="css-170hkfz">💯 데일리 퀴즈</h3><style data-emotion-css="15rlv7r">.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}</style><ul class="css-15rlv7r"><li class="css-0">매 강의마다, 수강내용에 대해 퀴즈를 출제합니다</li></ul><h3 class="css-170hkfz">🧑🏫 개인 및 그룹 대상 튜터링</h3><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">퀴즈 및 강의 중에 생기는 질문 사항들에 대해 답변해줍니다.</p><ul class="css-15rlv7r"><li class="css-0">❗️갑자기 같이 스펙을 찾아보고 저를 발견할 수 있습니다. 정상입니다.</li></ul></li><li class="css-0"><p class="css-1ccrm8j">수강생 간 편차가 있기에, 상대적으로 부족한 수강생들에게 개념을 설명합니다.</p><ul class="css-15rlv7r"><li class="css-0">자바스크립트의 핵심 기본개념과 프로그래밍 관련 기본지식을 놓치게 되면 후반부에 모두가 곤란해지기 때문에...😓</li></ul></li></ul><h3 class="css-170hkfz">2개월 차</h3><ul class="css-15rlv7r"><li class="css-0">더 친절해집니다! - 도메인 지식이 없는 사람에게 쉽게 설명하는 방법을 고민하게 됩니다.</li><li class="css-0">겸손해집니다! - 공학 전공자들의 빠른 흡수력에 자극 받습니다.</li><li class="css-0">애정이 생깁니다! - 5문제로 간단한 퀴즈문제에도 고민해 볼 주제와 개념의 핵심을 담으려 노력합니다.</li></ul></content:encoded></item><item><title><![CDATA[객체보다 Map이 더 나은 6가지 이유]]></title><link>https://domuk-k.github.io/map-javascript</link><guid isPermaLink="false">https://domuk-k.github.io/map-javascript</guid><pubDate>Tue, 17 Nov 2020 15:00:00 GMT</pubDate><content:encoded><style data-emotion-css="1hycliv">body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}</style><style data-emotion-css="tm2q0o">*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><style data-emotion-css="rrejfe">.css-rrejfe{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.25rem;color:var(--theme-ui-colors-heading,#000);margin-top:1rem;}@media screen and (min-width:640px){.css-rrejfe{font-size:1.5rem;}}@media screen and (min-width:768px){.css-rrejfe{font-size:1.875rem;}}</style><h4 class="css-rrejfe">HashMap을 구현할 때 Map을 써야하는 이유</h4><style data-emotion-css="1ccrm8j">.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}</style><p class="css-1ccrm8j">해쉬 자료구조를 공부하면서, Map 을 사용해서 구현해 봤습니다.
정말 Map을 사용해도되는 건지, 공부해보면서, 해쉬맵에는 Map을 쓰는 게 좋다는 걸 알게 되었어요!</p><p class="css-1ccrm8j">MDN과 이를 기반한 해외포스팅을 읽고 정리해봤습니다.</p><style data-emotion-css="13l3oqy">.css-13l3oqy{background-color:var(--theme-ui-colors-muted,#e2e8f0);border:0;height:1px;margin:1rem;margin-left:0;margin-right:0;}</style><hr class="css-13l3oqy"/><p class="css-1ccrm8j">아래 글에서 소개하는 Map의 성능에 대해서 객체와 비교 테스트를 해본 결과는 아래에 있습니다.</p><center>
<img width="600" alt="cabinets orders by number" src="https://images.unsplash.com/photo-1483861911361-57d334ad765b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1052&amp;q=80" class="css-0"/></center><h4 class="css-rrejfe">0. 맵 Map</h4><p class="css-1ccrm8j"><strong class="css-0"><code class="css-0">Map</code></strong> 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 <style data-emotion-css="1od09yo">.css-1od09yo{color:var(--theme-ui-colors-primary,#6b46c1);-webkit-text-decoration:none;text-decoration:none;}.css-1od09yo:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="https://developer.mozilla.org/ko/docs/Glossary/Primitive" class="css-1od09yo">원시 값</a>)이라도 키와 값으로 사용할 수 있습니다. - MDN</p><p class="css-1ccrm8j"><strong class="css-0">맵</strong>은 프로그래밍을 하면서 가장 자주 사용하는 자료구조입니다. Java에서 HashMap을 위해 Map이 사용되죠. 그러나 Javascript에서는 그걸 위해서는 그냥 객체를 쓰는게 꽤 편하죠.</p><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><style data-emotion-css="l84w3r">.css-l84w3r{background-color:rgba(107,70,193,0.2);border:none;color:var(--theme-ui-colors-gray-2,#edf2f7);cursor:pointer;font-size:14px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-letter-spacing:0.025rem;-moz-letter-spacing:0.025rem;-ms-letter-spacing:0.025rem;letter-spacing:0.025rem;-webkit-transition:default;transition:default;position:absolute;top:0;right:0;z-index:1;border-radius:0 0 0 0.25rem;padding:0.25rem 0.6rem;}@media screen and (min-width:640px){.css-l84w3r{font-size:14px;}}@media screen and (min-width:768px){.css-l84w3r{font-size:16px;}}.css-l84w3r[disabled]{cursor:not-allowed;}.css-l84w3r:not([disabled]):hover{background-color:var(--theme-ui-colors-primary,#6b46c1);color:var(--theme-ui-colors-white,#fff);}</style><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<style data-emotion-css="1gy8470">.css-1gy8470{border:0;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}</style><span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> map </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 키-값 쌍 추가하기</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;key1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;value1&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;key2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;value2&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;key3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;value3&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">hasOwnProperty</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;key1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;Map constains key1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;key1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></code></pre></div><p class="css-1ccrm8j">근데 진짜 <strong class="css-0">맵</strong>을 쓰고 싶을 때를 위해서 자바스크립트에 내장된 자료구조가 있습니다. Map이죠. 객체보다 Map이 나은 이유를 소개드립니다.</p><h4 class="css-rrejfe">1. 키의 타입 제한이 없습니다.</h4><p class="css-1ccrm8j">객체의 키는 string과 symbol 타입만 가능합니다. 맵은 <code class="css-0">object</code>, <code class="css-0">function</code>, primitive 타입이 키로 사용될 수 있습니다.</p><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> map </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">myFunction</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=&gt;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 유틸 함수, 함수형 컴포넌트일 수도 있겠죠? 함수라면!</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> myNumber </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">987</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> myObject </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"> name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;플레인한 프로퍼티 값&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"> otherKey</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;값&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">myFunction</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;내 키는 함수!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">myNumber</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;내 키는 숫자&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">myObject</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;내 키는 객체&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">13</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">get</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">myFunction</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// &#x27;내 키는 함수!&#x27;</span></div></code></pre></div><h4 class="css-rrejfe">2. 크기를 &#x27;&#x27;가볍게&#x27;&#x27; 알 수 있습니다</h4><p class="css-1ccrm8j">맵은 <code class="css-0">size</code> 프로퍼티를 제공하는 반면, 일반 객체의 크기 <code class="css-0">size</code>는 표현하기 까다로울 뿐 아니라 비효율적인 연산이 표함됩니다. </p><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> map </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token spread operator" style="color:rgb(127, 219, 202)">...</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey100&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">size</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 100, Runtime: O(1)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> plainObjMap </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain"></span><span class="token spread operator" style="color:rgb(127, 219, 202)">...</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">13</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey100&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">14</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">15</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token known-class-name class-name" style="color:rgb(255, 203, 139)">Object</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">keys</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 100, Runtime: O(n)</span></div></code></pre></div><h4 class="css-rrejfe">3. 더 나은 성능</h4><p class="css-1ccrm8j"><strong class="css-0">맵</strong>은 항목의 빈번한 <strong class="css-0">추가/삭제에 대해 최적화</strong>되어 있습니다.</p><p class="css-1ccrm8j">2에서 본 바와 같이 <code class="css-0">Map</code>의 크기는 <code class="css-0">O(1)</code> 시간에 가능한 반면, 객체의 사이즈를 연산할 때는 <code class="css-0">O(n)</code> 단계를 거쳐야하죠. (*<a href="https://en.wikipedia.org/wiki/Big_O_notation" class="css-1od09yo">엄청난 차이</a>입니다!)</p><p class="css-1ccrm8j">또한, 모든 키를 string으로 바꿀 필요는 없기 때문에, 시간이 절약됩니다.</p><h4 class="css-rrejfe">4. 객체와 달리 직접 순회할 수 있습니다.</h4><p class="css-1ccrm8j">객체는 key들을 순회하면서 읽어오고 그걸 가지고 값을 순회하면서 읽어와야합니다. 반면에, 맵은 이터러블이기 때문에, 직접 순회가능합니다.</p><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> map </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">for</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">key</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">of</span><span class="token plain"> map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string string" style="color:rgb(173, 219, 103)">키와 값은 매 순회에서 배열 [</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">key</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string string" style="color:rgb(173, 219, 103)">,</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">value</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string string" style="color:rgb(173, 219, 103)">]로 반환됩니다.</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token template-string string" style="color:rgb(173, 219, 103)"> 배열 디스트럭쳐링 할당으로 위와 같이 표현할 수 있습니다.</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></code></pre></div><h4 class="css-rrejfe">5. 키 순서</h4><p class="css-1ccrm8j"><code class="css-0">Map</code>은 키가 삽입된 순서대로 저장되는 것이 <strong class="css-0">보장됩니다</strong>. ECMAScript 2015 (ES6) 전에는 객체의 키들의 순서는 보장되지 않았습니다. 이제는 객체의 키인 문자열과 <code class="css-0">Symbol</code>도 키의 생성 순서를 유지합니다. </p><small>ECMAScript 201 == ECMAScript 2015 이후 == es6+</small><h4 class="css-rrejfe">6. 키 오버라이딩 금지</h4><p class="css-1ccrm8j">일반 객체는 그것의 프로토타입들 때문에 이미 키를 가지고 있습니다. 이렇게 객체가 이미 가진 프로퍼티 키들과 충돌 가능성이 있는 거죠. <code class="css-0">Map</code>이 생성하는 객체는 초기화될 때, 어떤 키도 가지지 않습니다.</p><style data-emotion-css="15rlv7r">.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}</style><ul class="css-15rlv7r"><li class="css-0">ES6 부터는, <code class="css-0">Object.create(null)</code>로 실수로 발생할 수 있는 키 오버라이딩을 피할 수 는 있습니다.</li></ul><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> map </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;toString&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 맵에서는 문제없죠.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> plainObjMap </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;someKey2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;toString&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 워우, 이건 native 함수이름인데;</span></div></code></pre></div><h4 class="css-rrejfe">비교테스트</h4><ul class="css-15rlv7r"><li class="css-0">테스트 결과 : 100,000개의 데이터에 대해, 저장, 읽기, 전체 크기 연산에 대해 5번 수행 결과 중 하나입니다.</li><li class="css-0">자료를 저장하는 속도해서는 2배 이상, 자료를 읽어오고, 크기를 연산하는 속도에서는 압도적인 차이입니다.</li></ul><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token plain">map sets</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">37.654</span><span class="token plain">ms</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain">map gets</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">18.902</span><span class="token plain">ms</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain">map </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> getSize</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.01</span><span class="token plain">ms</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain">plain obj </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> sets</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1.254</span><span class="token plain">s</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain">plain obj </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> gets</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">607.29</span><span class="token plain">ms</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain">plain obj </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> getSize</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">254.167</span><span class="token plain">ms</span></div></code></pre></div><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> plainObjMap </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> map </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;map sets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">for</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(127, 219, 202)">&lt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100_000</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> i</span><span class="token operator" style="color:rgb(127, 219, 202)">++</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">set</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string string" style="color:rgb(173, 219, 103)">someKey</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">i</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">timeEnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;map sets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;map gets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">for</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">key</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">of</span><span class="token plain"> map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">get</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">key</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">timeEnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;map gets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;map : getSize&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">13</span><span class="token plain">map</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">size</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 100000, Runtime: O(1)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">14</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">timeEnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;map : getSize&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">15</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">/////</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">16</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">17</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;plain obj : sets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">18</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">for</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(127, 219, 202)">&lt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1_000_000</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> i</span><span class="token operator" style="color:rgb(127, 219, 202)">++</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string string" style="color:rgb(173, 219, 103)">someKey</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">i</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">19</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">timeEnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;plain obj : sets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">20</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">21</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;plain obj : gets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">22</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">for</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(127, 219, 202)">&lt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1_000_000</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> i</span><span class="token operator" style="color:rgb(127, 219, 202)">++</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string string" style="color:rgb(173, 219, 103)">someKey</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">i</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">23</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">timeEnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;plain obj : gets&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">24</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">25</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;plain obj : getSize&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">26</span><span class="token plain"></span><span class="token known-class-name class-name" style="color:rgb(255, 203, 139)">Object</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">keys</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">plainObjMap</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">length</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 100000, Runtime: O(n)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">27</span><span class="token plain"></span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">timeEnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;plain obj : getSize&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></code></pre></div><style data-emotion-css="170hkfz">.css-170hkfz{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.5rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-170hkfz{font-size:1.875rem;}}@media screen and (min-width:768px){.css-170hkfz{font-size:2.25rem;}}</style><h3 class="css-170hkfz">마치며</h3><p class="css-1ccrm8j">hash maps를 구현한다고 객체로 workaround하는 시대는 지났습니다. 객체는 정말 유용하지만, 전형적인 hash map을 구현할 때는 가장 좋은 선택은 아닐겁니다.</p><p class="css-1ccrm8j">내장 생성자 함수인 Map이 가진 강점을 이해했으니, 어떤 자료구조를 구현하는 지에 따라 객체보다 나은 경우를 고려해서 써야겠습니다. 뒤늦게 알게 되었지만 멋진 내장 객체네요!</p><h3 class="css-170hkfz">major reference</h3><ul class="css-15rlv7r"><li class="css-0"><a href="https://medium.com/better-programming/stop-using-objects-as-hash-maps-in-javascript-9a272e85f6a8" class="css-1od09yo">Johannes Baum의 글</a></li><li class="css-0"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map" class="css-1od09yo">Map</a></li></ul></content:encoded></item><item><title><![CDATA[진짜 자바스크립트 0]]></title><link>https://domuk-k.github.io/js&MentalModel</link><guid isPermaLink="false">https://domuk-k.github.io/js&MentalModel</guid><pubDate>Tue, 17 Nov 2020 15:00:00 GMT</pubDate><content:encoded><style data-emotion-css="1hycliv">body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}</style><style data-emotion-css="tm2q0o">*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><style data-emotion-css="1ccrm8j">.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}</style><p class="css-1ccrm8j">나는 아래 소개글을 읽고 Just Javascript 를 읽고 번역하고자 했다. Dan의 이야기는 많은 부분이 공감이 되었고, 그 중에서도 멘탈 모델에 대해 이야기하는 것이 무척 끌렸다.</p><p class="css-1ccrm8j">우리는 모두 수 많은 도구를 사용한다. 랩탑, 텀블러, 에스컬레이터, 문 손잡이, 시계, 프로젝터. 지금 내 주변에 있는 물리적인 것들에서 실체가 없는 개념 - 내가 만든 함수의 사용방법, 바이올린 활을 잡는 법 - 등 하나 하나 사용 방법이 있는 도구들이다.</p><p class="css-1ccrm8j">멘탈 모델은 이러한 동작방식에 대한 이해를 쉽고 빠르게 만들어주는 머릿 속 모형이다. 의식적/무의식적으로 이러한 &quot;정신적 지름길&quot;을 이용하면서 빠른 학습을 할 수 있었던 나는 이 글을 읽고 무척 설레고 반가운 기분이 들었다.</p><p class="css-1ccrm8j">나는 <style data-emotion-css="1od09yo">.css-1od09yo{color:var(--theme-ui-colors-primary,#6b46c1);-webkit-text-decoration:none;text-decoration:none;}.css-1od09yo:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="https://poiemaweb.com/" class="css-1od09yo">poiemaweb</a>의 운영자이신 <a href="https://github.com/ungmo2" class="css-1od09yo">ungmo2</a>님의 강의와 그의 저서인 <a href="https://wikibook.co.kr/mjs/" class="css-1od09yo">모던 자바스크립트 Deep Dive</a> 통해 JS에 대한 적확한 개념을 습득했다고 자신하고 있는데, Dan의 글을 통해 나의 멘탈 모델을 다듬고자 한다.</p><p class="css-1ccrm8j">Dan은 Just Javascript의 초안 내용을 퇴고없이 무료로 이메일로 제공하고, 반응을 알고 싶다고 말한다. 이메일의 내용은 아직은 어디에도 공개하지 않을 것이고, 우리에게 공개 하지 않을 것을 부탁했다.</p><p class="css-1ccrm8j">나는 내 마음 속의 자바스크립트에 대한 멘탈 모델을 스스로 들여다 보고 소개하고자 한다.</p><style data-emotion-css="15rlv7r">.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}</style><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">아래 내용은 소개글이며, <a href="justjavascript.com" class="css-1od09yo"><strong class="css-0">Just Javascript</strong></a>에서 확인할 수 있습니다.</p><small>this is breif translation of introduction for <b class="css-0">Just Javascript</b>. original is available at <a src="justjavascript.com" class="css-1od09yo">Just Javascript</a></small></li></ul><style data-emotion-css="13l3oqy">.css-13l3oqy{background-color:var(--theme-ui-colors-muted,#e2e8f0);border:0;height:1px;margin:1rem;margin-left:0;margin-right:0;}</style><hr class="css-13l3oqy"/><p class="css-1ccrm8j">안녕하세요! </p><p class="css-1ccrm8j">Dan Abramov<sup>1</sup>입니다.</p><p class="css-1ccrm8j">자바스크립트를 사용하면서 처음 몇 년동안은, 거짓말을 치는 기분이 들었습니다.</p><p class="css-1ccrm8j">프레임워크들을 사용해서 웹사이트를 만들어 냈지만, 뭔가 빠진 기분이었죠. 기본fundamentals에 대해 명확히 파악하지 못한 상태다 보니 자바스크립트 면접이 두려웠습니다.</p><p class="css-1ccrm8j">이미 있는 강의들은 별로 제대로 된거 같지 않았어요.</p><p class="css-1ccrm8j">어떤 것들은 시각적인 자료를 활용해서 따라가기 쉬웠지만, 중요한 뉘앙스를 포기하고 있었죠. 다른 것들은 더 충실히 다루고 있지만, 너무 따분한 느낌이 들어 졸기 쉽상이었죠.</p><p class="css-1ccrm8j">저한테 안 맞았던 겁니다.</p><p class="css-1ccrm8j">너무 빡센 고행길없이 Javascript를 더 잘 이해할 수 있는 온라인 강의가 있다면 어떨까요? </p><p class="css-1ccrm8j"><strong class="css-0">Just Javascript</strong>는 그런 강의입니다. </p><p class="css-1ccrm8j">제가 듣고 싶었던 것이죠.</p><p class="css-1ccrm8j">최소한 JS의 기본을 이미 알고 있다면, Just Javascript는 개발자로서의 지식에 자신감을 갖게 해줄 거에요.</p><p class="css-1ccrm8j">Just Javascript는 JS의 동작방식에 대한 저의 <strong class="css-0">멘탈 모델</strong>의 정수이고, Maggie Appleton과 함께 만든 결과입니다.</p><p class="css-1ccrm8j">(중략)</p><p class="css-1ccrm8j">이메일로 제공해드리는 초안은 <strong class="css-0">Just Javascript</strong>를 통해서만 접근할 수 있습니다. 웹에 어디에도 올리지 않을 거에요. </p><p class="css-1ccrm8j">이메일 내용을 공유하지 마십시오.</p><p class="css-1ccrm8j">그 내용은 빈약하고 다듬어지지 않아서, 아직 널리 공유할 준비가 안되었거든요.</p><p class="css-1ccrm8j"><a href="https://justjavascript.com/" class="css-1od09yo">여기서</a> 이메일을 등록하세요.</p><p class="css-1ccrm8j">의견을 듣고 싶어요. 좋은 지, 싫은 지, 관심이 안가는 지 답장해주세요.</p><p class="css-1ccrm8j">이 프로젝트를 마치는 데에 힘이 될 겁니다!</p><p class="css-1ccrm8j">감사합니다. </p><p class="css-1ccrm8j">Dan으로 부터.</p><p class="css-1ccrm8j">1) <a href="https://github.com/gaearon" class="css-1od09yo">Dan Abramov</a></p></content:encoded></item><item><title><![CDATA[Chakra UI를 써봤다]]></title><link>https://domuk-k.github.io/chakraUI-도입기</link><guid isPermaLink="false">https://domuk-k.github.io/chakraUI-도입기</guid><pubDate>Sun, 15 Nov 2020 15:00:00 GMT</pubDate><content:encoded><style data-emotion-css="1hycliv">body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}</style><style data-emotion-css="tm2q0o">*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><style data-emotion-css="1ccrm8j">.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}</style><p class="css-1ccrm8j">graphQL 튜토리얼을 하면서 처음 Chakra UI를 사용해보았다. style props를 활용하는 방식이 편안하게 느껴졌다. 내가 속한 창업팀에서 알파버전을 진행하면서, 이 라이브러리를 사용할지 검토하게 되었고, 사용하고 있다.</p><style data-emotion-css="1pkeg2w">.css-1pkeg2w{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1rem;color:var(--theme-ui-colors-heading,#000);margin-top:1rem;}@media screen and (min-width:640px){.css-1pkeg2w{font-size:1.25rem;}}@media screen and (min-width:768px){.css-1pkeg2w{font-size:1.5rem;}}</style><h5 class="css-1pkeg2w">Chakra의 한 줄 소개</h5><style data-emotion-css="1gtwvjp">.css-1gtwvjp{border-left-color:var(--theme-ui-colors-primary,#6b46c1);border-left-style:solid;border-left-width:6px;margin-left:0;margin-right:0;padding-left:2rem;}.css-1gtwvjp p{font-style:italic;}</style><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j">Opinionated and designed for daily use.</p></blockquote><p class="css-1ccrm8j">우리는 도구에 대해서 사용감에 대해 후기를 찾게된다. 사용자가 사용방식과 매커니즘을 잘 이해하는 사람일 수록, 도구는 활용도가 높아지는 만큼, 먼저 사용해본 사람의 후기를 찾아봤다.
후기들을 읽고 이 라이브러리를 채택하고, 최대한 활용해야겠다고 판단했다.</p><p class="css-1ccrm8j">아래 후기는 Chakra 사용 중에 느낀 단점들을 논하고, 본인은 여전히 Chakra의 팬임을 자처한다.
이 글을 읽으면서 컴포넌트 스타일링 라이브러리가 갖는 트레이드오프를 이해하고 under the hood의 동작을 약간 더 이해하게 되었다.</p><style data-emotion-css="170hkfz">.css-170hkfz{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.5rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-170hkfz{font-size:1.875rem;}}@media screen and (min-width:768px){.css-170hkfz{font-size:2.25rem;}}</style><h3 class="css-170hkfz"><style data-emotion-css="1od09yo">.css-1od09yo{color:var(--theme-ui-colors-primary,#6b46c1);-webkit-text-decoration:none;text-decoration:none;}.css-1od09yo:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="https://whoisryosuke.com/blog/2020/limitations-of-chakra-ui/" class="css-1od09yo">Limitations of Chakra UI</a></h3><p class="css-1ccrm8j">2020 06 24</p><p class="css-1ccrm8j">최근 새로운 디자인 시스템을 만들기 위해 몇 주간 <a href="https://chakra-ui.com/" class="css-1od09yo">Chakra UI</a>를 사용하고 나니, 이 라이브러리에 대해서 적절한 비평을 할 수 있을 거 같다. </p><p class="css-1ccrm8j">Chakra UI는 under the hood 에서 <a href="https://styled-system.com/" class="css-1od09yo">Styled System</a>과 <a href="https://emotion.sh/docs/introduction" class="css-1od09yo">Emotion</a>을 사용하는 리액트 컴포넌트 라이브러리다. 이 둘을 조합해서, 컴포넌트가 utiltiy props를 사용하게 한다 : <code class="css-0">&lt;Button color=&quot;primary&quot; textAlign=&quot;center&quot;/&gt;</code>. 마치 <a href="https://tailwindcss.com/" class="css-1od09yo">Tailwind</a> 가 리액트 props를 만난 거 같다 - 대신 Tailwind와 달리 나의 커스텀 theme에 바인딩 되어있다. <a href="https://rebassjs.org/" class="css-1od09yo">Rebass</a>같은 다른 스타일 시스템기반 UI 라이브러리와 비슷하면서도 더 많은 기능이 있다.</p><p class="css-1ccrm8j">나는 앱을 개발할 때, <a href="https://chakra-ui.com/style-props" class="css-1od09yo">utility style props</a>를 정말 즐겨 사용했다. 스타일링을 쉽고 빠르게 사용해서 프로토타입을 만들어낼 수 있는 강력한 패러다임으로 생각했다. 20 줄짜리 css media query들을 responsive width props로 한번 써본다면, 다시 돌아갈 수 없을 만큼 좋다는 걸 알거다.</p><style data-emotion-css="rrejfe">.css-rrejfe{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.25rem;color:var(--theme-ui-colors-heading,#000);margin-top:1rem;}@media screen and (min-width:640px){.css-rrejfe{font-size:1.5rem;}}@media screen and (min-width:768px){.css-rrejfe{font-size:1.875rem;}}</style><h4 class="css-rrejfe">Chakra UI의 한계 - 커스텀할 수 없는 컴포넌트들</h4><p class="css-1ccrm8j"><code class="css-0">&lt;Switch&gt;</code> ,<code class="css-0">&lt;Checkbox&gt;</code> 그리고 몇몇 개 컴포넌트는 어느정도 스타일링 할 수 있지만, 내부적으로 접근할 수 없는 요소가 내재되어 있다.</p><h5 class="css-1pkeg2w">Switch 컴포넌트</h5><p class="css-1ccrm8j"><code class="css-0">&lt;Switch&gt;</code> 를 예를 들면 스타일링 된 <code class="css-0">div</code>요소를 가지고 있는데, 그 요소의 style props에 접근하는게 안된다. 내부 요소의 너비를 키우고 싶은데, 직접 너비로 접근할 수 없고, 디자인 시스템의 다른 요소의 영향을 받는다. 이 경우에는 font-size에 영향을 받는다.( 크기가 font-size에 기반하기 때문에, 그걸 키우면, 텍스트 크기도 같이 커진다.) Chakra는 size변수(small, medium, large)를 가지고 있는데, 결국 그냥 large를 사용하면서 필요하면 <code class="css-0">transform: scale(2)</code>를 사용했다.</p><h5 class="css-1pkeg2w">Checkbox 컴포넌트</h5><p class="css-1ccrm8j">또 <code class="css-0">&lt;Checkbox&gt;</code>를 사용하면서 icon을 커스텀하려고 했는데, Chakra의 소스코드를 붙여넣고 바꿔놓지 않고서는 변경할 수 없었다. <code class="css-0">&lt;Icon&gt;</code>컴포넌트는 <code class="css-0">&lt;Checkbox&gt;</code> 내부에 중첩된 상태로 SVG icon을 반환한다. CSS trick으로 그 아이콘을 지우고, <code class="css-0">background</code> 프로퍼티로 다른 걸 보여줄 순 있지만, 이쯤 되면 좀 hacky해진다.</p><h5 class="css-1pkeg2w">Tooltip 컴포넌트</h5><p class="css-1ccrm8j">이 경우는 좀 이상하고 이해하기 어려운데. 툴팁의 arrow를 스타일링 해야하는 경우에, 이게 <u><a href="https://reactjs.org/docs/portals.html" class="css-1od09yo">React portal</a></u>을 사용하기때문에 소스코드를 가져와서 수정해야했었다. </p><h5 class="css-1pkeg2w">어떤 때에는 CSS가 더 낫다.</h5><p class="css-1ccrm8j">Chakra는 일반 CSS 상태(hover, focus 등) 대부분에 대해 props을 제공한다. 그렇지만 CSS로 더 강력한 로직을 활용할 수 있는 경우가 많다. </p><h5 class="css-1pkeg2w">어떤 컴포넌트는 theming할 수 없다.</h5><h5 class="css-1pkeg2w"><code class="css-0">sx</code> props를 제공하지 않는다.</h5><p class="css-1ccrm8j"><code class="css-0">Rebass</code>같은 다른 utility prop기반 라이브러리의 장점은 직접 객체기반 CSS를 작성할 수 있는 styling prop을 제공하면서, theme property도 문자열로 사용할 수 있다는 것이다. (<code class="css-0">&lt;Box sx={{ borderColor: &quot;primary&quot; }}&gt;</code> 에서 <code class="css-0">primary</code> 는 테마에서 가져온다.) 대신, <code class="css-0">css</code> helper utiltiy를 사용해야하고, theme hook 과 조합해서 컴포넌트로 전달해야한다. 꽤 번거롭다.</p><div class="gatsby-highlight" data-language="jsx"><pre class="prism-code language-jsx" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><style data-emotion-css="l84w3r">.css-l84w3r{background-color:rgba(107,70,193,0.2);border:none;color:var(--theme-ui-colors-gray-2,#edf2f7);cursor:pointer;font-size:14px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-letter-spacing:0.025rem;-moz-letter-spacing:0.025rem;-ms-letter-spacing:0.025rem;letter-spacing:0.025rem;-webkit-transition:default;transition:default;position:absolute;top:0;right:0;z-index:1;border-radius:0 0 0 0.25rem;padding:0.25rem 0.6rem;}@media screen and (min-width:640px){.css-l84w3r{font-size:14px;}}@media screen and (min-width:768px){.css-l84w3r{font-size:16px;}}.css-l84w3r[disabled]{cursor:not-allowed;}.css-l84w3r:not([disabled]):hover{background-color:var(--theme-ui-colors-primary,#6b46c1);color:var(--theme-ui-colors-white,#fff);}</style><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<style data-emotion-css="1gy8470">.css-1gy8470{border:0;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}</style><span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-jsx"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">/*@jsx jsx*/</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain">css</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&quot;@chakra-ui/core&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// grab the theme</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> theme </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">useTheme</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// add the sRRREREEERtyles</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> styles </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">css</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">stylePropObject</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">theme</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// pass it to css prop</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 203, 139)">Box</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">css</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(127, 219, 202)">styles</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/&gt;</span></div></code></pre></div><h3 class="css-170hkfz">References</h3><style data-emotion-css="15rlv7r">.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}</style><ul class="css-15rlv7r"><li class="css-0"><a href="https://chakra-ui.com/" class="css-1od09yo">https://chakra-ui.com/</a></li><li class="css-0"><a href="https://openchakra.app/" class="css-1od09yo">https://openchakra.app/</a></li><li class="css-0"><a href="https://whoisryosuke.com/blog/2020/limitations-of-chakra-ui/" class="css-1od09yo">https://whoisryosuke.com/blog/2020/limitations-of-chakra-ui/</a></li></ul></content:encoded></item><item><title><![CDATA[타입스크립트 프로그래밍 - 보리스 체르니]]></title><link>https://domuk-k.github.io/programming-typescript</link><guid isPermaLink="false">https://domuk-k.github.io/programming-typescript</guid><pubDate>Sat, 31 Oct 2020 15:00:00 GMT</pubDate><content:encoded><style data-emotion-css="1hycliv">body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}</style><style data-emotion-css="tm2q0o">*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><style data-emotion-css="1ccrm8j">.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}</style><p class="css-1ccrm8j">보리스 체르니의 [ 타입스크립트 프로그래밍 ] O&#x27;Reilly Media의 원서의 번역본을 기초로, 이해한 내용을 편하게 작성했습니다.</p><style data-emotion-css="170hkfz">.css-170hkfz{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.5rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-170hkfz{font-size:1.875rem;}}@media screen and (min-width:768px){.css-170hkfz{font-size:2.25rem;}}</style><h3 class="css-170hkfz">TL;DR</h3><style data-emotion-css="15rlv7r">.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}</style><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">기본 타입(원시형 값의 타입)은 타입스크립트의 타입추론에게 맡기는 것이 좋다. 이때 선언 키워드( let, const )를 const로 한다면, 가장 좁게, 타입 리터럴로 추론한다. 이러한 특성을 활용하여 <code class="css-0">type assertion</code>이 가능하다. 후에 살펴보자.</p></li><li class="css-0"><p class="css-1ccrm8j">참조형 값 - Object, Array - 은 const로 선언해도 타입을 더 좁게 추론하지 않고 let의 경우처럼 일반적인 추론이 적용된다. </p></li><li class="css-0"><p class="css-1ccrm8j">enum 은 안전하게 사용하기 까다롭다.</p></li><li class="css-0"><p class="css-1ccrm8j">타입스크립트의 배열과 튜플은 멋지다. </p></li></ul><br/><h3 class="css-170hkfz">타입스크립트의 타입.</h3><style data-emotion-css="13l3oqy">.css-13l3oqy{background-color:var(--theme-ui-colors-muted,#e2e8f0);border:0;height:1px;margin:1rem;margin-left:0;margin-right:0;}</style><hr class="css-13l3oqy"/><p class="css-1ccrm8j"><strong class="css-0">타입</strong>은 값과 그 값으로 할 수 있는 일의 <strong class="css-0">집합</strong>을 말한다.<br/>
어떤 타입 <code class="css-0">T</code>에 대해 타입스크립트의 타입체커(<code class="css-0">typechecker</code>)는 타입을 확인하여, 유효하지 않은 동작이 실행되는 것을 막는다.</p><p class="css-1ccrm8j">예를 들면,</p><ul class="css-15rlv7r"><li class="css-0"><code class="css-0">Boolean</code> 타입은 모든 불(<code class="css-0">true</code> or <code class="css-0">false</code>)와 불 값으로 수행하는 연산(&amp;&amp;, ||, ! 등)의 집합이다.</li><li class="css-0">number 타입은 모든 숫자와 숫자에 수행할 수 있는 모든 연산( +, -, *, /, %, ||, &amp;&amp;, ?, ! 등), 숫자에 호출할 수 있는 모든 메서드(<code class="css-0">.toFixed</code>, <code class="css-0">.toPrecision</code>, <code class="css-0">.toString</code> 등) 의 집합이다.</li><li class="css-0">string 타입은 모든 문자열과 문자열에 수행할 수 있는 모든 연산( +, - , *, /, % 등)과 문자열에 호출 할 수 있는 모든 메서드(<code class="css-0">.concat</code>,<code class="css-0">.toUppercase</code> 등) 의 집합이다.</li></ul><br/><h3 class="css-170hkfz">타입을 명시한다는 것.</h3><hr class="css-13l3oqy"/><p class="css-1ccrm8j">아래 예시에서, <strong class="css-0">Type Annotation</strong>을 통해 타입스크립트에게 타입을 명시해주는 것을 보여 준다.</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><style data-emotion-css="l84w3r">.css-l84w3r{background-color:rgba(107,70,193,0.2);border:none;color:var(--theme-ui-colors-gray-2,#edf2f7);cursor:pointer;font-size:14px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-letter-spacing:0.025rem;-moz-letter-spacing:0.025rem;-ms-letter-spacing:0.025rem;letter-spacing:0.025rem;-webkit-transition:default;transition:default;position:absolute;top:0;right:0;z-index:1;border-radius:0 0 0 0.25rem;padding:0.25rem 0.6rem;}@media screen and (min-width:640px){.css-l84w3r{font-size:14px;}}@media screen and (min-width:768px){.css-l84w3r{font-size:16px;}}.css-l84w3r[disabled]{cursor:not-allowed;}.css-l84w3r:not([disabled]):hover{background-color:var(--theme-ui-colors-primary,#6b46c1);color:var(--theme-ui-colors-white,#fff);}</style><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<style data-emotion-css="1gy8470">.css-1gy8470{border:0;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}</style><span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// typescript</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">squareOf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">n</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token parameter"> number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">return</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(127, 219, 202)">*</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">squareOf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 4</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">squareOf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;x&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// // Argument of type &#x27;string&#x27; is not assignable to parameter of type &#x27;number&#x27;.ts(2345)</span></div></code></pre></div><div class="gatsby-highlight" data-language="javascript"><pre class="prism-code language-javascript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-javascript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// javascript</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">squareOf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">return</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(127, 219, 202)">*</span><span class="token plain"> n</span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">squareOf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 4</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">squareOf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;x&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// NaN</span></div></code></pre></div><p class="css-1ccrm8j"><code class="css-0">n</code>의 타입에 <u>경계</u> 로서, number을 명시하여, 다른 타입의 값이 오지 못하게 하는 것이다. 일단 타입을 <u>제한</u>하면, 타입스크립트(컴파일러)는 함수를 <u>호출 하는 시점</u>에서 <u>호환되는 인수</u>로 호출되는 지 확인하여 에러가 있다면, 에러가 발생한다.</p><br/><h3 class="css-170hkfz">타입들.</h3><hr class="css-13l3oqy"/><style data-emotion-css="rrejfe">.css-rrejfe{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.25rem;color:var(--theme-ui-colors-heading,#000);margin-top:1rem;}@media screen and (min-width:640px){.css-rrejfe{font-size:1.5rem;}}@media screen and (min-width:768px){.css-rrejfe{font-size:1.875rem;}}</style><h4 class="css-rrejfe"><code class="css-0">any</code></h4><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">최후의 보루. 가급적 사용하지 않는 것이 좋다. 말 그대로 any , 즉, 모든 값과 모든 작업의 집합이기 때문에, type checker는 작동하지 않는다. typescript의 강력한 기능을 포기하려는 게 아니라면, 사용을 자제하자.</p></li><li class="css-0"><p class="css-1ccrm8j">any는 명시적으로 선언하지 않았는데, <strong class="css-0">any로 추론되는 경우</strong><sup>1</sup>라면 typescript가 컴파일 에러를 일으킬 것이다<sup>2</sup>.</p><sup>1</sup>any로 추론되는 경우: 매개변수 타입 정의를 하지 않은 경우, 타입을 사용하지 않는 모듈을 임포트 한 경우 등.<sup>2</sup>any를 명시적으로 선언하여, 개발자의 의도를 밝혀서, 에러를 없앨 수 (는) 있다.<style data-emotion-css="1gtwvjp">.css-1gtwvjp{border-left-color:var(--theme-ui-colors-primary,#6b46c1);border-left-style:solid;border-left-width:6px;margin-left:0;margin-right:0;padding-left:2rem;}.css-1gtwvjp p{font-style:italic;}</style><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j">TSC flag: noImplicitAny</p><p class="css-1ccrm8j">타입스크립트의 default 설정은 any로 추론되는 값을 허용한다. TSC에 대한 글에서 정리한 바와 같이, 이 플래그는 strict 패밀리에 속하므로, tsconfig.json에서 strict을 활성화하면, 함께 활성화된다.</p></blockquote></li></ul><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">unknown</code></h4><p class="css-1ccrm8j"> 이 부분에서 보리스 체르니의 비유가 흥미롭다. - 영화 Point Break 에서 은행강도 갱에 잠입한 FBI 요원으로 비유한다.</p><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">unknown은 any와 마찬가지로 모든 값을 대표하지만, 타입스크립트가 unknown 값에 대해 타입을 검사하여 <u>정제</u>하기 전 까지는 타입스크립트가 해당 값을 사용할 수 없게 강제한다.</p><p class="css-1ccrm8j">아래 예시를 통해 <code class="css-0">unknown</code>의 동작과 사용법을 들여다 보자.</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> a </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">unknown</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// unknown</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 타입스크립트가 어떤 타입을 unknown 타입으로 추론하는 경우는 없다.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> b </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> a </span><span class="token operator" style="color:rgb(127, 219, 202)">===</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">120</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// boolean</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// unknown 타입과 boolean 타입의 값을 비교할 수 있다.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> a </span><span class="token operator" style="color:rgb(127, 219, 202)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"> </span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// unknown 타입의 값을 특정 타입이라고 가정하고 사용할 수 없다.</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">if</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">typeof</span><span class="token plain"> a </span><span class="token operator" style="color:rgb(127, 219, 202)">===</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;number&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> d </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> a </span><span class="token operator" style="color:rgb(127, 219, 202)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"> </span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 문맥을 통해 타입스크립트에게 해당 값의 타입을 증명해야 한다. </span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 타입스크립트는 컴파일 타임에 typeof를 활용하여 타입을 확인하기 때문에 위와 같은 타입정제가 가능하다.</span></div></code></pre></div></li></ul><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">boolean</code></h4><p class="css-1ccrm8j"> 아래 예시를 통해 <code class="css-0">boolean</code>의 동작과 사용법을 들여다 보자.</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> a </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">true</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// boolean</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> a </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">true</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// true</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// typescript가 a의 타입을 추론하게 한다. - const로 선언한다면, 가장 좁은 타입으로 추론되기 때문에, 타입 리터럴 true 타입으로 추론(강제)된다.</span></div></code></pre></div><p class="css-1ccrm8j"> * 타입 리터럴은 타입 안정성Type Safety을 높여주며 타입스크립트의 차별되는 특성이다. 자바 같은 언어를 사용하는 친구에게 자랑할 만 하다 (!!!? 🤩)</p><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">number</code></h4><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">bigint</code></h4><ul class="css-15rlv7r"><li class="css-0">bigint는 자바스크립트와 타입스크립트에 새로 추가된! 타입이다. 라운딩 관련 에러 걱정없이 큰 정수를 처리할 수 있다.</li><li class="css-0">모든 BigInt의 집합이다.</li></ul><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">string</code></h4><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">symbol</code></h4><ul class="css-15rlv7r"><li class="css-0">유니크한 값을 만들 때 사용한다. symbol을 이용하면 사람들이 잘 알려진 키 (well-known key)만 사용할 수 있게 강제하기 때문에, 키를 잘못 설정하는 실수를 방지한다. 객체의 기본 반복자(<code class="css-0">Symbol.iterator</code>)를 설정하거나 객체가 어떤 인스턴스인지(<code class="css-0">Symbol.hasInstance</code>) 런타임에 오버라이딩하는 것과 비슷한 기능을 제공한다.</li></ul><hr class="css-13l3oqy"/><h4 class="css-rrejfe"><code class="css-0">object</code></h4><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">객체 타입은 <strong class="css-0">객체의 형태</strong>를 정의한다. 객체 타입만으로는, 객체 리터럴(<code class="css-0">{}</code>)과 <code class="css-0">new</code>키워드를 통해 만든 객체를 구분할 수 없다. 이는 자바스크립트가 <strong class="css-0">구조 기반 타입 (structural type)</strong>을 갖게 설계되었기 때문이다. 따라서 타입스크립트도 <strong class="css-0">이름 기반의 타입(nominal type)</strong> 스타일보다는 자바스크립트 스타일을 선호한다. </p><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j">구조기반 타입화 Structural Typing</p><p class="css-1ccrm8j">구조 기반의 타입화 방식에서는 객체의 이름에 상관없이 <u>객체가 어떤 프로퍼티를 갖는 지</u>를 따진다 - 이름 기반 타입화에서는 이름에 따른다. 일부 언어에서는 이를 <u>덕 타이핑</u>이라 한다. 간단히 말해 구조만 같다면 호환되는 특성을 말한다.</p></blockquote></li></ul><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">객체를 타입과 함께 서술해보자!</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> a </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> object </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"> b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;x&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Property &#x27;b&#x27; does not exist on type &#x27;object&#x27;.ts(2339)</span></div></code></pre></div><p class="css-1ccrm8j"> 예상과는 다른 결과다! <code class="css-0">object</code> 는 <code class="css-0">any</code>보다 약간 더 좁은 타입으로, 서술하는 값에 대해 정보를 알려주지 않으며, 값 자체가 자바스크립 객체라고 ( null 이 아니라고 ) 말해줄 뿐이다.</p><p class="css-1ccrm8j"> =&gt; 타입스크립트의 추론에 맡겨보자!</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> a1 </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"> b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;x&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain">a1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">b</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// string</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> a2 </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"> b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;x&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain">a2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">c</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// (property) c: {</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain"> b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></code></pre></div><p class="css-1ccrm8j"> 객체 리터럴 문법에서는 선언된 객체의 구조를 그대로 추론한다! 식별자 <code class="css-0">a2</code>의 경우 처럼, 객체 안의 객체 구조도 제대로 추론한다.</p><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j">타입스크립트에서 객체를 <code class="css-0">const</code>를 선언할 때 타입 추론은 기본 타입의 경우와 다르게 여전히 <code class="css-0">let</code>키워드로 선언할 때와 같은 추론결과를 내놓는다.</p></blockquote></li></ul><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">객체 리터럴은 프로퍼티를 명시적으로 구조를 제한(선언)하는 것과 같다</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> c</span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"> firstName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&quot;john&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"> lastName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&quot;McCoy&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Person</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">constructor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">public</span><span class="token plain"> firstName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&quot;richard&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">public</span><span class="token plain"> lastName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&quot;Lim&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">13</span><span class="token plain">c </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">Person</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">&quot;Kim&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// works!</span></div></code></pre></div><p class="css-1ccrm8j">위 예시에서 <code class="css-0">c</code> 의 타입은 <code class="css-0">Person</code> 클래스 인스턴스와 호환되므로 - 만족하므로 타입스크립트는 <code class="css-0">Person</code> 인스턴스를 <code class="css-0">c</code>에 할당하는 동작을 허용한다.</p><p class="css-1ccrm8j">기본적으로 타입스크립트는 객체 프로퍼티에 엄격한 편이다. 사전에 정의된 타입(구조)를 벗어나면 에러를 발생한다. </p></li><li class="css-0"><p class="css-1ccrm8j">선택형 프로퍼티 선언과 인덱스 시그니쳐</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// optional property</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> a </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"> b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain"> c</span><span class="token operator" style="color:rgb(127, 219, 202)">?</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">5</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">key</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">boolean</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">6</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">7</span><span class="token plain"></span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// index signature</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">8</span><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> cinemaSeatingAssignment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">9</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">seat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">10</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">11</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;34D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;Danny DW Kim&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">12</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;34E&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;Dan Abramov&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">13</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></code></pre></div><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j"> 인덱스 시그니쳐</p><p class="css-1ccrm8j"><code class="css-0">[key: T]: U</code> 같은 문법을 인덱스 시그니쳐라 한다. 즉 &#x27;이 객체에서 <strong class="css-0">모든 T타입의 키</strong>는 U타입의 값을 갖는다&#x27;라고 읽을 수 있다. 자바스크립트 객체의 프로퍼티 키는 문자열 또는 (배열 객체의 경우) 숫자를 키의 타입으로 사용하기 때문에, T타입은 <code class="css-0">number</code>또는 <code class="css-0">string</code>타입에 할당할 수 있는 타입이어야 한다.</p></blockquote></li></ul><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">readonly 한정자를 활용한 읽기전용 필드 정의</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> user </span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">readonly</span><span class="token plain"> firstName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">3</span><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> firstName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;anne&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">4</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">firstName</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">&#x27;anne with e&#x27;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Cannot assign to &#x27;firstName&#x27; because it is a read-only property.ts(2540)</span></div></code></pre></div></li></ul><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">저자 보리스 체르니의 객체 요약</p><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">객체 리터럴 또는 형태라 불리는 표기법 <code class="css-0">{a: string}</code>은 객체가 어떤 필드를 포함할지 알거나 객체의 모든 값이 같은 팁을 가질 때 사용할 수 있다.</p></li><li class="css-0"><p class="css-1ccrm8j">빈 객체 리터럴 표기법 <code class="css-0">{}</code>. 이건 추천하지 않는다 - 빈 객체 타입에는 null과 undefined를 제외한 모든 타입을 할당 할 수 있다.</p><div class="gatsby-highlight" data-language="typescript"><pre class="prism-code language-typescript" style="color:#d6deeb;background-color:#011627" data-linenumber="true"><button type="button" name="copy code to clipboard" class="code-copy-button css-l84w3r">Copy<span aria-roledescription="status" class="css-1gy8470">copy code to clipboard</span></button><code class="language-typescript"><div class="token-line" style="color:#d6deeb"><span class="line-number-style">1</span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> danger</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="line-number-style">2</span><span class="token plain">danger </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// 여기서 에러없이 동작한다..! Type Safety를 생각한다면 쓰지말자</span></div></code></pre></div></li><li class="css-0"><p class="css-1ccrm8j"><code class="css-0">object</code> 타입. 필드에 관심없고, 그저 객체가 필요할 때나 사용한다.</p></li><li class="css-0"><p class="css-1ccrm8j"><code class="css-0">Object</code> 타입. 사용하지 않는 것이 좋다.</p></li></ul></li></ul></content:encoded></item><item><title><![CDATA[웹 아키텍쳐 101 - 번역]]></title><link>https://domuk-k.github.io/web-architecture101</link><guid isPermaLink="false">https://domuk-k.github.io/web-architecture101</guid><pubDate>Sat, 31 Oct 2020 15:00:00 GMT</pubDate><content:encoded><style data-emotion-css="1hycliv">body{--theme-ui-colors-transparent:var(--theme-ui-colors-transparent,transparent);--theme-ui-colors-black:var(--theme-ui-colors-black,#000);--theme-ui-colors-white:var(--theme-ui-colors-white,#fff);--theme-ui-colors-gray-0:var(--theme-ui-colors-gray-0,null);--theme-ui-colors-gray-1:var(--theme-ui-colors-gray-1,#f7fafc);--theme-ui-colors-gray-2:var(--theme-ui-colors-gray-2,#edf2f7);--theme-ui-colors-gray-3:var(--theme-ui-colors-gray-3,#e2e8f0);--theme-ui-colors-gray-4:var(--theme-ui-colors-gray-4,#cbd5e0);--theme-ui-colors-gray-5:var(--theme-ui-colors-gray-5,#a0aec0);--theme-ui-colors-gray-6:var(--theme-ui-colors-gray-6,#718096);--theme-ui-colors-gray-7:var(--theme-ui-colors-gray-7,#4a5568);--theme-ui-colors-gray-8:var(--theme-ui-colors-gray-8,#2d3748);--theme-ui-colors-gray-9:var(--theme-ui-colors-gray-9,#1a202c);--theme-ui-colors-red-0:var(--theme-ui-colors-red-0,null);--theme-ui-colors-red-1:var(--theme-ui-colors-red-1,#fff5f5);--theme-ui-colors-red-2:var(--theme-ui-colors-red-2,#fed7d7);--theme-ui-colors-red-3:var(--theme-ui-colors-red-3,#feb2b2);--theme-ui-colors-red-4:var(--theme-ui-colors-red-4,#fc8181);--theme-ui-colors-red-5:var(--theme-ui-colors-red-5,#f56565);--theme-ui-colors-red-6:var(--theme-ui-colors-red-6,#e53e3e);--theme-ui-colors-red-7:var(--theme-ui-colors-red-7,#c53030);--theme-ui-colors-red-8:var(--theme-ui-colors-red-8,#9b2c2c);--theme-ui-colors-red-9:var(--theme-ui-colors-red-9,#742a2a);--theme-ui-colors-orange-0:var(--theme-ui-colors-orange-0,null);--theme-ui-colors-orange-1:var(--theme-ui-colors-orange-1,#fffaf0);--theme-ui-colors-orange-2:var(--theme-ui-colors-orange-2,#feebc8);--theme-ui-colors-orange-3:var(--theme-ui-colors-orange-3,#fbd38d);--theme-ui-colors-orange-4:var(--theme-ui-colors-orange-4,#f6ad55);--theme-ui-colors-orange-5:var(--theme-ui-colors-orange-5,#ed8936);--theme-ui-colors-orange-6:var(--theme-ui-colors-orange-6,#dd6b20);--theme-ui-colors-orange-7:var(--theme-ui-colors-orange-7,#c05621);--theme-ui-colors-orange-8:var(--theme-ui-colors-orange-8,#9c4221);--theme-ui-colors-orange-9:var(--theme-ui-colors-orange-9,#7b341e);--theme-ui-colors-yellow-0:var(--theme-ui-colors-yellow-0,null);--theme-ui-colors-yellow-1:var(--theme-ui-colors-yellow-1,#fffff0);--theme-ui-colors-yellow-2:var(--theme-ui-colors-yellow-2,#fefcbf);--theme-ui-colors-yellow-3:var(--theme-ui-colors-yellow-3,#faf089);--theme-ui-colors-yellow-4:var(--theme-ui-colors-yellow-4,#f6e05e);--theme-ui-colors-yellow-5:var(--theme-ui-colors-yellow-5,#ecc94b);--theme-ui-colors-yellow-6:var(--theme-ui-colors-yellow-6,#d69e2e);--theme-ui-colors-yellow-7:var(--theme-ui-colors-yellow-7,#b7791f);--theme-ui-colors-yellow-8:var(--theme-ui-colors-yellow-8,#975a16);--theme-ui-colors-yellow-9:var(--theme-ui-colors-yellow-9,#744210);--theme-ui-colors-green-0:var(--theme-ui-colors-green-0,null);--theme-ui-colors-green-1:var(--theme-ui-colors-green-1,#f0fff4);--theme-ui-colors-green-2:var(--theme-ui-colors-green-2,#c6f6d5);--theme-ui-colors-green-3:var(--theme-ui-colors-green-3,#9ae6b4);--theme-ui-colors-green-4:var(--theme-ui-colors-green-4,#68d391);--theme-ui-colors-green-5:var(--theme-ui-colors-green-5,#48bb78);--theme-ui-colors-green-6:var(--theme-ui-colors-green-6,#38a169);--theme-ui-colors-green-7:var(--theme-ui-colors-green-7,#2f855a);--theme-ui-colors-green-8:var(--theme-ui-colors-green-8,#276749);--theme-ui-colors-green-9:var(--theme-ui-colors-green-9,#22543d);--theme-ui-colors-teal-0:var(--theme-ui-colors-teal-0,null);--theme-ui-colors-teal-1:var(--theme-ui-colors-teal-1,#e6fffa);--theme-ui-colors-teal-2:var(--theme-ui-colors-teal-2,#b2f5ea);--theme-ui-colors-teal-3:var(--theme-ui-colors-teal-3,#81e6d9);--theme-ui-colors-teal-4:var(--theme-ui-colors-teal-4,#4fd1c5);--theme-ui-colors-teal-5:var(--theme-ui-colors-teal-5,#38b2ac);--theme-ui-colors-teal-6:var(--theme-ui-colors-teal-6,#319795);--theme-ui-colors-teal-7:var(--theme-ui-colors-teal-7,#2c7a7b);--theme-ui-colors-teal-8:var(--theme-ui-colors-teal-8,#285e61);--theme-ui-colors-teal-9:var(--theme-ui-colors-teal-9,#234e52);--theme-ui-colors-blue-0:var(--theme-ui-colors-blue-0,null);--theme-ui-colors-blue-1:var(--theme-ui-colors-blue-1,#ebf8ff);--theme-ui-colors-blue-2:var(--theme-ui-colors-blue-2,#bee3f8);--theme-ui-colors-blue-3:var(--theme-ui-colors-blue-3,#90cdf4);--theme-ui-colors-blue-4:var(--theme-ui-colors-blue-4,#63b3ed);--theme-ui-colors-blue-5:var(--theme-ui-colors-blue-5,#4299e1);--theme-ui-colors-blue-6:var(--theme-ui-colors-blue-6,#3182ce);--theme-ui-colors-blue-7:var(--theme-ui-colors-blue-7,#2b6cb0);--theme-ui-colors-blue-8:var(--theme-ui-colors-blue-8,#2c5282);--theme-ui-colors-blue-9:var(--theme-ui-colors-blue-9,#2a4365);--theme-ui-colors-indigo-0:var(--theme-ui-colors-indigo-0,null);--theme-ui-colors-indigo-1:var(--theme-ui-colors-indigo-1,#ebf4ff);--theme-ui-colors-indigo-2:var(--theme-ui-colors-indigo-2,#c3dafe);--theme-ui-colors-indigo-3:var(--theme-ui-colors-indigo-3,#a3bffa);--theme-ui-colors-indigo-4:var(--theme-ui-colors-indigo-4,#7f9cf5);--theme-ui-colors-indigo-5:var(--theme-ui-colors-indigo-5,#667eea);--theme-ui-colors-indigo-6:var(--theme-ui-colors-indigo-6,#5a67d8);--theme-ui-colors-indigo-7:var(--theme-ui-colors-indigo-7,#4c51bf);--theme-ui-colors-indigo-8:var(--theme-ui-colors-indigo-8,#434190);--theme-ui-colors-indigo-9:var(--theme-ui-colors-indigo-9,#3c366b);--theme-ui-colors-purple-0:var(--theme-ui-colors-purple-0,null);--theme-ui-colors-purple-1:var(--theme-ui-colors-purple-1,#faf5ff);--theme-ui-colors-purple-2:var(--theme-ui-colors-purple-2,#e9d8fd);--theme-ui-colors-purple-3:var(--theme-ui-colors-purple-3,#d6bcfa);--theme-ui-colors-purple-4:var(--theme-ui-colors-purple-4,#b794f4);--theme-ui-colors-purple-5:var(--theme-ui-colors-purple-5,#9f7aea);--theme-ui-colors-purple-6:var(--theme-ui-colors-purple-6,#805ad5);--theme-ui-colors-purple-7:var(--theme-ui-colors-purple-7,#6b46c1);--theme-ui-colors-purple-8:var(--theme-ui-colors-purple-8,#553c9a);--theme-ui-colors-purple-9:var(--theme-ui-colors-purple-9,#44337a);--theme-ui-colors-pink-0:var(--theme-ui-colors-pink-0,null);--theme-ui-colors-pink-1:var(--theme-ui-colors-pink-1,#fff5f7);--theme-ui-colors-pink-2:var(--theme-ui-colors-pink-2,#fed7e2);--theme-ui-colors-pink-3:var(--theme-ui-colors-pink-3,#fbb6ce);--theme-ui-colors-pink-4:var(--theme-ui-colors-pink-4,#f687b3);--theme-ui-colors-pink-5:var(--theme-ui-colors-pink-5,#ed64a6);--theme-ui-colors-pink-6:var(--theme-ui-colors-pink-6,#d53f8c);--theme-ui-colors-pink-7:var(--theme-ui-colors-pink-7,#b83280);--theme-ui-colors-pink-8:var(--theme-ui-colors-pink-8,#97266d);--theme-ui-colors-pink-9:var(--theme-ui-colors-pink-9,#702459);--theme-ui-colors-grayDark:var(--theme-ui-colors-grayDark,#2d3748);--theme-ui-colors-text:var(--theme-ui-colors-text,#2d3748);--theme-ui-colors-background:var(--theme-ui-colors-background,#fff);--theme-ui-colors-primary:var(--theme-ui-colors-primary,#6b46c1);--theme-ui-colors-primaryHover:var(--theme-ui-colors-primaryHover,#2c5282);--theme-ui-colors-secondary:var(--theme-ui-colors-secondary,#5f6c80);--theme-ui-colors-muted:var(--theme-ui-colors-muted,#e2e8f0);--theme-ui-colors-success:var(--theme-ui-colors-success,#9ae6b4);--theme-ui-colors-info:var(--theme-ui-colors-info,#63b3ed);--theme-ui-colors-warning:var(--theme-ui-colors-warning,#faf089);--theme-ui-colors-danger:var(--theme-ui-colors-danger,#feb2b2);--theme-ui-colors-light:var(--theme-ui-colors-light,#f7fafc);--theme-ui-colors-dark:var(--theme-ui-colors-dark,#2d3748);--theme-ui-colors-textMuted:var(--theme-ui-colors-textMuted,#718096);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-toggleIcon,#2d3748);--theme-ui-colors-heading:var(--theme-ui-colors-heading,#000);--theme-ui-colors-divide:var(--theme-ui-colors-divide,#cbd5e0);color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);}body.theme-ui-dark{--theme-ui-colors-text:var(--theme-ui-colors-modes-dark-text,#cbd5e0);--theme-ui-colors-primary:var(--theme-ui-colors-modes-dark-primary,#9f7aea);--theme-ui-colors-secondary:var(--theme-ui-colors-modes-dark-secondary,#7f8ea3);--theme-ui-colors-toggleIcon:var(--theme-ui-colors-modes-dark-toggleIcon,#cbd5e0);--theme-ui-colors-background:var(--theme-ui-colors-modes-dark-background,#1A202C);--theme-ui-colors-heading:var(--theme-ui-colors-modes-dark-heading,#fff);--theme-ui-colors-divide:var(--theme-ui-colors-modes-dark-divide,#2d3748);--theme-ui-colors-muted:var(--theme-ui-colors-modes-dark-muted,#2d3748);}</style><style data-emotion-css="tm2q0o">*{box-sizing:border-box;}body{margin:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.625;font-weight:400;color:var(--theme-ui-colors-text,#2d3748);background-color:var(--theme-ui-colors-background,#fff);padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><style data-emotion-css="13l3oqy">.css-13l3oqy{background-color:var(--theme-ui-colors-muted,#e2e8f0);border:0;height:1px;margin:1rem;margin-left:0;margin-right:0;}</style><hr class="css-13l3oqy"/><style data-emotion-css="1ccrm8j">.css-1ccrm8j{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;word-break:break-word;}@media screen and (min-width:640px){.css-1ccrm8j{font-size:1rem;}}@media screen and (min-width:768px){.css-1ccrm8j{font-size:1.25rem;}}</style><p class="css-1ccrm8j">---
title: &quot;웹 아키텍쳐 101 - 번역&quot;
date: 2020-11-01
description: &quot;Web Architecture 101 한국어 번역&quot;
slug: &quot;/web-architecture101&quot;
tags:</p><style data-emotion-css="15rlv7r">.css-15rlv7r li{font-size:1rem;-webkit-letter-spacing:-0.003em;-moz-letter-spacing:-0.003em;-ms-letter-spacing:-0.003em;letter-spacing:-0.003em;line-height:1.625;--baseline-multiplier:0.179;--x-height-multiplier:0.35;}@media screen and (min-width:640px){.css-15rlv7r li{font-size:1rem;}}@media screen and (min-width:768px){.css-15rlv7r li{font-size:1.25rem;}}</style><ul class="css-15rlv7r"><li class="css-0">아키텍쳐</li><li class="css-0">DevOps</li></ul><hr class="css-13l3oqy"/><style data-emotion-css="12k12li">.css-12k12li{font-family:inherit;font-weight:700;line-height:1.25;margin:0;margin-bottom:0.25rem;font-size:1.875rem;margin-top:2rem;color:var(--theme-ui-colors-heading,#000);}@media screen and (min-width:640px){.css-12k12li{font-size:2.25rem;}}@media screen and (min-width:768px){.css-12k12li{font-size:3rem;}}</style><h2 class="css-12k12li">Web Architecture 기본 개념 - 웹 개발을 시작할 때 알았다면 좋았을 것들</h2><p class="css-1ccrm8j"><style data-emotion-css="1od09yo">.css-1od09yo{color:var(--theme-ui-colors-primary,#6b46c1);-webkit-text-decoration:none;text-decoration:none;}.css-1od09yo:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="https://engineering.videoblocks.com/web-architecture-101-a3224e126947" class="css-1od09yo">Jonathan Fulton 님의 글</a> 을 의역했습니다.</p><img alt="web architecture diagram" src="https://miro.medium.com/max/665/1*K6M-x-6e39jMq_c-2xqZIQ.png" class="css-0"/><p class="css-1ccrm8j">이 다이어그램은 Storyblocks의 서비스 아키텍쳐를 제법 잘 표현한 그림입니다. 경험 많은 웹개발자가 아니시라면, 꽤 복잡해보이실 수 있어요. 각 컴포넌트를 자세히 알아보기 전에, 아래 내용을 보면 좀 더 접근하기 편할 겁니다.</p><style data-emotion-css="1gtwvjp">.css-1gtwvjp{border-left-color:var(--theme-ui-colors-primary,#6b46c1);border-left-style:solid;border-left-width:6px;margin-left:0;margin-right:0;padding-left:2rem;}.css-1gtwvjp p{font-style:italic;}</style><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j">구글에 <em class="css-0">“Strong Beautiful Fog And Sunbeams In The Forest”</em> 를 입력하면, 첫번째 검색결과로 Storyblocks이 나옵니다. *stock 이미지와 벡터 이미지 사이트입니다.</p><p class="css-1ccrm8j">사용자가 검색 결과를 클릭하면 유저의 브라우저가 Storyblocks의 이미지 상세페이지로 리디렉션합니다. 내부적으로, 유저의 브라우저는 <strong class="css-0">DNS 서버</strong>에 Storyblocks의 주소를 조회하는 요청을 하고, 그 결과를 가지고 요청합니다.</p><p class="css-1ccrm8j">요청은 Storyblocks의 <strong class="css-0">Load Balancer</strong>에 도달하고, 요청을 처리 중에 우리가 서비스 중인 10개 이상의 <strong class="css-0">웹 앱 서버</strong> 중 하나를 랜덤으로 결정합니다. <strong class="css-0">웹 앱 서버</strong>는 <strong class="css-0">캐싱 서비스</strong>에서 이미지에 대한 정보를 조회하고 <strong class="css-0">데이터베이스</strong>에서 남아있는 데이터를 가져옵니다. 우리는 이미지를 위한 color profile이 처리되지 않았다는 걸 알아차리고, <strong class="css-0">Job Queue</strong>에 &quot;color profile&quot; job을 보냅니다. Job Queue는 우리가 명령한 job들을 비동기로 처리하고 결과를 적절히 데이터베이스에 업데이트합니다.</p><p class="css-1ccrm8j">그런 다음, 우리는 input으로서 사진의 제목을 가지고 <strong class="css-0">full text search service</strong>에 요청을 보내서 유사한 사진을 찾는 시도를 합니다. 사용자가 Storyblocks 회원으로 로그인 된 상태라면, 그 사람의 계정 정보를 우리의 <strong class="css-0">계정 서비스</strong>에서 가져옵니다. 마지막으로, <strong class="css-0">data firehose</strong>에 페이지뷰 이벤트를 보내서 우리의 <strong class="css-0">cloud storage system</strong>에 저장되고, 결국 <strong class="css-0">Data warehouse</strong>에 로드되도록 합니다. 데이터 분석가들은 이를 바탕으로 비즈니스 문제를 연구할 수 있죠.</p><p class="css-1ccrm8j">이제 <strong class="css-0">웹 앱 서버</strong>는 HTML문서를 렌더링하고 로드밸런서를 통해 유저의 브라우저에 돌려보냅니다. 우리가 CDN으로 연결해둔 <strong class="css-0">cloud storage system</strong>을 통해 로드된 Javascript와 CSS asset이 페이지에 포함되고, 결국 유저의 브라우저는 CDN와 통신하여 컨텐츠를 읽어옵니다.</p><p class="css-1ccrm8j">끝으로, 유저의 브라우저는 유저에게 페이지를 렌더링하여 보여줍니다.</p></blockquote><p class="css-1ccrm8j">이제, 여러분들에게 아키텍처의 각 구성요소를 안내 해드릴게요. 초심자를 위한 설명으로 웹 아키텍처에 대한 이해를 넓힐 수 있도록 <a href="https://en.wikipedia.org/wiki/Mental_model" class="css-1od09yo">mental model</a>을 제공하겠습니다. Storyblocks에 있는 동안 제가 공부한 바를 바탕으로, 특정한 구현방식이 담긴 글들로 팔로업 해드릴 예정입니다.</p><ol class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">DNS</p><p class="css-1ccrm8j">DNS는 &quot;Domain Name System&quot;을 말합니다. World Wide Web(www)이 가능하게 하는 기반 기술이죠. 제일 기본으로 DNS는 IP 주소(e.g. 12.237.48.129)과 도메인 네임(e.g. google.com)의 매핑관계에서 키/값 조회를 제공합니다. 이 덕분에 당신의 브라우저가 올바른 서버로 요청을 라우팅할 수 있는 것이죠. 휴대전화번호 처럼, 도메인 네임과 IP 주소는 &quot;홍길동&quot;과 &quot;02-123-3456&quot;의 관계입니다. 홍길동의 전화번호를 연락처에서 찾아야 했던 것처럼, 도메인을 찾으려면 IP주소를 찾으려면 DNS가 필요합니다.</p><p class="css-1ccrm8j">더 다룰 수 있는 자세한 내용이 많지만, 초심자 대상인 지금 수준에서는 핵심이 아니기 때문에 넘어가겠습니다.</p></li><li class="css-0"><p class="css-1ccrm8j">로드 밸런서 Load Balancer</p><p class="css-1ccrm8j">load balancing에 대해 말하기 전에, 잠깐 물러나서 horizontal scaling수평적 확장과 vertical scaling수직적 확장를 알아보죠. 그게 무엇이고, 차이는 뭘까요? 이 <a href="https://stackoverflow.com/questions/11707879/difference-between-scaling-horizontally-and-vertically-for-databases" class="css-1od09yo">stackoverflow 글</a>에 간단히 다뤄진 것처럼, 수평적 확장은 리소스 풀에 - 갖춰놓은 서버 네트워크 등 - 장비를 증설해서 확장하는 것을 말합니다. 반면, 수직적 확장은 지금 있는 장비에 스펙(e.g. CPU, RAM)을 업그레이드하는 것을 말합니다.</p></li></ol><center>
<img width="400px" src="https://i.stack.imgur.com/On3tO.png" class="css-0"/>
</center><p class="css-1ccrm8j"> 웹 개발에서는 거의 언제나 수평적 확장을 선호할 겁니다. 일단 쉽게 말해서, 서버가 터지니까요. 그것도 랜덤으로 터집니다. 네트워크 성능도 저하되죠. 전체 데이터 센터가 가끔 오프라인이 되기도 하죠. 중단없는 서비스를 위해서 하나 이상의 서버를 운영해야합니다. 다시 말해, 웹앱을 &#x27;fault tolerant&#x27;(내결함성: 결함에 내성있는) 하게 해야죠. 둘째로, 수평적 확장을 이용하면 - 서버를 증설하면 - 웹앱을 위한 백엔드 서비스들의 각 부분이 각각의 서버에서 최소한으로 연결시킬 수 있습니다. (웹 서버나, 데이터베이스, 00 서비스 등) 마지막으로, 더이상 수직적으로 scale할 수 없는 수준까지 증설할겁니다. 당신의 어플리케이션의 연산을 모두 수행할 만큼 거대한 컴퓨터는 없습니다. 훨씬 작은 규모의 회사에 적용되는 이야기지만 Google의 검색 플랫폼을 전형적인 예라고 할 수 있죠. 예를 들어 Storyblocks는 어떤 순간에는 150 ~ 400 개의 AWS EC2 인스턴스를 실행합니다. 수직 확장을 통해 전체 컴퓨팅 성능을 제공하는 것은 어려울 것입니다.</p><p class="css-1ccrm8j"> 좋아요, 이제 load balancer로 돌아갑시다. Load balancer는 수평적 확장을 위한 기술입니다. load balancer는 들어오는 요청을 어플리케이션 서버들에게 각각 나눠 준 다음 돌려받은 응답을 클라이언트에게 전송합니다. 어플리케이션 서버들은 보통 서로의 동일한 이미지입니다. 각각의 서버 모두가 동일하게 요청을 처리해야만 서버 세트에 요청을 분산하여 과부하가 발생하지 않게 됩니다.</p><p class="css-1ccrm8j"> 이제 됐습니다. 개념적으로 load balancer는 충분히 명료하죠. 내부적으로는 - under the hood - 분명 복잡하지만 역시 초심자 대상에서는 불필요하게 파보지는 말도록 하죠.</p><ol start="3" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">웹 어플리케이션 서버 Web Application Servers</p><p class="css-1ccrm8j">수준 높은 웹 어플리케이션 서버는 상대적으로 설명하기 간단합니다. 이 서버는 유저(의 브라우저)로 부터 요청을 받아 유저의 브라우저로 HTML 문서를 보내는 핵심 비즈니스 모델을 수행합니다. 그 일을 하기 위해 보통 수많은 백엔드 인프라와 통신합니다. DB, cacheing layer, job queue, search service, 또 다른 micro service들, data/logging queue 등등 이 있죠. 위에서 말한대로, 최소한 2개, 대부분 더 많은 인프라를 load balancer에 연결해서 요청을 처리합니다.</p><p class="css-1ccrm8j">웹 앱 서버를 구현하는 데에는 특정 언어, 그리고 그에 맞는 웹 프레임워크가 필요합니다. Node.js에는 Express, Ruby에는 Ruby on Rails, Scala에는 Play, PHP에는 Laravel, 등등 이죠.</p></li></ol><ol start="4" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">Database Servers</p><p class="css-1ccrm8j">모든 모던 웹 어플리케이션은 데이터 저장을 위해 하나 이상의 DB를 사용합니다. 데이터베이스는 데이터 구조를 정의하고, 새 데이터를 추가하고, 존재하는 데이터를 찾고, 업데이트/삭제하고, 데이터들로 연산하는 등을 위한 방법을 제공합니다. 대부분 웹 앱 서버나 job server나 DB서버와 직접 통신하죠.</p><p class="css-1ccrm8j">각 백엔드 서비스는 대체로 다른 앱들과는 연결되지 않은 자신만의 DB를 갖고 있습니다.</p><p class="css-1ccrm8j">각각의 아키텍처 구성요소에 대해 깊이 파고들지 않으려고 했지만, SQL과 NoSQL에 대해서는 설명드려야 겠습니다.</p><p class="css-1ccrm8j">SQL은 &quot;Structured Query Language&quot;로 1970년대에 발명되었습니다. 대중적으로 접근할 수 있는 관계형 데이터 셋에 쿼리를 날리는 표준 방식으로 제안된 것이죠. SQL은 테이블로 데이터를 저장하는 데, 테이블들은 각각 보통 정수 형태인 ID로 서로 연결되어 있습니다. 사용자의 주소 정보를 저장하는 간단한 예시를 보죠. users 테이블과 user_address 테이블 2개의 테이블이 있고, user의 id로 서로 연결되어 있습니다. 아래 간단한 수준으로 그린 이미지가 있습니다. user_address 테이블에 user_id 컬럼은 FK(foreign key)로, users 테이블의 id 컬럼과 연결되어 있으니 두 테이블은 연결된 것입니다.</p><p class="css-1ccrm8j"><img src="https://miro.medium.com/max/451/1*Ln39QPggpJVMAScUBsrcCQ.png" alt="테이블 연결" class="css-0"/></p><p class="css-1ccrm8j">SQL을 잘 모른다면, 꼭 튜토리얼을 해보길 권해드립니다. 웹 개발에서는 어디서나 쓰이고, 하나의 어플리케이션을 설계할 때 기본이 되니까, 알고 있어야 합니다.</p><p class="css-1ccrm8j">NoSQL은 대규모 웹 어플리케이션이 만들어 낼 만한 거대한 양의 데이터를 처리하기 위해 떠오른 데이터베이스 기술들을 말합니다. - 대부분의 SQL에서 나온 DB들은 수평적 확장이 어렵고, 어떤 떄는 수직적 확장만 가능합니다. NoSQL을 전혀 모른다면, 수준 높은 소개자료로 시작하길 권해드립니다.</p><ul class="css-15rlv7r"><li class="css-0"><a href="https://www.mongodb.com/nosql-explained" class="css-1od09yo">MongoDB</a></li><li class="css-0"><a href="https://www.w3resource.com/mongodb/nosql.php" class="css-1od09yo">https://www.w3resource.com/mongodb/nosql.php</a></li><li class="css-0"><a href="http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html" class="css-1od09yo">http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html</a></li></ul></li></ol><p class="css-1ccrm8j"> 또한 업계는 전반적으로 NoSQL 데이터베이스의 경우에도 인터페이스로 SQL을 조정하고 있으므로 SQL을 모르는 경우 꼭 배워야합니다. 요즘에는 피할 방법이 거의 없습니다.</p><ol start="5" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">Caching Service</p><p class="css-1ccrm8j">캐싱 서비스는 간단한 key/value 저장소를 제공합니다. 덕분에 <code class="css-0">O(1)</code> 에 가까운 시간복잡도로 정보를 저장하고 조회할 수 있죠. 어플리케이션들은 캐싱 서비스를 활용하여 무거운 연산의 결과를 저장합니다. 필요할 때 다시 연산하는 대신 캐시로 부터 데이터를 불러오는 것이죠. 어플리케이션은 DB에 날린 쿼리의 결과, 외부 서비스 호출 결과, 특정 uri에 대응하는 html문서 등등을 캐싱합니다. real world의 예시를 들어보죠.</p></li></ol><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">구글은 &quot;고양이&quot;, &quot;비틀즈&quot; 같은 일반적인 검색어에 대한 검색결과를 캐싱합니다.</p></li><li class="css-0"><p class="css-1ccrm8j">페이스북은 당신이 로그인했을 때 보게되는 대부분의 데이터를 캐싱합니다. 게시글, 친구목록 등등이죠. 관련된 더 자세한 설명을 <a href="https://medium.com/@shagun/scaling-memcache-at-facebook-1ba77d71c082" class="css-1od09yo">여기서</a> 볼 수 있습니다.</p></li><li class="css-0"><p class="css-1ccrm8j">스토리북은 서버사이드 리액트 렌더링의 HTML결과를 캐시합니다. 검색 결과, 자동완성 결과 등등 이죠.</p><p class="css-1ccrm8j">가장 많이 사용되는 캐싱 서버 기술은 Redis와 Memcache입니다. 다른 포스팅에서 다뤄보죠.</p></li></ul><ol start="6" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">Job Queue &amp; Job Servers</p></li><li class="css-0"><p class="css-1ccrm8j">Full-text Search Service</p></li><li class="css-0"><p class="css-1ccrm8j">Services</p></li><li class="css-0"><p class="css-1ccrm8j">Data</p></li><li class="css-0"><p class="css-1ccrm8j">Cloud storage</p></li><li class="css-0"><p class="css-1ccrm8j">CDN</p></li></ol><h2 class="css-12k12li">나가며..</h2><p class="css-1ccrm8j">Web Architecture 101의 마무리입니다. 도움이 되길 바래요. 내년이나 내후년는 소개드린 아키텍쳐의 구성요소들 중 몇 개에 대해 deep dive할 수 있는 글을 연재할 수 있기 바랍니다.</p><h2 class="css-12k12li">Web Architecture 기본 개념 - 웹 개발을 시작할 때 알았다면 좋았을 것들</h2><p class="css-1ccrm8j"><a href="https://engineering.videoblocks.com/web-architecture-101-a3224e126947" class="css-1od09yo">Jonathan Fulton 님의 글</a> 을 의역했습니다.</p><img alt="web architecture diagram" src="https://miro.medium.com/max/665/1*K6M-x-6e39jMq_c-2xqZIQ.png" class="css-0"/><p class="css-1ccrm8j">이 다이어그램은 Storyblocks의 서비스 아키텍쳐를 제법 잘 표현한 그림입니다. 경험 많은 웹개발자가 아니시라면, 꽤 복잡해보이실 수 있어요. 각 컴포넌트를 자세히 알아보기 전에, 아래 내용을 보면 좀 더 접근하기 편할 겁니다.</p><blockquote class="css-1gtwvjp"><p class="css-1ccrm8j">구글에 <em class="css-0">“Strong Beautiful Fog And Sunbeams In The Forest”</em> 를 입력하면, 첫번째 검색결과로 Storyblocks이 나옵니다. *stock 이미지와 벡터 이미지 사이트입니다.</p><p class="css-1ccrm8j">사용자가 검색 결과를 클릭하면 유저의 브라우저가 Storyblocks의 이미지 상세페이지로 리디렉션합니다. 내부적으로, 유저의 브라우저는 <strong class="css-0">DNS 서버</strong>에 Storyblocks의 주소를 조회하는 요청을 하고, 그 결과를 가지고 요청합니다.</p><p class="css-1ccrm8j">요청은 Storyblocks의 <strong class="css-0">Load Balancer</strong>에 도달하고, 요청을 처리 중에 우리가 서비스 중인 10개 이상의 <strong class="css-0">웹 앱 서버</strong> 중 하나를 랜덤으로 결정합니다. <strong class="css-0">웹 앱 서버</strong>는 <strong class="css-0">캐싱 서비스</strong>에서 이미지에 대한 정보를 조회하고 <strong class="css-0">데이터베이스</strong>에서 남아있는 데이터를 가져옵니다. 우리는 이미지를 위한 color profile이 처리되지 않았다는 걸 알아차리고, <strong class="css-0">Job Queue</strong>에 &quot;color profile&quot; job을 보냅니다. Job Queue는 우리가 명령한 job들을 비동기로 처리하고 결과를 적절히 데이터베이스에 업데이트합니다.</p><p class="css-1ccrm8j">그런 다음, 우리는 input으로서 사진의 제목을 가지고 <strong class="css-0">full text search service</strong>에 요청을 보내서 유사한 사진을 찾는 시도를 합니다. 사용자가 Storyblocks 회원으로 로그인 된 상태라면, 그 사람의 계정 정보를 우리의 <strong class="css-0">계정 서비스</strong>에서 가져옵니다. 마지막으로, <strong class="css-0">data firehose</strong>에 페이지뷰 이벤트를 보내서 우리의 <strong class="css-0">cloud storage system</strong>에 저장되고, 결국 <strong class="css-0">Data warehouse</strong>에 로드되도록 합니다. 데이터 분석가들은 이를 바탕으로 비즈니스 문제를 연구할 수 있죠.</p><p class="css-1ccrm8j">이제 <strong class="css-0">웹 앱 서버</strong>는 HTML문서를 렌더링하고 로드밸런서를 통해 유저의 브라우저에 돌려보냅니다. 우리가 CDN으로 연결해둔 <strong class="css-0">cloud storage system</strong>을 통해 로드된 Javascript와 CSS asset이 페이지에 포함되고, 결국 유저의 브라우저는 CDN와 통신하여 컨텐츠를 읽어옵니다.</p><p class="css-1ccrm8j">끝으로, 유저의 브라우저는 유저에게 페이지를 렌더링하여 보여줍니다.</p></blockquote><p class="css-1ccrm8j">이제, 여러분들에게 아키텍처의 각 구성요소를 안내 해드릴게요. 초심자를 위한 설명으로 웹 아키텍처에 대한 이해를 넓힐 수 있도록 <a href="https://en.wikipedia.org/wiki/Mental_model" class="css-1od09yo">mental model</a>을 제공하겠습니다. Storyblocks에 있는 동안 제가 공부한 바를 바탕으로, 특정한 구현방식이 담긴 글들로 팔로업 해드릴 예정입니다.</p><ol class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">DNS</p><p class="css-1ccrm8j">DNS는 &quot;Domain Name System&quot;을 말합니다. World Wide Web(www)이 가능하게 하는 기반 기술이죠. 제일 기본으로 DNS는 IP 주소(e.g. 12.237.48.129)과 도메인 네임(e.g. google.com)의 매핑관계에서 키/값 조회를 제공합니다. 이 덕분에 당신의 브라우저가 올바른 서버로 요청을 라우팅할 수 있는 것이죠. 휴대전화번호 처럼, 도메인 네임과 IP 주소는 &quot;홍길동&quot;과 &quot;02-123-3456&quot;의 관계입니다. 홍길동의 전화번호를 연락처에서 찾아야 했던 것처럼, 도메인을 찾으려면 IP주소를 찾으려면 DNS가 필요합니다.</p><p class="css-1ccrm8j">더 다룰 수 있는 자세한 내용이 많지만, 초심자 대상인 지금 수준에서는 핵심이 아니기 때문에 넘어가겠습니다.</p></li><li class="css-0"><p class="css-1ccrm8j">로드 밸런서 Load Balancer</p><p class="css-1ccrm8j">load balancing에 대해 말하기 전에, 잠깐 물러나서 horizontal scaling수평적 확장과 vertical scaling수직적 확장를 알아보죠. 그게 무엇이고, 차이는 뭘까요? 이 <a href="https://stackoverflow.com/questions/11707879/difference-between-scaling-horizontally-and-vertically-for-databases" class="css-1od09yo">stackoverflow 글</a>에 간단히 다뤄진 것처럼, 수평적 확장은 리소스 풀에 - 갖춰놓은 서버 네트워크 등 - 장비를 증설해서 확장하는 것을 말합니다. 반면, 수직적 확장은 지금 있는 장비에 스펙(e.g. CPU, RAM)을 업그레이드하는 것을 말합니다.</p><center>
<img width="400px" src="https://i.stack.imgur.com/On3tO.png" class="css-0"/></center></li></ol><p class="css-1ccrm8j"> 웹 개발에서는 거의 언제나 수평적 확장을 선호할 겁니다. 일단 쉽게 말해서, 서버가 터지니까요. 그것도 랜덤으로 터집니다. 네트워크 성능도 저하되죠. 전체 데이터 센터가 가끔 오프라인이 되기도 하죠. 중단없는 서비스를 위해서 하나 이상의 서버를 운영해야합니다. 다시 말해, 웹앱을 &#x27;fault tolerant&#x27;(내결함성: 결함에 내성있는) 하게 해야죠. 둘째로, 수평적 확장을 이용하면 - 서버를 증설하면 - 웹앱을 위한 백엔드 서비스들의 각 부분이 각각의 서버에서 최소한으로 연결시킬 수 있습니다. (웹 서버나, 데이터베이스, 00 서비스 등) 마지막으로, 더이상 수직적으로 scale할 수 없는 수준까지 증설할겁니다. 당신의 어플리케이션의 연산을 모두 수행할 만큼 거대한 컴퓨터는 없습니다. 훨씬 작은 규모의 회사에 적용되는 이야기지만 Google의 검색 플랫폼을 전형적인 예라고 할 수 있죠. 예를 들어 Storyblocks는 어떤 순간에는 150 ~ 400 개의 AWS EC2 인스턴스를 실행합니다. 수직 확장을 통해 전체 컴퓨팅 성능을 제공하는 것은 어려울 것입니다.</p><p class="css-1ccrm8j"> 좋아요, 이제 load balancer로 돌아갑시다. Load balancer는 수평적 확장을 위한 기술입니다. load balancer는 들어오는 요청을 어플리케이션 서버들에게 각각 나눠 준 다음 돌려받은 응답을 클라이언트에게 전송합니다. 어플리케이션 서버들은 보통 서로의 동일한 이미지입니다. 각각의 서버 모두가 동일하게 요청을 처리해야만 서버 세트에 요청을 분산하여 과부하가 발생하지 않게 됩니다.</p><p class="css-1ccrm8j"> 이제 됐습니다. 개념적으로 load balancer는 충분히 명료하죠. 내부적으로는 - under the hood - 분명 복잡하지만 역시 초심자 대상에서는 불필요하게 파보지는 말도록 하죠.</p><ol start="3" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">웹 어플리케이션 서버 Web Application Servers</p><p class="css-1ccrm8j">수준 높은 웹 어플리케이션 서버는 상대적으로 설명하기 간단합니다. 이 서버는 유저(의 브라우저)로 부터 요청을 받아 유저의 브라우저로 HTML 문서를 보내는 핵심 비즈니스 모델을 수행합니다. 그 일을 하기 위해 보통 수많은 백엔드 인프라와 통신합니다. DB, cacheing layer, job queue, search service, 또 다른 micro service들, data/logging queue 등등 이 있죠. 위에서 말한대로, 최소한 2개, 대부분 더 많은 인프라를 load balancer에 연결해서 요청을 처리합니다.</p><p class="css-1ccrm8j">웹 앱 서버를 구현하는 데에는 특정 언어, 그리고 그에 맞는 웹 프레임워크가 필요합니다. Node.js에는 Express, Ruby에는 Ruby on Rails, Scala에는 Play, PHP에는 Laravel, 등등 이죠.</p></li></ol><ol start="4" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">Database Servers</p><p class="css-1ccrm8j">모든 모던 웹 어플리케이션은 데이터 저장을 위해 하나 이상의 DB를 사용합니다. 데이터베이스는 데이터 구조를 정의하고, 새 데이터를 추가하고, 존재하는 데이터를 찾고, 업데이트/삭제하고, 데이터들로 연산하는 등을 위한 방법을 제공합니다. 대부분 웹 앱 서버나 job server나 DB서버와 직접 통신하죠.</p><p class="css-1ccrm8j">각 백엔드 서비스는 대체로 다른 앱들과는 연결되지 않은 자신만의 DB를 갖고 있습니다.</p><p class="css-1ccrm8j">각각의 아키텍처 구성요소에 대해 깊이 파고들지 않으려고 했지만, SQL과 NoSQL에 대해서는 설명드려야 겠습니다.</p><p class="css-1ccrm8j">SQL은 &quot;Structured Query Language&quot;로 1970년대에 발명되었습니다. 대중적으로 접근할 수 있는 관계형 데이터 셋에 쿼리를 날리는 표준 방식으로 제안된 것이죠. SQL은 테이블로 데이터를 저장하는 데, 테이블들은 각각 보통 정수 형태인 ID로 서로 연결되어 있습니다. 사용자의 주소 정보를 저장하는 간단한 예시를 보죠. users 테이블과 user_address 테이블 2개의 테이블이 있고, user의 id로 서로 연결되어 있습니다. 아래 간단한 수준으로 그린 이미지가 있습니다. user_address 테이블에 user_id 컬럼은 FK(foreign key)로, users 테이블의 id 컬럼과 연결되어 있으니 두 테이블은 연결된 것입니다.</p><p class="css-1ccrm8j"><img src="https://miro.medium.com/max/451/1*Ln39QPggpJVMAScUBsrcCQ.png" alt="테이블 연결" class="css-0"/></p><p class="css-1ccrm8j">SQL을 잘 모른다면, 꼭 튜토리얼을 해보길 권해드립니다. 웹 개발에서는 어디서나 쓰이고, 하나의 어플리케이션을 설계할 때 기본이 되니까, 알고 있어야 합니다.</p><p class="css-1ccrm8j">NoSQL은 대규모 웹 어플리케이션이 만들어 낼 만한 거대한 양의 데이터를 처리하기 위해 떠오른 데이터베이스 기술들을 말합니다. - 대부분의 SQL에서 나온 DB들은 수평적 확장이 어렵고, 어떤 떄는 수직적 확장만 가능합니다. NoSQL을 전혀 모른다면, 수준 높은 소개자료로 시작하길 권해드립니다.</p><ul class="css-15rlv7r"><li class="css-0"><a href="https://www.mongodb.com/nosql-explained" class="css-1od09yo">MongoDB</a></li><li class="css-0"><a href="https://www.w3resource.com/mongodb/nosql.php" class="css-1od09yo">https://www.w3resource.com/mongodb/nosql.php</a></li><li class="css-0"><a href="http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html" class="css-1od09yo">http://www.kdnuggets.com/2016/07/seven-steps-understanding-nosql-databases.html</a></li></ul></li></ol><p class="css-1ccrm8j"> 또한 업계는 전반적으로 NoSQL 데이터베이스의 경우에도 인터페이스로 SQL을 조정하고 있으므로 SQL을 모르는 경우 꼭 배워야합니다. 요즘에는 피할 방법이 거의 없습니다.</p><ol start="5" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">Caching Service</p><p class="css-1ccrm8j">캐싱 서비스는 간단한 key/value 저장소를 제공합니다. 덕분에 <code class="css-0">O(1)</code> 에 가까운 시간복잡도로 정보를 저장하고 조회할 수 있죠. 어플리케이션들은 캐싱 서비스를 활용하여 무거운 연산의 결과를 저장합니다. 필요할 때 다시 연산하는 대신 캐시로 부터 데이터를 불러오는 것이죠. 어플리케이션은 DB에 날린 쿼리의 결과, 외부 서비스 호출 결과, 특정 uri에 대응하는 html문서 등등을 캐싱합니다. real world의 예시를 들어보죠.</p></li></ol><ul class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">구글은 &quot;고양이&quot;, &quot;비틀즈&quot; 같은 일반적인 검색어에 대한 검색결과를 캐싱합니다.</p></li><li class="css-0"><p class="css-1ccrm8j">페이스북은 당신이 로그인했을 때 보게되는 대부분의 데이터를 캐싱합니다. 게시글, 친구목록 등등이죠. 관련된 더 자세한 설명을 <a href="https://medium.com/@shagun/scaling-memcache-at-facebook-1ba77d71c082" class="css-1od09yo">여기서</a> 볼 수 있습니다.</p></li><li class="css-0"><p class="css-1ccrm8j">스토리북은 서버사이드 리액트 렌더링의 HTML결과를 캐시합니다. 검색 결과, 자동완성 결과 등등 이죠.</p><p class="css-1ccrm8j">가장 많이 사용되는 캐싱 서버 기술은 Redis와 Memcache입니다. 다른 포스팅에서 다뤄보죠.</p></li></ul><ol start="6" class="css-15rlv7r"><li class="css-0"><p class="css-1ccrm8j">Job Queue &amp; Job Servers</p></li><li class="css-0"><p class="css-1ccrm8j">Full-text Search Service</p></li><li class="css-0"><p class="css-1ccrm8j">Services</p></li><li class="css-0"><p class="css-1ccrm8j">Data</p></li><li class="css-0"><p class="css-1ccrm8j">Cloud storage</p></li><li class="css-0"><p class="css-1ccrm8j">CDN</p></li></ol><h2 class="css-12k12li">나가며..</h2><p class="css-1ccrm8j">Web Architecture 101의 마무리입니다. 도움이 되길 바래요. 내년이나 내후년는 소개드린 아키텍쳐의 구성요소들 중 몇 개에 대해 deep dive할 수 있는 글을 연재할 수 있기 바랍니다.</p></content:encoded></item></channel></rss>