The journey to becoming a developer

My future is created by what I do today, not tomorrow.

What I learned/CodeSquad Log

CodeSquad Day 59 : Front-end Week 7

Millie 2022. 4. 1. 01:48

 

CodeSquad๐Ÿ”นDay 59

Morning Algo & Algorithm

์˜ค๋Š˜ ์•„์นจ์—” ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋””๊ฐ€ ์žˆ์—ˆ๋‹ค. ์–ด์ œ ์ƒˆ๋ฒฝ์— ์‹œ๋„ํ–ˆ๋˜ ๋‘ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆด๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์˜ค๋Š˜ ๋ฐค์— LeetCode์˜ Valid Parentheses ๋ฌธ์ œ๋ฅผ Map์„ ์‚ฌ์šฉํ•ด์„œ ๋‹ค์‹œ ํ’€์–ด๋ณด์•˜๋‹ค. Map ์‚ฌ์šฉ์— ์ต์ˆ™ํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ ์ด๋Ÿฐ ๋ฌธ์ œ์— ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ Map๊ณผ Object๋Š” ์†๋„ ๋ฉด์—์„œ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅผ๊นŒ? ๊ถ๊ธˆํ•ด์„œ ์•„๋ž˜ ๊ธ€์„ ์ฝ์–ด๋ณด์•˜๋‹ค.

 

JavaScript ES6 Map vs Object Performance ๋น„๊ต

VํšŒ์‚ฌ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ๊ณผ์ œ๋กœ ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๋ฅผ ๋น„๊ตํ•˜์—ฌ ์ทจ๋ฏธ๊ฐ€ ๊ฐ€์žฅ ๋น„์Šทํ•œ ์‚ฌ์šฉ์ž๋ฅผ ๋ฌถ์–ด์„œ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๋Š” ๋‚ด์šฉ์„ ๋ฐ›์•˜๋‹ค.

medium.com

Object์™€ Map์€ ๋‚ด๋ถ€ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์ด ๋‹ค๋ฅด๋‹ค. Object๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์ˆœ์„œ๋Œ€๋กœ ์ ์žฌ๋˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ๋ธŒ๋ผ์šฐ์ €๋Š” Object์—์„œ set์ด ์ผ์–ด๋‚˜๋ฉด ์•„๋ฌด ๊ณณ์— ๊ณต๊ฐ„์„ ๋งŒ๋“ค์–ด์„œ ๊ฐ’์„ ๋„ฃ๋Š”๋‹ค. ๋ฐ˜๋ฉด Map์€ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ ์žฌํ•œ๋‹ค. ์ด๋•Œ๋ฌธ์— ์—ฌ๊ธฐ์„œ ๋ฐœ์ƒํ•˜๋Š” ์ถ”๊ฐ€์ ์ธ ํ™œ๋™(๋ฐ์ดํ„ฐ ์žฌ๋ฐฐ์น˜, ์ •๋ ฌ ๋“ฑ)์ด set ์ฒ˜๋ฆฌ์— ๋Œ€ํ•ด์„œ ์ผ๋ถ€ ์„ฑ๋Šฅ ์ €ํ•˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค๊ณ  ํ•œ๋‹ค. 

๊ทธ๋ž˜์„œ Object๋Š” set์ด ๋น ๋ฅด๊ณ , Map์€ get์ด ๋น ๋ฅด๋‹ค๋Š” ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์™”๋‹ค.

 

Presentation day

์˜ค๋Š˜์€ ์›๋ž˜ 10์‹œ ๋ฐ˜์— 1์‹œ๊ฐ„ ๋ฐ˜ ๋™์•ˆ ํฌ๋กฑ์˜ ์ˆ˜์—… ๋Œ€์‹ , ๊ฐ์ž ์ค€๋น„ํ•ด ์˜จ ๋ฐœํ‘œ๋ฅผ ํ•˜๋Š” ๋ฏธ๋‹ˆ ์„ธ๋ฏธ๋‚˜ ์‹œ๊ฐ„์ด์—ˆ๋‹ค. ๋ฐœํ‘œ์ž๋Š” ์ฝ”๋“œ๋ฅผ ๋Œ๋ ค์„œ ๋ฐ”๋กœ ๋žœ๋ค์œผ๋กœ ์ •ํ•ด์กŒ๋‹ค. ๋ฐœํ‘œ๋Š” ์ž๋ฐœ์ ์ธ ์ง€์›์ž 4๋ช…์„ ํฌํ•จํ•ด์„œ ์ด 15๋ช…์˜ ์ฝ”๋“œ์Šค์ฟผ๋“œ ๋ฉค๋ฒ„๋“ค์ด ํ•˜๊ฒŒ ๋˜์—ˆ๊ณ  ๋‚˜๋Š” ์•„์‰ฝ๊ฒŒ๋„(?) ๊ฑธ๋ฆฌ์ง€ ์•Š๊ฒŒ ๋˜์—ˆ๋‹ค.

์˜ค์ „, ์˜คํ›„๋กœ ๋‚˜๋ˆ ์„œ ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ, 15๋ช…์˜ ๋ฐœํ‘œ๋ฅผ ๋“ฃ๋Š” ๊ฒƒ์€ ์‰ฝ์ง€ ์•Š์€ ์ผ์ด์—ˆ๋‹ค. ์‚ฌ์‹ค ๋ฐœํ‘œ์ž ์ž…์žฅ์—์„œ๋Š” ๊ธด์žฅ๋„ ๋˜์–ด์„œ ๋” ํž˜๋“ค์—ˆ๊ฒ ์ง€๋งŒ ๋ง์ด๋‹ค. ๊ทธ๋ž˜๋„ ์ •๋ง ๊ต‰์žฅํžˆ ์œ ์ตํ•˜๊ณ , ๋ฐœํ‘œ๋ฅผ ๋„ˆ๋ฌด๋‚˜ ์ž˜ ์ค€๋น„ํ•ด ์˜จ ์‚ฌ๋žŒ๋“ค์ด ๋งŽ์•„์„œ ์ง€์ ์ธ ์ž๊ทน๋„ ๋งŽ์ด ๋˜์—ˆ๋‹ค. ์ƒˆ๋กœ์šด ๋‚ด์šฉ, ํ˜น์€ ์•Œ๊ณ  ์žˆ์—ˆ์œผ๋‚˜ ํ๋ฆฟํ–ˆ๋˜ ๋‚ด์šฉ๋“ค๋„ ์žˆ์—ˆ๊ณ  ๋ชจ๋‘ ๋‹ค ์ค‘์š”ํ•œ ๋‚ด์šฉ๋“ค์ด์—ˆ๋‹ค. ๋’ค๋กœ ๊ฐˆ์ˆ˜๋ก ๋‡Œ์— ์•ฝ๊ฐ„ ๊ณผ๋ถ€ํ•˜๊ฐ€ ์ผ์–ด๋‚ฌ์ง€๋งŒ ๋๊นŒ์ง€ ์ง‘์ค‘ํ•ด์„œ ๋“ค์œผ๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ๋‹ค.

๋ฐœํ‘œ๋ฅผ ๋ง‰์ƒ ์ค€๋น„ํ• ๋•Œ๋Š” ๋ถ€๋‹ด์ด ๋” ์ปธ๋Š”๋ฐ ๋ง‰์ƒ ๋ฐœํ‘œ๋ฅผ ์ค€๋น„ํ•˜๋ฉฐ ๊ณต๋ถ€ํ•˜๋‹ค ๋ณด๋‹ˆ ๋จธ๋ฆฟ์†์— ๊ทธ ๋‚ด์šฉ๋“ค์ด ๋” ์ž˜ ๋‚จ๋Š”๋‹ค๋Š” ๊ฒƒ์„ ๊นจ๋‹ฌ์•˜๋‹ค. ์ด๋Ÿฐ ์„ธ์…˜์ด ์ž์ฃผ ์žˆ์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ๋‹ค๊ฐ™์ด ๋” ๋น ๋ฅด๊ฒŒ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ธ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚˜๋Š” ์•ฝ๊ฐ„์˜ ์ŠคํŠธ๋ ˆ์Šค, ์ฆ‰ ์••๋ฐ•์ด ๋“ค์–ด์™”์„ ๋•Œ ํผํฌ๋จผ์Šค๊ฐ€ ๋” ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์ง‘์—์„œ ๋ถ€ํŠธ์บ ํ”„๋ฅผ ์˜จ๋ผ์ธ์œผ๋กœ ์ง„ํ–‰ํ•˜๋‹ค ๋ณด๋ฉด ๋„ˆ๋ฌด ํŽธํ•œ ๊ณต๊ฐ„์ด๋‹ค๋ณด๋‹ˆ ๊ธด์žฅ๊ฐ์ด ํ’€์–ด์ง€๊ณ , ์ด๊ฒŒ ์ง€์†๋˜๋ฉด ์•ˆ์ผํ•ด์งˆ ๋•Œ๋„ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๋ ‡๊ฒŒ ๋ฐœํ‘œ๋ฅผ ์ค€๋น„ํ•˜๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์˜ ๋ฐœํ‘œ๋ฅผ ๋“ฃ๊ฒŒ ๋˜๋ฉด์„œ ๋‹ค์‹œ ๊ธด์žฅ์˜ ๋ˆ์„ ์žก๊ฒŒ ๋˜์—ˆ๋‹ค. ์ ์ ˆํ•œ ๊ธด์žฅ์ด ์˜คํžˆ๋ ค ํ•™์Šต์— ๋„์›€์ด ๋œ๋‹ค๋Š” ๊ฒƒ์„ ๋‹ค์‹œ ๊นจ๋‹ซ๊ฒŒ ๋˜๋Š” ํ•˜๋ฃจ์˜€๋‹ค.

 

Prototype

๋ชจ๋“  ๋ฐœํ‘œ๊ฐ€ ๋‹ค ์ธ์ƒ๊นŠ์—ˆ์ง€๋งŒ ๊ทธ ์ค‘์—์„œ ์˜๋ƒ์˜ ํ”„๋กœํ† ํƒ€์ž… ๋ฐœํ‘œ๊ฐ€ ์ธ์ƒ๊นŠ์—ˆ๋‹ค. ์™œ๋ƒ๋ฉด ๋‚˜๋Š” ๊ทธ๋™์•ˆ ํ”„๋กœํ† ํƒ€์ž…์„ ๊ณต๋ถ€๋ฅผ ํ–ˆ๋‹ค๊ณ ๋Š” ํ•˜์ง€๋งŒ ์ •๋ง "์ œ๋Œ€๋กœ" ์•ˆ๋‹ค๊ณ  ํ•  ์ˆœ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์€ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ๊ทธ๋งŒํผ ์–ด๋ ต๊ธฐ๋„ ํ•ด์„œ ์ œ๋Œ€๋กœ ํƒ๊ตฌํ•˜๋Š” ์‹œ๊ฐ„์„ ๋ฏธ๋ฃจ๊ธฐ๋„ ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์˜๋ƒ๊ฐ€ ์ด๋Ÿฐ ๋‚˜์˜ ๋ฏธ๋ฃธ์„ ๋๋‚ด์ฃผ์—ˆ๋‹ค. ์ด์ œ ๋”์ด์ƒ ํ”„๋กœํ† ํƒ€์ž…์— ๋Œ€ํ•ด์„œ ๋ฌด์ง€ํ•œ ์ฑ„๋กœ ์žˆ์œผ๋ฉด ์•ˆ๋˜๊ฒ ๋‹ค๋Š” ์ž๊ทน์„ ๋ฐ›์•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ ๋ฏธ์…˜์„ ํ•˜๋Š” ๋Œ€์‹  ํ”„๋กœํ† ํƒ€์ž…์— ๋Œ€ํ•œ ๊ธ€์„ ์ฝ๊ณ  ๋…ธ์…˜์—๋„ ์ •๋ฆฌํ•ด ๋ณด๊ณ , ํƒœ๋ธ”๋ฆฟ์—๋„ ์จ๊ฐ€๋ฉด์„œ ์ฐจ๊ทผ์ฐจ๊ทผ Deep Dive ์ฑ…์„ ์ฝ์–ด๋ณด์•˜๋‹ค. ๋ถ„๋Ÿ‰์ด ๋งŽ์•„์„œ ์ „๋ถ€ ์ฝ์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ ์ด๋ฒˆ ์ฃผ๋ง์„ ์ด์šฉํ•ด์„œ ํ”„๋กœํ† ํƒ€์ž… ๋ถ€๋ถ„์€ ๋‹ค ์ฝ์œผ๋ ค๊ณ  ํ•œ๋‹ค.

 

Book: My job went to India - 52 ways to save your job

์œ„ ์ฑ…์„ ์˜ค๋Š˜ ๊ฒ€์ƒ‰์„ ํ•˜๋˜ ์ค‘ ์šฐ์—ฐํžˆ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. 2005๋…„์— ์ถœ๊ฐ„๋œ ์ฑ…์œผ๋กœ ๋ฌด๋ ค ์ง€๊ธˆ์œผ๋กœ๋ถ€ํ„ฐ 17๋…„ ์ „์˜ ๊ฐœ๋ฐœ ์ด์•ผ๊ธฐ์ด์ง€๋งŒ, ์ง€๊ธˆ์˜ ๋‚˜์—๊ฒŒ๋„ ๋„์›€์ด ๋  ๋งŒํ•œ ์—ฌ๋Ÿฌ ์กฐ์–ธ๋“ค์ด ์žˆ์—ˆ๋‹ค. ๋˜ํ•œ ์ €์ž๊ฐ€ ์Œ์•…์„ ํ•˜๋‹ค๊ฐ€ ๊ฐœ๋ฐœ์„ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค๊ณ  ํ•˜์—ฌ, ๋น„์ „๊ณต์ž์ธ ๋‚˜์—๊ฒŒ๋Š” ์ด ์ ๋„ ํฅ๋ฏธ๊ฐ€ ์žˆ์—ˆ๋‹ค. ํ•œ๊ตญ์–ด ๋ฒˆ์—ญํŒ์€ 2008๋…„์— ์ถœ๊ฐ„๋˜์—ˆ๋Š”๋ฐ ์ œ๋ชฉ์€ <์‚ฌ๋ž‘ํ•˜์ง€ ์•Š์œผ๋ฉด ๋– ๋‚˜๋ผ! ๊ฐœ๋ฐœ์ž์˜ ์ž๊ธฐ๊ณ„๋ฐœ๊ณผ ๊ฒฝ๋ ฅ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ 52๊ฐ€์ง€ ์‹ค์ฒœ ๊ฐ€์ด๋“œ>์ด๋‹ค.

Challenge!

์ด ์ฑ…์„ ์›์„œ๋กœ ํ•œ ๋ฒˆ ๋„์ „ํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์˜์–ด๊ณต๋ถ€ ๊ฒธ, ๊ฐœ๋ฐœ์— ์‹ค์งˆ์ ์œผ๋กœ ๋„์›€์ด ๋  ํŒ๋“ค์„ ์–ป์–ด๊ฐ€๊ธฐ ์œ„ํ•ด์„œ์ด๋‹ค. ์‹œ๊ฐ„์ด ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆด์ง€๋Š” ์•„์ง ๋ชจ๋ฅด์ง€๋งŒ, ์งฌ์„ ๋‚ด์„œ ๊พธ์ค€ํžˆ ์ฝ์–ด ๋ณด๊ณ , ํ›„๊ธฐ๋„ ๋‚จ๊ธฐ๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ๋‹ค.

์˜ค๋Š˜ ์ƒˆ๋ฒฝ Introduction ๋ถ€๋ถ„์„ ์•ฝ๊ฐ„ ์ฝ์—ˆ๋Š”๋ฐ ๋ชจ๋ฅด๋Š” ๋‹จ์–ด๊ฐ€ ๋งŽ์ด ๋‚˜์™€์„œ ์•„๋งˆ ์ข€ ์˜ค๋ž˜ ๊ฑธ๋ฆด ๊ฒƒ ๊ฐ™๊ธด ํ•˜๋‹ค. ์•„๋ฌด๋ž˜๋„ ์‹œ๊ฐ„์€ ๊ฝค๋‚˜ ๊ฑธ๋ฆด ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜๋„ ๊ผญ ์™„์ฃผํ•ด ๋‚ผ ๊ฒƒ์ด๋‹ค. 

 


์˜ค๋Š˜์€ 3์›”์˜ ๋งˆ์ง€๋ง‰ ๋‚ ์ด์—ˆ๋‹ค. ๋ฒŒ์จ 2022๋…„์˜ 1/4๊ฐ€ ํ›Œ์ฉ ์ง€๋‚˜๊ฐ”๊ณ , ์ฝ”๋“œ์Šค์ฟผ๋“œ๋„ 1/2๊ฐ€ ์ง€๋‚ฌ๋‹ค. ์‹œ๊ฐ„์ด ์ด๋ ‡๊ฒŒ ์ง€๋‚˜๊ฐˆ ๋™์•ˆ ๋‚ด๊ฐ€ ์ž˜ ํ•œ ์ ๋„ ๋ณด์ด๊ณ , ์•„์‰ฌ์šด ์ ๋„ ๋ณด์ด๊ณ  ์žˆ๋‹ค. ์ด๊ฒƒ์„ ์ž˜ ์ •๋ฆฌํ•ด์„œ ์ฃผ๋ง ์‹œ๊ฐ„์„ ์ด์šฉํ•ด ํšŒ๊ณ ๊ธ€์„ ํ•˜๋‚˜ ์ž‘์„ฑํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ํšŒ๊ณ ๋Š” ์ •๋ง ์„ฑ์žฅ์„ ์œ„ํ•ด์„œ ํ•„์ˆ˜๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

์š”์ฆ˜ ๋Šฆ๊ฒŒ ์ž๋ฉด์„œ ์ˆ˜๋ฉด์‹œ๊ฐ„์ด ํ‰์†Œ๋ณด๋‹ค ์ค„๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ(ํ‰๊ท ์น˜๋ณด๋‹ค๋Š” ์—ฌ์ „ํžˆ ๋†’์ง€๋งŒ), ์‚ฌ์‹ค ์ด๋ ‡๊ฒŒ ์ž ์„ ์ค„์ด๊ธฐ๋ณด๋‹ค๋Š” ๊ทธ๋ƒฅ ํ•˜๋ฃจ๋ฅผ ๋” ๋ฐ€๋„์žˆ๊ฒŒ ์‚ด๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค. ๊ทธ๋Ÿฌ๋ ค๋ฉด ์‹œ๊ฐ„์„ ์ข€ ๋” tracking์„ ์ž˜ ํ•˜๊ณ  ๊ด€๋ฆฌ๋ฅผ ํ•˜๊ณ  ์‹ถ์€๋ฐ ๋งค๋ฒˆ ๊ณ ๋ฏผํ•˜๋Š” ๋ฌธ์ œ์ด๋‹ค. ์‹œ๊ฐ„์„ ๋” ๊ฐ€์น˜์žˆ๊ฒŒ ์“ฐ๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ, ๊ทธ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋Š” ๊ณ„์† ๊ณ ๋ฏผ์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

 

'What I learned > CodeSquad Log' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CodeSquad Day 61 : Team Project Week 1  (0) 2022.04.05
CodeSquad Day 60 : Front-end Week 7  (0) 2022.04.02
CodeSquad Day 58 : Front-end Week 7  (0) 2022.03.31
CodeSquad Day 57 : Front-end Week 7  (0) 2022.03.30
CodeSquad Day 56 : Front-end Week 7  (0) 2022.03.29