분류 전체보기
-
[항해99 WIL] Virtual DOM && props && state네트워크/CS Study 2023. 6. 26. 10:10
Virtual DOM Virtual Dom이란? 랜더링을 하는 과정에서 서버 또는 클라이언트가 parsing한 DOM tree과 CSSOM을 가지고 render tree를 만들게 되는데 이후에 layout과 painting을 거쳐서 사용자가 가시적을 볼 수 있는 클라이언트가 완성이 된다. 이때 SPA의 경우에는render tree의 구조도 복잡하기 때문에 사용자의 액션마다 모든 DOM을 리랜더링할 수는 없다. 이때 사용되는 Virtual DOM은 먼저 사용자의 액션에 따른 변화를 계산하여 Node를 수정하고 페이지를 업데이트 하는과정에서 DOM tree와 차이점을 비교해서 차이가 나는 부분만 리랜더링하면서 UX를 최적화하기 위해서 고안된 DOM의 복제품이다. props props란?부모 컴포넌트에서 자식..
-
[은버지] React로 Pagination 구현하기 - 회고록-개발일지/항해 99 2023. 6. 26. 09:35
구현 한 내용 및 주요 회고 1. pagination 게시물 사이트에 가면 게시물을 넘길때 번호 클릭하고 그러는 것 라이브러리도 있지만 실제로 구조에 대해서 구현을 직접해보는 방식을 택해서 하나하나 뜯어보게 되었다. 2. axios를 이용해서 API 사용해 보기 (with postman) 잘 안된점 1. css 건드릴 대 main.jsx 다 삭제를 하고 index.html도 이것저것 건드렸었는데 사실 이거 건드리면 안되는 거였다. main.jsx를 건드리면 안되는 이유 root라는 놈이 담긴 index.html의 가 있는데 이놈자식을 main에서 import 해서 document~~로 실행을 하고 있다 그래서 건드리면 안됨 2. API연결하면서 정보를 불러 올때 몇가지 트러블슈팅이 있었다 API설정해서 ..
-
[WIL] 06.26 ~ 07.02개발일지/항해 99 2023. 6. 26. 08:57
한 일 CS study 글 3개 (호이스팅, 클로져, 스코프) 에대하여 조사 + javascript ES란? ES6 vs 5 알고리즘 문제 풀기 일일 3문제 이상 js 강의 5주차 완강 리액트 다루는 기술 20장 + 블로그 정리 완료 리액트 강의 기본편 완강 구현study (pagination) 숙제 (todo list) 할 일 cs study 글 3개 (타입스크립트를 쓰는 이유, 이벤트 버블링, 주소창에 주소 입력시에 일어나는 일) + virtual DOM , props state 리액트 redux 및 상태관리 공부 paginagtion UI 및 유효성 검사 완료하기 리액트 강의 기술자편 완강 리액트 다루는 기술 20장 + 블로그 정리 완료
-
[CSS] Display && Position프로그래밍/CSS 2023. 6. 24. 20:18
Dispaly display는 크게 block level 과 inline level로 나뉜다. ( 와 으로 예시를 들겠음) block level 한줄에 한개씩 나온다 컨텐츠의 크기와 상관없이 지정한 값에 맞춰 표현이 된다 inline level 한줄에 공간이 많으면여러개가 나온다 물건(contents) 자체만을 꾸며주기때문에 width height는 개무시하고 안에 들은 물건의 크기에 맞춰서 설정이된다. 안에 내용물(contents)이 있어야 표기된다 display 속성의 변경을 통해 block, inline을 바꿀 수 있다. inline-block Vs inline 내용물이 없으면 inline은 표시되지 않고 inline-block은 내용물이 없어도 표시되는 inline속성의 block이다. Posit..