민혁이의 IT스토리

Intro지금까지 JSX를 가상 DOM 객체로 변환(createElement)하고, 브라우저가 한가할 틈을 타 이 뼈대를 바탕으로 화면을 그려내는 동시성 렌더링 과정(workLoop, performUnitOfWork)을 구현했습니다.하지만 실제 웹 애플리케이션의 화면은 멈춰있지 않습니다. 버튼을 누르면 숫자가 변하고, 탭을 이동하면 새로운 창이 뜹니다. 만약 상태가 변할 때마다 기존의 화면(DOM)을 처음부터 다 부수고 새로 만든다면 어떻게 될까요? 우리의 브라우저는 무거운 렌더링 비용을 감당하지 못하고 결국 멈춰버리고 말 것입니다. 이번 3편에서는 리액트가 기존의 화면 요소(DOM 노드)는 버리지 않고 재사용하면서, 바뀐 속성과 내용만 아주 영리하게 갈아끼우는 과정, 즉 가상 DOM 업데이트 체계를 ..

Intro지난 포스팅에서는 createElement로 가상 DOM(설계도)을 만들고, render 함수에서 재귀(Recursion)를 사용해 실제 브라우저 DOM에 노드를 그려보았습니다. 드디어 화면에 우리가 짠 코드가 렌더링되는 기쁨을 맛봤죠 하지만, 우리가 만든 초기 render 함수에는 아주 치명적인 문제가 하나 숨어있었습니다.// 이전 포스팅의 문제점: 한 번 시작하면 멈출 수 없는 렌더링function render(element, container) { // ... DOM 생성 ... element.props.children.forEach(child => render(child, dom));} 트리 구조를 순회하기 위해 재귀 호출을 사용했기 때문에, 트리가 엄청나게 깊고 거대해지면 브라우저는..

Intro"도대체 JSX는 어떻게 브라우저 화면에 나타나는 걸까?" 우리는 매일 리액트로 개발을 하지만, 정작 npm start 뒤에서 일어나는 일은 마법처럼 느껴질 때가 많습니다. 단순히 라이브러리를 가져다 쓰는 것을 넘어, 리액트의 블랙박스를 열어보고 그 내부 원리를 깊이 이해하고 싶었습니다. 그래서 결심했습니다. "직접 한번 만들어보자!" 이번 포스팅에서는 리액트의 가장 심장이 되는 두 가지 함수, createElement(설계도 그리기)와 render(실제 건축하기)를 바닐라 자바스크립트로 구현한 과정을 기록합니다. 핵심 개념Virtual DOM: 가벼운 설계도 우리가 작성하는 JSX(...)는 사실 HTML이 아닙니다. 결국은 자바스크립트 객체일 뿐이죠. 이를 우리는 Virtual DOM(가상 ..

메뉴를 잘 만들었다고 생각했는데.. 결국 에러가 발견되었습니다.다행이 코드적인 오류라 금방 고쳤지만 다시는 이런 실수를 하지 않기 위해기록하기 위해 이 글을 작성하게 되었습니다. ⚠️ 왜 발생하는가?React는 HTML DOM에 기본 속성 외의 값을 전달하려 할 때 문자열로 변환된 값만 허용합니다. const [ishover,setIsHover] = useState(false) const EnterMenu = () =>{ setIsHover(true) } const LeaveMenu = () =>{ setIsHover(false) } //true or false가 style.js로 props를 넘겨줌 하지만 위에 코드는 기본 속성이 아닌 값(bool..

오늘 개발 할 파트는 메뉴 입니다 목차 컨포넌트 분리코드 리뷰스스로 아쉬운점컨포넌트 분리header/├── _component\nav/│ ├── mainMenu/│ │ ├── MainMenu.jsx│ │ └── style.js│ └── subMenu/│ ├── SubMenu.jsx│ └── style.js├── Header.js└── style.js 설명 : 메뉴가 헤더 부분에 위치하고 있기 때문에 헤더에서 부터 하위 컨포넌트도 뻗어 나가도록 파일을 분리하였습니다. header -> nav -> menu(Main,Sub) 코드 리뷰 내용 : 헤더 컨포넌트는 로고,메뉴,로그인/회원가입 등을 담고 있습니다. 그중에서도 메뉴는 로 되어있는 부분입니다. ..

전 게시물 typers-client/│├── node_modules/ # 설치된 의존성 모듈들├── public/ # 정적 파일 (HTML, 이미지 등) 위치│├── src/ # 소스 코드 디렉토리│ ││ ├── global/ # 전역 스타일 및 공통 설정│ │ ├── common.js # 공통 유틸리티 함수 또는 설정│ │ ├── global.jsx # 전역 스타일 컴포넌트│ │ └── theme.js # 테마 색상, 폰트 등 정의│ ││ ├── moduls/ # 전역상태..

드디어 이제 본격적으로 개발에 들어갈 수 있게 되었습니다!당장 코딩부터 시작하면 좋겠지만, 그렇게 진행하게 되면파일 경로가 꼬인다거나, 필요한 모듈을 매번 그때그때 설치해야 되는 등의 문제가 생길 수 있습니다.이러한 이슈를 방지하기 위해, 개발을 시작하기 전에폴더 구조를 미리 세팅하고, 필요한 모듈이나 라이브러리를 미리 정해서 설치하는 작업을 프로젝트 세팅이라고 하는데요?오늘은 제 담당인 프론트쪽 프로젝트 세팅을 하는 과정을 기록하려고 합니다. 프로젝트 세팅라이브러리 설치 라우팅 (페이지 이동)라이브러리설명설치 명령어 react-router-dom SPA에서 페이지 전환을 도와주는 라우팅 라이브러리 npm install react-router-dom 상태 관리(redux)라이브러리설명설치 명령어red..