The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 39 : Front-end Week 3

Millie 2022. 3. 4. 01:05

 

CodeSquad๐Ÿ”นDay 39

Morning Algo & Algorithm

์˜ค๋Š˜๋„ ์˜ค์ „ 9์‹œ์— ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋””๋ฅผ ํ–ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์˜ ๋กœ๋˜ ๋ฌธ์ œ, ๊ทธ๋ฆฌ๊ณ  LeetCode์˜ Happy Number ๋ฌธ์ œ์˜€๋‹ค.

์˜ค๋Š˜์˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ๋“ฑ์‚ฐ ๊ฐ”๋‹ค ์™€์„œ LeetCode์˜ ๋ฌธ์ œ๋ฅผ ํ•˜๋‚˜ ๋„์ „ํ–ˆ๋‹ค. Dynamic Progamming์„ ํ™œ์šฉํ•˜๋Š” ๋ฌธ์ œ์˜€์–ด์„œ ์˜ˆ์ „์— Udemy์—์„œ ๋“ค์—ˆ๋˜ ๊ฐ•์˜๋ฅผ ๋ณต์Šตํ•˜๋Š” ๊ธฐํšŒ๊ฐ€ ๋˜์—ˆ๋‹ค.

 

Class by Crong

์ด๋ฒˆ์—๋Š” ๋„๋‹ˆ, ์ด๋ˆ„, ๋„ํŠธ์˜ ์ฝ”๋“œ๋ฅผ ๋ฆฌ๋ทฐ๋ฅผ ์ƒ์ƒํ•˜๊ฒŒ ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๊ทธ ์™ธ JSON, ๋น„๋™๊ธฐ ์ฝ”๋“œ์˜ ๋™์ž‘ ์ˆœ์„œ๋ฅผ ์˜ˆ์ƒํ•ด ๋ณด๋Š” ๊ฒƒ, Fetch ๋“ฑ์— ๋Œ€ํ•œ ์ˆ˜์—…์ด ์ด์–ด์กŒ๋‹ค.

์ด๋ฒˆ์—๋„ ์ˆ˜์—…์€ 1์‹œ๊นŒ์ง€ ๊ธธ๊ฒŒ ์ด์–ด์กŒ๋‹ค. ๊ทธ๋ž˜๋„ ๋‹ค ์ค‘์š”ํ•œ ๋‚ด์šฉ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ง‘์ค‘ํ•˜๋ ค๊ณ  ์• ์ผ๋‹ค.

 

Asynchronous programming

์ˆ˜์—…์ด ๋๋‚˜๊ณ  ๋‚˜์„œ ๊ทธ๋ฃน ๋ฆฌ๋ทฐ ์ „๊นŒ์ง€ ๊ณ„์† ํ•™์Šต๋งŒ ํ–ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฃจํ”„์— ๋Œ€ํ•œ ์•„๋ž˜ ์˜์ƒ์„ ๋‹ค์‹œ ์‹œ์ฒญํ•˜๋ฉด์„œ ๋ณต์Šตํ•˜๊ณ , JavaScript Deep Dive ์ฑ…์˜ ๋น„๋™๊ธฐ ๋ถ€๋ถ„์„ ์ •๋…ํ–ˆ๋‹ค.

 

 

Pug?

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

์ด์•ผ๊ธฐํ•˜๋˜ ์ค‘ ํฌํ‚ค๊ฐ€ ์™€์„œ express ๊ด€๋ จํ•œ ์งˆ๋ฌธ์„ ํ–ˆ๋‹ค. ๋ผ์šฐํ„ฐ ๊ด€๋ จํ•œ ์งˆ๋ฌธ์ด์—ˆ๋Š”๋ฐ, ๋‚˜๋Š” express์—์„œ ๋ผ์šฐํ„ฐ๋ฅผ ์จ ๋ณด์ง„ ์•Š์•„์„œ ๋„์›€์ด ๋˜์ง„ ๋ชปํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ํฌํ‚ค๊ฐ€ ์ฝ”๋”ฉ์„ ํ•œ ๋ฐฉ์‹์ด ์‹ ๋ฐ•ํ•ด์„œ ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ๋ถ€ํƒ๋“œ๋ ธ๊ณ , ์ƒˆ๋กœ์šด ๋ฐฉ์‹๊ณผ ๊น”๋”ํ•œ ์ฝ”๋“œ์— ๊ฐํƒ„ํ–ˆ๋‹ค.

 

HTTP status code

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

 

Promise, Refactoring

promise ๊ณต๋ถ€๋ฅผ ์‹ฌ๋„ ์žˆ๊ฒŒ ํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ์ž˜ ์‹œ๊ฐ„์ด ์–ผ๋งˆ ์•ˆ ๋‚จ์•„์„œ, (๋‚ด์ผ ์•„์นจ์— ์šด๋™ ์ธ์ฆ์„ ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋Šฆ๊ฒŒ ์ž˜ ์ˆ˜๊ฐ€ ์—†๋‹ค..) Promise ๊ด€๋ จ ๋ฉ”์„œ๋“œ 5๊ฐ€์ง€๋ฅผ ํ›‘์–ด๋ณด๊ธฐ๋งŒ ํ–ˆ๋‹ค. Promise.all์ด๋‚˜ Promise.race๋ฅผ ํ™œ์šฉํ•ด ๋ณด๊ณ  ์‹ถ์–ด์„œ ์ด๊ฒƒ์„ ํ™œ์šฉํ•˜๋Š” ์ชฝ์œผ๋กœ ๋ฆฌํŒฉํ† ๋ง์„ ํ•œ ๋ฒˆ ํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ๋‚ด์ผ ๋ฆฌํŒฉํ† ๋ง์„ ์ž˜ ๋งˆ์น˜๊ณ  PR์„ ๋ณด๋‚ด๋Š” ๊ฒŒ ๋ชฉํ‘œ๋‹ค.

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

CodeSquad Day 42 : Pair Programming  (0) 2022.03.09
CodeSquad Day 40 : Front-end Week 3  (0) 2022.03.05
CodeSquad Day 38 : Front-end Week 3  (0) 2022.03.03
CodeSquad Day 37 : Front-end Week 3  (0) 2022.03.02
CodeSquad Day 36 : Front-end Week 3  (0) 2022.03.01