????? ??? ??? HTML, CSS, JavaScript? ???? ? ?????. ? ???? ??? ??? ???? ??? ??, ?? ? ?? ??? ???? ???. ? ????? ?? ?? ? ????? ???? ???? ?? ???? ?? ?? ??? ????.

---

1. ? ??

??

??? ??? ??? ???? ???? ?? ??? ???? ?? ??? ??? ? ??? ???. ??? ????:

• ???? ??: ???, ?????, ????? ?? ?? ??? ?????.
• HTTP ?? ??: Cache-Control, ETag ? Expires.
• ??? ??: ???? ?? ? ?????? ? ?(PWA)?.

HTTP/2

• HTTP/2? ?????, ?? ??, ?? ??? ?? ? ??? ??? ?????? ?????.
• ??? ???? ?? ??? ??? ??? ?? ??? ?????.

??

• CSP(??? ?? ??): ??? ??? ????(XSS)? ?????.
• HTTPS: ?????? ?? ?? ??? ??????.
• ?? ?? ??: ?? ???? ?????.
• CORS: ?? ?? ??? ???? ?????.

? ??

????? ????? ??? ??? ??? ?????.

• ?? ??? ??: ???? ??? ????? ?? ??? ??????.
• ???? ? ?? ???: ?? ?? ??? ???? ?? ???? ???? ??????.
• ?? ??, ?? ??, ?? ?? ? ?? ???: ??? ?? ??? ??
• ??? ??: ?? ???? ?????? ?? ?? ? ??? ?????.
• Workers: Web Workers? ???? UI? ???? ?? ??? ??? ?????.
• ??? ???: ???? ???? WebP? ?? ?? ??? ?????.

---

2. DOM(?? ?? ??)

??? ??

• ?? ???(querySelector, createElement)? ???? DOM ??? ????? ???? ?????.
• DOM ??? ?? ??? ??? ??? ??? ?????.

?? ??

• DocumentFragment? ???? DOM ????? ?? ???? ??? ?????.

??? ?? ? ???

• ??? ??? ????? ???? ?? ??? ??? ??? ? ??.
• ???? ?? ??? ???? ??? ??? ??????.

---

3. HTML

??? ??

• ,

  ,

???(A11Y)

• ??? ARIA ??, ?? ? ??? ??? ?? ?? ???? ??????? ???? ? ??? ?????.

??? ? ???

• ??? ??, Flexbox ? ???? ???? ???? ????? ?????.
• ???? ???? ?? ???? ??????.

---

4. ??????

?? ??

• this ???: ??? ??? ??(?: ??, ??, ??? ??)?? ??? ????? ?????.
• ???: ??? ??? ? ??? ??? ???? ?????.
• ??: ????? ?? ES6 ???? ???? ??? ?????.
• ??? JavaScript: ??, Promise ? async/await? ???? ??? ??? ?????.
• ????: ??? ?? ??? ???? ?? ?? ? ?? ????? ?????.
• Currying: ????? ??? ?? ??? ??????.
• ?? ??: ???? ??? ??? ?? .map, .reduce ? .filter? ?? ??? ?????.

---

5. ??? ??

??? ?? ??? ???? ??

• ???: ?? ?? ?? ?? ??? ?????.

const mixin = {
  greet() {
    console.log("Hello!");
  }
};

const obj = Object.assign({}, mixin);
obj.greet(); // Output: "Hello!"

• Factory: ??? ???? ???? ?? ??? ????.

function createButton(type) {
  if (type === "primary") return { color: "blue", text: "Click Me" };
  if (type === "secondary") return { color: "gray", text: "Cancel" };
}

const button = createButton("primary");
console.log(button); // { color: 'blue', text: 'Click Me' }

• ???: ???? ????? ??? ??? ?????.

const singleton = (function () {
  let instance;

  function createInstance() {
    return { name: "Singleton Instance" };
  }

  return {
    getInstance() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

console.log(singleton.getInstance());

• ???: ??? ?????? ??? ???? ??????.

const facade = {
  start() {
    console.log("Starting...");
  },
  stop() {
    console.log("Stopping...");
  }
};

facade.start(); // Output: "Starting..."
facade.stop();  // Output: "Stopping..."

• MVC ? MVVM: ??? ? ????? ???? ?? ?????? ??

---

6. ?? ? ????? ? ???

?? ? ???(SSR)

• ???? ???? ????? ??? ??? HTML? ????? ????.
• SEO ? ?? ?? ??? ? ????.

?????? ???(CSR)

• React ?? Vue? ?? JavaScript ?????? ???? ??????? ???? ??????.
• ? ?? ?????? ? ?? ?? ???? ?????.

?? ??? ???? ???

• ???? ?? ??????? SEO?? SSR? ?????.
• ??? ??????? CSR? ?????.

---

??

??? ??? ??? ??? ????? ????? ??? ??? ?? ? ????. ?? ???? ??? ???? ???? ??? ??, ?? ?? ??, ? ?? ??? ?? ?? ??? ?????.

? ??? ?? ??? ??? ???: ????? ?? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!