Daily Article (August. 2021)

quatoยท2021๋…„ 8์›” 13์ผ
1

Daily Article (์ง„ํ–‰ ์ค‘)

๋ชฉ๋ก ๋ณด๊ธฐ
1/2
post-thumbnail

โœจ 8์›” 13์ผ (๊ธˆ)

๐Ÿ“ฐย  ํ”„๋ก ํŠธ์—”๋“œ ์ถ”์ฒœ ์ž๋ฃŒ ๋ชจ์Œ

  • ํ•„์ž๊ฐ€ ๋„์›€์„ ๋ฐ›์•˜๊ฑฐ๋‚˜ ์•ž์œผ๋กœ ์ฝ์„ ์˜ˆ์ •์ธ ์ž๋ฃŒ๋“ค(์‚ฌ์ดํŠธ, ๋ธ”๋กœ๊ทธ, ๊นƒํ—ˆ๋ธŒ, ์œ ํŠœ๋ธŒ ๋“ฑ) ์„ ๋ชจ์•„ ๋†“์•˜๋‹ค.
  • ์•ž์œผ๋กœ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ๊ฐ€ ์ด๋ ‡๊ฒŒ ๋งŽ๊ตฌ๋‚˜ ๊ธฐ๋Œ€๊ฐ€ ๋˜๋ฉด์„œ๋„ ์–ธ์ œ ๋‹ค ๋ณผ ์ˆ˜ ์žˆ์„๊นŒ... ๊ฑฑ์ •๋„ ๋œ๋‹ค๐Ÿ˜“
  • velog๋ฅผ ๋น„๋กฏํ•˜์—ฌ ์ˆ˜๋งŽ์€ ์–‘์งˆ์˜ ์ž๋ฃŒ๋“ค์ด ์žˆ์ง€๋งŒ ๋‚˜์—๊ฒŒ๋Š” ์•„์ง ๋ฒ„๊ฑฐ์šด ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์ด ๋งŽ๊ณ  ๋‚ด๊ฐ€ ๋ณด๊ณ  ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ์˜ ์–‘์€ ๊ทธ์— ๋น„ํ•ด ๋„ˆ๋ฌด ์ ๋‹ค.๐Ÿ˜ญ
  • ํ•˜์ง€๋งŒ ๊พธ์ค€ํžˆ ๊ณต๋ถ€ํ•˜๋‹ค ๋ณด๋ฉด ๋‚˜๋„ ๋‚จ์ด ์ฝ์„ ๋งŒํ•œ ๊ธ€์„ ์“ธ ์ˆ˜ ์žˆ์„ ๋‚ ์ด ์˜ฌ ๊ฒƒ์ด๋‹ค!!

โœจ 8์›” 14์ผ (ํ† )

๐Ÿ“ฐย  ํ”„๋ก ํŠธ์—”๋“œ ๊ฟ€ ์‚ฌ์ดํŠธ ์ถ”์ฒœ

  • ์›น๋””์ž์ธ์„ ๋„์™€์ค„ tool ์‚ฌ์ดํŠธ๋ฅผ ๋ชจ์•„ ๋†“์•˜๋‹ค.
  • 13์ผ์ž article๊ณผ ํ•จ๊ป˜ ์ด์šฉํ•˜๋ฉด ๋งŽ์€ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

โœจ 8์›” 15์ผ (์ผ)

๐Ÿ“ฐย  var, let, const ์ฐจ์ด์ 

  • ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive ์ •๋ฆฌ์—์„œ ๋ณ€์ˆ˜ var์— ๋Œ€ํ•ด ๋‹ค๋ค˜๋Š”๋ฐ let๊ณผ const์— ๊ด€ํ•ด ์˜ˆ์Šตํ•  ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ์ž๋ฃŒ์ด๋‹ค.
  • var๋Š” ์—ฌ๋Ÿฌ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ES6 ์ดํ›„ let๊ณผ const๊ฐ€ ๋ณด์™„๋˜์—ˆ๋‹ค.
  • let์€ var์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์žฌํ• ๋‹น์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๋ณ€์ˆ˜ ์ค‘๋ณต ์„ ์–ธ์€ ๊ธˆ์ง€๋œ๋‹ค.
var name = 'Quato'
console.log(name) // Quato

var name = 'Moon'
console. log(name) // Moon
let name = 'Quato'
console.log(name) // Quato

let name = 'Moon'
console.log(name) 
 // Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'Moon'
console.log(name) //Moon
  • const๋Š” let, var์™€ ๋‹ฌ๋ฆฌ ์žฌํ• ๋‹น์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
const name = 'Quato'
console.log(name) // Quato

const name = 'Moon'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'Moon'
console.log(name)
 // Uncaught TypeError: Assignment to constant variable.

โœจ 8์›” 16์ผ (์›”)

๐Ÿ“ฐย  ์›น์€ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ• ๊นŒ?

  • ์›นํŽ˜์ด์ง€์˜ ๋Œ€๋žต์ ์ธ ๋™์ž‘ ๊ตฌ์กฐ์™€ ์›๋ฆฌ๋ฅผ ์‰ฝ๊ฒŒ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ.
  • ํด๋ผ์ด์–ธํŠธ๋Š” ์„œ๋ฒ„๋กœ ๋ถ€ํ„ฐ html ํŒŒ์ผ๋งŒ ๊ฐ€์ ธ์™€ ์ฝ๊ณ  ํ•„์š”ํ•œ ํŒŒ์ผ์„ ๋งŒ๋‚  ๋•Œ๋งˆ๋‹ค ํ”„๋ก ํŠธ ์„œ๋ฒ„๋กœ http request๋ฅผ ๋ณด๋‚ด ๋ฐ›์•„์˜จ๋‹ค.
  • ์›น ํด๋ผ์ด์–ธํŠธ, ์›น์„œ๋ฒ„, DB์˜ ๊ธฐ๋ณธ ๊ฐœ๋…
  • ์›นํŽ˜์ด์ง€์˜ ๋™์ž‘ ์›๋ฆฌ (MPA, SPA)

โœจ 8์›” 17์ผ (ํ™”)

๐Ÿ“ฐย  Node.js ์ž…์ถœ๋ ฅ ์ •๋ฆฌ

  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๋ฅผ ํ’€๊ธฐ ์œ„ํ•ด ์ฐธ๊ณ ํ•œ ์ž๋ฃŒ

  • Node.js์—์„œ ์ฝ˜์†”์— ์ž…์ถœ๋ ฅ์„ ํ•˜๋Š” ๋ฐฉ์‹์€ ํฌ๊ฒŒ readline๋ชจ๋“ˆ, fs๋ชจ๋“ˆ๋กœ ๋‚˜๋‰œ๋‹ค.

  • readlin๋ชจ๋“ˆ์€ JS ๋‚ด์žฅ ๋ชจ๋“ˆ๋กœ ์ฒ˜์Œ ์ƒ์„ฑ ์‹œ createInterface๋ฅผ ํ†ตํ•ด input, output์„ ์ƒ์„ฑํ•˜๊ณ  ์ž…๋ ฅ์„ ๊ฐ–๊ณ  ์ฒ˜๋ฆฌํ•  callbackํ•จ์ˆ˜์ธ function(line)์„ ์„ค์ •ํ•œ๋‹ค.

  • ์ž…๋ ฅ์„ ์›ํ•˜๋Š” ๋งŒํผ ๋ฐ›๊ธฐ ์œ„ํ•ด์„œ๋Š” ์กฐ๊ฑด์„ ์ž…๋ ฅํ•œ ํ›„, rl.close()๋ฅผ ๊ธฐ์žฌํ•œ๋‹ค.

  • fs๋ชจ๋“ˆ์€ ํŒŒ์ผ ์ฒ˜๋ฆฌ์™€ ๊ด€๋ จ๋œ ๋ชจ๋“ˆ๋กœ filename์˜ ํŒŒ์ผ์„ [options]์˜ ๋ฐฉ์‹์œผ๋กœ ์ฝ์€ ํ›„ callback์œผ๋กœ ์ „๋‹ฌ๋œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. (๋น„๋™๊ธฐ์ )

fs.readFile(filename, [options], callback)
  • filename์˜ ํŒŒ์ผ์„ [options]์˜ ๋ฐฉ์‹์œผ๋กœ ์ฝ์€ ํ›„ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค. (๋™๊ธฐ์ )
fs.readFileSync(filename, [options])
  • Sync๊ฐ€ ๋ถ™์€ ๊ฒƒ์€ ๋™๊ธฐ์  ์ฝ๊ธฐ, ๋ถ™์ง€ ์•Š์€ ๊ฒƒ์€ ๋น„๋™๊ธฐ์  ์ฝ๊ธฐ์ด๋‹ค.
  • ๋™๊ธฐ์  ์ฝ๊ธฐ๋กœ ์ฝ๊ฒŒ ๋˜๋ฉด ํŒŒ์ผ์„ ์ฝ์œผ๋ฉด์„œ ๋‹ค๋ฅธ ์ž‘์—…์„ ๋™์‹œ์— ํ•  ์ˆ˜ ์—†๋‹ค.
  • ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฝ์œผ๋ฉด ํŒŒ์ผ์„ ์ฝ์œผ๋ฉด์„œ ๋‹ค๋ฅธ ์ž‘์—…๋„ ๋™์‹œ์— ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๊ณ ,
    ํŒŒ์ผ์„ ๋‹ค ์ฝ์œผ๋ฉด ๋งค๊ฐœ๋ณ€์ˆ˜ callback์œผ๋กœ ์ „๋‹ฌํ•œ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.

โœจ 8์›” 18์ผ (์ˆ˜)

๐Ÿ“ฐย  ๋น„๋™๊ธฐ์™€ ๋…ผ๋ธ”๋กœํ‚น

  • 17์ผ์ž article์—์„œ ์ฃผ์š” ๊ฐœ๋…์ด์—ˆ๋˜ ๋™๊ธฐ, ๋น„๋™๊ธฐ์— ๋Œ€ํ•ด ์ข€ ๋” ์ž์„ธํžˆ ์„œ์ˆ ํ•˜๊ณ  ์žˆ๋‹ค.

  • ๋™๊ธฐ-๋ธ”๋กœํ‚น, ๋น„๋™๊ธฐ-๋ธ”๋กœํ‚น, ๋™๊ธฐ-๋…ผ๋ธ”๋กœํ‚น, ๋น„๋™๊ธฐ-๋…ผ๋ธ”๋กœํ‚น 4๊ฐ€์ง€ ๋™์ž‘์›๋ฆฌ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ค€๋‹ค.

  • ๐Ÿ“Œ ๋™๊ธฐ์  : ํ˜ธ์ถœ๋œ ์ž‘์—…์˜ ๋ฆฌํ„ดํ•˜๋Š” ์‹œ๊ฐ„๊ณผ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์‹œ๊ฐ„์ด ์ผ์น˜

  • ์ž‘์—… A์˜ ์ข…๋ฃŒ์‹œ๊ฐ„๊ณผ ์ž‘์—… B์˜ ์‹œ์ž‘์‹œ๊ฐ„์ด ๊ฐ™์œผ๋ฉด ๋™๊ธฐ์ ์ด๋ผ๊ณ  ํ•œ๋‹ค.

  • ๐Ÿ“Œ ๋น„๋™๊ธฐ์  : ํ˜ธ์ถœ๋œ ์ž‘์—…์˜ ๋ฆฌํ„ด ์‹œ๊ฐ„๊ณผ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์‹œ๊ฐ„์ด ์ผ์น˜ํ•˜์ง€ ์•Š์Œ

  • ๋™๊ธฐ์™€ ๋ฐ˜๋Œ€๋กœ ๋Œ€์ƒ์ด ์ž‘์—…์‹œ๊ฐ„์ด ๊ฐ™์ง€ ์•Š์„ ๋•Œ ๋น„๋™๊ธฐ์ ์ด๋ผ๊ณ  ๋ณธ๋‹ค.

  • ๐Ÿ“Œ ๋ธ”๋กœํ‚น : ์ง์ ‘ ์ œ์–ดํ•  ์ˆ˜ ์—†๋Š” ์ž‘์—…์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ค์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ

  • ํ˜ธ์ถœ๋œ ํ•จ์ˆ˜์—์„œ I/O์ž‘์—…๋“ฑ์„ ์š”์ฒญํ–ˆ์„ ๊ฒฝ์šฐ I/O์ž‘์—…์ด ์ฒ˜๋ฆฌ๋˜ ์ „๊นŒ์ง€ ์•„๋ฌด์ผ๋„ ํ•˜์ง€ ๋ชปํ•œ๋‹ค.

  • ๐Ÿ“Œ ๋…ผ๋ธ”๋กœํ‚น : ์ง์ ‘ ์ œ์–ดํ•  ์ˆ˜ ์—†๋Š” ์ž‘์—…์ด ์™„๋ฃŒ๋˜๊ธฐ ์ „์— ์ œ์–ด๊ถŒ์„ ๋„˜๊ฒจ์ฃผ๋Š” ๊ฒฝ์šฐ๋ฅผ ๋งํ•œ๋‹ค.

  • ํ˜ธ์ถœ๋œ ํ•จ์ˆ˜์—์„œ I/O์ž‘์—…๋“ฑ์„ ์š”์ฒญํ–ˆ์„ ๊ฒฝ์šฐ I/O์ž‘์—…์˜ ์ฒ˜๋ฆฌ์—ฌ๋ถ€์™€ ๊ด€๊ณ„์—†์ด ๋ฐ”๋กœ ๋‹ค์Œ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.


โœจ 8์›” 19์ผ (๋ชฉ)

๐Ÿ“ฐย  Node JS ๋™์ž‘์›๋ฆฌ

  • javascript์™€ Nodejs์˜ ๋™์ž‘์›๋ฆฌ ์„ค๋ช…
  • javascript๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ์–ธ์–ด์ด๋ฏ€๋กœ ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ์ž‘์—…๋งŒ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅ
  • ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ(Nodejs, ๋ธŒ๋ผ์šฐ์ €)์—์„œ ๋น„๋™๊ธฐ, ๋…ผ๋ธ”๋กœํ‚น ์ž‘์—… ์ง„ํ–‰
  • ์ด์™ธ์—๋„ libuv, Event loop์˜ ๋™์ž‘ ๊ณผ์ •๊ณผ ์›๋ฆฌ์— ๋Œ€ํ•ด ์„œ์ˆ ํ•˜๊ณ  ์žˆ๋‹ค.


โœจ 8์›” 20์ผ (๊ธˆ)

๐Ÿ“ฐย  JS์Šค๋Ÿฝ๊ฒŒ ์ข‹์€ ์ฝ”๋“œ ์“ฐ๊ธฐ ๊ฟ€ํŒ

  • ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด, ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น, spread ์—ฐ์‚ฐ์ž, Array', 'Loop, async/await๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐ„๊ฒฐํ•˜๊ณ  ๊ฐ€๋…์„ฑ ์ข‹๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.

  • ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด : ๋ฌธ์ž์—ด ์—ฐ๊ฒฐ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” +์—ฐ์‚ฐ์ž ๋Œ€์‹  ๋ฐฑํ‹ฑ(`)๊ณผ $๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฌธ์ž์—ด ์—ฐ๊ฒฐ ๊ฐ€๋Šฅ

  • ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น : ๊ฐ์ฒด๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›์•„ ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ๋Œ€์‹  ๋งค๊ฐœ๋ณ€์ˆ˜ ๋‹จ๊ณ„์—์„œ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹นํ•˜๊ฑฐ๋‚˜ ํ•จ์ˆ˜ ์•ˆ์— ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ํ†ตํ•ด ์ค‘๋ณต๋˜๋Š” ๊ฐ์ฒด ์ž…๋ ฅ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

  • spread ์—ฐ์‚ฐ์ž : ๋ฐฐ์—ด์ด๋‚˜ ๋ฌธ์ž์—ด๊ณผ ๊ฐ™์ด ๋ฐ˜๋ณต ๊ฐ€๋Šฅํ•œ ๋ฌธ์ž๋ฅผ 0๊ฐœ ์ด์ƒ์˜ ์ธ์ˆ˜ (ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ) ๋˜๋Š” ์š”์†Œ (๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด์˜ ๊ฒฝ์šฐ)๋กœ ํ™•์žฅํ•˜์—ฌ, 0๊ฐœ ์ด์ƒ์˜ ํ‚ค-๊ฐ’์˜ ์Œ์œผ๋กœ ๊ฐ์ฒด๋กœ ํ™•์žฅ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.


โœจ 8์›” 21์ผ (ํ† )

๐Ÿ“ฐย  (๋ฒˆ์—ญ) DOM์€ ์ •ํ™•ํžˆ ๋ฌด์—‡์ผ๊นŒ?

  • DOM(Document Object Model)์€ ์›น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์ธํ„ฐํŽ˜์ด์Šค

์‚ฌ์šฉ ๋ชฉ์ โ“

  1. ๋ทฐ ํฌํŠธ์— ๋ฌด์—‡์„ ๋ Œ๋”๋ง ํ• ์ง€ ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ
  2. ํŽ˜์ด์ง€์˜ ์ฝ˜ํ…์ธ  ๋ฐ ๊ตฌ์กฐ, ๊ทธ๋ฆฌ๊ณ  ์Šคํƒ€์ผ์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋žจ์— ์˜ํ•ด ์ˆ˜์ •๋˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ

DOM์€ ์›๋ณธ HTML ๋ฌธ์„œ ํ˜•ํƒœ์™€ ๋น„์Šทํ•˜์ง€๋งŒ ๋ช‡ ๊ฐ€์ง€ ์ฐจ์ด์ โ“

  • ํ•ญ์ƒ ์œ ํšจํ•œ HTML ํ˜•์‹์ž…๋‹ˆ๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์ˆ˜์ •๋  ์ˆ˜ ์žˆ๋Š” ๋™์  ๋ชจ๋ธ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. (Ex. ::after)
  • ๋ณด์ด์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. (Ex. display: none)

โœจ 8์›” 22์ผ (์ผ)

๐Ÿ“ฐย  ์€๋‹‰์„ ํ–ฅํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ฌ์ •

  • ECMAScript ํด๋ž˜์Šค ํ•„๋“œ(class field) ๋ช…์„ธ์ค‘์— Private field ์ฆ‰ Private Property๊ฐ€ ์žˆ๋‹ค.
  • private ์†์„ฑ์ด ์—†์—ˆ์„ ๋•Œ์—๋Š” ์ปจ๋ฒค์…˜, ํ•จ์ˆ˜ ์ƒ์„ฑ์ž, this, Symbol ๋“ฑ์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

๐Ÿ“Œ Private Property์˜ ํŠน์„ฑ

  • private๊ณผ ๊ฐ™์€ ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋Œ€์‹  # ์ฆ‰ ์ƒต ํ”„๋ฆฌํ”ฝ์Šค๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ํ‚ค์›Œ๋“œ๊ฐ€ ์•„๋‹ˆ๋ผ ํ”„๋ฆฌํ”ฝ์Šค๋‹ค. ์†์„ฑ ๋ช… ์•ž์— #์ด ๋ถ™์œผ๋ฉด Private ํ•„๋“œ๋กœ ๋™์ž‘ํ•œ๋‹ค. - Class Field Decalarations ์ŠคํŽ™์˜ ์ผ๋ถ€๋‹ค. public๊ณผ ๋‹ค๋ฅธ ์ ์€ ํด๋ž˜์Šค์˜ ํ•„๋“œ ์„ ์–ธ์„ ํ†ตํ•ด์„œ๋งŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰ ๋™์ ์œผ๋กœ ๊ฐ์ฒด์— private ํ•„๋“œ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์—†๋‹ค.
  • ๋ฉ”์„œ๋“œ์—๋Š” ์ œํ•œ์ ์ด๋‹ค. ๋ฉ”์„œ๋“œ ์„ ์–ธ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. private ๋ฉ”์„œ๋“œ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด ํ•จ์ˆ˜ ํ‘œํ˜„์‹์œผ๋กœ ์ •์˜ํ•ด์•ผ ํ•œ๋‹ค.
  • Computed Property Name์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. #foo ์ž์ฒด๋งŒ ์‹๋ณ„์ž๋กœ ํ—ˆ์šฉ๋˜๊ณ  #[fooName] ์ด๊ฑด ๋ฌธ๋ฒ• ์˜ค๋ฅ˜๋‹ค.
  • ๋ชจ๋“  Private ํ•„๋“œ๋Š” ์†Œ์†๋œ ํด๋ž˜์Šค์— ๊ณ ์œ ํ•œ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ–๋Š”๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋…ํŠนํ•œ ํŠน์ง•์ด ์žˆ๋‹ค.

โœจ 8์›” 23์ผ (์›”)

๐Ÿ“ฐย  ๋ˆ„๊ฐ€ ์ด๋ฆ„์„ ํ•จ๋ถ€๋กœ ์ง“๋Š”๊ฐ€?

  • ํ•„์ž๊ฐ€ ๊ฒฝํ—˜ํ–ˆ๋˜ ๐Ÿคฃ ์›ƒํ”ˆ ๋ณ€์ˆ˜๋ช…๋“ค์„ ์†Œ๊ฐœํ•˜๊ณ  ์žˆ๋‹ค.
  • ๋ณ€์ˆ˜๋ช…์„ ์ •ํ•  ๋•Œ ์•„๋ฌด๋ž˜๋„ ํ‘œํ˜„ํ•ด์•ผ ๋‚จ๋“ค์ด ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ์„์ง€์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์„ ๋Š˜ ํ•˜๊ฒŒ๋˜๋Š”๊ฒƒ ๊ฐ™๋‹ค.
  • ๊ธ€์„ ์ฝ์œผ๋ฉด์„œ ๋Š๋‚€ ์ ์€ ๋ณ€์ˆ˜๋ช…์— ๋ชจ๋“ ๊ฑธ ๋‹ด๋Š” ๊ฒƒ ๋ณด๋‹ค ์ตœ๋Œ€ํ•œ ๐Ÿ“Œ ์ง๊ด€์ ์œผ๋กœ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.
  • ๋‹จ๋… ์ฃผํƒ์„ solo, ๋‹ค์„ธ๋Œ€ ์ฃผํƒ์„ aprat, villa์ •๋„๋กœ ์„ ์–ธํ•ด๋„ ๊ดœ์ฐฎ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.
  • ๋ณ€์ˆ˜ ์ด๋ฆ„ ์ง“๊ธฐ๋ฅผ ๊ฒ€์ƒ‰ํ•ด๋ณด๋‹ค๊ฐ€ ๊ดœ์ฐฎ์€ ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ์–ด์„œ ๋‚จ๊ธด๋‹ค. ๐Ÿ“Ž ๋ณ€์ˆ˜๋ช… ์ง“๊ธฐ

โœจ 8์›” 24์ผ (ํ™”)

๐Ÿ“ฐย  32๊ฐ€์ง€์˜ UI ์š”์†Œ (๋ฒˆ์—ญ)

  • ์šฐ๋ฆฌ๊ฐ€ ์ผ์ƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” UI๊ฐœ๋…๊ณผ ์ฒ˜์Œ ๋“ค์–ด๋ณด๋Š” UI๊ฐœ๋…๊นŒ์ง€ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์“ฐ์—ฌ์กŒ๋‹ค.
  • ์›น, ์–ดํ”Œ์„ ํ†ตํ•ด ๋ณ„ ์ƒ๊ฐ์—†์ด ์‚ฌ์šฉํ–ˆ๋˜ UI์˜ ์ด๋ฆ„ (์•„์ฝ”๋””์–ธ, ๋ฒคํ†  ๋ฉ”๋‰ด...)์„ ์•Œ ์ˆ˜ ์žˆ๋Š” ํฅ๋ฏธ๋กœ์šด ๊ธ€์ด๋‹ค.

โšก๏ธ ์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค์˜ ์š”์†Œ

  • Input Controls์€ ์œ ์ €๊ฐ€ ์‹œ์Šคํ…œ์— ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ํšŒ์› ๊ฐ€์ž…, ํ”„๋กœํ•„ ๊ด€๋ฆฌ ๋“ฑ์— ์‚ฌ์šฉ๋˜๋Š” UI ์š”์†Œ๋“ค์ด ์—ฌ๊ธฐ์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค.
  • Navigational Components๋Š” ์œ ์ €๊ฐ€ ์ œํ’ˆ ๋˜๋Š” ์›น์‚ฌ์ดํŠธ์—์„œ์˜ ์ด๋™์„ ์•ˆ๋‚ดํ•˜์—ฌ ๋•์Šต๋‹ˆ๋‹ค. iOS์˜ ํƒญ ๋ฐ”๋‚˜ ์•ˆ๋“œ๋กœ์ด๋“œ์˜ ํ–„๋ฒ„๊ฑฐ ๋ฉ”๋‰ด ๋“ฑ์ด ์—ฌ๊ธฐ์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค.
  • Informational Components๋Š” ์œ ์ €์—๊ฒŒ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค
  • Containers๋Š” ๊ด€๋ จ๋œ ์ปจํ…์ธ ๋“ค์„ ํ•จ๊ป˜ ๋ฌถ์–ด๋†“๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

โœจ 8์›” 25์ผ (์ˆ˜)

๐Ÿ“ฐย  ๋น„์ „๊ณต ๊ฐœ๋ฐœ์ž์˜ "์ง„์ž‘ ๊ทธ๋Ÿด๊ฑธ"

  • ํ•„์ž์˜ ๊ฒฝํ—˜์— ๋น„์ถ”์–ด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ๊ฐ–์ถ”์–ด์•ผํ•  ๋งˆ์Œ๊ฐ€์ง์— ๋Œ€ํ•ด ์„œ์ˆ ํ•˜๊ณ  ์žˆ๋‹ค.

โšก๏ธย  ์š”์•ฝ

1. ์ž์‹ ์ด ์–ผ๋งˆ๋‚˜ ๋ถ€์กฑํ•œ์ง€ ๊นจ๋‹ฌ์„ ๊ฒƒ

  • ์ž์‹ ์˜ ๋ถ€์กฑํ•จ์„ ๊นจ๋‹ฌ์•„์•ผ ๋ฒ—์–ด๋‚˜๊ณ ์ž ๋ฐœ๋ฒ„๋‘ฅ์น  ์ˆ˜ ์žˆ๋‹ค.

2. ํ˜ผ์ž ๊ณต๋ถ€ํ•˜์ง€ ๋ง ๊ฒƒ

  • ํ˜ผ์ž ์—ด์‹ฌํžˆ ํ•  ๊ฒƒ๋„ ๊ฐ™์€ ์Šค์Šค๋กœ๋ฅผ ๋ฏฟ์ง€๋งˆ๋ผ.

3. ๋„์ „ํ•˜๋ฉฐ ์™„๋ฒฝํ•ด์งˆ ๊ฒƒ

  • ๋‚˜์˜ ๋ถ€์กฑํ•จ์„ ์ธ์ง€ํ•˜๊ณ  ๊ณ„์† ๋„์ „ํ•˜๋ผ. ๋„์ „ํ•˜๋‹ค ๋ณด๋ฉด ๊ธฐํšŒ๊ฐ€ ์˜จ๋‹ค.

โœจ 8์›” 26์ผ (๋ชฉ)

๐Ÿ“ฐย  ์ข‹์€ ์ฝ”๋“œ๋ž€ ๋ฌด์—‡์ผ๊นŒ?

  • ์ข‹์ง€ ์•Š์€ ์ฝ”๋“œ๋Š” ์™œ ์“ฐ์—ฌ์ง€๋Š”๊ฐ€, ๊ทธ๋Ÿฌํ•œ ์ฝ”๋“œ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•œ ํ•„์ž์˜ ๊ณ ๋ฏผ์ด ๋‹ด๊ธด ๊ธ€์ด๋‹ค.
  • ์ข‹์€ ์ฝ”๋“œ๋ž€ ์ฝ๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ, ์ค‘๋ณต์ด ์—†๋Š” ์ฝ”๋“œ, ํ…Œ์ŠคํŠธ๊ฐ€ ์šฉ์ดํ•œ ์ฝ”๋“œ... ๊ทธ๋ ‡์ง€๋งŒ๋„ ์•Š๋‹ค.

โšก๏ธย  ์š”์•ฝ

1. ์ฝ”๋“œ ๊ฐ„์˜ ์˜์กด์„ฑ์„ ๊ณ ๋ฏผํ•˜์ž.
2. ํ•ฉ์˜๋œ ๊ทœ์น™์œผ๋กœ ์ผ๊ด€์„ฑ์žˆ๊ฒŒ ์ž‘์„ฑํ•˜์ž.
3. ์ ์ ˆํ•˜๊ฒŒ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋„๋ก ์„ค๊ณ„ํ•˜์ž.
4. ์–ด์ฉ” ์ˆ˜ ์—†๋Š” ์ฝ”๋“œ๋Š” ์ฃผ์„๊ณผ ํ•จ๊ป˜ ๊ฒฉ๋ฆฌํ•˜์ž.


โœจ 8์›” 27์ผ (๊ธˆ)

๐Ÿ“ฐย  2021 ๊ฐœ๋ฐœ์ž ํ•„๋…์„œ 55๊ถŒ

  • ๊ต๋ณด๋ฌธ๊ณ ์—์„œ IT๋ถ„์•ผ MD๋กœ ๊ทผ๋ฌดํ•˜๋Š” ํ•„์ž๊ฐ€ ์ถ”์ฒœํ•˜๋Š” ๋„์„œ ๋ชฉ๋ก์ด๋‹ค.
  • ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์ด ์ฑ…์„ ์ฝ๋Š” ๊ฒƒ๋ณด๋‹ค ๋จผ์ € ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ๊ทธ๋–„๋งˆ๋‹ค ์ธํ„ฐ๋„ท์— ๊ฒ€์ƒ‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ์‹œํ•œ๋‹ค.
  • ํ•˜์ง€๋งŒ ์ผ์ • ์ˆ˜์ค€ ์ด์ƒ์˜ ์‹ค๋ ฅ์„ ์Œ“๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ธํ„ฐ๋„ท ์ƒ์˜ ์ง€์‹๋งŒ์œผ๋กœ๋Š” ๋ถ€์กฑํ•˜๋ฉฐ ์ฑ…์„ ์ด์šฉํ•˜์—ฌ ์ง€์‹์˜ ๊ตฌ๋ฉ์„ ๋ฉ”์šฐ๋Š” ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

โœจ 8์›” 28์ผ (ํ† )

๐Ÿ“ฐย  ์งง๊ฒŒ ์จ๋ณด๋Š” ์›น ํ”„๋ก ํŠธ์—”๋“œ์˜ ์—ญ์‚ฌ

  • HTML์—์„œ Svelte๊นŒ์ง€์˜ ํ•ด๋‹น ๊ธฐ์ˆ ์ด ์ถœํ˜„ํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ์— ๋Œ€ํ•ด ๊ฐ„๋žตํ•˜๊ฒŒ ์„œ์ˆ ํ•˜๊ณ  ์žˆ๋‹ค.
  • ์•„์ง ์ด๋ฆ„๋งŒ ๋“ค์–ด๋ณธ Angular, React ,Vue ๋“ฑ์˜ ์ฐจ์ด์™€ ๊ฐ๊ฐ ์–ด๋–ค ๋ฌธ์ œ๋ฅผ ์•ˆ๊ณ  ์žˆ์—ˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

โœจ 8์›” 29์ผ (์ผ)

๐Ÿ“ฐย  ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘ ์งˆ๋ฌธ ์ •๋ฆฌ

  • ํ•„์ž๊ฐ€ ์—ฌ๋Ÿฌ ๊ธฐ์—…๋“ค์—์„œ ๋ฉด์ ‘์„ ๋ณด๊ณ  ๋ฐ›์•˜๋˜ ์งˆ๋ฌธ์— ๋Œ€ํ•ด ์„œ์ˆ ํ•˜๊ณ  ์žˆ๋‹ค.
  • HTML, CSS, JS, React, Web, Project ๊ด€๋ จ ์งˆ๋ฌธ๋“ค์ด ์ ํ˜€์žˆ๋‹ค.
  • HTML, CSS, JS์— ๋Œ€ํ•œ ์งˆ๋ฌธ ์ค‘์—๋Š” ํ˜„์žฌ์˜ ๋‚˜๋„ ๋‹ต๋ณ€ํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์˜ ๋ฌธ์ œ๋„ ์žˆ์—ˆ์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์€ ์•„์ง ๋ฐฐ์šฐ์ง€ ๋ชปํ–ˆ๊ฑฐ๋‚˜ ๋ฐฐ์šธ ์˜ˆ์ •์ธ ๋ถ€๋ถ„์˜ ์งˆ๋ฌธ๋“ค์ด ๋งŽ์•˜๋‹ค. ํ•˜์ง€๋งŒ ๊ฐœ๋…์— ๋Œ€ํ•ด ๋ฌป๋Š” ์งˆ๋ฌธ์ด๋ผ๋„ ๋‚˜์˜ ๋‹ต๋ณ€์„ ํ†ตํ•ด ๊ผฌ๋ฆฌ์— ๊ผฌ๋ฆฌ๋ฅผ ๋ฌด๋Š” ์งˆ๋ฌธ์„ ๊ณ„์†ํ•œ๋‹ค๋Š” ๋ง์„ ๋“ค์€ ๊ฒƒ ๊ฐ™๋‹ค. ํ•ด๋‹น ๊ฐœ๋…์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ „๋ฐ˜์ ์ธ ๊ณผ์ •์˜ ์ดํ•ด ์—ญ์‹œ ์•Œ์•„๋‘์–ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

โœจ 8์›” 30 (์›”)

๐Ÿ“ฐย  ์•„๋ฌด๋„ ๊ฐ€๋ฅด์ณ ์ฃผ์ง€ ์•Š๋Š” ๊ฒƒ

  • ์ œ๋ชฉ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์•„๋ฌด๋„ ๊ฐ€๋ฅด์ณ ์ฃผ์ง€ ์•Š์ง€๋งŒ ๋ฏธ๋ฆฌ ์•Œ์•„๋‘์—ˆ๋‹ค๋ฉด ํ›จ์”ฌ ํŽธํ–ˆ์„ ๊ฐœ๋…์— ๋Œ€ํ•ด ์„œ์ˆ ํ•˜๊ณ  ์žˆ๋‹ค.
  • Log : ๊ฐ„๋‹จํ•œ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค์–ด ํ…Œ์ŠคํŠธ๋ฅผ ํ•ด๋ณด๋”๋ผ๋„ loggingํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. log๋Š” ๋‚˜์ค‘์— ์‹ค์ œ ์„œ๋น„์Šค๋ฅผ ์‹œ์ž‘ ํ–ˆ์„ ๋•Œ ๋‚ด ํ”„๋กœ๊ทธ๋žจ์„ ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ์‚ฌ๋žŒ์ด ์ด์šฉํ•˜๋Š”์ง€ ๋ถ„์„ํ•˜๋Š”๋ฐ ํฐ ๋„์›€์ด ๋œ๋‹ค.
  • ENV : OS ํ™˜๊ฒฝ๋ณ€์ˆ˜ ์„ค์ •์œผ๋กœ development ํ™˜๊ฒฝ์ด๋ƒ, production ํ™˜๊ฒฝ์„ ๊ตฌ๋ถ„ํ•ด์„œ logging์„ ํ•˜๋„๋ก ํ•˜๋ฉด print๋กœ ์ฝ”๋“œ๊ฐ€ ์ง€์ €๋ถ„ ํ•ด์ง€๋Š” ๊ฒƒ์„ ์ž˜ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค.
  • config : config์˜ ๊ด€๋ฆฌ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค. ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ ํ–ˆ์„ ๋•Œ ์ด๊ฒƒ์ด ๋‚ด local์—์„œ ์‹คํ–‰ ๋  ๊ฒƒ์ธ์ง€ ์•„๋‹ˆ๋ฉด dev์šฉ ์„œ๋ฒ„์— ๋ฐฐํฌ๋˜์–ด ํ…Œ์ŠคํŠธ ํ•  ๊ฑด์ง€ ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด ์‹คํ–‰ ํ•  ๋•Œ ๋งˆ๋‹ค ์ฝ”๋“œ๋ฅผ ๊ณ ์น  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  • Test : ์ตœ์†Œํ•œ์˜ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ผ๋„ ์ž‘์„ฑ ํ•ด ๋‘๋ฉด git push๋ฅผ ํ•  ๋•Œ, deploy๋ฅผ ํ•  ๋•Œ ๋ง์„ค์ž„์ด ์—†๊ฒŒ ๋œ๋‹ค. ํ•„์š”ํ•œ ์ฝ”๋“œ๋ฅผ ์“ธ ๋•Œ๋„ ๋ถ€๋‹ด์ด ๋œ ํ•˜๋‹ค. ๋งŒ์•ฝ ๋‚ด๊ฐ€ ๋ญ”๊ฐ€ ์ž˜๋ชป ํ–ˆ๋‹ค๋ฉด ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๊ฐ€ ๊ฒ€์ฆ์„ ํ•ด ๋‚ผ ํ…Œ๋‹ˆ๊นŒ.
  • git : ์ ์–ด๋„ ์ด๋Ÿฐ ๊ฒƒ์ด ์žˆ๋‹ค๋Š” ์ ์„ ์•Œ๊ณ ๋งŒ ์žˆ์–ด๋„ ํšŒ์‚ฌ ๊ฐ”์„ ๋•Œ ๋‘๋ ค์›€์— ์™€๋“ค์™€๋“ค ๋– ๋Š” ์ผ์€ ์—†๋‹ค. ๋งˆ์น˜ ๊ต๊ณผ์„œ ์ฒ˜๋Ÿผ git์„ ๊ณต๋ถ€ํ•˜์ง€ ๋ง๊ณ  ์ž์‹ ์˜ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์— ์ง์ ‘ ์ ์šฉ ํ•ด ๋ณด๋ฉด์„œ ๋Š์ž„ ์—†์ด ์ต์ˆ™ ํ•ด ์ ธ ๊ฐ€๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ๋” ํฐ ๊ณต๋ถ€๊ฐ€ ๋œ๋‹ค.
  • CI/CD : git commit๊ณผ git push ํ•œ ๋ฒˆ์œผ๋กœ ์œ„์—์„œ ๋ง ํ•œ ํ…Œ์ŠคํŠธ์™€ ๋ฐฐํฌ๋ฅผ ์ž๋™์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • AMP/Analytics : ๋‚ด ์•ฑ์„ ์–ด๋–ค ์‚ฌ๋žŒ๋“ค์ด ๊ทธ๋ฆฌ๊ณ  ์–ด๋–ค ๋””๋ฐ”์ด์Šค๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ์ถ•์  ํ•ด ๋‘”๋‹ค๋ฉด โ€˜์ธ์‚ฌ์ดํŠธโ€™๋ฅผ ๊ธฐ๋ฅด๋Š”๋ฐ ๋งŽ์€ ๋„์›€์ด ๋œ๋‹ค.
  • Debugging / Profiling : ๊ตฌ๊ธ€๋ง๊ณผ ๊ธฐํƒ€ ๋ธ”๋กœ๊ทธ์— ๋„๋ฆฌ ํผ์ ธ ์žˆ๋Š” ์ฝ”๋“œ๋“ค์„ ๊ทธ๋Œ€๋กœ ๋”ฐ๋ผ์„œ ์“ฐ๊ธฐ ์ „์— ํ”„๋กœํŒŒ์ผ๋Ÿฌ๋กœ ๊ฒ€์ฆ์„ ํ•ด ๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. ์•„๋ฌด๋ฆฌ ์œ ๋ช…ํ•˜๊ณ  ๊ฐ„๋‹จํ•˜๊ณ  ํ™•์‹คํ•ด ๋ณด์ด๋Š” ์ฝ”๋“œ๋ผ๋„ ๋ญ”๊ฐ€ ์ด์ƒํ•œ ์ ์ด ๋‹ค ํ•˜๋‚˜์”ฉ ์žˆ๋‹ค.

โœจ 8์›” 31 (ํ™”)

๐Ÿ“ฐย  ์–ด์ค‘๊ฐ„ํžˆ ์•Œ๋ฉด ์•ˆ๋˜๋Š” JS ๊ฐœ๋… #this

  • this์— ๋Œ€ํ•ด ๋ฏธ๋ฆฌ ํ•™์Šตํ•ด ๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค.
  • ์‹คํ–‰ ์ปจํ…์ŠคํŠธ : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ณ  ์—ฐ์‚ฐ๋˜๋Š” ๋ฒ”์œ„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์œผ๋กœ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋œ๋‹ค๋ฉด ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๋‚ด๋ถ€์—์„œ ์ž‘๋™ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.
  • this์˜ ๊ฐ’์ด ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ : ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ, ์ƒ์„ฑ์ž๋ฅผ ํ†ตํ•ด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒฝ์šฐ...
  • this๋Š” apply, call, bind๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•œ ๋ฐœํŒ์ด๋‹ค.
profile
TIL => https://velog.io/@quato-til

0๊ฐœ์˜ ๋Œ“๊ธ€