๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋…ธ๋งˆ๋“œ์ฝ”๋”32

ํด๋ฆฐ์ฝ”๋“œ Day 11. ํ˜•์‹ ๋งž์ถ”๊ธฐ โœ… ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ ์ฝ”๋” ๋ถํด๋Ÿฝ 'ํด๋ฆฐ ์ฝ”๋“œ' ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ž‘์„ฑํ•˜๋Š” TIL์ด๋ฉฐ, ์ถœ์ฒ˜๋Š” Clean Code์ž…๋‹ˆ๋‹ค. ๐Ÿ“š ๋ฒ”์œ„ : ~05. ํ˜•์‹ ๋งž์ถ”๊ธฐ ๐Ÿ““ ์ฑ…์—์„œ ๊ธฐ์–ตํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ์„ ์จ๋ณด์„ธ์š”. ์ฝ”๋“œ ํ˜•์‹ === ์˜์‚ฌ์†Œํ†ต ์ข‹์€ ํ˜•์‹์œผ๋กœ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ• ์ƒˆ ๊ฐœ๋…์„ ์‹œ์ž‘ํ•  ๋•Œ๋Š” ๋นˆ ํ–‰ ๋„ฃ๊ธฐ ๋ฐ€์ ‘ํ•œ ๋‚ด์šฉ์€ ๊ฐ€๊นŒ์ด (์„ธ๋กœ ๊ฑฐ๋ฆฌ๊ฐ€ ๊ฐ€๊น๊ฒŒ ์ž‘์„ฑ) instance ๋ณ€์ˆ˜ ⇒ class ๋งจ ์ฒ˜์Œ์— ์„ ์–ธ a ํ•จ์ˆ˜๊ฐ€ b ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค๋ฉด ๋‘˜์„ ๊ฐ€๊น๊ฒŒ, ๋˜๋„๋ก a๋ฅผ b๋ณด๋‹ค ๋จผ์ € ์ž‘์„ฑ ๊ฐœ๋… ์นœํ™”๋„ โฌ† ⇒ ๊ฐ€๊นŒ์ด! (์ข…์† ํ•จ์ˆ˜, ๋ณ€์ˆ˜ - ๋ณ€์ˆ˜ ์‚ฌ์šฉ ํ•จ์ˆ˜, ๋น„์Šทํ•œ ๋™์ž‘ ์ˆ˜ํ–‰) ๋“ค์—ฌ ์“ฐ๊ธฐ ์ž˜ํ•˜๊ธฐ Team์ด ์žˆ๋‹ค๋ฉด Team ๊ทœ์น™ ์ •ํ•˜๊ณ  ๊ทธ์— ๋”ฐ๋ฅด๊ธฐ, ๊ฐœ์ธํ–‰๋™ํ•˜์ง€ ์•Š๊ธฐ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์ฝ๊ธฐ ์‰ฝ๊ฒŒ, ๊ทœ๊ฒฉํ™”ํ•ด์„œ ์ž‘์„ฑ (์žฌ ์‚ฌ์šฉ์„ฑโฌ†) โœ๐Ÿป.. 2022. 5. 3.
ํด๋ฆฐ์ฝ”๋“œ Day 8-9. ๋”๋Ÿฌ์šด ์ฝ”๋“œ ๊ณ ์น˜๊ธฐ โœ… ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ ์ฝ”๋” ๋ถํด๋Ÿฝ 'ํด๋ฆฐ ์ฝ”๋“œ' ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ž‘์„ฑํ•˜๋Š” TIL์ด๋ฉฐ, ์ถœ์ฒ˜๋Š” Clean Code์ž…๋‹ˆ๋‹ค. ๐Ÿ“š ๋ฏธ์…˜ : ์˜ˆ์‹œ์˜ ๋”๋Ÿฌ์šด ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ๊ณ ์นœ ์ด์œ ์™€, ๋ฐฐ์šด ์  ์ ์–ด๋ณด๊ธฐ ๐Ÿ”ฅ Mission 1 1. BAD ๋”๋Ÿฌ์šด ์ฝ”๋“œ ๐Ÿ˜ฃ Hintโ• : ๊ฒ€์ƒ‰ํ•˜๊ธฐ ์‰ฌ์šด ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜์„ธ์š”. blastOFF๋Š” ๋กœ์ผ“ ๋ฐœ์‚ฌ๋ฅผ ์˜๋ฏธ. 86400000์€ ํ•˜๋ฃจ์˜ ๋ฐ€๋ฆฌ์ดˆ (milliseconds) ์˜๋ฏธ. // What the heck is 86400000 for? setTimeout(blastOff, 86400000); 2. GOOD ๐Ÿ˜Ž ์œ„ ์ฝ”๋“œ๋ฅผ ๊นจ๋—ํ•˜๊ฒŒ ๋‹ค์‹œ ์ž‘์„ฑํ•ด ์ฃผ์„ธ์š”. const MILLISECONDS_OF_A_DAY = 86400000; setTimeout(blastOff, MILLISECONDS_.. 2022. 5. 3.
[TIL] ๐Ÿ’ก Day 11 - JS๋กœ ์‚ฌ์šฉ์ž์˜ ์œ„์น˜ ์ •๋ณด์™€ ํ•ด๋‹น ์œ„์น˜์˜ ๋‚ ์”จ ํ‘œ์‹œํ•˜๊ธฐ โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๋ชฉํ‘œ : ๐ŸŒŽ์‚ฌ์šฉ์ž์˜ ์œ„์น˜ ์ •๋ณด์™€ โ›…ํ•ด๋‹น ์œ„์น˜์˜ ๋‚ ์”จ ํ‘œ์‹œํ•˜๊ธฐ ๐ŸŒฑ User์˜ ์œ„๋„(latitude) , ๊ฒฝ๋„(longitude) ๊ตฌํ•˜๊ธฐ ๐Ÿ‘‰ navigator ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์‚ฌ์šฉ์ž์˜ ์œ„์น˜๋ฅผ ์•Œ์•„๋‚ด๋Š” ์ฝ”๋“œ ์ž‘์„ฑ mdn ๋งํฌ JavaScript๊ฐ€ position์„ ํ†ตํ•ด์„œ user์˜ ์œ„์น˜๋ฅผ ์ „๋‹ฌํ•ด์คŒ. position์€ object์ด๊ณ , ์œ„๋„, ๊ฒฝ๋„ ๊ฐ’์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค. position( )ํ•จ์ˆ˜๋Š” 2๊ฐœ์˜ ์ธ์ž๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋์„ ๋•Œ์˜ ํ•จ์ˆ˜ (onGeoOk) ์‹คํ–‰ ์‹คํŒจํ–ˆ์„ ๋•Œ์˜ ํ•จ์ˆ˜ (onGeoError) navigator.geolocation.getCurrentPosition(์‹คํ–‰โญ•ํ•จ์ˆ˜, .. 2022. 5. 2.
[TIL] ๐Ÿ’ก Day 10 - JavaScript๋กœ TodoList ๋งŒ๋“ค๊ธฐ โœ” ์ด ํฌ์ŠคํŒ…์€ ๋…ธ๋งˆ๋“œ์ฝ”๋” - "๋ฐ”๋‹๋ผ JS๋กœ ํฌ๋กฌ ์•ฑ ๋งŒ๋“ค๊ธฐ๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊นƒํ—ˆ๋ธŒ์— ๊ธฐ๋กํ•œ ํ•„๊ธฐ๋ฅผ ์˜ฎ๊ธด ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๋ชฉํ‘œ : ๐Ÿ“ JavaScript๋กœ Todo List ๋งŒ๋“ค๊ธฐ ๐ŸŒฑ Todo List ๊ธฐ๋ณธ ํ‹€ ์ค€๋น„ ๐Ÿ‘‰ ์ผ๋‹จ ํ•„์š”ํ•œ ์š”์†Œ๋“ค์€ ์–ด๋–ค ๊ฒƒ์ด ์žˆ๋Š”์ง€ ์•Œ์•„๋ณด์ž. Form : ์‚ฌ์šฉ์ž๊ฐ€ todo ์ž…๋ ฅ → ์ œ์ถœํ•˜๋Š” ํ˜•ํƒœ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. List : ์ž…๋ ฅํ•œ todo๋ฅผ ๋‚˜์—ดํ•ด์•ผ ๋œ๋‹ค. input : ์‚ฌ์šฉ์ž์—๊ฒŒ todo๋ฅผ ์ž…๋ ฅ๋ฐ›์•„์•ผ ํ•œ๋‹ค. ์˜ˆ์‹œ ์ฝ”๋“œ const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElemen.. 2022. 5. 1.
๋ฐ˜์‘ํ˜•