스파르타코딩클럽 내일배움캠프 TIL24

DOM 기초 특강

1. DOM에 대한 희미한 감각 탑재
2. 웹 개발시 어떤걸 모르는지, DOM을 키워드로 구글링 할수 있는가?
3. 용기가 생겼는가?
   DOM(Document Object Model)
4. javacript

• 브라우저에서 쓰려고 만들어진 JS
• 본연의 역할 :
  • 웹페이지를 동적으로만들기 위해
  • HTML문서를 조작해서 만들어진 언어

2. 웹페이지가 뜨는과정
   1) 클라이언트 -> 서버(요청)
   2) 서버 -> 클라이언트(HTML 문서를 수신)
   3) 브라우저가 HTML 파일을 해석(parsing(분석))
   4) DOM Tree를 구성
   5) HTML에 CSS 포함시 CSSOM Tree를 구성(중요x)
   6) DOM Tree랑 CSSOM Tree를 합쳐서 Rendering Tree
3. DOM

• Document를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling한거!
• 브라우저에 기본적으로 내장돼 있는 API
• DOM이 브라우저에 내장돼있기 때문에
  1. 접근할 수 있다.
  2. 제어할 수 있다.
• 모든 DOM의 node(DOM Tree의 마디)들은 '속성', 'Method' 보유
  ---- 추가 실습 ----
• innerHTML과 innerText

element.innerHTML = new html content
element.innerText = new text
document.querySelector('h1').innerHTML = 'test'
document.querySelector('h1').innerText = 'TEST'

• innerHTML과 innerText의 차이

document.querySelector('h1').innerHTML = '<h2>TEST</h2>';
// 글씨가 더커짐 -> h1의 하위 요소로 들어감
document.querySelector('h1').innerText = '<h2>TEST</h2>';
// <h2></h2>까지 텍스트로 인식해서 들어감

element.innerHTML : 따옴표안의 태그도 인식함
element.innerText : 따옴표안의 것들을 모두 텍스트로 인식

• VS code에서

<h1>안녕하세요</h1>
<button onclick="buttonClickEvent()">클릭하면 header가 바뀜</button>
    <script>
        // 1. 버튼을 만들어
        // 2. 버튼을 눌렀을 때
        // 3. h1 태그를 불러와
        // 4. h1 태그의 내용을 바꿔줘
        let buttonClickEvent = function () {
            // 이 안에서 이자리에서 선택후 내용을 바꿔주면 됨
            // 3. h1 태그를 불러와
            let h1Tag = document.querySelector('h1');
            // 4. h1 태그의 내용을 바꿔줘
            h1Tag.innerText = 'TEST'
        }
    </script>

• 스타일 변경

element.style.property = new style
document.querySelector('h1').style
document.querySelector('h1').style.color
document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.fontSize = '20px';

• attribute(속성)

element.setAtrribeute(attribute, value)
document.querySelector('h1').setAttribute('class','toYellowClass');
// h1 태그에 클래스 추가

퀴즈) 두번째 li에 .setAttribute로 class 추가해보기

• createElement 시간없어서 빠르게 넘어가셔서 못적음
• document.write(''); 페이지를 싹다 덮어씀 쓸때 주의
• addeventlistner

//version 01
element.addeventlistner('click', myFunction);
function myFunction() {
   document.getElementByID("demo").innerHTML = "Hello, World!"
}
// version 02
element.addeventlistner('click',function() {
   document.getElementByID("demo").innerHTML = "Hello, World!"
});

※ id : identification (단 한개만 가능)
class : 군집. 어떠한 특성을 가진, 그 특성을 공유하는 것들 (여러개 가능)
※ 런타임 환경 (편집됨)

리액트

• mkdir dreamCodingReact 터미널에서 폴더 만드는 방법

• 스트릭모드 개발할 때 경고나 원인을 받을 수 있도록 하기 위해 씀 배포할 땐 자동으로 꺼짐

• JSX 문법 주의할 점

  • 하나의 태그만 반환되므로 꼭 부모 태그로 감싸줘야한다. 빈 태그로 감싸줘도 괜찮다.
  • class가 아니라 className 라고 속성을 줘야한다.
  • 자바스크립트 코드가 가능하다. 다만 {} 안에 써줘야 한다.

• JSX 사용하기

  • js 문법을 사용하기 위해 중괄호 안에 실행할 것들을 써준다.
  • map 메서드를 활용해서 중복을 줄여준다. 이때도 중괄호를 쓰는데 유의
    

import logo from "./logo.svg";
import "./App.css";

function App() {
  const name = "재창";
  const list = ["딸기", "바나나", "사과", "포도"];
  return (
    <div className="App">
      <h1>{`Hello, ${name}`}</h1>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

• 컴포넌트 파일이라면 .jsx를 붙여주는 것이 좋다.

• 컴포넌트 components 폴더를 따로 만들어서 옮겨준다.
  

• 꿀팁
  💡 새로운 파일을 만들었을 때 rfc, rfi라고 입력하고 엔터를 치면 HTML에서 ! 탭을 누른 것 처럼 기본 틀을 만들어 준다.

  💡 box shadow generator 라는 사이트에서 알맞은 css 코드를 얻을 수 있다.

• components를 여러개 사용할 수 있다.
  

• props

  • 컴포넌트의 속성으로 원하는 키와 값을 명시해주면, 키와 값들이 props 라는 객체로 전달된다. 외부로부터 전달받은 속성을 이용해서 UI에 표현해 준다.
  • 동일한 컴포넌트를 재사용할 수 있다.