매일 공부한거 기록하기

useEffect() 리액트 요소 트리 렌더단계 가상돔 변경사항 파악 단계 -> 커밋단계 실제돔에 반영하는 단계 변경사항 파악하기 위해 가상돔을 상요함 가상돔은 리액트요소에서 부터 만들어짐 이전의 가상돔과 비교함 실제 돔의 변경사항을 최소화 하기 위한 과정임 ㅎ

리액트는 속성값이나 상탯값으로 관리해야함 리액트가 값에 변경 사실을 알려면 상태값으로 관리를 해야함. React.memo React.createPortal (modal)을 위해서 사용

전통적인 방식에서 MPA는 클라이언트가 초기요청을 보내면 서버는 HTML을 보내고 페이지 전환을 요청하면 다시 서버에서 HTML을 보내서 Page Reload의 반복 단일 페이지 애플리케이션에서는 필요할때만 데이터를 요청해서 받아옴. 페이지 전환은 자체적인 라우팅 처리를 함. SPA가 가능하기 위한 조건 1. 자바 스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단 브라우저는 서버로 요청을 보내지 않아야함. 2. 브라우저의 뒤로가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 이때도 브라우저는 서버로 요청을 보내지 않아야함. 브라우저는 자바스크립트에서 알려줘야함. 3. 위 조건을 만족시키는 브라우저API -push State, replaceState함수 -> 자바스크립..

일반적인 CSS파일 css-module 로 작성 Sass로 작성 css-in-js로 작성 1.일반적css:컴파일된 css에서 변수명이 겹치면 이름이 충돌하는 문제가 발생함. 2. css-module사용:css-module을 사용하면 이름 충돌을 막을 수 있다. 3.Sass사용:sass에는 node-sass패키지를 설치해야함. npm install node-sass 4. css-im-js npm install styled-components

01. create-react-app 으로 시작하기 환경을 구축해줌. 터미널에 npx create-react-app 프로젝트명 입력. npx create-react-app 프로젝트명 create-react-app은 서버사이드 렌더링을 지원하지 않음. create-react-app 단점 : 빌드시스템 eslint 설정을 거의 변경 할 수 없음. 서버사이드 렌더링이 필수, 설정변경 필요한 프로젝트라면 Next.js를 선택. 02. create-react-app 명령어입력 public 폴더, src폴더 package.json 파일 등이 설치 됨. package.json에서 create-react-app version up될때는 "React-scripts"의 version 이 올라갔을때가 대부분. browser..