학습저장소

• (issue): 이전의 질의응답을 보고 싶다면 이쪽으로 와주세요 🙂

  https://github.com/yamoo9/likelion-FEQA

• ‣

  ‣

  • font shorthand

• 모바일 화면 크기에선 왜이렇게 글씨가 작죠 …? 페이지 너비를 화면크기에 맞춰주는 메타태그를 작성해

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

리액트 왜 생겼나요 ?

• 인터페이스 자동 동기화를 위해 생겨난 라이브러리
• 자바스크립트를 이용해 동적으로 랜더링하는걸 도와줌

{
    "scripts": {
        "dev": "serve"
    },
    "devDependencies": {
        "serve": "14.2.1"
    }
}

pnpm add serve -D → pnpm dev

→ vite 환경으로 넘어가면서 삭제했어요

동적랜더링(with vanilla)

const appData = {
        headline: "리액트",
        paragraph:
          "리액트는 사용자 인터페이스 구축을 위한 javascript 오픈소스 라이브러리 입니다.",
      };

//DOM에서 대상(요소) 찾기
const appElement = document.querySelector("#app");

function render() {
  //데이터를 기반으로 렌더링
  const h1Element = document.createElement("h1");
  const pElement = document.createElement("p");

  // 데이터바인딩
  h1Element.textContent = appData["headline"];
  pElement.textContent = appData["paragraph"];

  //출력
  console.log(h1Element);
  console.log(pElement);

  //화면에 랜더링
  appElement.append(h1Element, pElement);
}

element:append()

Element: append() method - Web APIs | MDN

noscript

<noscript>이 앱을 사용하려면 자바스크립트로 활성화가 필요합니다</noscript> : 자바스크립트를 사용하지 못하는 사용자에게 제공하는 최소한의 정보 제공

content delivery network

별도의 도구 설치 과정 없이 웹 브라우저에서 바로 작동하는 react 를 사용해봐요

ESM>CDN

▶️ node.js에서의 모든 패키지를 브라우저에서 설치없이 사용할수 있도록 합니다