Virtual DOM 1.브라우저의동작 DOM tree 생성 : 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성 render tree생성 : css파일과 inline 스타일을 파싱 DOM + CCSOM 렌더 트리를생성 Layout(reflow) : 각 노드들의 스크린 에서의 좌표에 따라 위치결정 Paint (repaint) : 실제 화면에 그리기 문제는, 변화가 발생하면 렌더트리가 재 생성 된다는것 2.Virtual DOM의 등장 SPA를 사용하면서 즉각적으로 DOM tree를 변경할 일이 많이 생김, 그래서 최적화가 필요해져서 등장하게 된것이 버츄얼 돔이다. DOM 의 사본, 복사본이라고 할 수 있다. 진짜 DOM과같은 속성들 class등을 가지고 있지만 실제 DOM이 가지고 있는 ap..

구현한 첫번째, 그리고 두번째 화면은 다음과 같다. 1.라우터를 사용해 다른 페이지로 자료를 props로 전달해 만든방식 2.한페이지내에서 modal로 동작하는방식 2가지를 만들었다. 영상채팅방에서 부가기능으로 쓰려고 로직만 짜려고 만들다가 설명을위해 아예 만들어버리는게 편할거 같아서 만들었는데 추후 어디 이식해서 사용하기 좋을거같다. 물론 급하게 대충만들어서 useState도 막 짜놓긴했지만 필요할때 가져다 사용하면 좋을거같다. - 배열랜덤셔플 - 타이머함수 두가지를 다른곳에서 가져와서 사용했기에 그역시도 나중에 참고하면 좋을듯한 로직이다! https://github.com/flykimjiwon/react-Liargame

npx create-react-app shop 명령어처서 새로운 프로젝트 만들어준다. 참고)yarn이라는걸 쓰면 정말좋다. https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 터미널을 열어서 설치해 주도록하자 yarn을 설치하고나면 add같은걸 사용해서 npm대신 설치 할 수 도 있다. 여튼 부트스트랩을 사용하러가보자 react를 사용하면 react부트스트랩을 사용하면된다. 같은거긴함 https://react-bootstrap.github.io/ 이와같이 설치완료한다. 프로젝트내에서 vs코드를열어 설치해줘도 ..