[React] Day_21 데일리 정리

 

오늘 요약 : 아 제발 그만... 개인프로젝트좀 하자.

 

 

아무도 괴롭힌적 없지만.. 알람이 울리기 전 깨어난 것에 분한 나머지

10월까지분의 코드카타를 우다다다 끝내버리고

개인프로젝트 뚱땅뚱땅 하다가?

달리기반 2시간 특강에.... (할많하않🤯)

하지만 피자로 갑자기 다시 풀렸죠?

그래서 얼렁뚱땅 써보는 특강정리~

(개인프로젝트는 다음주에 보자구요? >.ㅇ)

 

 

 

 

싱나는(?) 특강정리 ^-^)b

 

달리기반 특강정리

이론 + 실습 = ?????

기억해... 두개가 짬뽕되면 시간이 오바된다는것을... 주륵

 

간단한 용어설명

 

API

서로 다른 시스템이 서로 소통하는 방법 or 창구 (= 메뉴판 생각하기.)

 

DOM

웹 페이지 문서를 구성하는 요소를 나무(Tree) 구조로 표현한 객체

(HTML를 JS로 브라우저가 제어할 수 있게만들어줌)

 

BOM

문서 이외의 모든 것을 제어하기 위해 제공하는 추가 객체

 

Event

브라우저에서 사용자가 웹 페이지와 상호작용할 때 발생하는 사건

 

 

 

WEB API

브라우저가 웹 어플리케이션이 다양한 작업을 수행할 수 있도록 제공하는 모든 API를 포괄하는 용어.

- Dom api (웹페이지 요소조작)

- Network api (서버와 통신)

- Storage api (브라우저 내 데이터 저장 및 관리)

- File api (파일 읽고쓰기)

- Graphics api (웹 그래픽 처리)

- Audio, video api (웹 오디오/비디오 제어)

- Device api (기기 상태 접근)

 

Local Storage (로컬 스토리지)

브라우저 내에 영구적으로 데이터를 저장할 수 있는 저장소 중 하나.

특징 (3)

• 문자열 형식으로만 데이터가 저장 → 배열, 객체의 경우 반드시 문자열화(json 이용)!
• 영구적 저장소로 사용자가 삭제하지 않는 한 새로고침해도 유지. 
• 브라우저 내에 저장되는 것으로 서버 요청 없이 데이터 사용이 가능하다. 

실...습

// 이 문제는 브라우저상에서 실습을 진행합니다.
// 1. key 를 "test-num" 으로 하고 숫자 10 을 로컬스토리지에 저장해 보세요.
// 2. 저장했던 test-num 데이터를 가져와서 타입이 number 인지 확인해 보세요.
// 3. 아래 영화 데이터를 movies 라는 key 로 로컬스토리지에 저장해 보세요.
// [{id: 1, title: "어벤져스1"},{id: 2, title: "어벤져스2"}]
// 4. movies 데이터를 가져와서 배열 타입으로 movies 라는 변수에 할당해 보세요.

3번 하다가 못했다.. 시간이 없어서... (줄윽줄윽)

 

 

브라우저 핵심구조

 

 

Window

브라우저의 전역 객체. JS 코드에서 생략 후, 바로 속성에 접근가능

모든 브라우저 관련 API 와 상호작용이 가능한 중앙허브 역할수행

// window.document --> document
document.getElementById("Element-ID")

// window.localStorage -> localStorage
localStorage.getItem("keyName")

// window.location -> location
location.href = "https://google.com" // 구글 홈화면으로 이동

 

 

DOM

 

DOM Tree에서, 각각의 요소 = Node(노드) → (HTML를 트리 구조로 구조화된) 브라우저가 제공하는 객체

 

DOM 가능한 것?

JS, DOM API를 통해 페이지 요소를 조작가능 ( = CRUD)

 

DOM → 브라우저가 html 문서를 읽으면 생성

 

아래부터 실습인데... index.html를 냅다 다 가져오기엔 너무 많아서

JavaScript 부분만 우선 따오겠습니다.. 궁금하면 나중에 저 찾아오셈 ㅇㅇ 예제 드릴게요.

 

 

실습 문제 : querySelector로 요소 선택하기

 -  실습 : querySelector로 div 의 자식인 img 태그를 선택해 보세요.

      const reactImg = document.querySelector('img[alt="React"]');
      console.log("React 이미지 선택:", reactImg); // 선택된 img 태그 출력
      // 실습 부분
      const selectedImg = document.querySelector("div img")

 

실습 문제: 요소 추가하기

- 실습 1 : 새로운 요소를 parent의 마지막 자식요소로 추가해 보세요.

- 실습 2 : 새로운 요소를 parent의 두 번째 요소로 추가해 보세요. " Hint : parent.children 은 [ <p>, <p>, ... ] 형식 "

      const parent = document.getElementById("parent");
      const addElementButton = document.getElementById("addElementButton");

      addElementButton.addEventListener("click", () => {
        // 새로운 요소 생성
        const newElement = document.createElement("p");
        newElement.textContent = "appendChild로 추가된 문단입니다.";

	// 실습 1
        parent.appendChild(newElement)
      });

      insertBeforeButton.addEventListener("click", () => {
        const newElement = document.createElement("p");
        newElement.textContent = "insertBefore로 추가된 문단입니다.";
	// 실습 2
                parent.insertBefore(newElement, parent.children[1]);
      });

 

실습 문제 : 카드 보이기/숨기기 토글링

- 실습 : "카드 보이기/숨기기" 버튼을 클릭했을 때, 카드가 보이는 상태면 숨기고, 안보이는 상태면 보이게 해보세요

        const card = document.getElementById("card");
        const toggleBtn = document.getElementById("toggleButton");
        toggleBtn.addEventListener("click",() => {
            card.classList.toggle("hidden");
        });

 

실습 문제 : 스타일 조작해보기

- 실습 : 스타일 변경 버튼 클릭 시, [width = 200px, height = 200px, backgroundColor = "lightgreen"] 으로 변경해 보세요.

      const box = document.getElementById("box");
      const changeStyleButton = document.getElementById("changeStyleButton");

      changeStyleButton.addEventListener("click", () => {
        box.style.width = "200px";
        box.style.height = "200px";
        box.style.backgroundColor = "lightgreen";
      });

 

실습 문제: 이벤트 핸들러 어트리뷰트 방식 → 이벤트 리스너로 변경

- 실습 1 : 스타일 변경 버튼의 이벤트 핸들러 어트리뷰트 방식을 이벤트 리스너 방식으로 리팩터링 해보세요.

- 실습 2 : 스타일 변경 버튼 우클릭 시 "우클릭 했습니다."를 alert 처리 해보세요.  (Hint : 우클릭에 대한 이벤트는 contextmenu)

      function changeStyle() {
        const box = document.getElementById("box");
        box.style.width = "200px";
        box.style.height = "200px";
        box.style.backgroundColor = "lightgreen";
      }

        const button = document.querySelector("button");
        button.addEventListener("click", () => {
            const box = document.getElementById("box");
            box.style.width = "200px";
            box.style.height = "200px";
            box.style.backgroundColor = "lightgreen";
        })

        button.addEventListener("contextmenu", () => {
            alert("우클릭 했습니다.");
        });

 

실습 문제: 각 요소별 이벤트 리스너를 하나의 이벤트 리스너로 리팩터링

- 실습 : 위 JS코드를 삭제하고 이벤트 위임으로 리팩터링

        const itemList = document.getElementById("itemList");
        ul.addEventListener("click", (event) => {
            if (event.target === event.currentTarget) return;
            alert(`${event.target.textContent} 클릭됨`);
        });

 

 

 

 

 

마무리 - 와 ! 드디어 주말!

 

저 도란스뽀머를 보니 마치 고장난 나를 보는것..같ㅇ...아닙니다.

 

내일은 드디어 기대하고 기대하던 주말!

오랜만에 맛있는거 먹고 행복하게 주말 보내야지 히히 ^-^)v

(그러고 개인..프로젝트... 해야겠지? 히히🥲)

살려줘요.

 

 

오늘의 KPT 회고는요?

• Keep : 이제 나름 조금 이해했다고 딸깍 시전하는 림졍.. 건방져 조금?
• Problem : 자자 이제 새마음 새뜻으로 월요일에 개인과제 마저하기
• Try : 일단 모르겠고 잘게요 굳밤.

 

끝!