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

๐Ÿ“ Front-End/JavaScript5

[JS][์šฐํ…Œ์ฝ”] ํ”„๋ฆฌ์ฝ”์Šค 3์ฃผ์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•œ KPTํšŒ๊ณ  ๊ธ€์˜ ๋ชฉํ‘œ3์ฃผ์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด 3์ฃผ์ฐจ์˜ ์ฝ”๋“œ๋ฅผ ๋˜๋Œ์•„๋ณด๊ณ  4์ฃผ์ฐจ๋ฅผ ์‹œ์ž‘ํ•ด๋ณผ ์ƒ๊ฐ์ด๋‹ค.โ€ป ํ•ด๋‹น ๊ธ€์€ ์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค์—์„œ ์˜ฌ๋ ค์ค€ 3์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์€ ํ”„๋ฆฌ์ฝ”์Šค ์ฐธ์—ฌ์ž๋“ค์—๊ฒŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ณต์œ ๋œ ๋งํฌ๊ฐ€ ์กด์žฌํ•˜๋ฉฐ, ์ €๋Š” ํ•ด๋‹น ๋งํฌ๋Š” ๊ณต์œ ํ•  ์ˆ˜ ์—†๊ณ  ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์—์„œ์˜ ์ƒ๊ฐ๋“ค์„ ํ•ด๋‹น ๊ธ€์— ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค. 3์ฃผ์ฐจ ํ”„๋ฆฌ์ฝ”์Šค ๊ณผ์ •์— ๋Œ€ํ•œ ํ›„๊ธฐ3์ฃผ์ฐจ ํ•™์Šต ๋ชฉํ‘œ๋Š” ๊ด€๋ จ ํ•จ์ˆ˜๋“ค์„ ๋ฌถ์–ด ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ , ์ด ๊ฐ์ฒด๋“ค์ด ํ˜‘๋ ฅํ•˜์—ฌ ํ•˜๋‚˜์˜ ํฐ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋‹ค. ๋”๋ถˆ์–ด ํด๋ž˜์Šค์™€ ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์˜๋„ํ•œ ๋Œ€๋กœ ์ •ํ™•ํ•˜๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€๋ฅผ ๊ฒ€์ฆํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ–ˆ๋‹ค. ๋‹จ์œ„ ํ…Œ์ŠคํŠธ์—์„œ ‘๋‹จ์œ„’์˜ ์˜๋ฏธ๋ฅผ ๋ช…ํ™•ํžˆ ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด ์กฐ๊ธˆ ์–ด๋ ค์› ์ง€๋งŒ, ์ผ๋‹จ ์ฝ”๋“œ ์ž‘์„ฑ ์ค‘ ์ž์ž˜ํ•˜.. 2024. 11. 6.
[JS] ํด๋ž˜์Šค์™€ ํ”„๋ผ์ด๋น— ํ•„๋“œ ๊ตฌํ˜„ ์ด์œ  JavaScript ํด๋ž˜์Šค๋ž€์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํด๋ž˜์Šค(class)๋Š” ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ํ…œํ”Œ๋ฆฟ์ด๋‹ค. ํด๋ž˜์Šค๋Š” ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(OOP)์˜ ๊ฐœ๋…์„ ๋ฐ”ํƒ•์œผ๋กœ, ์ฝ› ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ๊ตฌ์กฐ์ ์ธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค€๋‹ค. ํด๋ž˜์Šค ์„ ์–ธ ๋ฐฉ๋ฒ•class Person { constructor(name, age) { this.name = name; this.age = age; } print() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }}Person : ํด๋ž˜์Šค๋ช…constructor : ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ / ํ•„๋“œ๋ฅผ ์„ ์–ธํ•œ๋‹ค.name, age : Person ํด๋ž˜์Šค์˜ ํ•„๋“œprint : .. 2024. 11. 6.
[JS][์šฐํ…Œ์ฝ”] ํ”„๋ฆฌ์ฝ”์Šค 2์ฃผ์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•œ KPTํšŒ๊ณ  ๊ธ€์˜ ๋ชฉํ‘œ2์ฃผ์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด 2์ฃผ์ฐจ์˜ ์ฝ”๋“œ๋ฅผ ๋˜๋Œ์•„๋ณด๊ณ  3์ฃผ์ฐจ๋ฅผ ์‹œ์ž‘ํ•ด๋ณผ ์ƒ๊ฐ์ด๋‹ค.โ€ป ํ•ด๋‹น ๊ธ€์€ ์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค์—์„œ ์˜ฌ๋ ค์ค€ 2์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์€ ํ”„๋ฆฌ์ฝ”์Šค ์ฐธ์—ฌ์ž๋“ค์—๊ฒŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ณต์œ ๋œ ๋งํฌ๊ฐ€ ์กด์žฌํ•˜๋ฉฐ, ์ €๋Š” ํ•ด๋‹น ๋งํฌ๋Š” ๊ณต์œ ํ•  ์ˆ˜ ์—†๊ณ  ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์—์„œ์˜ ์ƒ๊ฐ๋“ค์„ ํ•ด๋‹น ๊ธ€์— ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค. 2์ฃผ์ฐจ ํ”„๋ฆฌ์ฝ”์Šค ๊ณผ์ •์— ๋Œ€ํ•œ ํ›„๊ธฐ 2์ฃผ์ฐจ์˜ ํ•™์Šต ๋ชฉํ‘œ๋Š” ์—ฌ๋Ÿฌ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ํฐ ํ•จ์ˆ˜๋ฅผ ๋‹จ์ผ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์€ ํ•จ์ˆ˜๋“ค๋กœ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋‹ค. 3์ฃผ์ฐจ ํ•™์Šต ๋ชฉํ‘œ๋Š” ๊ด€๋ จ๋œ ํ•จ์ˆ˜๋“ค์„ ๋ฌถ์–ด ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ , ๊ฐ์ฒด๋“ค์ด ํ˜‘๋ ฅํ•˜์—ฌ ํ•˜๋‚˜์˜ ํฐ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ง€๊ธˆ๋ณด๋‹ˆ Controller๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ์ด๋ฏธ ํ•˜๋‚˜์˜ ํฐ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ํด๋ž˜์Šค๋ฅผ ๊ตฌํ˜„ํ•ด๋ณธ ๊ฒƒ.. 2024. 10. 31.
[JS][์šฐํ…Œ์ฝ”] ํ”„๋ฆฌ์ฝ”์Šค 1์ฃผ์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•œ KPTํšŒ๊ณ  ๊ธ€์˜ ๋ชฉํ‘œ1์ฃผ์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ๋‚ด๊ฐ€ ํ•œ ํ”„๋ฆฌ์ฝ”์Šค 1์ฃผ์ฐจ์˜ ์ฝ”๋“œ๋ฅผ ๋˜๋Œ์•„๋ณด๊ณ  2์ฃผ์ฐจ๋ฅผ ์–ด๋–ป๊ฒŒ ์‹œ์ž‘ํ•ด์•ผ ํ• ์ง€ ๊ณ ๋ฏผํ•ด๋ณผ ์ƒ๊ฐ์ด๋‹ค.โ€ป ํ•ด๋‹น ๊ธ€์€ ์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค์—์„œ ์˜ฌ๋ ค์ค€ 1์ฐจ ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์€ ํ”„๋ฆฌ์ฝ”์Šค ์ฐธ์—ฌ์ž๋“ค์—๊ฒŒ ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ณต์œ ๋œ ๋งํฌ๊ฐ€ ์กด์žฌํ•˜๋ฉฐ, ์ €๋Š” ํ•ด๋‹น ๋งํฌ๋Š” ๊ณต์œ ํ•  ์ˆ˜ ์—†๊ณ  ๊ณตํ†ต ํ”ผ๋“œ๋ฐฑ์„ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์—์„œ์˜ ์ƒ๊ฐ๋“ค์„ ํ•ด๋‹น ๊ธ€์— ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.โ€ป ํ”„๋ฆฌ์ฝ”์Šค 1์ฃผ์ฐจ ๋ฌธ์ œ๋ฅผ ์•Œ๊ณ  ๊ณ„์‹ ๋‹ค๋Š” ๊ฐ€์ •ํ•˜์— ์ž‘์„ฑ๋œ ๊ธ€์ž…๋‹ˆ๋‹ค. 1์ฃผ์ฐจ ๋ฌธ์ œ ์š”๊ตฌ์‚ฌํ•ญ ๊ธ€์ด ์žฌํ™•์ธ์ด ์–ด๋ ค์›Œ์„œ ๋”ฐ๋กœ ์„ค๋ช…์„ ์ฒจ๋ถ€ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.๐Ÿฅฒ 1์ฃผ์ฐจ ํ”„๋ฆฌ์ฝ”์Šค ๊ณผ์ •์— ๋Œ€ํ•œ ํ›„๊ธฐ์šฐ์„ , 1์ฃผ์ฐจ์˜ ํ•™์Šต ๋ชฉํ‘œ๊ฐ€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์— ์ต์ˆ™ํ•ด์ง€๋Š” ๊ฒƒ์ด๋ผ๊ณ  ๋˜์–ด์žˆ๋‹ค. ๋‚˜๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์•„์ง ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด ๋‚ฏ์„ค์–ด.. 2024. 10. 24.
[JS] Prettier๋กœ ๋ฌธ์ž์—ด single quotes ์ž…๋ ฅ ์„ค์ •ํ•˜๊ธฐ ์‚ฌ์šฉ ๊ณ„๊ธฐ์šฐํ…Œ์ฝ” ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์ค€๋น„ํ•˜๋ฉด์„œ Javascript ์ž‘์„ฑ ๊ฐ€์ด๋“œ๋ฅผ ํ™•์ธํ–ˆ๋‹ค.https://github.com/airbnb/javascript GitHub - airbnb/javascript: JavaScript Style GuideJavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub.github.com์—ฌ๊ธธ ๋ณด๋ฉด ๋ฌธ์ž์—ด ์ž‘์„ฑ ๊ฐ€์ด๋“œ์— single quotes, ์ž‘์€ ๋”ฐ์˜ดํ‘œ๋ฅผ ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•œ๋‹ค.๊ทผ๋ฐ ๋‚˜๋Š” Prettier ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ž…๋ ฅํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ Prettier ๊ธฐ๋Šฅ์˜ ๊ธฐ๋ณธ ๊ฐ’์ด ์Œ๋”ฐ์˜ดํ‘œ์ด๋‹ค.(ํ˜น์‹œ Prettier๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค์€ VS.. 2024. 10. 18.