0. 목차서론DOM(Document Object Model)이란?Virtual DOM이란?렌더링과 페인팅의 차이Virtual DOM의 Diffing 알고리즘실제 DOM의 수정은 어떻게 일어나는가?결론1. 서론프론트엔드 개발을 공부하면서 처음에는 “어차피 부모가 리렌더링되면 자식도 다 같이 리렌더링 되는 거 아닌가? 그렇다면 Virtual DOM을 쓸 이유가 뭐지?”라는 의문이 있었습니다.지금 생각해보면 그건 제가 React의 “렌더링(rendering)”과 브라우저의 “페인팅(painting)”을 명확히 구분하지 못했기 때문이었습니다. 이번 글에서는 그 과정을 정리하면서, DOM과 Virtual DOM, 그리고 실제 DOM이 어떻게 수정되는지에 대해 이해한 내용을 공유해 보겠습니다.2. DOM(Docum..

0. 목차초창기 React: 함수형 vs 클래스형컴포넌트의 한계Hook의 등장1. 초창기 React: 함수형 vs 클래스형React가 처음 나왔을 때, 컴포넌트에는 두 가지 방식이 있었습니다. 함수형(Function) 컴포넌트function Hello(props) { return Hello, {props.name};} 자바스크립트에서 함수가 호출되면, 그 실행 과정은 실행 컨텍스트(Execution Context) 라는 단위로 **스택(Stack)**에 쌓입니다. 실행이 끝나면 해당 컨텍스트는 스택에서 제거되고, 내부의 지역 변수와 매개변수도 함께 사라집니다.즉, 함수형 컴포넌트가 렌더링될 때마다:새로운 실행 컨텍스트가 스택에 생성되고,함수 내부에서 선언된 변수들은 그 안에 저장되지만,렌더링이 끝나면 ..

서론SPA의 정의 및 기본 개념SPA(Single Page Application)는 단일 HTML 페이지로 구성된 웹 애플리케이션을 의미합니다. 사용자가 웹 페이지를 탐색할 때, 전체 페이지를 다시 로드하지 않고 현재 페이지 내에서 필요한 콘텐츠만 동적으로 로드하여 빠르고 원활한 사용자 경험을 제공합니다. 이는 주로 JavaScript 프레임워크와 라이브러리를 활용하여 구현됩니다. SPA의 동작 원리기존의 다중 페이지 애플리케이션(MPA)에서는 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 HTML 페이지를 받아오고 전체 페이지를 새로 고칩니다. 반면에 SPA에서는 처음에 한 번만 전체 페이지를 로드하고, 이후의 페이지 전환은 서버와 비동기적 통신(AJAX)을 통해 필요한 데이터만 받아와 화면을..

현재 상황 위 화면은 현재까지 내가 구현한 학점 계산기 웹이다. 계산기의 과목명, 학점, 출석점수 등 모든 입력들은 Material UI의 TextField 컴포넌트를 사용하고 있다. 현재 계산기에는 학점을 정상적으로 계산하기 위해서 입력값에 대한 몇가지 유효 조건들이 존재한다. (과목명 중복 불가, 학점의 최소, 최대 점수 등) 그리고 위 유효성들에 대한 검사 로직은 이미 구현 되어있고, 저장 버튼을 눌렀을 때 유효 조건을 만족하지 않으면 예외처리 후 Alert를 띄우고 문제의 TextField로 focus하는 것까지 마친 상태이다. 목표 이번 포스팅에서 구현하고자 하는 것은 저장 버튼을 누르기 전에도 사용자가 잘못된 값을 입력했다는 것을 인지할 수 있도록 TextField의 error 속성을 이용하여..

오늘은 팀원들과 만든 쇼핑몰 사이트를 netlify를 이용해 배포해봤다. 여러가지 문제들이 있었지만 다행히 잘 해결하고 성공적으로 배포 했다. 먼저 본인의 프로젝트는 CRA로 만든 React 기반임을 알아두길 바란다. 1. GitHub 리포지토리 생성 프로젝트를 배포하는 단계까지 왔다면 당연히 해당 프로젝트의 리포지토리를 GitHub에 생성했을 것이다. 2. netlify 계정 생성 사이트를 netlify에 호스팅 할 것이기 때문에 netlify 계정을 만들어주면 된다. Develop and deploy websites and apps in record time | Netlify 계정 생성에 대해선 지난 옵시디언 배포하는 법을 포스팅 할 때 다뤘으니 참고 바랍니다. 옵시디언 노션처럼 페이지로 배포하는 법..