WEB/일반13 [WEB] React, SSR(Server Side Rendering),CSR 차이, 백신 서버는 왜 터졌을까... 어제 썼던 SEO에 SSR이 유리하다. 라고 하면서 CSR,SSR에 대해서 포스팅 한다고 했었습니다. 두개를 알아보겠습니다. 1. SSR (Server Side Rendering) 위의 사진처럼 SSR의 장점은 CSR 보다 먼저 사용자에게 페이지를 보여줄 수 있다는 점입니다. 처음에 페이지를 켰을때, react를 실행시키고 js를 dom으로 변환해서 보여주기까지 시간이 걸린다고 했습니다. 그러면 그동안 사용자는 빈 페이지만을 보거나, 로딩페이지를 보고 있어야 합니다. 그런것보다는 페이지의 일부를 보는것이 UX가 좀 더 좋다고 느낄 수 있습니다. 1. 서버는 미리 넣어둔 HTML 파일을 렌더링 할 준비가 됐다고 response 합니다 2. 브라우저가 OK라고 하고 HTML페이.. 2021. 7. 20. [Web] React, Virtual DOM, Diffing algorithm, react fiber, 반복 element에 key가 필요한 이유 지난번에 React는 Virtual DOM을 이용해서 실제 DOM을 사용하는것보다 좀 효율적으로 렌더링 할 수 있다고 했습니다. Browser DOM은 browser의 object 입니다. Virtual DOM은 뭘까요? Virtual DOM 특징 : 1. RVM은 Real DOM의 가벼운 표현이라고 보시면 됩니다(lightweight) 2. js object로 메모리 내에 트리구조의 자료구조로 저장되어 있습니다. react app 메모리 내에서 계속 유지되고 있으므로, 필요할 때 언제든 쉽게 수정이 가능합니다. Browser DOM은 새로고침을 해야해서 속도 차이가 굉장히 심하게 납니다. 모~든 React의 수정사항은 가상 DOM에 먼저 반영 됩니다. 그 이후에 Virtual DOM은.. 2021. 7. 17. [WEB] js docs에 기여를 했습니다. 캬캬캬!!! 행복한 추억 요즘은 DOCS를 시간날때 읽고 있습니다. 다른 글들을 찾아보면 대부분 docs에서 번역해서 올려준 정도더라구요. 가끔 예제를 볼 떄 말고는 docs가 정확한것 같습니다. 또한 자신감이 생기고요. 내 말에 믿음이 생기잖아요? 저번에 포스팅을 하면서, 구조분해 할당에 대해서 찾아봤습니다. 여기가 한국이라 그런지, 한국어로 먼저 나와서 한국어로 읽었습니다. 근데 예제를 아무리 봐도 잘 와닿지가 않아서, 영어로 봤습니다. 그랬더니 아니 !!! 오타가!!! 외국어 example이 훨씬 와닿게 되어있던것입니다!!!!! 그래서 바로 신고를 했습니다. pr이 accept이 되고, merge가 되었습니다 짞짞짞!!!! 최초로 좀 큰 오픈소스에 기여를 했습니다!! js mdn에 기여를 했어요!!!! 이전에 이렇게 되.. 2021. 7. 17. 이전 1 2 다음 728x90
