Tech.log56 Pre-rendring[SSR vs CSR _2] 기존 SPA의 문제점 1. 로딩 속도 CSR에서의 문제점은 html파일과 스타일시트(css), 상대적으로 큰 js파일이 하나 존재하는데, 모든 페이지의 내용을 첫 로딩때 모두 불러오는것이다.내가 볼 필요도 없는 파일까지 모두 불러오기 때문에 로딩 시간이 느려진는 것이다. 2.SEO 서버의 렌더링과 다르게 js가 로딩된 이후 js 동작에 따라서 dom이생성된다. 이는 크롤러가 빈껍데기인 템플렛 상태에서 내용들을 파악 하지 못한다는 것이다. 이는 검색엔진에 매우 불리하다. Pre-rendring는 서버 렌더링 보다 조금 더 복잡한 분리 기술이다.이는 어플리케이션에 첫 진입 시간을 개선하고자 하는 렌더링 방식이다. build time시간동안 static HTML files 제공한다. 그 이후에 어플리케이션에 .. 2021. 4. 12. SSR vs CSR ? 그리고 .. MPA (Multiple Page Application) 사용자가 페이지를 요청할때 마다, 필요한 UI와 데이터를 HTML로 파싱해서 보여주는 웹 어플리케이션 SPA (Single Page Application) 하나의 HTML을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 웹어플리케이션,연속되는 페이지 간의 사용자 경험을 향상시킨다. 정통적인 방법으로 구분을 하자면 MPA는 SSR 렌더링 방식 , SPA은 CSR 렌더링 방식이다. 자세히 살펴보자. SSR 브라우저가 요청할때마다 해당 페이지 관련 HTML,CSS,JS,데이터를를 받아와 렌더링 한다. 브라우저:"회원 페이지 갈래~" 서버:" OK, 이거 회원 정보 디자인이고 ,이건 버튼이고, 회원 관런 정보 데이터 다 만들어서 준다야!".. 2021. 4. 12. [Interfaces vs Type Aliases] Type Aliases 비교적 Interfaces 처럼 작용한다. 이 둘은 무슨 차이가 있을까 ? Interfaces는 여러곳에서 새로운 이름(new name)을 만든다. 반면 Type Aliases 유일(unique)하다. 두 코드를 비교해 보자 //interface 예시 interface Window { title: string } interface Window { ts: import("typescript") } const src = 'const a = "Hello World"'; window.ts.transpileModule(src, {}); 해당 코드를 사용하면, 기존에 존재하는 Window interface에 'ts' 라는 새로운 field를 추가하게 된다. 그러나 //type예시 type Wi.. 2021. 4. 10. [타입스크립트, 왜 쓰니 ?] 타입스크립트란 ? - 말그대로 자바스크립트에 type을 부여한 형태이다.타입스크립트는 자바스크립트와 달리 브라우저에서 파일을 변환(compile) 과정을 거쳐야한다. 까지 해주면서 사용하는 걸까 ? 1. 에러 방지 2. 코드 자동 완성과 가이드 개발 툴의 기능을 최대로 활용할 수 있다. 이런 함수가 있다고 가정하자. - total이라는 값을 String으로(toLocalString()을 사용하여) 변환 해주고 싶다고 가정하자. 자바스크립트는 total의 자료형을 인지하지 못한다. 따라서 VSCode는 어떤 메소드를 써야할지 감을 잡지 못한다. - 타입스크립트를 보아라, 이미 타입을 명시해주었기 때문에 VSCode는 관련 메소드를 단번에 찾을 수 있다. 출처:왜 타입스크립트를 써야할까요 ? 2021. 4. 5. 이전 1 ··· 11 12 13 14 다음
