{"id":434,"date":"2026-06-26T13:35:32","date_gmt":"2026-06-26T13:35:32","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=434"},"modified":"2026-06-26T13:35:32","modified_gmt":"2026-06-26T13:35:32","slug":"start-2","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/start-2\/","title":{"rendered":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uae30\ucd08"},"content":{"rendered":"

1. \ubcc0\uc218 \uc120\uc5b8: let, const<\/h2>\n

var \ub300\uc2e0 let\uacfc const\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. React\uc5d0\uc11c\ub294 \uc8fc\ub85c const\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

\uc608\uc81c 1: let\uacfc const\uc758 \ucc28\uc774<\/h3>\n
  let age = 20;                   \/\/ let: \uc7ac\ud560\ub2f9 \uac00\ub2a5\ud55c \ubcc0\uc218\n  age = 21;                       \/\/ \uac12 \ubcc0\uacbd \uac00\ub2a5\n  console.log(age);               \/\/ 21 \ucd9c\ub825\n\n  const name = '\ucca0\uc218';            \/\/ const: \uc7ac\ud560\ub2f9 \ubd88\uac00\ub2a5\ud55c \uc0c1\uc218\n  \/\/ name = '\uc601\ud76c';               \/\/ \uc624\ub958 \ubc1c\uc0dd! const\ub294 \uc7ac\ud560\ub2f9 \ubd88\uac00\n\n  const arr = [1, 2, 3];          \/\/ const \ubc30\uc5f4\n  arr.push(4);                    \/\/ \ubc30\uc5f4 \ub0b4\uc6a9 \ubcc0\uacbd\uc740 \uac00\ub2a5\n   console.log(arr);              \/\/ [1, 2, 3, 4]\n   \/\/ arr = [5, 6];               \/\/ \uc624\ub958! \ubc30\uc5f4 \uc790\uccb4\ub97c \uc7ac\ud560\ub2f9\uc740 \ubd88\uac00\n<\/code><\/pre>\n
\ud575\uc2ec:<\/strong> const\ub294 \ubcc0\uc218\uc758 \uc7ac\ud560\ub2f9\uc744 \ub9c9\uc9c0\ub9cc, \uac1d\uccb4\ub098 \ubc30\uc5f4\uc758 \ub0b4\uc6a9 \ubcc0\uacbd\uc740 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n
\n
2. \ud654\uc0b4\ud45c \ud568\uc218 (Arrow Function, \uc560\ub85c\uc6b0 \ud391\uc158)<\/h2>\n
\ud568\uc218\ub97c \ub354 \uc9e7\uac8c \uc791\uc131\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. React\uc5d0\uc11c \ub9e4\uc6b0 \uc790\uc8fc \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 2: \uc77c\ubc18 \ud568\uc218 vs \ud654\uc0b4\ud45c \ud568\uc218<\/h3>\n
\/\/ \uc77c\ubc18 \ud568\uc218\nfunction add1(a, b) {           \/\/ function \ud0a4\uc6cc\ub4dc \uc0ac\uc6a9\n  return a + b;                 \/\/ return \uba85\uc2dc\n}\n\/\/ \ud654\uc0b4\ud45c \ud568\uc218 - \uae30\ubcf8\ud615\nconst add2 = (a, b) => {        \/\/ => \uc0ac\uc6a9\n  return a + b;                 \/\/ return \uba85\uc2dc\n};\n\n \/\/ \ud654\uc0b4\ud45c \ud568\uc218 - \uac04\ub2e8\ud55c \ud615\ud0dc\n const add3 = (a, b) => a + b;  \/\/ \ud55c \uc904\uc774\uba74 return\uacfc \uc911\uad04\ud638 \uc0dd\ub7b5 \uac00\ub2a5\n\n \/\/ \ub9e4\uac1c\ubcc0\uc218\uac00 \ud558\ub098\uc77c \ub54c\n const double = x => x * 2;     \/\/ \uc18c\uad04\ud638\ub3c4 \uc0dd\ub7b5 \uac00\ub2a5\n\n \/\/ \ub9e4\uac1c\ubcc0\uc218\uac00 \uc5c6\uc744 \ub54c\n const greet = () => '\uc548\ub155';    \/\/ \uc18c\uad04\ud638 \ud544\uc218\n\n console.log(add3(5, 3));       \/\/ 8\n console.log(double(4));        \/\/ 8\n<\/code><\/pre>\n
\uc608\uc81c 3: \ud654\uc0b4\ud45c \ud568\uc218\uc640 this<\/h3>\n
const user = {\n  name: '\ucca0\uc218',\n  sayHi1: function() {           \/\/ \uc77c\ubc18 \ud568\uc218\n    console.log('\uc548\ub155 ' + this.name); \/\/ this\ub294 user \uac1d\uccb4\n  },\n  sayHi2: () => {                 \/\/ \ud654\uc0b4\ud45c \ud568\uc218\n    console.log('\uc548\ub155 ' + this.name); \/\/ this\ub294 \uc0c1\uc704 \uc2a4\ucf54\ud504\uc758 this\n  }\n};\n\n user.sayHi1();                   \/\/ '\uc548\ub155 \ucca0\uc218'\n user.sayHi2();                   \/\/ '\uc548\ub155 undefined' (React\uc5d0\uc11c\ub294 class component\uc5d0\uc11c \uc8fc\uc758)\n<\/code><\/pre>\n
\n
3. \ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4 (Template Literal, \ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4)<\/h2>\n
\ubc31\ud2f1(`)\uc744 \uc0ac\uc6a9\ud574 \ubb38\uc790\uc5f4\uc744 \ub9cc\ub4e4\uace0, ${} \uc548\uc5d0 \ubcc0\uc218\ub098 \ud45c\ud604\uc2dd\uc744 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 4: \ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4 \ud65c\uc6a9<\/h3>\n
const name = '\ucca0\uc218';\nconst age = 20;\n\/\/ \uae30\uc874 \ubc29\uc2dd\nconst msg1 = '\uc774\ub984: ' + name + ', \ub098\uc774: ' + age; \/\/ \ubb38\uc790\uc5f4 \uc5f0\uacb0\n\/\/ \ud15c\ud50c\ub9bf \ub9ac\ud130\ub7f4\nconst msg2 = `\uc774\ub984: ${name}, \ub098\uc774: ${age}`;      \/\/ \ubc31\ud2f1\uacfc ${} \uc0ac\uc6a9\n \/\/ \ud45c\ud604\uc2dd \uc0ac\uc6a9 \uac00\ub2a5\n const msg3 = `\ub0b4\ub144 \ub098\uc774: ${age + 1}\uc138`;         \/\/ \uacc4\uc0b0\uc2dd \uac00\ub2a5\n\n \/\/ \uc5ec\ub7ec \uc904 \ubb38\uc790\uc5f4\n const html = `\n   <div>\n     <h1>${name}<\/h1>\n     <p>${age}\uc138<\/p>\n   <\/div>\n `;                                              \/\/ \uc5ec\ub7ec \uc904 \uc791\uc131 \uac00\ub2a5\n\n console.log(msg2);                             \/\/ \uc774\ub984: \ucca0\uc218, \ub098\uc774: 20\n<\/code><\/pre>\n
\n
4. \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9 (Destructuring, \ub514\uc2a4\ud2b8\ub7ed\ucc98\ub9c1)<\/h2>\n
\ubc30\uc5f4\uc774\ub098 \uac1d\uccb4\uc758 \uac12\uc744 \uc27d\uac8c \ucd94\ucd9c\ud569\ub2c8\ub2e4. React Props\uc640 State\uc5d0\uc11c \ud544\uc218\uc785\ub2c8\ub2e4.<\/p>\n
\/\/\uac1d\uccb4 \uad6c\uc870 \ubd84\ud574\nconst user = {\n  name: '\ucca0\uc218',\n  age: 20,\n  job: '\uac1c\ubc1c\uc790'\n};\n\/\/ \uae30\uc874 \ubc29\uc2dd\nconst name1 = user.name;        \/\/ \ud558\ub098\uc529 \ucd94\ucd9c\nconst age1 = user.age;\n\n \/\/ \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\n const { name, age, job } = user; \/\/ \ud55c \ubc88\uc5d0 \ucd94\ucd9c\n console.log(name);               \/\/ '\ucca0\uc218'\n console.log(age);                \/\/ 20\n\n \/\/ \ubcc0\uc218\uba85 \ubcc0\uacbd\n const { name: userName, age: userAge } = user; \/\/ \ub2e4\ub978 \uc774\ub984\uc73c\ub85c \ucd94\ucd9c\n console.log(userName);           \/\/ '\ucca0\uc218'\n\n \/\/ \uae30\ubcf8\uac12 \uc124\uc815\n const { name, city = '\uc11c\uc6b8' } = user; \/\/ city\uac00 \uc5c6\uc73c\uba74 '\uc11c\uc6b8' \uc0ac\uc6a9\n console.log(city);               \/\/ '\uc11c\uc6b8'\n\n\n\/\/\ubc30\uc5f4 \uad6c\uc870 \ubd84\ud574\n const arr = [1, 2, 3, 4, 5];\n\/\/ \uae30\uc874 \ubc29\uc2dd\nconst first1 = arr[0];           \/\/ \uc778\ub371\uc2a4\ub85c \uc811\uadfc\nconst second1 = arr[1];\n\/\/ \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\nconst [first, second] = arr;     \/\/ \uc21c\uc11c\ub300\ub85c \ucd94\ucd9c\nconsole.log(first);               \/\/ 1\n console.log(second);              \/\/ 2\n\n \/\/ \uc77c\ubd80\ub9cc \ucd94\ucd9c\n const [a, , c] = arr;             \/\/ \uc911\uac04 \uac12 \uac74\ub108\ub6f0\uae30 (\uc27c\ud45c\ub85c)\n console.log(a, c);                \/\/ 1 3\n\n \/\/ \ub098\uba38\uc9c0 \uc694\uc18c\n const [x, ...rest] = arr;         \/\/ \uccab \ubc88\uc9f8 \uc81c\uc678\ud558\uace0 \ub098\uba38\uc9c0\n console.log(rest);                \/\/ [2, 3, 4, 5]\n  \/\/ \ud568\uc218 \ub9e4\uac1c\ubcc0\uc218\uc5d0\uc11c \uad6c\uc870 \ubd84\ud574 (React Props\uc5d0\uc11c \uc790\uc8fc \uc0ac\uc6a9)\n \/\/ \uae30\uc874 \ubc29\uc2dd\n function greet1(user) {           \/\/ \uac1d\uccb4\ub97c \ud1b5\uc9f8\ub85c \ubc1b\uc74c\n   console.log(`\uc548\ub155 ${user.name}`);\n }\n\n \/\/ \uad6c\uc870 \ubd84\ud574 \ud65c\uc6a9\n function greet2({ name, age }) {  \/\/ \ud544\uc694\ud55c \uc18d\uc131\ub9cc \ucd94\ucd9c\n   console.log(`\uc548\ub155 ${name}, ${age}\uc138`);\n }\n\n const user = { name: '\ucca0\uc218', age: 20 };\n greet2(user);                     \/\/ \uc548\ub155 \ucca0\uc218, 20\uc138\n<\/code><\/pre>\n
\n
5. \uc2a4\ud504\ub808\ub4dc \uc5f0\uc0b0\uc790 (Spread Operator, \uc2a4\ud504\ub808\ub4dc \uc624\ud37c\ub808\uc774\ud130)<\/h2>\n
… \uc744 \uc0ac\uc6a9\ud574 \ubc30\uc5f4\uc774\ub098 \uac1d\uccb4\ub97c \ud3bc\uce69\ub2c8\ub2e4. React\uc5d0\uc11c \ubd88\ubcc0\uc131 \uc720\uc9c0\uc5d0 \ud544\uc218\uc785\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 8: \ubc30\uc5f4 \uc2a4\ud504\ub808\ub4dc<\/h3>\n
const arr1 = [1, 2, 3];\nconst arr2 = [4, 5, 6];\n\/\/ \ubc30\uc5f4 \ud569\uce58\uae30\nconst arr3 = [...arr1, ...arr2];  \/\/ arr1\uacfc arr2\ub97c \ud3bc\uccd0\uc11c \ud569\uce68\nconsole.log(arr3);                \/\/ [1, 2, 3, 4, 5, 6]\n\/\/ \ubc30\uc5f4 \ubcf5\uc0ac\nconst copy = [...arr1];           \/\/ \uc0c8\ub85c\uc6b4 \ubc30\uc5f4 \uc0dd\uc131 (\uc6d0\ubcf8 \uc720\uc9c0)\n copy.push(4);                     \/\/ \ubcf5\uc0ac\ubcf8\ub9cc \ubcc0\uacbd\n console.log(arr1);                \/\/ [1, 2, 3] (\uc6d0\ubcf8 \uadf8\ub300\ub85c)\n console.log(copy);                \/\/ [1, 2, 3, 4]\n\n \/\/ \uc694\uc18c \ucd94\uac00\n const arr4 = [0, ...arr1, 4];     \/\/ \uc55e\ub4a4\ub85c \uc694\uc18c \ucd94\uac00 \uac00\ub2a5\n console.log(arr4);                \/\/ [0, 1, 2, 3, 4]\n<\/code><\/pre>\n
\uc608\uc81c 9: \uac1d\uccb4 \uc2a4\ud504\ub808\ub4dc<\/h3>\n
const user = { name: '\ucca0\uc218', age: 20 };\n\/\/ \uac1d\uccb4 \ubcf5\uc0ac\nconst copy = { ...user };         \/\/ \uc0c8\ub85c\uc6b4 \uac1d\uccb4 \uc0dd\uc131\n\/\/ \uc18d\uc131 \ucd94\uac00\nconst user2 = { ...user, job: '\uac1c\ubc1c\uc790' }; \/\/ \uae30\uc874 \uc18d\uc131 + \uc0c8 \uc18d\uc131\nconsole.log(user2);               \/\/ { name: '\ucca0\uc218', age: 20, job: '\uac1c\ubc1c\uc790' }\n \/\/ \uc18d\uc131 \ub36e\uc5b4\uc4f0\uae30\n const user3 = { ...user, age: 21 }; \/\/ age\ub9cc \ubcc0\uacbd\n console.log(user3);               \/\/ { name: '\ucca0\uc218', age: 21 }\n\n \/\/ \uc5ec\ub7ec \uac1d\uccb4 \ud569\uce58\uae30\n const a = { x: 1, y: 2 };\n const b = { y: 3, z: 4 };\n const c = { ...a, ...b };         \/\/ y\ub294 b\uc758 \uac12\uc73c\ub85c \ub36e\uc5b4\uc368\uc9d0\n console.log(c);                   \/\/ { x: 1, y: 3, z: 4 }\n<\/code><\/pre>\n
\n
6. \ubc30\uc5f4 \uba54\uc11c\ub4dc (Array Methods, \uc5b4\ub808\uc774 \uba54\uc11c\ub4dc)<\/h2>\n
React\uc5d0\uc11c \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1\uc5d0 \ud544\uc218\uc801\uc778 \ubc30\uc5f4 \uba54\uc11c\ub4dc\ub4e4\uc785\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 10: map – \ubc30\uc5f4 \ubcc0\ud658 (\uac00\uc7a5 \uc911\uc694!)<\/h3>\n
const nums = [1, 2, 3, 4, 5];\n\/\/ \uac01 \uc694\uc18c\uc5d0 2\ub97c \uacf1\ud55c \uc0c8 \ubc30\uc5f4\nconst doubled = nums.map(num => num * 2); \/\/ \uac01 \uc694\uc18c\ub97c \ubcc0\ud658\nconsole.log(doubled);             \/\/ [2, 4, 6, 8, 10]\n\/\/ \uac1d\uccb4 \ubc30\uc5f4 \ubcc0\ud658\nconst users = [\n  { id: 1, name: '\ucca0\uc218' },\n   { id: 2, name: '\uc601\ud76c' }\n ];\n\n const names = users.map(user => user.name); \/\/ name\ub9cc \ucd94\ucd9c\n console.log(names);               \/\/ ['\ucca0\uc218', '\uc601\ud76c']\n\n \/\/ HTML \ubb38\uc790\uc5f4 \uc0dd\uc131 (React\uc640 \uc720\uc0ac)\n const items = nums.map(num => `<li>${num}<\/li>`); \/\/ \uac01 \uc22b\uc790\ub97c li\ub85c \ubcc0\ud658\n console.log(items);               \/\/ ['<li>1<\/li>', '<li>2<\/li>', ...]\n<\/code><\/pre>\n
\uc608\uc81c 11: forEach – \ubc30\uc5f4 \uc21c\ud68c (\ubc18\ud658\uac12 \uc5c6\uc74c)<\/h3>\n
const nums = [1, 2, 3, 4, 5];\n\/\/ forEach\ub294 \ubc18\ud658\uac12\uc774 \uc5c6\uc74c (undefined \ubc18\ud658)\nconst result1 = nums.forEach(num => {\n  console.log(num);               \/\/ 1, 2, 3, 4, 5 \ucd9c\ub825\n});\nconsole.log(result1);             \/\/ undefined\n\/\/ \uc678\ubd80 \ubcc0\uc218 \uc218\uc815 (\ubd80\uc218 \ud6a8\uacfc)\n let sum = 0;\n nums.forEach(num => {\n   sum += num;                     \/\/ \uc678\ubd80 \ubcc0\uc218 \ubcc0\uacbd\n });\n console.log(sum);                 \/\/ 15\n\n \/\/ map\uc740 \uc0c8 \ubc30\uc5f4 \ubc18\ud658\n const result2 = nums.map(num => num * 2);\n console.log(result2);             \/\/ [2, 4, 6, 8, 10]\n<\/code><\/pre>\n
\uc608\uc81c 12: map vs forEach \ube44\uad50<\/h3>\n
const nums = [1, 2, 3];\n\/\/ map: \uc0c8 \ubc30\uc5f4 \uc0dd\uc131 (React \ub80c\ub354\ub9c1\uc5d0 \uc0ac\uc6a9)\nconst doubled = nums.map(num => num * 2); \/\/ \uc0c8 \ubc30\uc5f4 \ubc18\ud658\nconsole.log(doubled);             \/\/ [2, 4, 6]\n\/\/ forEach: \ubc18\ubcf5\ub9cc \uc218\ud589 (\ub85c\uae45, \ubd80\uc218\ud6a8\uacfc\uc5d0 \uc0ac\uc6a9)\nnums.forEach(num => {\n  console.log(num * 2);           \/\/ 2, 4, 6 \ucd9c\ub825 (\ubc18\ud658\uac12 \uc5c6\uc74c)\n });\n\n \/\/ \uc798\ubabb\ub41c \uc0ac\uc6a9 \uc608\uc2dc\n const wrong = nums.forEach(num => num * 2); \/\/ \uc758\ubbf8 \uc5c6\uc74c\n console.log(wrong);               \/\/ undefined\n\n \/\/ \uc62c\ubc14\ub978 \uc0ac\uc6a9\n \/\/ map: \ub370\uc774\ud130 \ubcc0\ud658\uc774 \ud544\uc694\ud560 \ub54c\n const newArr = nums.map(num => ({ value: num })); \/\/ \uac1d\uccb4 \ubc30\uc5f4\ub85c \ubcc0\ud658\n\n \/\/ forEach: \ub2e8\uc21c \ubc18\ubcf5 \uc791\uc5c5\n nums.forEach((num, idx) => {\n   console.log(`${idx}: ${num}`); \/\/ \uc778\ub371\uc2a4\uc640 \ud568\uaed8 \ucd9c\ub825\n });\n<\/code><\/pre>\n
\uc608\uc81c 13: map\uacfc forEach \uc2e4\uc804 \ube44\uad50<\/h3>\n
const users = [\n  { id: 1, name: '\ucca0\uc218', active: true },\n  { id: 2, name: '\uc601\ud76c', active: false },\n  { id: 3, name: '\ubbfc\uc218', active: true }\n];\n\/\/ React\uc5d0\uc11c \uc0ac\uc6a9: map\uc73c\ub85c JSX \ubc30\uc5f4 \uc0dd\uc131\nconst userList = users.map(user => `<li>${user.name}<\/li>`);\nconsole.log(userList);             \/\/ ['<li>\ucca0\uc218<\/li>', '<li>\uc601\ud76c<\/li>', '<li>\ubbfc\uc218<\/li>']\n\n \/\/ \ub2e8\uc21c \ucd9c\ub825: forEach \uc0ac\uc6a9\n console.log('=== \uc0ac\uc6a9\uc790 \ubaa9\ub85d ===');\n users.forEach(user => {\n   console.log(`${user.id}. ${user.name}`); \/\/ \ucf58\uc194 \ucd9c\ub825\ub9cc\n });\n\n \/\/ \uccb4\uc774\ub2dd \uac00\ub2a5 \uc5ec\ubd80\n const activeNames = users\n   .filter(user => user.active)    \/\/ map\uc740 \uccb4\uc774\ub2dd \uac00\ub2a5\n   .map(user => user.name);        \/\/ filter \ud6c4 map\n console.log(activeNames);         \/\/ ['\ucca0\uc218', '\ubbfc\uc218']\n\n \/\/ forEach\ub294 \uccb4\uc774\ub2dd \ubd88\uac00\n \/\/ users.forEach(...).map(...);  \/\/ \uc624\ub958! forEach\ub294 undefined \ubc18\ud658\n<\/code><\/pre>\n
\uc608\uc81c 14: filter – \uc870\uac74\uc5d0 \ub9de\ub294 \uc694\uc18c\ub9cc \ucd94\ucd9c<\/h3>\n
const nums = [1, 2, 3, 4, 5, 6];\n\/\/ \uc9dd\uc218\ub9cc \ucd94\ucd9c\nconst evens = nums.filter(num => num % 2 === 0); \/\/ \uc870\uac74\uc774 true\uc778 \uac83\ub9cc\nconsole.log(evens);               \/\/ [2, 4, 6]\n\/\/ \uac1d\uccb4 \ubc30\uc5f4 \ud544\ud130\ub9c1\nconst users = [\n  { name: '\ucca0\uc218', age: 20 },\n   { name: '\uc601\ud76c', age: 17 },\n   { name: '\ubbfc\uc218', age: 25 }\n ];\n\n const adults = users.filter(user => user.age >= 20); \/\/ \uc131\uc778\ub9cc\n console.log(adults);              \/\/ [{ name: '\ucca0\uc218', age: 20 }, { name: '\ubbfc\uc218', age: 25 }]\n<\/code><\/pre>\n
\uc608\uc81c 15: find – \uc870\uac74\uc5d0 \ub9de\ub294 \uccab \ubc88\uc9f8 \uc694\uc18c \ucc3e\uae30<\/h3>\n
const users = [\n  { id: 1, name: '\ucca0\uc218' },\n  { id: 2, name: '\uc601\ud76c' },\n  { id: 3, name: '\ubbfc\uc218' }\n];\n\/\/ id\uac00 2\uc778 \uc0ac\uc6a9\uc790 \ucc3e\uae30\nconst user = users.find(user => user.id === 2); \/\/ \uccab \ubc88\uc9f8 \uc77c\uce58 \ud56d\ubaa9\nconsole.log(user);                \/\/ { id: 2, name: '\uc601\ud76c' }\n\n \/\/ \uc5c6\uc73c\uba74 undefined \ubc18\ud658\n const notFound = users.find(user => user.id === 99);\n console.log(notFound);            \/\/ undefined\n<\/code><\/pre>\n
\uc608\uc81c 16: reduce – \ubc30\uc5f4\uc744 \ud558\ub098\uc758 \uac12\uc73c\ub85c \ucd95\uc18c<\/h3>\n
const nums = [1, 2, 3, 4, 5];\n\/\/ \ud569\uacc4 \uad6c\ud558\uae30\nconst sum = nums.reduce((acc, cur) => acc + cur, 0);\n\/\/ acc: \ub204\uc801\uac12(\ucc98\uc74c\uc5d4 0), cur: \ud604\uc7ac\uac12\nconsole.log(sum);                 \/\/ 15\n\/\/ \uac1d\uccb4\ub85c \ubcc0\ud658\nconst users = ['\ucca0\uc218', '\uc601\ud76c', '\ubbfc\uc218'];\n const obj = users.reduce((acc, name, idx) => {\n   acc[idx] = name;                \/\/ \uc778\ub371\uc2a4\ub97c \ud0a4\ub85c \uc0ac\uc6a9\n   return acc;                     \/\/ \ub204\uc801\uac12 \ubc18\ud658 \ud544\uc218\n }, {});                           \/\/ \ucd08\uae30\uac12\uc740 \ube48 \uac1d\uccb4\n console.log(obj);                 \/\/ { 0: '\ucca0\uc218', 1: '\uc601\ud76c', 2: '\ubbfc\uc218' }\n<\/code><\/pre>\n
\uc608\uc81c 17: \ubc30\uc5f4 \uba54\uc11c\ub4dc \uccb4\uc774\ub2dd<\/h3>\n
1. const nums = [1, 2, 3, 4, 5, 6];\n2.\n3. \/\/ \uc9dd\uc218\ub9cc \ud544\ud130\ub9c1 \u2192 2\ubc30 \u2192 \ud569\uacc4\n4. const result = nums\n5.   .filter(num => num % 2 === 0)   \/\/ [2, 4, 6]\n6.   .map(num => num * 2)            \/\/ [4, 8, 12]\n7.   .reduce((acc, cur) => acc + cur, 0); \/\/ 24\n8.\n9. console.log(result);              \/\/ 24\n<\/code><\/pre>\n
\n
7. \uc0bc\ud56d \uc5f0\uc0b0\uc790 (Ternary Operator, \ud130\ub108\ub9ac \uc624\ud37c\ub808\uc774\ud130)<\/h2>\n
\uc870\uac74\uc5d0 \ub530\ub77c \uac12\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4. React\uc758 \uc870\uac74\ubd80 \ub80c\ub354\ub9c1\uc5d0 \uc790\uc8fc \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 18: \uc0bc\ud56d \uc5f0\uc0b0\uc790 \uae30\ubcf8<\/h3>\n
  const age = 20;\n\n  \/\/ \uae30\uc874 \ubc29\uc2dd (if-else)\n  let msg1;\n  if (age >= 20) {\n    msg1 = '\uc131\uc778';\n  } else {\n    msg1 = '\ubbf8\uc131\ub144';\n  }\n\n   \/\/ \uc0bc\ud56d \uc5f0\uc0b0\uc790\n   const msg2 = age >= 20 ? '\uc131\uc778' : '\ubbf8\uc131\ub144'; \/\/ \uc870\uac74 ? \ucc38\uc77c\ub54c : \uac70\uc9d3\uc77c\ub54c\n   console.log(msg2);                \/\/ '\uc131\uc778'\n\n   \/\/ \uc911\ucca9 \uc0ac\uc6a9 (\ube44\ucd94\ucc9c - \ubcf5\uc7a1\ud568)\n   const score = 85;\n   const grade = score >= 90 ? 'A' :\n                 score >= 80 ? 'B' :\n                 score >= 70 ? 'C' : 'D';\n   console.log(grade);               \/\/ 'B'\n<\/code><\/pre>\n
\n
8. \ub2e8\ucd95 \ud3c9\uac00 (Short-circuit Evaluation, \uc1fc\ud2b8 \uc11c\ud0b7 \uc774\ubc38\ub958\uc5d0\uc774\uc158)<\/h2>\n
\uc608\uc81c 19: && \uc5f0\uc0b0\uc790 – \uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/h3>\n
const isLogin = true;\nconst user = { name: '\ucca0\uc218' };\n\/\/ && : \uc67c\ucabd\uc774 true\uba74 \uc624\ub978\ucabd \uc2e4\ud589\nconst msg1 = isLogin && '\ub85c\uadf8\uc778\ub428'; \/\/ isLogin\uc774 true\uc774\ubbc0\ub85c '\ub85c\uadf8\uc778\ub428' \ubc18\ud658\nconsole.log(msg1);                \/\/ '\ub85c\uadf8\uc778\ub428'\nconst msg2 = !isLogin && '\ub85c\uadf8\uc778 \ud544\uc694'; \/\/ false\uc774\ubbc0\ub85c false \ubc18\ud658\nconsole.log(msg2);                \/\/ false\n\n \/\/ React\uc5d0\uc11c \uc790\uc8fc \uc0ac\uc6a9\n const display = isLogin && `\ud658\uc601\ud569\ub2c8\ub2e4, ${user.name}\ub2d8`;\n console.log(display);             \/\/ '\ud658\uc601\ud569\ub2c8\ub2e4, \ucca0\uc218\ub2d8'\n<\/code><\/pre>\n
\uc608\uc81c 20: || \uc5f0\uc0b0\uc790 – \uae30\ubcf8\uac12 \uc124\uc815<\/h3>\n
const name1 = '';                  \/\/ \ube48 \ubb38\uc790\uc5f4 (falsy)\nconst name2 = null;                \/\/ null (falsy)\nconst name3 = '\ucca0\uc218';              \/\/ \ubb38\uc790\uc5f4 (truthy)\n\/\/ || : \uc67c\ucabd\uc774 falsy\uba74 \uc624\ub978\ucabd \uc0ac\uc6a9\nconst display1 = name1 || '\uac8c\uc2a4\ud2b8'; \/\/ ''\ub294 falsy\uc774\ubbc0\ub85c '\uac8c\uc2a4\ud2b8'\nconst display2 = name2 || '\uac8c\uc2a4\ud2b8'; \/\/ null\uc740 falsy\uc774\ubbc0\ub85c '\uac8c\uc2a4\ud2b8'\nconst display3 = name3 || '\uac8c\uc2a4\ud2b8'; \/\/ '\ucca0\uc218'\ub294 truthy\uc774\ubbc0\ub85c '\ucca0\uc218'\n console.log(display1);             \/\/ '\uac8c\uc2a4\ud2b8'\n console.log(display3);             \/\/ '\ucca0\uc218'\n<\/code><\/pre>\n
\uc608\uc81c 21: Nullish Coalescing (??) – null\/undefined\ub9cc \uccb4\ud06c<\/h3>\n
const count1 = 0;                  \/\/ 0\uc740 falsy\uc9c0\ub9cc \uc720\ud6a8\ud55c \uac12\nconst count2 = null;               \/\/ null\n\/\/ || \uc0ac\uc6a9 (\ubb38\uc81c \uc788\uc74c)\nconst result1 = count1 || 10;      \/\/ 0\uc740 falsy\uc774\ubbc0\ub85c 10 \ubc18\ud658 (\uc758\ub3c4\uc640 \ub2e4\ub984)\nconsole.log(result1);              \/\/ 10 (\uc798\ubabb\ub41c \uacb0\uacfc)\n\/\/ ?? \uc0ac\uc6a9 (\uc62c\ubc14\ub984)\nconst result2 = count1 ?? 10;      \/\/ 0\uc740 null\/undefined\uac00 \uc544\ub2c8\ubbc0\ub85c 0 \ubc18\ud658\n const result3 = count2 ?? 10;      \/\/ null\uc774\ubbc0\ub85c 10 \ubc18\ud658\n\n console.log(result2);              \/\/ 0 (\uc62c\ubc14\ub978 \uacb0\uacfc)\n console.log(result3);              \/\/ 10\n<\/code><\/pre>\n
\uc608\uc81c 22: Optional Chaining (?.) – \uc548\uc804\ud55c \uc18d\uc131 \uc811\uadfc<\/h3>\n
const user1 = {\n  name: '\ucca0\uc218',\n  addr: { city: '\uc11c\uc6b8' }\n};\nconst user2 = { name: '\uc601\ud76c' };   \/\/ addr \uc18d\uc131 \uc5c6\uc74c\n\n\/\/ \uae30\uc874 \ubc29\uc2dd (\uc5d0\ub7ec \ubc1c\uc0dd \uac00\ub2a5)\n\/\/ console.log(user2.addr.city);  \/\/ \uc624\ub958! Cannot read property 'city' of undefined\n\n \/\/ \uc548\uc804\ud55c \ubc29\uc2dd\n console.log(user2.addr && user2.addr.city); \/\/ undefined (\uc5d0\ub7ec \uc5c6\uc74c)\n\n \/\/ Optional Chaining \uc0ac\uc6a9\n console.log(user1.addr?.city);    \/\/ '\uc11c\uc6b8'\n console.log(user2.addr?.city);    \/\/ undefined (\uc5d0\ub7ec \uc5c6\uc74c)\n\n \/\/ \uba54\uc11c\ub4dc \ud638\ucd9c\uc5d0\ub3c4 \uc0ac\uc6a9\n const obj = { getName: () => '\ucca0\uc218' };\n console.log(obj.getName?.());     \/\/ '\ucca0\uc218'\n console.log(obj.getAge?.());      \/\/ undefined (\uba54\uc11c\ub4dc \uc5c6\uc5b4\ub3c4 \uc5d0\ub7ec \uc5c6\uc74c)\n<\/code><\/pre>\n
\n
9. Promise(\ud504\ub85c\ubbf8\uc2a4)\uc640 async\/await<\/h2>\n
\ube44\ub3d9\uae30(asynchronous, \uc5b4\uc2f1\ud06c\ub7ec\ub108\uc2a4) \ucc98\ub9ac\ub97c \uc704\ud55c \ubb38\ubc95\uc785\ub2c8\ub2e4. API \ud638\ucd9c\uc5d0 \ud544\uc218\uc785\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 23: Promise \uae30\ubcf8<\/h3>\n
\/\/ Promise \uc0dd\uc131\nconst promise = new Promise((resolve, reject) => {\n  const success = true;\n\n  setTimeout(() => {                \/\/ 2\ucd08 \ud6c4 \uc2e4\ud589\n    if (success) {\n      resolve('\uc131\uacf5!');            \/\/ \uc131\uacf5 \uc2dc\n    } else {\n      reject('\uc2e4\ud328!');             \/\/ \uc2e4\ud328 \uc2dc\n    }\n  }, 2000);\n });\n\n \/\/ Promise \uc0ac\uc6a9\n promise\n   .then(result => {                \/\/ \uc131\uacf5 \uc2dc \uc2e4\ud589\n     console.log(result);           \/\/ '\uc131\uacf5!'\n   })\n   .catch(error => {                \/\/ \uc2e4\ud328 \uc2dc \uc2e4\ud589\n     console.log(error);\n   });\n<\/code><\/pre>\n
\uc608\uc81c 24: async\/await – Promise\ub97c \uc27d\uac8c<\/h3>\n
\/\/ API \ud638\ucd9c \ud568\uc218 (\uc608\uc2dc)\nfunction fetchUser(id) {           \/\/ Promise\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\n  return new Promise(resolve => {\n    setTimeout(() => {\n      resolve({ id, name: '\ucca0\uc218' });\n    }, 1000);\n  });\n}\n\n \/\/ \uae30\uc874 \ubc29\uc2dd (then \uc0ac\uc6a9)\n fetchUser(1)\n   .then(user => {\n     console.log(user);\n   });\n\n \/\/ async\/await \uc0ac\uc6a9\n async function getUser() {         \/\/ async \ud568\uc218 \uc120\uc5b8\n   const user = await fetchUser(1); \/\/ await\ub85c Promise \uae30\ub2e4\ub9bc\n   console.log(user);               \/\/ { id: 1, name: '\ucca0\uc218' }\n }\n\n getUser();                         \/\/ \ud568\uc218 \ud638\ucd9c\n<\/code><\/pre>\n
\uc608\uc81c 25: async\/await \uc5d0\ub7ec \ucc98\ub9ac<\/h3>\n
 async function loadData() {\n   try {                             \/\/ \uc5d0\ub7ec \ucc98\ub9ac \uc2dc\uc791\n     const res = await fetch('https:\/\/api.example.com\/data');\n     const data = await res.json();  \/\/ JSON \ubcc0\ud658 \uae30\ub2e4\ub9bc\n     console.log(data);\n   } catch (error) {                 \/\/ \uc5d0\ub7ec \ubc1c\uc0dd \uc2dc\n     console.log('\uc5d0\ub7ec:', error);\n   }\n }\n<\/code><\/pre>\n
\n
10. \ubaa8\ub4c8 (Module, \ubaa8\ub4c8) – import\/export<\/h2>\n
\ud30c\uc77c \uac04 \ucf54\ub4dc\ub97c \uacf5\uc720\ud569\ub2c8\ub2e4. React \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubaa8\ub450 \ubaa8\ub4c8\uc785\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 26: export – \ub0b4\ubcf4\ub0b4\uae30<\/h3>\n
\/\/ utils.js\n\/\/ named export (\uc774\ub984 \uc9c0\uc815 \ub0b4\ubcf4\ub0b4\uae30)\nexport const add = (a, b) => a + b;           \/\/ export \ubd99\uc774\uae30\nexport const subtract = (a, b) => a - b;\n\nconst multiply = (a, b) => a * b;\nconst divide = (a, b) => a \/ b;\n\nexport { multiply, divide };                  \/\/ \ud55c \ubc88\uc5d0 \ub0b4\ubcf4\ub0b4\uae30\n\n \/\/ default export (\uae30\ubcf8 \ub0b4\ubcf4\ub0b4\uae30) - \ud30c\uc77c\ub2f9 \ud558\ub098\ub9cc\n export default function greet(name) {         \/\/ default\ub294 \ud558\ub098\ub9cc \uac00\ub2a5\n   return `\uc548\ub155 ${name}`;\n }\n<\/code><\/pre>\n
\uc608\uc81c 27: import – \uac00\uc838\uc624\uae30<\/h3>\n
\/\/ main.js\n\/\/ named import (\uc774\ub984\uc73c\ub85c \uac00\uc838\uc624\uae30)\nimport { add, subtract } from '.\/utils.js';   \/\/ \uc911\uad04\ud638 \uc0ac\uc6a9\nconsole.log(add(5, 3));                       \/\/ 8\n\n\/\/ \uc774\ub984 \ubcc0\uacbd\ud558\uc5ec \uac00\uc838\uc624\uae30\nimport { multiply as mul } from '.\/utils.js'; \/\/ as\ub85c \uc774\ub984 \ubcc0\uacbd\nconsole.log(mul(4, 2));                       \/\/ 8\n\n\/\/ \ubaa8\ub450 \uac00\uc838\uc624\uae30\n import * as utils from '.\/utils.js';          \/\/ * \uc0ac\uc6a9\n console.log(utils.divide(10, 2));             \/\/ 5\n\n \/\/ default import (\uae30\ubcf8 \uac00\uc838\uc624\uae30)\n import greet from '.\/utils.js';               \/\/ \uc911\uad04\ud638 \uc5c6\uc774, \uc6d0\ud558\ub294 \uc774\ub984 \uc0ac\uc6a9 \uac00\ub2a5\n console.log(greet('\ucca0\uc218'));                   \/\/ '\uc548\ub155 \ucca0\uc218'\n\n \/\/ named\uc640 default \ud568\uaed8\n import greet, { add } from '.\/utils.js';      \/\/ default\ub97c \uba3c\uc800\n<\/code><\/pre>\n
\n
11. \uac1d\uccb4 \ub2e8\ucd95 \uc18d\uc131 (Property Shorthand, \ud504\ub85c\ud37c\ud2f0 \uc1fc\ud2b8\ud578\ub4dc)<\/h2>\n
\uc608\uc81c 28: \uac1d\uccb4 \ub2e8\ucd95 \ubb38\ubc95<\/h3>\n
const name = '\ucca0\uc218';\nconst age = 20;\n\n\/\/ \uae30\uc874 \ubc29\uc2dd\nconst user1 = {\n  name: name,                      \/\/ \uc18d\uc131\uba85\uacfc \ubcc0\uc218\uba85\uc774 \uac19\uc74c\n  age: age\n};\n\n \/\/ \ub2e8\ucd95 \uc18d\uc131\n const user2 = { name, age };       \/\/ \ubcc0\uc218\uba85\uacfc \uac19\uc73c\uba74 \uc0dd\ub7b5 \uac00\ub2a5\n console.log(user2);                \/\/ { name: '\ucca0\uc218', age: 20 }\n\n \/\/ \uba54\uc11c\ub4dc \ub2e8\ucd95\n const obj1 = {\n   sayHi: function() {              \/\/ \uae30\uc874 \ubc29\uc2dd\n     console.log('\uc548\ub155');\n   }\n };\n\n const obj2 = {\n   sayHi() {                        \/\/ function \ud0a4\uc6cc\ub4dc \uc0dd\ub7b5\n     console.log('\uc548\ub155');\n   }\n };\n\n \/\/ \uacc4\uc0b0\ub41c \uc18d\uc131\uba85\n const key = 'name';\n const user3 = {\n   [key]: '\ucca0\uc218',                   \/\/ \ubcc0\uc218\ub97c \uc18d\uc131\uba85\uc73c\ub85c \uc0ac\uc6a9\n   [`${key}2`]: '\uc601\ud76c'              \/\/ \ud45c\ud604\uc2dd\ub3c4 \uac00\ub2a5\n };\n console.log(user3);                \/\/ { name: '\ucca0\uc218', name2: '\uc601\ud76c' }\n<\/code><\/pre>\n
\n
12. \uc790\uc8fc \ud558\ub294 \uc2e4\uc218\uc640 \ud574\uacb0\ubc95<\/h2>\n
\uc2e4\uc218 1: const \uac1d\uccb4 \uc218\uc815<\/h3>\n
\/\/ \uc798\ubabb\ub41c \uc0dd\uac01\nconst obj = { a: 1 };\n\/\/ obj = { b: 2 };               \/\/ \uc624\ub958! const\ub294 \uc7ac\ud560\ub2f9 \ubd88\uac00\n\n\/\/ \uc62c\ubc14\ub978 \ubc29\ubc95\nconst obj = { a: 1 };\nobj.a = 2;                        \/\/ \uac1d\uccb4 \uc18d\uc131 \ubcc0\uacbd\uc740 \uac00\ub2a5\nobj.b = 3;                        \/\/ \uc0c8 \uc18d\uc131 \ucd94\uac00\ub3c4 \uac00\ub2a5\nconsole.log(obj);                 \/\/ { a: 2, b: 3 }\n<\/code><\/pre>\n
\uc2e4\uc218 2: \ud654\uc0b4\ud45c \ud568\uc218 \uac1d\uccb4 \ubc18\ud658<\/h3>\n
\/\/ \uc798\ubabb\ub41c \ucf54\ub4dc\nconst getUser = id => { id: id, name: '\ucca0\uc218' }; \/\/ \uc911\uad04\ud638\ub97c \ucf54\ub4dc \ube14\ub85d\uc73c\ub85c \uc778\uc2dd\nconsole.log(getUser(1));          \/\/ undefined\n\n\/\/ \uc62c\ubc14\ub978 \ucf54\ub4dc\nconst getUser = id => ({ id: id, name: '\ucca0\uc218' }); \/\/ \uc18c\uad04\ud638\ub85c \uac10\uc2f8\uae30\nconsole.log(getUser(1));          \/\/ { id: 1, name: '\ucca0\uc218' }\n<\/code><\/pre>\n
\uc2e4\uc218 3: map\uc5d0\uc11c return \ub204\ub77d<\/h3>\n
\/\/ \uc798\ubabb\ub41c \ucf54\ub4dc\nconst nums = [1, 2, 3];\nconst doubled = nums.map(num => { num * 2 }); \/\/ \uc911\uad04\ud638 \uc0ac\uc6a9 \uc2dc return \ud544\uc694\nconsole.log(doubled);             \/\/ [undefined, undefined, undefined]\n\n\/\/ \uc62c\ubc14\ub978 \ucf54\ub4dc 1\nconst doubled = nums.map(num => num * 2); \/\/ \uc911\uad04\ud638 \uc5c6\uc73c\uba74 \uc790\ub3d9 return\n\n\/\/ \uc62c\ubc14\ub978 \ucf54\ub4dc 2\nconst doubled = nums.map(num => { return num * 2; }); \/\/ return \uba85\uc2dc\n<\/code><\/pre>\n
\uc2e4\uc218 4: forEach\ub85c \ubc30\uc5f4 \uc0dd\uc131 \uc2dc\ub3c4<\/h3>\n
\/\/ \uc798\ubabb\ub41c \ucf54\ub4dc\nconst nums = [1, 2, 3];\nconst doubled = nums.forEach(num => num * 2); \/\/ forEach\ub294 undefined \ubc18\ud658\nconsole.log(doubled);             \/\/ undefined\n\n\/\/ \uc62c\ubc14\ub978 \ucf54\ub4dc\nconst doubled = nums.map(num => num * 2); \/\/ map \uc0ac\uc6a9\nconsole.log(doubled);             \/\/ [2, 4, 6]\n<\/code><\/pre>\n
\n
13. \uc5f0\uc2b5 \ubb38\uc81c<\/h2>\n
\ubb38\uc81c 1: \ubc30\uc5f4 \uba54\uc11c\ub4dc \uc885\ud569<\/h3>\n
\ub2e4\uc74c \uc0ac\uc6a9\uc790 \ubc30\uc5f4\uc5d0\uc11c 20\uc138 \uc774\uc0c1\uc778 \uc0ac\uc6a9\uc790\uc758 \uc774\ub984\ub9cc \ucd94\ucd9c\ud558\uc138\uc694.<\/p>\n
const users = [\n  { name: '\ucca0\uc218', age: 17 },\n  { name: '\uc601\ud76c', age: 22 },\n  { name: '\ubbfc\uc218', age: 19 },\n  { name: '\uc9c0\uc601', age: 25 }\n];\n\n\/\/ \ub2f5: ['\uc601\ud76c', '\uc9c0\uc601']\n<\/code><\/pre>\n
\ubb38\uc81c 2: \uad6c\uc870 \ubd84\ud574\uc640 \uc2a4\ud504\ub808\ub4dc<\/h3>\n
user \uac1d\uccb4\uc5d0\uc11c name\uc744 \ucd94\ucd9c\ud558\uace0, \ub098\uba38\uc9c0\ub97c rest \ubcc0\uc218\uc5d0 \ub2f4\uc73c\uc138\uc694.<\/p>\n
const user = { name: '\ucca0\uc218', age: 20, job: '\uac1c\ubc1c\uc790' };\n\n\/\/ \ub2f5: const { name, ...rest } = user;\n<\/code><\/pre>\n
\ubb38\uc81c 3: async\/await<\/h3>\n
\ub2e4\uc74c \ud568\uc218\ub97c async\/await\uc73c\ub85c \ubcc0\ud658\ud558\uc138\uc694.<\/p>\n
function getData() {\n  fetch('https:\/\/api.example.com\/data')\n    .then(res => res.json())\n    .then(data => console.log(data));\n}\n<\/code><\/pre>\n
\ubb38\uc81c 4: map vs forEach<\/h3>\n
\ub2e4\uc74c \uc911 \uc5b4\ub5a4 \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574\uc57c \ud560\uae4c\uc694?<\/p>\n
const nums = [1, 2, 3, 4, 5];\n\n\/\/ A. \uac01 \uc22b\uc790\uc5d0 10\uc744 \ub354\ud55c \uc0c8 \ubc30\uc5f4\uc774 \ud544\uc694\ud568\n\/\/ B. \uac01 \uc22b\uc790\ub97c \ucf58\uc194\uc5d0 \ucd9c\ub825\ub9cc \ud558\uace0 \uc2f6\uc74c\n\n\/\/ \ub2f5: A\ub294 map, B\ub294 forEach\n<\/code><\/pre>\n
\n
15. \ud575\uc2ec \uc694\uc57d<\/h2>\n
React\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ubb38\ubc95 TOP 5<\/h3>\n
    \n
  1. map<\/strong> – \ub9ac\uc2a4\ud2b8 \ub80c\ub354\ub9c1<\/li>\n
  2. \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9<\/strong> – Props \ucd94\ucd9c<\/li>\n
  3. \ud654\uc0b4\ud45c \ud568\uc218<\/strong> – \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec<\/li>\n
  4. \uc2a4\ud504\ub808\ub4dc \uc5f0\uc0b0\uc790<\/strong> – \ubd88\ubcc0\uc131 \uc720\uc9c0<\/li>\n
  5. \uc0bc\ud56d \uc5f0\uc0b0\uc790<\/strong> – \uc870\uac74\ubd80 \ub80c\ub354\ub9c1<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    1. \ubcc0\uc218 \uc120\uc5b8: let, const var \ub300\uc2e0 let\uacfc const\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. React\uc5d0\uc11c\ub294 \uc8fc\ub85c const\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc608\uc81c 1: let\uacfc const\uc758 \ucc28\uc774 let age = 20; \/\/ let: \uc7ac\ud560\ub2f9 \uac00\ub2a5\ud55c \ubcc0\uc218 age = 21; \/\/ \uac12 \ubcc0\uacbd \uac00\ub2a5 console.log(age); \/\/ 21 \ucd9c\ub825 const name = '\ucca0\uc218'; \/\/ const: \uc7ac\ud560\ub2f9 \ubd88\uac00\ub2a5\ud55c \uc0c1\uc218 \/\/ name = '\uc601\ud76c'; \/\/ \uc624\ub958 \ubc1c\uc0dd! … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-434","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/comments?post=434"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/434\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/media?parent=434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/categories?post=434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/tags?post=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}