본문 바로가기

전체글54

CSR SSR 단점 보완 방법 정리해보기 지난 시간에 CSR, SSR의 개념과 장단점에 대해서 정리해 보았는데, 그렇다면 이 둘의 단점을 개선하기 위한 방법에는 어떤 것들이 있는지 정리해보려고 한다. CSR 단점 보완 방법 먼저 CSR은 초기 로딩 속도가 느리다는 점과 SEO가 불리하다는 점이 단점이다. 이것을 개선하기 위해서는 다음과 같은 방법들을 이용하여 개선할 수 있다. 1. Code Splitting, Tree-Shaking 이 방법들의 초기 로딩에 필요한 javaScript의 크기를 줄여주어서 로딩 속도를 개선할 수 있도록 만들어준다. Code Splitting은 말 그대로 코드를 쪼갠다는 의미이며, Tree-Shaking은 나무를 흔들어 죽은 나무잎을 떨어트리는 것처럼 사용되지 않는 코드를 제거하기 위해 사용되는 용어이다. CSR의 .. 2022. 11. 20.

CSR SSR 동작 단계 | CSR SSR 개념적 차이, 장단점 사전 개념 정리 CSR과 SSR에 대해 공부하기 전에 알아두어야 하는 사전 지식에 대해 먼저 정리해보려고 한다. 1. MPA와 SPA ▶ MPA (MultiPage Application) 전통적 페이지 Lifecycle, 탭을 이동할 때 (링크 클릭 시) 마다 서버로부터 새로운 HTML 파일을 받아와서 페이지 전체를 새로 렌더링 하는 방식 렌더링 방식으로 SSR을 사용 ▶ SPA (Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션, 페이지가 전체적으로 렌더링 되지 않고 필요한 부분만 동적으로 렌더링 되는 방식 렌더링 방식으로 CSR을 사용 2. SPA 사용까지의 웹의 역사 ▶ 예전 Static Site(정적인 페이지)로 주로 구성되어 있음 방식 서버에 이미 잘 만들어진 .. 2022. 10. 9.

React 프로젝트 githubPages로 배포하기 프로젝트를 다른 사람도 볼 수 있도록 배포하는 사이트(깃헙 페이지, netlify, aws...)는 여러 곳이 있지만, 그중에서도 githubPages로 배포하는 방법을 주로 사용한다. 내가 생각하는 githubPages의 장점은 다음과 같다. github을 이용하고 있다면 별도로 사이트 가입필요 없음🙅🏻‍♀️ 도메인을 구입할 필요가 없다면 무료!😃 Github에서 블로그를 운영할 때도 githubPages를 사용하는데, 개인적으로 블로그는 그 방법보다는 이미 만들어진 플랫폼을 사용하는 것이 더 편한 것 같다. githubPages는 블로그 외에도 우리 프로젝트의 repository를 웹페이지로 배포할 수 있다. 오늘은 그 중에서도 React 프로젝트를 배포하는 방법을 포스팅해보려고 한다. ⚡ 프로젝트와.. 2022. 6. 20.

[React] Coin Tracker - 값 양수, 음수 색상 다르게 나타내기 구현하게 된 이유? 노마드코더 챌린지를 도전하던 중에 주식이나 코인 앱에서 보이듯이 가격이 올라가면 빨간색으로 내려가면 파란색으로 표시를 해보고 싶어졌다. 어떤 방법을 쓰면 좋을지 구글링을 해보다가 적절한 방법이 없어서 고민하던 중 slack 채팅방에 나와 비슷한 고민을 하던 사람이 질문글을 올렸고, 어떤 분이 Math.sign을 활용하면 될 것 같다는 의견을 주셔서 바로 적용해보았다. 하지만 언제나 그렇듯 한 번에 성공하진 못했고😥 어떤 실패를 했었는지, 결국 어떻게 구현했는지 기록해보려고 한다. Math.sign( ) ❓ 주어진 수의 부호(+/-)를 반환해주는 함수. 단 제공한 수가 0이라면 +0/-0을 반환한다. 값이 양수 : 1을 반환 값이 음수 : -1을 반환 값이 양의 0 : 0을 반환 값이 .. 2022. 5. 26.

이전 1 2 3 4 5 6 7 ··· 14 다음

티스토리툴바