👋 들어가며이 글은 DOM과 React의 Virtual DOM을 정리한 글입니다.아래 영상을 참고하여 내용을 정리하였습니다.https://youtu.be/N7qlk_GQRJU?si=QllTNBN6z2JOuQ-n 🌲 DOM(Document Object Model)HTML을 변환한 객체 트리구조를 DOM이라고 한다. 🔁 일반 DOM 업데이트 과정일반적으로 자바스크립트가 DOM을 수정하면브라우저는 이를 업데이트 하기 위해 Critical Rendering Path가 다시 실행된다.즉, DOM이 변경될 때마다 Reflow와 Repaint 과정이 발생하게 된다.Reflow: 레이아웃을 다시 계산하는 과정 (레이아웃 과정이 다시 진행)Repaint: 시각적인 스타일이 변경되는 과정 (페인팅 과정이 다시 진행)..

리액트에서 배열을 렌더링할 때는 key 속성을 지정해야 한다.그렇지 않으면 아래와 같은 경고가 발생한다.Warning: Each child in a list should have a unique “key” prop. 🧐 key는 무엇일까?const users = [ { id: 1, name: "하하" }, { id: 2, name: "호호" }, { id: 3, name: "히히" },];const UserList = () => { return ( {users.map(user => ( {user.name} ))} );}key는 리액트가 각 요소를 고유하게 식별할 수 있도록 하는 값이다.상태가 변경되었을 때 불필요한 DOM 업데이트를 줄이고,변경된 부..

더보기01. 7주 차 (9/2 ~ 9/6)✅ 7주차 진행React 웹 개발 시작하기React로 데이터 다루기코딩 테스트 문제 풀이데일리 팀 미팅위클리 페이퍼 작성멘토링보충학습👀 후기강의 - React 웹 개발 시작하기저번 주부터 듣기 시작했던 리액트 웹 개발 시작하기 강의를 모두 들었다.useState 위주의 내용이었고, 마지막에는 S3로 배포하는 방법까지 다뤘다. 다만 내가 예전에 AWS를 가입해 두어서 바로 유료로 전환되는 바람에직접 실습을 따라해볼 수는 없었지만 강의 내용을 보면서 최대한 이해할 수 있게 정리만 했다.나중에 실제로 배포할 일이 생기면 꼭 활용해 봐야겠다. 강의 - React로 데이터 다루기React로 데이터 다루기 강의에서는 제공해 준 실습용 API 주소를 사용해서 데이터를 가져오..

🧐 AJAX란?AJAX는 Asynchronous JavaScript and XML의 약자로자바스크립트를 사용해서 서버와 비동기적으로 데이터를 주고받는 기능을 말한다.AJAX는 브라우저가 제공하는 XMLHttpRequest 객체를 통해 동작한다.이름에 XML이 들어가 있지만, 실제로는 XML 대신 JSON 형식을 더 많이 사용한다. 🚀 AJAX의 등장 배경과 장점🔎 등장 배경AJAX가 등장하기 이전의 웹페이지는일부 내용만 바꾸고 싶어도 전체 페이지를 다시 로드해야 했다. 📌 문제점 (AJAX 이전)화면 깜빡임 → 전체 새로고침으로 사용자 경험 저하불필요한 데이터 전송 → 변경하지 않아도 되는 HTML까지 전송 AJAX는 위와 같은 문제를 해결하기 위해 등장했다.AJAX는 서버로부터 필요한 데이터만 ..

⏱ 자바스크립트 비동기 처리 (setTimeout)// 1번let num = 1;// 2번setTimeout(() => { num = 2;}, 0);// 3번num = 3;console.log(num);위 코드를 실행하면 console.log(num)은 무엇을 출력할까?console.log(num) // 3결과는 3이 출력된다.그 이유는 setTimeout이 비동기 함수이기 때문이다. ⛓️ setTimeout 실행 흐름1. 동기코드콜 스택(Call Stack)에 들어간 즉시 실행된다.1번 (let num = 1), 3번 (num = 3), console.log(num)이 순서대로 콜 스택에 들어가서 실행된다.2. 비동기 코드setTimeout 같은 비동기 함수는 호출되면 잠깐 스택에 올라왔다가, 바로 ..

더보기01. 6주차 (8/25 ~ 8/30)✅ 6주차 진행비동기 자바스크립트자바스크립트로 리퀘스트 보내기React 웹 개발 시작하기스프린트 미션 4코딩 테스트 문제 풀이데일리 팀 미팅위클리 페이퍼 작성멘토링보충학습👀 후기강의 - 비동기 자바스크립트Promise 객체, async/await, then 메서드 사용법 등에 대해 학습했다.강의를 통해 비동기 실행 흐름에 대해 어느정도 이해할 수 있었고,병렬 처리와 같이 헷갈렸던 부분들은 멘토링을 통해 보완할 수 있었다. 강의 - 자바스크립트로 리퀘스트 보내기AJAX 개념과 fetch(), axios 라이브러리에 대해 학습했다.예전에 axios를 사용해본 경험이 있었지만,당시에는 fetch와 비교했을 때 어떤 이점이 있는지 잘 몰랐었다.이번에 다시 axios ..