React

코드스테이츠 동기 분들 중 마음이 맞는 분들과 모여커리큘럼 프로젝트가 아닌 선행학습으로 수행해보기로 했다.지금까지 회의 두번을 하며 대략적으로 front/back 폴더 분리와git 연동 및 jira로 일정관리를 하기로 정한뒤,간단하게 그림판으로 프로젝트 구조를 그려 초

DOM 트리 생성ㄴ 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성render 트리 생성ㄴ css파일과 inline 스타일을 파싱하여 앞서 만든 DOM트리와 결합한다. (DOM+CSSOM)Layout (reflow)ㄴ 뷰포트 내 생성된 render 트

데이터 변경이 있는 웹페이지를 만들고 싶다.\+1을 해주는 버튼을 누르면 count숫자가 올라가는 코드를 써보자.페이지에 있는 데이터 부분이 변경되었을때 마다 DOM에 접근하여 직접 수정해주었을것이다. 데이터가 변경된만큼 사용자가 보낸 환경도 변경되어야 하기 때문이다.

React 16.8버전에서 클래스형 컴포넌트만을 사용할 때 부딪히는 수많은 문제들을 해결하기 위해서 나왔다.컴포넌트 상태 로직 재활용 어려움ㄴ 클래스 컴포넌트 만이 state을 저장할 수 있다 보니, 클래스를 주로 사용.=> 관심사 분리가 제대로 되지 않고 컴포넌트 간

완전히 비어있는 작업 공간에서 시작하여 모든 디펜던시를 설치하고 리액트 코드로 이루어진 모든 구성 파일을 가져온 다음 브라우저에서 사용할 수 있도록 변환하고, 몇가지 플러그인과 사용 방법을 소개한다.만들고자 하는 프로젝트 폴더로 가서 npm init -y를 실행한다.

영상링크 렌더링 브라우저 렌더링 렌더링 최적화에 들어가기 전에, 브라우저 렌더링이 어떻게 이루어지는지 먼저 보고간다. HTML을 파싱해서 DOM을 만든다 CSS를 파싱해서 CSSOM을 만든다 DOM과 CSSOM을 결합해서 Render Tree를 만든다 layout과 paint과정을 거친다 화면에 웹사이트가 렌더링된다. 리액트에서의 렌더링 리액트에...

거의 모든 CRUD 프로젝트를 한다면 만드는 것이있다.로그인/회원가입...기본중의 기본이지만, 이따금씩 react-form을 사용한다던지 쉽게 가는것 보단 react에서 제공해주는 hook과 렌더링 관계 라던지, prop전달, 컴포넌트 트리 관계를 이해하려면 직접 구현