diff --git "a/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/images/logo.svg" "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/images/logo.svg" new file mode 100644 index 0000000..3b83997 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/images/logo.svg" @@ -0,0 +1,7 @@ + + + + + + + diff --git "a/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/images/undraw_work_in_progress_re_byic 1.svg" "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/images/undraw_work_in_progress_re_byic 1.svg" new file mode 100644 index 0000000..3d72058 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/images/undraw_work_in_progress_re_byic 1.svg" @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/index.html" "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/index.html" new file mode 100644 index 0000000..b17e41b --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/index.html" @@ -0,0 +1,37 @@ + + + + + Login Page + + + +
+
+
+

42서울 캐비닛 서비스

+

여러분의 일상을 가볍게

+
+
+ +
+
+

Cabi로

+

일상의 무게를 덜어보세요.

+
+
+
+
+
+ +
+
+

42Cabi

+

여러분의 일상을 가볍게

+
+ +
+
+
+ + \ No newline at end of file diff --git "a/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/reset.css" "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/reset.css" new file mode 100644 index 0000000..9420017 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/reset.css" @@ -0,0 +1,64 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Button reset */ +button { + background: none; + border: none; + padding: 0; + box-shadow: none; + border-radius: 0; + cursor: pointer; + font: inherit; + color: inherit; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} \ No newline at end of file diff --git "a/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/style.css" "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/style.css" new file mode 100644 index 0000000..84dc6ee --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_0_\354\225\204\353\254\264\352\262\203\353\217\204_\353\252\250\353\245\264\353\212\224\353\215\260\354\232\224/style.css" @@ -0,0 +1,116 @@ +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap"); +@import url("reset.css"); + +/* all */ +html, body, #loginPage { + width: 100vw; + height: 100vh; + font-family: "Noto Sans KR"; +} + +#loginPage { + display: flex; + flex-direction: row; +} + +/* colors */ +.fontPurple { + color: #B18CFF; +} + +/* margin, padding */ +div p { + padding: 10px 0; +} + +/* contents */ +.leftLoginPage { + display: flex; + flex-direction: column; + justify-content: center; + + width: 50%; + height: 100%; + padding-left: 7%; + box-sizing: border-box; + + .serviceTitle { + font-size: 32px; + font-weight: 700; + } + + .serviceImage { + width: 446px; + height: 388px; + padding: 10% 10%; + } + + .serviceSubtitle { + font-size: 28px; + font-weight: 700; + + .fontPurple { + color: #9747FF; + } + } +} + +.rightLoginPage { + display: flex; + justify-content: center; + align-items: center; + + width: 50%; + height: 100%; + background-color: #9747FF; + + .loginModal { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 360px; + height: 500px; + background-color: #FFFFFF; + border-radius: 20px; + box-sizing: border-box; + padding: 85px 0; + box-shadow: 10px 10px 40px 0px #00000040; + + .logoImage { + width: 70px; + height: 70px; + } + + .logoTitle { + display: flex; + flex-direction: column; + align-items: center; + font-size: 40px; + + .subTitle { + font-size: 16px; + } + } + + .loginButton { + width: 200px; + height: 60px; + border-radius: 6px; + background-color: #9747FF; + color:#FFFFFF; + font-size: 18px; + } + } +} + +/* bonus */ +@media (max-width: 768px) { + .leftLoginPage { + display: none; + } + + .rightLoginPage { + width: 100%; + } +} \ No newline at end of file diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/account_circle.svg" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/account_circle.svg" new file mode 100644 index 0000000..150e3ae --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/account_circle.svg" @@ -0,0 +1,8 @@ + + + + + + + + diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/logo.svg" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/logo.svg" new file mode 100644 index 0000000..004da93 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/logo.svg" @@ -0,0 +1,7 @@ + + + + + + + diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/package.svg" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/package.svg" new file mode 100644 index 0000000..ba6887f --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/package.svg" @@ -0,0 +1,8 @@ + + + + + + + + diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/personal_user.svg" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/personal_user.svg" new file mode 100644 index 0000000..1623354 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/images/personal_user.svg" @@ -0,0 +1,4 @@ + + + + diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/index.html" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/index.html" new file mode 100644 index 0000000..a3dd4a0 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/index.html" @@ -0,0 +1,113 @@ + + + + + + Level 1: Cabinets + + + +
+ +
+ +
+

2층 - Oasis

+
+
+
+ Personal Cabinet +

1

+
+

42Cabi

+
+
+
+ Personal Cabinet +

2

+
+

42Cabi

+
+
+
+ Personal Cabinet +

3

+
+

42Cabi

+
+
+
+ Personal Cabinet +

4

+
+

42Cabi

+
+
+
+ Personal Cabinet +

5

+
+

42Cabi

+
+
+
+ Personal Cabinet +

6

+
+

42Cabi

+
+
+
+ Personal Cabinet +

7

+
+

42Cabi

+
+
+
+ Personal Cabinet +

8

+
+

42Cabi

+
+
+
+
+ +
+ + \ No newline at end of file diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/reset.css" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/reset.css" new file mode 100644 index 0000000..5b09ad0 --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/reset.css" @@ -0,0 +1,65 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Button reset */ +button { + background: none; + border: none; + padding: 0; + box-shadow: none; + border-radius: 0; + cursor: pointer; + font: inherit; + color: inherit; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} \ No newline at end of file diff --git "a/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/style.css" "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/style.css" new file mode 100644 index 0000000..14895bf --- /dev/null +++ "b/v1/frontend/HTML+CSS_LV_1_Cabi_\354\233\271_\355\216\230\354\235\264\354\247\200_\353\247\214\353\223\244\352\270\260(1)/style.css" @@ -0,0 +1,259 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Noto+Sans+KR:wght@100..900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Inter:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap'); +@import url('reset.css'); + +/* all */ +:root { + --white: #FFFFFF; + --primary-color: #9747FF; + --secondary-color: #B18CFF; + --font-color-gray: #7B7B7B; + --font-color-white: var(--white); + --line-color: #BCBCBC; +} + +html, body, #root { + display: flex; + flex-direction: column; + + width: 100vw; + height: 100vh; + /* 일정 범위 이상의 화면 스크롤을 막기 위한 설정 */ + overflow: hidden; +} + +/* row column setting */ +.flex-row { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.flex-col { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +/* top navigation */ +#top-nav { + width: 100%; + height: 80px; + background-color: var(--primary-color); + padding: 0 20px; +} + +#logo { + width: 122px; + height: 35px; +} + +.logo__image { + width: 50px; + height: 35px; + justify-content: center; +} + +.logo__title { + font-family: 'Do Hyeon', sans-serif; + font-size: 24px; + font-weight: 400; + color: #FFFFFF; +} + +#menu { + width: 90px; + height: 40px; +} + +/* page sections */ +#main-page { + justify-content: flex-start; + align-items: flex-start; + width: 100%; + height: calc(100vh - 80px); +} + +.item-selected { + background-color: var(--primary-color); + color: var(--font-color-white); +} + +/* left-bar */ +#left-nav { + display: flex; + flex-direction: row; + height: 100%; +} + +/* left navigation */ +#floor-nav { + width: 90px; + height: 100%; + color: var(--font-color-gray); + font-family: 'Inter', sans-serif; + border-right: 1px solid var(--line-color); +} + +.floor-nav__item { + display: flex; + justify-content: center; + align-items: center; + + width: 70px; + height: 48px; + margin: 30px 0; + border-radius: 10px; +} + +.floor-nav__item:hover { + background-color: var(--primary-color); + color: var(--font-color-white) +} + +/* left section navigation */ +#section-nav { + width: 240px; + height: 100%; + padding: 30px 0; + color: var(--font-color-gray); + font-family: 'Inter', sans-serif; + border-right: 1px solid var(--line-color); +} + +.section-nav__item { + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 32px; + + width: 220px; + height: 40px; + border-radius: 10px; +} + +.section-nav__item:hover { + background-color: var(--primary-color); + color: var(--font-color-white); +} + +/* main */ +main { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 30px 0; + + width: calc(100vw - 90px - 240px); + height: 100%; + font-family: 'Inter', sans-serif; +} + +#location-title { + display: flex; + align-items: center; + + font-size: 16px; + font-weight: 400; + color: var(--font-color-gray); +} + +.cabinet-list { + display: grid; + grid-template-columns: repeat(auto-fill, 90px); + justify-content: center; + align-items: center; + + width: 100%; + max-width: 800px; + margin: 35px 0; +} + +.cabinet { + width: 80px; + height: 80px; + margin: 5px 5px; + padding: 10px; + + color: var(--font-color-white); + font-size: 14px; + font-weight: 400; + border-radius: 10px; + background-color: var(--primary-color); +} + +.cabinet__info, .cabinet__username { + width: 100%; +} + +/* bottom navigation */ +#tab-bar { + width: 100%; + height: 80px; +} + +#tab-bar__list { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 10px; + + width: 100%; + height: 100%; + border-top: 1px solid var(--line-color); + + color: var(--font-color-gray); + font-size: 14px; + font-weight: 400; + font-family: 'Inter', sans-serif; +} + +.tab-bar__list__item { + display: flex; + justify-content: center; + align-items: center; + + width: 70px; + height: 48px; + border-radius: 10px; +} + +.tab-bar__list__item:hover { + background-color: var(--primary-color); + color: var(--font-color-white); +} + +/* responsive web */ +@media (min-width: 769px) { + #tab-bar { + display: none; + } +} + +@media (max-width: 768px) { + #main-page { + height: calc(100vh - 80px - 80px); + } + + #left-nav { + display: none; + } + + main { + width: 100%; + } + + #tab-bar { + display: flex; + } +} + +@media (max-width: 450px) { + .cabinet-list { + grid-template-columns: repeat(4, 90px); + } +} \ No newline at end of file diff --git "a/v1/frontend/JAVASCRIPT_LV_0_\354\260\270\354\235\270\353\223\257_\354\260\270\354\225\204\353\213\214_\354\260\270\352\260\231\354\235\200_\353\204\210/equality.js" "b/v1/frontend/JAVASCRIPT_LV_0_\354\260\270\354\235\270\353\223\257_\354\260\270\354\225\204\353\213\214_\354\260\270\352\260\231\354\235\200_\353\204\210/equality.js" new file mode 100644 index 0000000..235ef74 --- /dev/null +++ "b/v1/frontend/JAVASCRIPT_LV_0_\354\260\270\354\235\270\353\223\257_\354\260\270\354\225\204\353\213\214_\354\260\270\352\260\231\354\235\200_\353\204\210/equality.js" @@ -0,0 +1,322 @@ +/** + * 예제) + * 00번 + * 정답: test is true! + */ +let test = true; +if (test) { + console.log("test is true!"); +} else { + console.log("test if false..."); +} + +/** + * 01번 + * 정답: true + * > 위 연산에 사용된 `*` 기호는 곱셈 연산자로, 숫자가 아닌 형에 대해 자동으로 숫자로 형변환하여 계산을 진행한다 + * > js에서 boolean에 대해 true => 1, false => 0으로 변환된다 + */ +if (true * false) { + console.log(true * false + " is true!"); +} else { + console.log(true * false + "is false!"); +} + +/** + * 02번 + * 정답: true + * > 위 연산도 마찬가지로 연산자에 맞는 형으로 자동 형변환되는데 순서는 다음과 같다. + * > 1. true = 1 >> 1 + 1 = 2 + * > 2. 2 == "2" >> "2" == "2" + */ +if (true + true == "2") { + console.log("true + true is 2!"); +} else { + console.log("true + true is NOT 2!"); +} + +/** + * 03번 + * 정답: true + * > `===` 연산은 형변환 없이 비교를 진행한다 + * > `true === 1`은 false인데, 다음 연산이 true인 이유는 `+` 연산에 대해 이미 true가 형변환 되어 2로 계산이 되었기 때문이다 + * > 따라서 이미 형변환 후 계산된 결과인 2와 2를 `===` 연산으로 비교하면 true가 나온다 + */ +if (true + true === 2) { + console.log("true + true is Strictly equal to 2!"); +} else { + console.log("true + true is Strictly NOT equal to 2!"); +} + +/** + * 04번 + * 정답: true + * > 비어있지 않은 문자열은 true로 판별된다 + * > 처음에 확인하는 방법을 몰라 "hello" == true와 같은 형태로 콘솔 창에 썼으나 이는 전혀 다른 맥락으로 `!` 연산을 통해 하는 방법으로 판별하였다 + * - "hello" == true >> false (Nan != 1) + * - !!"hello" >> true (!false -> true) + */ +if ("hello") { + console.log("true"); +} else { + console.log("false"); +} + +/** + * 05번 + * 정답: false + * > 빈 문자열은 false + * > 다음 6가지를 제외한 나머지의 경우는 true로 판별된다 + * : false, 0, null, undefined, '', NaN + */ +if ("") { + console.log("'' is true"); +} else { + console.log("'' is false"); +} + +/** + * 06번 + * 정답: true + * > 빈 배열은 true + */ +if ([]) { + console.log("empty array is true"); +} else { + console.log("empty array is false"); +} + +/** + * 07번 + * 정답: true + * > 빈 객체는 true + */ +if ({}) { + console.log("empty object is true"); +} else { + console.log("empty object is false"); +} + +/** + * 08번 + * 정답: false + * > null 값이 직접적으로 false 자체는 아니지만 불리언 컨텍스트에서는 false로 판별된다 + * > 불리언 컨텍스트: 어떤 값이나 표현식이 참이나 거짓으로 평가될 필요가 있는 상황을 설명할 때 사용되는 말로 + * 주로 조건문, 논리 연산자, 산술 연산자 등에서 사용된다 + */ +if (null) { + console.log("true"); +} else { + console.log("false"); +} + +/** + * 09번 + * 정답: false + * > undefined: 특별한 원시 데이터타입 중 하나로, + * 변수가 선언되었으나 아직 어떤 값으로도 초기화되지 않았을 때 기본적으로 할당되는 값이다 + * 변수의 값이 의도적으로 비어있지 않은 즉, 아직 값을 갖지 않았다는 것을 의미한다 + * 다음과 같은 경우에 undefined로 출력되거나 반환된다 + * - 변수 초기화 하지 않은 경우 + * - 아무런 값도 반환하지 않는 함수 + * - 존재하지 않는 객체의 속성에 접근한 경우 + */ +if (undefined) { + console.log("undefined is true"); +} else { + console.log("undefined is false"); +} + +/** + * 10번 + * 정답: true + * > null vs undefined + * - 공통점: 값이 없음 + * - 차이점: null(의도적으로 값이 없음), undefined(아직 값이 할당되지 않음) + */ +if (null == undefined) { + console.log("null is same as undefined!"); +} else { + console.log("null is NOT same as undefined!"); +} + +/** + * 11번 + * 정답: false + * > 정확한 비교를 진행하므로, false + */ +if (null === undefined) { + console.log("null is Strictly Equal to undefined!"); +} else { + console.log("null is Strictly NOT Equal to undefined!"); +} + +/** + * 12번 + * 정답: + */ +if (1 + "2" == 12) { + console.log("1 + '2' == 12 is true"); +} else { + console.log("1 + '2' == 12 is false"); +} + +/** + * 13번 + * 정답: true + * > "1" + "2" >> "12" >> "12" == "12" (true) + * > `+` 연산자를 만날 때, 숫자와 문자열이 만나면 보통 숫자가 문자열로 바뀐 후 연산이 진행된다 + */ +if (1 + "2" === "12") { + console.log(1 + "2" + " is true"); +} else { + console.log(1 + "2" + " is false"); +} + +/** + * 14번 + * 정답: false + * > !a : true + * typeof a == "object" : typeof undefined >> "undefined" != "object" >> false + * > typeof 연산자: 주어진 변수나 표현식의 데이터 타입을 `문자열` 형태로 반환하여, 변수가 어떤 타입의 데이터를 담고 있는지 확인할 수 있다 + * - return: "undefined", "boolean", "number", "string", "symbol", "object", "function" + */ +var a = undefined; +if (!a && typeof a == "object") { + console.log(typeof a + " is an object"); +} else { + console.log(typeof a + " is NOT an object"); +} + +/** + * 15번 + * 정답: true + * > `null`은 `"object"` 타입으로 분류된다 + * > 이는 초기 JavaScript 설계의 오류로 인한 결과로, 수정되지 못한 채 남게된 유명한 버그이다. 외우자 + * 다음과 같은 연산보단 `b === null`의 연산으로 확인하는 것이 더 정확하다 + */ +var b = null; +if (!b && typeof b == "object") { + console.log(typeof b + " is an object"); +} else { + console.log(typeof b + " is NOT an object"); +} + +/** + * 16번 + * 정답: false + * > true = 1 >> true - 1 = 0 >> if (0) is false + */ +if (true - 1) { + console.log(true - 1 + " is true"); +} else { + console.log(true - 1 + " is false"); +} + +/** + * 17번 + * 정답: false + * > "true" + "2" = "true2" + * > 수치 연산에서 `true`는 1로 변환되지만, 문자열과의 연산에서는 문자열인 "true"로 변환된다 + * > 즉, 숫자와 문자열에 대해 `+` 연산을 수행하면 문자열 연결을 우선으로 하므로 타입 변환이 위와 같이 수행된다 + */ +if (true + "2" == "12") { + console.log(true + "2" + " is '12'"); +} else { + console.log(true + "2" + " is NOT '12'"); +} + +/** + * 18번 + * 정답: false + * > {} : 빈 객체로, 연산자 `+` 앞에 위치하면 문자열로 반환된다 >> `"[object Object]"` + * > const: 변수를 선언함과 동시에 다시 할당될 수 없다는 키워드로, 선언과 동시에 초기화 되어야 한다 + * 다만, const로 선언된 변수에 객체나 배열을 할당 시, 해당 변수의 요소는 변경될 수 있다 + * 즉, 참조 자체는 변할 수 없지만 내용은 변경될 수 있다 + * > typeof obj : "string" + */ +const obj = {} + 1; +if (typeof obj == "object") { + console.log(typeof obj + " is an object"); +} else { + console.log(typeof obj + " is NOT an object"); +} + +/** + * 19번 + * 정답: false + */ +if (NaN) { + console.log("NaN is true"); +} else { + console.log("NaN is false"); +} + +/** + * 20번 + * 정답: true + * > NaN: Not a Number 의 약자로, 숫자가 아닌 값이 수치로 변환될 때 사용되는 키워드이다 + * 따라서 타입 자체는 "number" 이다 + * > 특징: 자기 자신과 비교할 때, 같지 않다 따라서 `NaN == NaN`은 false를 반환한다 + */ +if (typeof NaN == "number") { + console.log("typeof(NaN) is " + typeof NaN); +} else { + console.log("typeof(NaN) is " + typeof NaN); +} + +/** + * 21번 + * 정답: true + */ +if ("sanan" === "sanan") { + console.log("true"); +} else { + console.log("false"); +} + +/** + * 22번 + * 정답: false + * > true / false >> 1 / 0 >> NaN + * > NaN == NaN >> false + * NaN의 특징으로 자기 자신과 비교하면 항상 같지 않다 + */ +if (true / false == NaN) { + console.log(true / false + " is NaN"); +} else { + console.log(true / false + " is not NaN"); +} + +/** + * 23번 + * 정답: true + * > true & 3 >> 1 & 3 >> 비트 연산(AND)의 결과 >> 1 + */ +if (true & 3) { + console.log((true & 3) + " is true"); +} else { + console.log((true & 3) + " is false"); +} + +/** + * 24번 + * 정답: false + * > true & "0xAA" >> 1 & 170 >> 비트 연산(AND)의 결과 >> 0 + */ +if (true & "0xAA") { + console.log((true & "0xAA") + " is true"); +} else { + console.log((true & "0xAA") + " is false"); +} + +/** + * 25번 + * 결론: 위의 if-else 문들을 통해, 우리는 JavaScript 에서 비교 시 + * 오직 ... 연산자만을 사용해야 한다는 것을 알 수 있다. + * 빈칸 (...) 에 들어갈 연산자를 적으시오. + * 정답: === + * > 일반적으로 JavaScript에서는 예측 가능하고 명확한 코드를 작성하기 위해 "==="를 사용하는 것이 권장된다 + * 불필요한 타입 변환으로 인한 오류를 방지하고 코드의 의도를 명확하게 표현할 수 있기 때문이다 + * 또한, 특정 상황에서 "==" 연산자가 유용할 수 있으나 혼란의 여지가 있기 때문이다 + */ \ No newline at end of file diff --git "a/v1/frontend/JAVASCRIPT_LV_1_\352\260\234\355\217\254\353\217\231_\353\260\260\353\213\254\354\235\214\354\213\235\354\235\200_\353\271\204\354\213\270\353\213\244/function.js" "b/v1/frontend/JAVASCRIPT_LV_1_\352\260\234\355\217\254\353\217\231_\353\260\260\353\213\254\354\235\214\354\213\235\354\235\200_\353\271\204\354\213\270\353\213\244/function.js" new file mode 100644 index 0000000..ccc296a --- /dev/null +++ "b/v1/frontend/JAVASCRIPT_LV_1_\352\260\234\355\217\254\353\217\231_\353\260\260\353\213\254\354\235\214\354\213\235\354\235\200_\353\271\204\354\213\270\353\213\244/function.js" @@ -0,0 +1,48 @@ +/* object */ +let o1 = { + 0: { product: '감탄계 소금구이덮밥', qty: 4, price: 11000 }, + '1': { 'product': '버티컬 마우스', qty: NaN, price: 420, mama_card: false }, + 2: { product: '', qty: 100, price: 1200, mama_card: true }, + 3: { product: '잼스25 짜장범벅', qty: 13 }, + 4: { product: '구구치킨 닭강정 중', price: 8000 }, + 5: { product: '코카콜라 제로', qty: 4, price: 1200 } +}; + +/* case 1 */ +function getTotalInfo(obj) { + let filteredObj = []; + + for (key in obj) { + let totalPrice = obj[key].qty * obj[key].price; + if (obj[key].product && totalPrice) { + filteredObj.push({ product: obj[key].product, total: totalPrice }); + } + } + return filteredObj; +} + +/* case 2 */ +function getTotalInfo2(obj) { + let objArr = Object.values(obj); + let filteredObj = objArr + .filter(objArr => { + return objArr.product && objArr.qty && objArr.price; + }) + .map(objArr => { + return { + product: objArr.product, + total: objArr.qty * objArr.price + }; + }); + return filteredObj; +} + + +/* get arr and print */ +console.log('=============================[ object ]============================='); +console.log(o1); +console.log('=============================[ result ]============================='); +console.log("<< case 1 >>") +console.log(getTotalInfo(o1)); +console.log("\n<< case 2 >>") +console.log(getTotalInfo2(o1)); \ No newline at end of file