The journey to becoming a developer

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

What I learned/CodeSquad Log

CodeSquad Day 56 : Front-end Week 7

Millie 2022. 3. 29. 02:12

 

CodeSquad๐Ÿ”นDay 56

New Group - Scrum

ํ”„๋ก ํŠธ์—”๋“œ ๊ณผ์ •์ด ๋ฒŒ์จ 7์ฃผ์ฐจ, ๋งˆ์ง€๋ง‰์— ์ ‘์–ด๋“ค์—ˆ๋‹ค. ์ƒˆ๋กœ์šด ๋ฉค๋ฒ„๋“ค์„ ๋งŒ๋‚˜ ์ธ์‚ฌ๋ฅผ ๋‚˜๋ˆ„๊ณ , ์Šคํฌ๋Ÿผ ๊ทœ์น™์„ ์„ธ์›Œ๋‚˜๊ฐ”๋‹ค. ์•„์นจ์— ์ŠคํŠธ๋ ˆ์นญ, ์ง€๊ฐ ํ•œ ์‚ฌ๋žŒ์ด MCํ•˜๊ณ  5์‹œ์— ๋ฆฌ๋ทฐ ์•Œ๋ผ๋ฏธ ํ•˜๊ธฐ, ๊ทธ๋ฆฌ๊ณ  ์Šคํฌ๋Ÿผ ์‹œ ์ง€๋ชฉ๋ณด๋‹ค๋Š” ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ”ผ๋“œ๋ฐฑํ•˜๊ณ  ์ด์•ผ๊ธฐํ•˜๋Š” ์‹์œผ๋กœ ์ง„ํ–‰ํ•˜๊ธฐ. ๋งˆ์ง€๋ง‰ ๊ทœ์น™์€ ๋‚ด๊ฐ€ ์ œ์•ˆ์„ ํ–ˆ๋Š”๋ฐ, ์ด์•ผ๊ธฐ๊ฐ€ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋” ๋งŽ์•„์งˆ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์€ ๋ฐฉ์•ˆ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค. ๋Œ€์‹  ์Šคํฌ๋Ÿผ์ด ์ข€ ๋Šฆ๊ฒŒ ๋๋‚˜๊ธด ํ•œ๋‹ค.๐Ÿ˜‚

 

OOP

 

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ดํ•ดํ•˜๋Š” ์‹œ์ž‘์ 

'๊ฐ์ฒด๋ž€ ๋ฌด์—‡์ธ๊ฐ€?'๊ฐ€ ์•„๋‹ˆ๋ผ '์™œ ๊ฐ์ฒด ์ง€ํ–ฅ์„ ์จ์•ผ ํ•˜์ง€?' ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์ž.

velog.io

์Šฌ๋ž™์—์„œ ์ถ”์ฒœ๋ฐ›์€ ๊ธ€์„ ์ •๋…ํ•ด ๋ณด์•˜๋‹ค. ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ํฌ์ŠคํŒ…์ด ๋˜์–ด์žˆ์—ˆ๋‹ค. ๊ฐ์ฒด์ง€ํ–ฅ์„ ์จ์•ผ ํ•˜๋Š” ์ด์œ ๋ถ€ํ„ฐ ์งš๊ณ  ๋„˜์–ด๊ฐ€๋Š” ๊ฒŒ ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ, ๊ฐ์ฒด์ง€ํ–ฅ์€ ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์งœ๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์ด๋ผ๋Š” ๊ฒƒ. ์ข‹์€ ์ฝ”๋“œ๋ž€ ๋ณ€๊ฒฝํ•˜๊ธฐ ์‰ฝ๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๋ผ๋Š” ๊ฒƒ ๋“ฑ. ์•„์ง ์ „๋ถ€ ์ •๋…ํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ ๋‚ด์ผ 4ํŽธ๊นŒ์ง€ ์ •๋…ํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

 

Class by Crong

Generator

์ด๋ฆ„๋งŒ ๋“ค์—ˆ์ง€, ์•Œ์ง€ ๋ชปํ–ˆ๋˜ Generator์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋Š” ์ˆ˜์—…์ด์—ˆ๋‹ค.

 

Wanted ํ›‘์–ด๋ณด๊ธฐ

์ฑ„์šฉ ์‚ฌ์ดํŠธ๋ฅผ ํ•จ๊ป˜ ๋ณด๋ฉด์„œ ์•ž์œผ๋กœ ๋ฐฐ์›Œ์•ผ ํ•  ๊ฒƒ๋“ค์— ๋Œ€ํ•ด ํฌ๋กฑ์ด ์„ค๋ช…ํ–ˆ๋‹ค.

 

Pair Programming - Debugger

๋žœ๋ค์œผ๋กœ ์ง์ด ์ •ํ•ด์กŒ๊ณ  ๋‚˜๋Š” ์˜ค๋žœ๋งŒ์— ๋ณด๋Š” ๋„๋น„์™€ ์ง์ด ๋˜์—ˆ๋‹ค. Debugger๋ฅผ ํ™œ์šฉํ•ด์„œ Generator๊ฐ€ ์“ฐ์ธ ์ผ๋ จ์˜ ํ•จ์ˆ˜๋“ค์„ ์ž˜ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ˆ˜์ •ํ•ด์•ผ ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋‚˜์™€ ๋„๋น„ ๋ชจ๋‘ generator์— ๋Œ€ํ•ด ๋ฐฐ์šด ๊ฒŒ ์˜ค๋Š˜ ํฌ๋กฑ์ด ์„ค๋ช…ํ•œ ๊ฒŒ ๊ฑฐ์˜ ๋‹ค์˜€๊ธฐ ๋•Œ๋ฌธ์— ๋งค์šฐ ์–ด๋ ค์›Œํ–ˆ๋‹ค. ์‹œ๊ฐ„์ด ๊ฑฐ์˜ 40~50๋ถ„์ด ์ง€๋‚ฌ์ง€๋งŒ this binding์—์„œ๋ถ€ํ„ฐ ๋ง‰ํ˜€์„œ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ–ˆ๋‹ค.

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

 

Array.prototype.every()

์ด ๋ฉ”์„œ๋“œ์˜ ์กด์žฌ๋Š” ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์˜ค๋Š˜ ์‹ค์งˆ์ ์œผ๋กœ ์‚ฌ์šฉํ•ด ๋ณด๋ฉด์„œ ์–ด๋–ค ์‹์œผ๋กœ ํ™œ์šฉํ•ด์•ผ๊ฒ ๋‹ค๋Š” ๊ฐ์„ ์žก์•„๋ณด์•˜๋‹ค.

๋ฐฐ์—ด์˜ ์›์†Œ๋ฅผ ๋Œ๋ฉด์„œ ์ฃผ์–ด์ง„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ†ต๊ณผํ•˜๋Š”์ง€ ์•„๋‹Œ์ง€์— ๋”ฐ๋ผ true/false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜.

์ด๋ก ์ ์œผ๋กœ ์•Œ๊ณ ๋งŒ ์žˆ์œผ๋ฉด ํ™œ์šฉํ•˜๊ธฐ ์–ด๋ ต๋‹ค. ์ด๋Ÿฐ ๋ฉ”์„œ๋“œ๋“ค์€ ์ ์žฌ์ ์‹œ์— ์‚ฌ์šฉํ•ด๋ณด๋ฉฐ ์—ฐ์Šตํ•ด์•ผ๊ฒ ๋‹ค.

 

Array.prototype.every() - JavaScript | MDN

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

developer.mozilla.org

 

React vs Vue

 

React ์ธ๊ฐ€ Vue ์ธ๊ฐ€?

(๋ฒˆ์—ญ) ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ ์™• React ์™€ ์‹ ํฅ๊ฐ•์ž Vue ๋ฅผ ํ”„๋ ˆ์ž„์›Œํฌ ํŠน์„ฑ์—์„œ ๋น„๊ตํ•œ ๊ธ€

joshua1988.github.io

ํฌ๋กฑ์˜ ์ˆ˜์—… ์‹œ๊ฐ„์— React์™€ Vue ๊ด€๋ จ ์ด์•ผ๊ธฐ๊ฐ€ ๋‚˜์™”๋‹ค.

2016๋…„ 12์›” ๊ธ€๋กœ ๊ฑฐ์˜ 5~6๋…„ ์ „ ๊ธ€์ด๊ธด ํ•˜์ง€๋งŒ, ๊ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋ณธ์งˆ์ ์ธ ์ฐจ์ด๋ฅผ ์•Œ๊ธฐ์—๋Š” ์ข‹์€ ๊ธ€์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค.

 

npm trends

 

angular vs react vs svelte vs vue | npm trends

Compare npm package download statistics over time: angular vs react vs svelte vs vue

www.npmtrends.com

๋งˆ๋ฌด๋ฆฌ ์Šคํฌ๋Ÿผ ๋•Œ ์ด ์–˜๊ธฐ๋ฅผ ๊บผ๋ƒˆ๋Š”๋ฐ, npm trends๋ผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ์ฝœ๋ผ ๋•์— ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. ๋‹ค์šด๋กœ๋“œ ์ˆ˜๋ฅผ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๊ณ  ์ด๋ฅผ ํ†ตํ•ด ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์–ผ๋งˆ๋‚˜ ์ธ๊ธฐ๊ฐ€ ์žˆ๋Š”์ง€ ๊ทธ ์ถ”์„ธ๋„ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค. react๊ฐ€ ์ •๋ง ์••๋„์ ์ธ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

mobx๋„ ์ธ๊ธฐ๊ฐ€ ์žˆ๊ณ  ์žฅ์ ์ด ์žˆ๋‹ค๋Š” ์–˜๊ธฐ๋ฅผ ๋“ค์—ˆ์ง€๋งŒ redux๊ฐ€ ์••๋„์ ์ด๋‹ค.

์•„๋ฌด๋ž˜๋„ ์‹ ๊ธฐ์ˆ ์ด ๋งŽ์€ ํ”„๋ก ํŠธ์—”๋“œ ํŠน์„ฑ์ƒ ๋ญ˜ ๋ฐฐ์›Œ์•ผ ํ• ์ง€ ๊ณ ๋ฏผ์ด ๋˜๋Š” ๋•Œ๊ฐ€ ์žˆ์„ํ…๋ฐ npm treands์— ๊ฒ€์ƒ‰ํ•ด๋ณด๋ฉด์„œ ์ด ๊ณ ๋ฏผ์„ ์ข€ ๋œ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

 

Algorithms

 

์ฝ”๋”ฉํ…Œ์ŠคํŠธ ์—ฐ์Šต - 124 ๋‚˜๋ผ์˜ ์ˆซ์ž

 

programmers.co.kr

 

๊ทœ์น™์„ ์ฐพ์•˜์œผ๋‚˜ ์–ด๋–ป๊ฒŒ ์ ์šฉํ• ์ง€์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์ด ๋งŽ์•˜๋˜ ๋ฌธ์ œ์ด๋‹ค.

 

 

Why are software development task estimations regularly off by a factor of 2-3?

Answer (1 of 290): The answer is trivial but: ‘Because it was estimated incorrectly’ ‘Thanks Cap’ you would say… but I will not leave you alone with that answer and try to explain more :) Even though software development task seems to be quite a

www.quora.com

์Šฌ๋ž™์— ์œ„ ๊ธ€์ด ์˜ฌ๋ผ์™€์„œ ์ฝ์–ด๋ดค๋Š”๋ฐ ํฅ๋ฏธ๋กœ์› ๋‹ค. ๊ฐœ๋ฐœ์ด ์™œ ์˜ˆ์ธก๋ณด๋‹ค ๋Šฆ์–ด์ง€๋Š”์ง€์— ๋Œ€ํ•œ ์งˆ๋ฌธ์— ๋‹ต๋ณ€์œผ๋กœ ์—ฌํ–‰์— ๋น—๋Œ€์–ด ์„ค๋ช…ํ•œ ๊ฒŒ ์ธ์ƒ๊นŠ์—ˆ๋‹ค.

 

์ƒˆ๋ฒฝ์—๋Š” ์ œ์ด๋ฏธ, ์นธ๊ณผ ํ•จ๊ป˜ ์ œ์ด๋ฏธ์˜ ์ฝ”๋“œ๋ฅผ ํ•จ๊ป˜ ๋ณด๋ฉด์„œ ์„ค๊ณ„์— ๊ด€ํ•œ ์ด์•ผ๊ธฐ, Performance ํƒญ ๊ด€๋ จ ์ด์•ผ๊ธฐ ๋“ฑ ๋ฏธ์…˜๊ณผ ๊ด€๋ จ๋œ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆด๋‹ค.

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

CodeSquad Day 58 : Front-end Week 7  (0) 2022.03.31
CodeSquad Day 57 : Front-end Week 7  (0) 2022.03.30
CodeSquad Day 55 : Front-end Week 6  (0) 2022.03.26
CodeSquad Day 54 : Front-end Week 6  (0) 2022.03.25
CodeSquad Day 53 : Front-end Week 6  (0) 2022.03.24