๐Ÿ’ป ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘ ์งˆ๋ฌธ - JS #4

Chris Yangยท2019๋…„ 5์›” 8์ผ
21
post-thumbnail

์ด ๊ธ€์€ ํ”„๋ก ํŠธ์—”๋“œ ์ง๋ฌด ๋ฉด์ ‘ ์งˆ๋ฌธ๊ณผ ๊ด€๋ จ๋œ Github ์ €์žฅ์†Œ front-end-interview-handbook ๋ฒˆ์—ญ๋ณธ์œผ๋กœ, ์ €์žฅ์†Œ์— Translations ํด๋”์˜ ๋‚ด์šฉ๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.


JS ์งˆ๋ฌธ #4

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘ ์งˆ๋ฌธ - JS ์งˆ๋ฌธ์— ๋Œ€ํ•œ ํ•ด์„ค์ž…๋‹ˆ๋‹ค.
Pull Request๋ฅผ ํ†ตํ•œ ์ œ์•ˆ, ์ˆ˜์ • ์š”์ฒญ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

๋™๊ธฐ, ๋น„๋™๊ธฐ ํ•จ์ˆ˜์˜ ์ฐจ์ด์ ์„ ์„ค๋ช…ํ•˜์„ธ์š”.

๋™๊ธฐ ํ•จ์ˆ˜๋Š” ๋ธ”๋กœํ‚น์ธ ๋ฐ˜๋ฉด, ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋™๊ธฐ ํ•จ์ˆ˜์—์„œ๋Š” ๋‹ค์Œ ๋ช…๋ น๋ฌธ์ด ์‹คํ–‰๋˜๊ธฐ ์ „์— ์•ž ๋ช…๋ น๋ฌธ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ, ํ”„๋กœ๊ทธ๋žจ์€ ๋ช…๋ น๋ฌธ์˜ ์ˆœ์„œ๋Œ€๋กœ ์ •ํ™•ํ•˜๊ฒŒ ํ‰๊ฐ€๋˜๊ณ  ๋ช…๋ น๋ฌธ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋งค์šฐ ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋ฉด ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰์ด ์ผ์‹œ์ค‘์ง€๋ฉ๋‹ˆ๋‹ค.

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

[โ†‘] Back to top

์ด๋ฒคํŠธ ๋ฃจํ”„๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”? ์ฝœ ์Šคํƒ๊ณผ ํƒœ์Šคํฌ ํ์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” ์ฝœ ์Šคํƒ์„ ๋ชจ๋‹ˆํ„ฐํ•˜๊ณ  ํƒœ์Šคํฌ ํ์—์„œ ์ˆ˜ํ–‰ํ•  ์ž‘์—…์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๋‹จ์ผ ์Šค๋ ˆ๋“œ ๋ฃจํ”„์ž…๋‹ˆ๋‹ค. ์ฝœ ์Šคํƒ์ด ๋น„์–ด ์žˆ๊ณ  ํƒœ์Šคํฌ ํ์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ, ํ•จ์ˆ˜๋Š” ํ์—์„œ ์ œ๊ฑฐ๋˜๊ณ  ์‹คํ–‰๋  ์ฝœ ์Šคํƒ์œผ๋กœ ํ‘ธ์‹œ๋ฉ๋‹ˆ๋‹ค.

Philip Robert์˜ talk on the Event Loop๋ฅผ ์•„์ง ํ™•์ธํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. JavaScript ๋ถ„์•ผ์—์„œ ๊ฐ€์žฅ ๋งŽ์€ ์กฐํšŒ์ˆ˜๋ฅผ ๊ธฐ๋กํ•œ ๋™์˜์ƒ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

function foo() {}์™€ var foo = function() {} ์‚ฌ์ด์—์„œ foo ์‚ฌ์šฉ์˜ ์ฐจ์ด์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜์„ธ์š”.

์ „์ž๋Š” ํ•จ์ˆ˜ ์„ ์–ธ์ธ ๋ฐ˜๋ฉด, ํ›„์ž๋Š” ํ•จ์ˆ˜ ํ‘œํ˜„์‹์ž…๋‹ˆ๋‹ค. ์ฃผ์š”ํ•œ ์ฐจ์ด์ ์€ ํ•จ์ˆ˜ ์„ ์–ธ์€ ํ•จ์ˆ˜๋ฐ”๋””๊ฐ€ ํ˜ธ์ด์ŠคํŠธ๋˜์ง€๋งŒ, ํ•จ์ˆ˜ ํ‘œํ˜„์‹์˜ ๋ฐ”๋””๋Š” ํ˜ธ์ด์ŠคํŠธ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค(๋ณ€์ˆ˜์™€ ๋™์ผํ•œ ํ˜ธ์ด์ŠคํŒ… ๋™์ž‘์„ ๊ฐ€์ง). ํ˜ธ์ด์ŠคํŒ…์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ ์งˆ๋ฌธ ์œ„์˜ ํ˜ธ์ด์ŠคํŒ…์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค. ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ์ •์˜ํ•˜๊ธฐ ์ „์— ํ˜ธ์ถœํ•˜๋ ค๊ณ  ํ•˜๋ฉด Uncaught TypeError : XXX is not function ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ์„ ์–ธ

foo() // 'FOOOOO'
function foo() {
  console.log('FOOOOO')
}

ํ•จ์ˆ˜ ํ‘œํ˜„์‹

foo() // Uncaught TypeError: foo๋Š” ํ•จ์ˆ˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค
var foo = function() {
  console.log('FOOOOO')
}
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

let, var, const๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋œ ๋ณ€์ˆ˜๋“ค์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

var ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑ๋œ ํ•จ์ˆ˜๋‚˜ ํ•จ์ˆ˜ ๋ฐ–์—์„œ ์ƒ์„ฑ๋œ ํ•จ์ˆ˜์— ์ „์—ญ ์˜ค๋ธŒ์ ํŠธ๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. let๊ณผ const๋Š” ๋ธ”๋ก ์Šค์ฝ”ํ”„์ž…๋‹ˆ๋‹ค. ์ฆ‰, ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์ค‘๊ด„ํ˜ธ(function, if-else ๋ธ”๋ก, for-loop) ๋‚ด์—์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function foo() {
  // ํ•จ์ˆ˜ ๋‚ด์—์„œ ๋ชจ๋“  ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  var bar = 'bar'
  let baz = 'baz'
  const qux = 'qux'

  console.log(bar) // "bar"
  console.log(baz) // "baz"
  console.log(qux) // "qux"
}

console.log(bar) // ReferenceError: bar is not defined
console.log(baz) // ReferenceError: baz is not defined
console.log(qux) // ReferenceError: qux is not defined
if (true) {
  var bar = 'bar'
  let baz = 'baz'
  const qux = 'qux'
}

// var๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„์˜ ์–ด๋””์—์„œ๋‚˜ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
console.log(bar) // "bar"
// let๊ณผ const๋กœ ์ •์˜๋œ ๋ณ€์ˆ˜๋Š” ์ •์˜๋œ ๋ธ”๋ก ์™ธ๋ถ€์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

var๋Š” ๋ณ€์ˆ˜๊ฐ€ ํ˜ธ์ด์ŠคํŠธ๋˜๋„๋ก ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜๊ธฐ ์ „์— ์ฝ”๋“œ์—์„œ ์ฐธ์กฐ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. let๊ณผ const๋Š” ์ด๋ฅผ ํ—ˆ์šฉํ•˜์ง€ ์•Š๊ณ  ๋Œ€์‹  ์—๋Ÿฌ๋ฅผ ๋˜์ง‘๋‹ˆ๋‹ค.

console.log(foo) // undefined

var foo = 'foo'

console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization

let baz = 'baz';

console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization

const bar = 'bar'

var์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ๋‹ค์‹œ ์„ ์–ธํ•ด๋„ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์ง€๋งŒ, let๊ณผ const๋Š” ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

var foo = 'foo'
var foo = 'bar'
console.log(foo) // "bar"

let baz = 'baz'
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared

let์€ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์žฌํ• ๋‹นํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, const๋Š” ์žฌํ• ๋‹นํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์ ์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

// ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค
let foo = 'foo'
foo = 'bar'

// ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค
const baz = 'baz'
baz = 'qux'
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

ES6 ํด๋ž˜์Šค์™€ ES5 ํ•จ์ˆ˜ ์ƒ์„ฑ์ž์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

๋จผ์ € ๊ฐ๊ฐ์˜ ์˜ˆ๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

// ES5 ํ•จ์ˆ˜ ์ƒ์„ฑ์ž
function Person(name) {
  this.name = name
}

// ES6 ํด๋ž˜์Šค
class Person {
  constructor(name) {
    this.name = name
  }
}

๊ฐ„๋‹จํ•œ ์ƒ์„ฑ์ž์˜ ๊ฒฝ์šฐ์—๋Š” ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ƒ์„ฑ์ž์˜ ์ฃผ์š” ์ฐจ์ด์ ์€ ์ƒ์†์„ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. Person์˜ ํ•˜์œ„ ํด๋ž˜์Šค์ด๋ฉด์„œ studentId ํ•„๋“œ๋ฅผ ์ถ”๊ฐ€๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” Student ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ ์ž ํ•œ๋‹ค๋ฉด, ์ด๊ฒƒ์ด ์šฐ๋ฆฌ๊ฐ€ ์ถ”๊ฐ€๋กœ ํ•ด์•ผํ•  ์ผ์ž…๋‹ˆ๋‹ค.

// ES5 ํ•จ์ˆ˜ ์ƒ์„ฑ์ž
function Student(name, studentId) {
  // ์ˆ˜ํผ ํด๋ž˜์Šค์˜ ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ˆ˜ํผ ํด๋ž˜์Šค์—์„œ ์ƒ์†๋œ ๋ฉค๋ฒ„๋ฅผ ์ดˆ๊ธฐํ™”ํ•ฉ๋‹ˆ๋‹ค.
  Person.call(this, name)

  // ์„œ๋ธŒ ํด๋ž˜์Šค์˜ ๋ฉค๋ฒ„๋ฅผ ์ดˆ๊ธฐํ™”ํ•ฉ๋‹ˆ๋‹ค.
  this.studentId = studentId
}

Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student

// ES6 ํด๋ž˜์Šค
class Student extends Person {
  constructor(name, studentId) {
    super(name)
    this.studentId = studentId
  }
}

ES5์—์„œ ์ƒ์†์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ๋” ๋ถˆํŽธํ•˜๋ฉฐ, ES6 ๋ฒ„์ „์ด ์ดํ•ดํ•˜๊ณ  ๊ธฐ์–ตํ•˜๊ธฐ๊ฐ€ ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

์ƒˆ ํ™”์‚ดํ‘œ => ํ•จ์ˆ˜ ๋ฌธ๋ฒ•์— ๋Œ€ํ•œ ์‚ฌ์šฉ ์˜ˆ์‹œ๋ฅผ ๋“ค ์ˆ˜ ์žˆ๋‚˜์š”? ์ด ์ƒˆ๋กœ์šด ๋ฌธ๋ฒ•์€ ๋‹ค๋ฅธ ํ•จ์ˆ˜์™€ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฅธ๊ฐ€์š”?

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ ํ•œ ๊ฐ€์ง€ ๋ถ„๋ช…ํ•œ ์ด์ ์€ function ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๋ฌธ๋ฒ•์„ ๋‹จ์ˆœํ™”ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋˜ํ•œ, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋‚ด์˜ this๋Š”, this๊ฐ€ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฐ์ฒด์— ์˜ํ•ด ๊ฒฐ์ •๋˜๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ๋‹ค๋ฅด๊ฒŒ, ์ฃผ๋ณ€ ์Šค์ฝ”ํ”„์—์— ๋ฌถ์ž…๋‹ˆ๋‹ค.

๋ ‰์‹œ์ปฌ์Šค์ฝ”ํ”„ this๋Š” ํŠนํžˆ React ์ปดํฌ๋„ŒํŠธ์—์„œ ์ฝœ๋ฐฑ์„ ํ˜ธ์ถœํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

[โ†‘] Back to top

์ƒ์„ฑ์ž์˜ ๋ฉ”์„œ๋“œ์— ํ™”์‚ดํ‘œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–ค ์ด์ ์ด ์žˆ๋‚˜์š”?

์ƒ์„ฑ์ž ๋‚ด๋ถ€์—์„œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ๋ฉ”์†Œ๋“œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์ฃผ๋œ ์žฅ์ ์€, ํ•จ์ˆ˜ ์ƒ์„ฑ์‹œ this์˜ ๊ฐ’์ด ์„ค์ •๋˜๊ณ  ๊ทธ ์ดํ›„์—๋Š” ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ, ์ƒ์„ฑ์ž๊ฐ€ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋  ๋•Œ, this๋Š” ํ•ญ์ƒ ๊ทธ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์šฐ๋ฆฌ๊ฐ€ ์ธ์ˆ˜๋กœ first name์„ ๋ฐ›๊ณ , ๊ทธ ์ด๋ฆ„์„ console.log๋กœ ์ถœ๋ ฅํ•˜๋Š” Person ์ƒ์„ฑ์ž๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•ด๋ด…์‹œ๋‹ค. ํ•˜๋‚˜๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์ด๊ณ , ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์ผ ๋•Œ,

const Person = function(firstName) {
  this.firstName = firstName;
  this.sayName1 = function() { console.log(this.firstName); };
  this.sayName2 = () => { console.log(this.firstName); };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// ์ผ๋ฐ˜ ํ•จ์ˆ˜์˜ 'this'๊ฐ’์€ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
john.sayName2.bind(dave)(); // John

var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (because 'this' is now the window object)

var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

์—ฌ๊ธฐ์—์„œ ์ฃผ์š” ์žฅ์ ์€ this๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์— ๋Œ€ํ•ด ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ปจํ…์ŠคํŠธ๋Š” ํ•ญ์ƒ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์— ๋Œ€ํ•ด ๋™์ผํ•˜๊ฒŒ ์œ ์ง€๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์•ฑ์˜ ๋‹ค๋ฅธ ๋ถ€๋ถ„์œผ๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ ์ปจํ…์ŠคํŠธ ๋ณ€๊ฒฝ์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด๋Š” ํŠนํžˆ React ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์—์„œ ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํด๋ฆญ ํ•ธ๋“ค๋Ÿฌ์™€ ๊ฐ™์€ ํด๋ž˜์Šค ๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•œ ๋‹ค์Œ, ํ•ด๋‹น ํด๋ฆญ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ prop์œผ๋กœ ์ „๋‹ฌํ•˜๋ฉด ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ์ž์—์„œ this๋„ ๋ฐ”์ธ๋“œํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋Œ€์‹  ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ๋ฉ”์†Œ๋“œ๊ฐ€ this๊ฐ’์„ ์ฃผ์œ„ ๋ ‰์‹œ์ปฌ ์ปจํ…์ŠคํŠธ์—์„œ ์ž๋™์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ ๋•Œ๋ฌธ์— this๋ฅผ ๋ฐ”์ธ๋”ฉํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

(์ข‹์€ ๋ฐ๋ชจ, ์ƒ˜ํ”Œ ์ฝ”๋“œ๋Š” ์ด ๊ธฐ์‚ฌ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.)

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

๊ณ ์ฐจ ํ•จ์ˆ˜(higher-order function)์˜ ์ •์˜๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ์‚ฌ์šฉํ•˜์—ฌ ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ฑฐ๋‚˜, ๊ฒฐ๊ณผ๋กœ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” ๋ฐ˜๋ณต์ ์œผ๋กœ ์ˆ˜ํ–‰๋˜๋Š” ์–ด๋–ค ์—ฐ์‚ฐ์„ ์ถ”์ƒํ™”ํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ „ํ˜•์ ์ธ ์˜ˆ์‹œ๋Š” ๋ฐฐ์—ด๊ณผ ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ทจํ•˜๋Š” map์ž…๋‹ˆ๋‹ค. map์€ ๊ณ ์ฐจ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐ์—ด์˜ ๊ฐ ํ•ญ๋ชฉ์„ ๋ณ€ํ™˜ํ•˜๊ณ , ๋ณ€ํ™˜๋œ ๋ฐ์ดํ„ฐ๋กœ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. JavaScript์—์„œ ํ”ํžˆ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ์˜ˆ๋กœ forEach, filter, reduce๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ํ•จ์ˆ˜์—์„œ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋งŽ์€ ์‚ฌ์šฉ์‚ฌ๋ก€๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” ๋ฐฐ์—ด์„ ์กฐ์ž‘ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. Array.prototype.bind๋Š” JavaScript์—์„œ ๊ทธ๋Ÿฌํ•œ ์˜ˆ์‹œ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

Map

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

const names = ['irish', 'daisy', 'anna']

์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

const transformNamesToUppercase = function(names) {
  const results = [];
  for (let i = 0; i < names.length; i++) {
    results.push(names[i].toUpperCase());
  }
  return results;
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']

.map(transformerFn)์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ ๋” ์งง์•„์ง€๊ณ  ์„ ์–ธ์ ์ด์–ด์ง‘๋‹ˆ๋‹ค.

const transformNamesToUppercase = function(names) {
  return names.map(name => name.toUpperCase());
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์— ๋Œ€ํ•œ ๋””์ŠคํŠธ๋Ÿญ์ณ๋ง ์˜ˆ์‹œ๋ฅผ ๋“ค ์ˆ˜ ์žˆ๋‚˜์š”?

๋””์ŠคํŠธ๋Ÿญ์ณ๋ง์€ ES6์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ‘œํ˜„์‹์œผ๋กœ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์˜ ๊ฐ’์„ ์ถ”์ถœํ•˜์—ฌ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฐ„๊ฒฐํ•˜๊ณ  ํŽธ๋ฆฌํ•œ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๋ฐฐ์—ด ๋””์ŠคํŠธ๋Ÿญ์ณ๋ง

// ๋ณ€์ˆ˜ ํ• ๋‹น.
const foo = ['one', 'two', 'three']

const [one, two, three] = foo
console.log(one) // "one"
console.log(two) // "two"
console.log(three) // "three"
// ๋ณ€์ˆ˜ ๊ตํ™˜
let a = 1
let b = 3

;[a, b] = [b, a]
console.log(a) // 3
console.log(b) // 1

๊ฐ์ฒด ๋””์ŠคํŠธ๋Ÿญ์ณ๋ง

// ๋ณ€์ˆ˜ ํ• ๋‹น.
const o = { p: 42, q: true }
const { p, q } = o

console.log(p) // 42
console.log(q) // true
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

ES6 ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์€ ๋ฌธ์ž์—ด์„ ์ƒ์„ฑํ•˜๋Š”๋ฐ ๋งŽ์€ ์œ ์—ฐ์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด์— ๋Œ€ํ•œ ์˜ˆ๋ฅผ ๋“ค ์ˆ˜ ์žˆ๋‚˜์š”?

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌธ์ž์—ด ๋ณด๊ฐ„์„ ํ•˜๊ฑฐ๋‚˜ ๋ฌธ์ž์—ด์— ๋ณ€์ˆ˜๋ฅผ ํฌํ•จํ•˜๋Š” ์ž‘์—…์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ES2015 ์ด์ „์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ดํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

var person = { name: 'Tyler', age: 28 };
console.log('Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!');
// 'Hi, my name is Tyler and I am 28 years old!'

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜๋ฉด, ๋Œ€์‹  ์ด๋ ‡๊ฒŒํ•ด๋„ ๊ฐ™์€ ์ถœ๋ ฅ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const person = { name: 'Tyler', age: 28 };
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
// 'Hi, my name is Tyler and I am 28 years old!'

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ${} ํ”Œ๋ ˆ์ด์Šคํ™€๋” ์•ˆ์— ํ‘œํ˜„์‹์„ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด ๋”ฐ์˜ดํ‘œ(')๊ฐ€ ์•„๋‹Œ ๋ฐฑํ‹ฑ(`)์„ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์— ์œ ์˜ํ•˜์„ธ์š”.

๋‘๋ฒˆ์งธ ์œ ์šฉํ•œ ์‚ฌ์šฉ์‚ฌ๋ก€๋Š” ๋‹ค์ค‘ํ–‰ ๋ฌธ์ž์—ด์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ES2015 ์ด์ „์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‹คํ–‰์˜ ๋ฌธ์ž์—ด์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

console.log('This is line one.\nThis is line two.');
// This is line one.
// This is line two.

๋˜๋Š” ์ฝ”๋“œ์—์„œ ์—ฌ๋Ÿฌ ์ค„๋กœ ๋‚˜๋ˆ ์ง„ ๊ธด ๋ฌธ์ž์—ด์„ ์ฝ๊ธฐ ์œ„ํ•ด ํ…์ŠคํŠธ ํŽธ์ง‘๊ธฐ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์Šคํฌ๋กค ํ•  ํ•„์š”๊ฐ€ ์—†๋„๋กํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

console.log('This is line one.\n' +
	'This is line two.');
// This is line one.
// This is line two.

๊ทธ๋Ÿฌ๋‚˜ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์€ ๋‹น์‹ ์ด ์ถ”๊ฐ€ํ•œ ๊ฐ„๊ฒฉ ๊ทธ๋Œ€๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์œ„์— ์ž‘์„ฑํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•œ ๋‹ค์ค‘ํ–‰ ์ถœ๋ ฅ์„ ์ž‘์„ฑํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ดํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

console.log(`This is line one.
This is line two.`);
// This is line one.
// This is line two.

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์˜ ๋˜ ๋‹ค๋ฅธ ์‚ฌ์šฉ์‚ฌ๋ก€๋Š” ๊ฐ„๋‹จํ•œ ๋ณ€์ˆ˜ ๋ณด๊ฐ„์„ ์œ„ํ•œ ํ…œํ”Œ๋ฆฟ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋Œ€์ฒดํ’ˆ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

const person = { name: 'Tyler', age: 28 };
document.body.innerHTML = `
  <div>
    <p>Name: ${person.name}</p>
    <p>Name: ${person.age}</p>
  </div>
`

.innerHTML์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ XSS์˜ ์˜ํ–ฅ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ž…๋ ฅ๋ฐ›์€ ๋ฐ์ดํ„ฐ์ธ ๊ฒฝ์šฐ ํ‘œ์‹œํ•˜๊ธฐ ์ „์— ๋ฐ์ดํ„ฐ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋งŒ๋“œ์„ธ์š”!

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

curry ํ•จ์ˆ˜์˜ ์˜ˆ๋ฅผ ๋“ค์–ด ์ค„ ์ˆ˜ ์žˆ๋‚˜์š”? ๊ทธ๋ฆฌ๊ณ  ์ด ๋ฌธ๋ฒ•์€ ์–ด๋–ค ์ด์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‚˜์š”?

currying์€ ๋‘˜ ์ด์ƒ์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜๊ฐ€ ์žˆ๋Š” ํ•จ์ˆ˜๊ฐ€ ์—ฌ๋Ÿฌ ํ•จ์ˆ˜๋กœ ๋ถ„๋ฆฌ๋œ ํŒจํ„ด์œผ๋กœ, ์ง๋ ฌ๋กœ ํ˜ธ์ถœํ•˜๋ฉด, ํ•„์š”ํ•œ ๋ชจ๋“  ๋งค๊ฐœ ๋ณ€์ˆ˜๊ฐ€ ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์”ฉ ๋ˆ„์ ๋ฉ๋‹ˆ๋‹ค. ์ด ๊ธฐ๋ฒ•์€ ํ•จ์ˆ˜ํ˜• ์Šคํƒ€์ผ๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ , ํ•ฉ์„ฑํ•˜๊ธฐ ๋” ์‰ฌ์›Œ์ง„ ๊ฒฝ์šฐ ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜๋ฅผ curryingํ•˜๋ ค๋ฉด, ํ•˜๋‚˜์˜ ํ•จ์ˆ˜๋กœ ์‹œ์ž‘ํ•˜์—ฌ, ํ•˜๋‚˜์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์ทจํ•˜๋Š” ์ผ๋ จ์˜ ํ•จ์ˆ˜๋กœ ๋ถ„๋ฆฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

function curry(fn) {
  if (fn.length === 0) {
    return fn
  }

  function _curried(depth, args) {
    return function(newArgument) {
      if (depth - 1 === 0) {
        return fn(...args, newArgument)
      }
      return _curried(depth - 1, [...args, newArgument])
    }
  }

  return _curried(fn.length, [])
}

function add(a, b) {
  return a + b
}

var curriedAdd = curry(add)
var addFive = curriedAdd(5)

var result = [0, 1, 2, 3, 4, 5].map(addFive) // [5, 6, 7, 8, 9, 10]
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

spread ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ๋•Œ์˜ ์ด์ ์€ ๋ฌด์—‡์ด๋ฉฐ rest ๋ฌธ๋ฒ•๊ณผ ๋‹ค๋ฅธ ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

ES6์˜ spread ๋ฌธ๋ฒ•์€ ํ•จ์ˆ˜ํ˜• ํŒจ๋Ÿฌ๋‹ค์ž„์—์„œ ์ฝ”๋”ฉํ•  ๋•Œ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด Object.create, slice๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ๋ณต์‚ฌ๋ณธ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด ์–ธ์–ด ๊ธฐ๋Šฅ์€ Redux๋‚˜ Rx.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

function putDookieInAnyArray(arr) {
  return [...arr, 'dookie']
}

var result = putDookieInAnyArray(['I', 'really', "don't", 'like']) // ["I", "really", "don't", "like", "dookie"]

var person = {
  name: 'Todd',
  age: 29
}

var copyOfTodd = { ...person }

ES6์˜ rest ๊ตฌ๋ฌธ์€ ํ•จ์ˆ˜์— ์ „๋‹ฌํ•  ์ž„์˜์˜ ์ˆ˜์˜ ์ธ์ˆ˜๋ฅผ ํฌํ•จํ•˜๋Š” ์•ฝ์‹์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋ฐ์ดํ„ฐ์˜ ๋ฐฐ์—ด์„ ์ฑ„์šฐ๊ธฐ๋ณด๋‹ค๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๋ฐฐ์—ด๋กœ ์ฑ„์šฐ๋Š” spread ๊ตฌ๋ฌธ์˜ ๋ฐ˜๋Œ€์™€ ๋น„์Šทํ•˜๋ฉฐ, ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด ๋””์ŠคํŠธ๋Ÿญ์ณ๋ง ํ• ๋‹น๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜ ์ธ์ˆ˜์—์„œ๋„ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

function addFiveToABunchOfNumbers(...numbers) {
  return numbers.map(x => x + 5);
}

const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]

const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]

const { e, f, ...others } = {
  e: 1,
  f: 2,
  g: 3,
  h: 4,
}; // e: 1, f: 2, others: { g: 3, h: 4 }
์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

ํŒŒ์ผ ๊ฐ„์— ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•˜๋‚˜์š”?

์ด๊ฒƒ์€ Javascript ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ)์—์„œ๋Š”, ๋ณ€์ˆ˜/ํ•จ์ˆ˜๊ฐ€ ์ „์—ญ ์Šค์ฝ”ํ”„(window)์— ์„ ์–ธ๋˜์–ด์žˆ๋Š” ํ•œ ๋ชจ๋“  ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ด๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜๋Š”, ๋ณด๋‹ค ๋ชจ๋“ˆํ˜• ์ ‘๊ทผ ๋ฐฉ์‹์„ ์œ„ํ•ด RequireJS๋ฅผ ํ†ตํ•ด ๋น„๋™๊ธฐ ๋ชจ๋“ˆ ์ •์˜(AMD)๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.

์„œ๋ฒ„(Node.js)์—์„œ ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์€ CommanJS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฐ ํŒŒ์ผ์€ ๋ชจ๋“ˆ๋กœ ์ทจ๊ธ‰๋˜๋ฉฐ, ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋ฅผ module.exports ๊ฐ์ฒด์— ๋ถ™์—ฌ์„œ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ES2015์—์„œ๋Š” AMD ๋ฐ commonJS๋ฅผ ๋ชจ๋‘ ๋Œ€์ฒดํ•˜๊ธฐ ์œ„ํ•œ ๋ชจ๋“ˆ ๋ฌธ๋ฒ•์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์€ ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋…ธ๋“œ ํ™˜๊ฒฝ ๋ชจ๋‘์—์„œ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

์ •์  ํด๋ž˜์Šค ๋ฉค๋ฒ„๋ฅผ ๋งŒ๋“œ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

์ •์  ํด๋ž˜์Šค ๋ฉค๋ฒ„(์†์„ฑ/๋ฉ”์„œ๋“œ)๋Š” ํด๋ž˜์Šค์˜ ํŠน์ • ์ธ์Šคํ„ด์Šค์™€ ๋ฌถ์ด์ง€ ์•Š์œผ๋ฉฐ, ์–ด๋–ค ์ธ์Šคํ„ด์Šค๊ฐ€ ์ด๋ฅผ ์ฐธ์กฐํ•˜๋Š”์ง€์— ๊ด€๊ณ„์—†์ด ๋™์ผํ•œ ๊ฐ’์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์ •์  ์†์„ฑ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ์„ค์ •(configuration) ๋ณ€์ˆ˜์ด๋ฉฐ ์ •์  ๋ฉ”์„œ๋“œ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ธ์Šคํ„ด์Šค์˜ ์ƒํƒœ์— ์˜์กดํ•˜์ง€ ์•Š๋Š” ์ˆœ์ˆ˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

[โ†‘] Back to top

๋‹ค๋ฅธ ๋‹ต๋ณ€๋“ค


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

comment-user-thumbnail
2019๋…„ 5์›” 8์ผ

์ข‹์€ ๊ธ€ ๋ฒˆ์—ญ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ