scss- 테일 윈드
ssr - 안함
클라이언트에서 모든 것을 처리하는 방식과는 다르게 웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 html 파일과 동적 코드를 같이 가져와서 보여줌
csr 사용했을 때보다 장점- 첫번째 페이지가 로딩이 빨라지는 장점이 있다.
모든 컨텐츠가 html에 담겨져 있기 때문에 조금 더 효율적인 seo를 할수 있다.
Q. 그럼 ssr 이 모든 것에 솔루션?
그것은 ㄴㄴ
문제점- 깜박임 이슈 사용자가 클릭을 하게 되면 전체적인 웹사이트를 다시 서버에서 받아오는 것이 동일 썩 좋지 않은 유저 경험
서버에 과부화가 걸리기 쉬움
사용자가 빠르게 웹 사이트를 확인 할수 있지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 클릭 했는데 반응이 없는 경우가 발생 할수 있음
spa - 사용자가 한 페이지 내에서 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로만 업데이트 하는 방식
⇒ 앵귤러의 방식은 spa
상황- 사용자들의 피시 성능이 점차 좋아지고 많은 것들을 무리 없이 처리 자스 표준화가 잘 되어져서 프레임워크가 나와서
csr - 쉽게 말하면 클라이언트 측에서 다 해 먹는 것
서버에서 인택스라는 html파일을 클라이 언트에 보내주면
굉장히 사이즈가 커서
문제점- 사용자가 화면을 보는데 오랜 시간이 걸린다
low seo → 검색 엔진들이 csr로 작성된 웹페이지를 분석하는데 많은 어려움을 겪고 있다.
TTI(time to interact)-
TTV( Time to view)-
csr-사용자가 웹사이트를 볼수 있음에 동시에 클릭을 하거나 인터렉션이 가능
어떻게 개선?
최종적으로 번들링 해서 사용자에게 보내주는 자바스크립츠 파일을 어떻게 하면 효율적으로
많이 분할해서 첫번째로 사용자가 보는 정말 필요한 아이만 보낼수 있을지 고민!!
ssr-사용자가 웹사이트를 볼수 있는 시간과 실제로 인터렉션 할수 있는 시간의 공백시간이 꽤 긴편
어떻게 개선?
사용자가 보고 인터렉션하는 시간의 단차를 줄이기 위해서 어떤 노력을 할수 있을지
우리가 어떻게 조금 더 매끄러운 ui ux를 제공 할수 있을지 고민!!
ssg (static site generation)
우리의 사이트는 정적인지 동적인지
서버에서 동적으로 데이터를 받아오는지
얼마나 자주 얼마나 많은 사용자가 있는지에 따라서
<백엔드>
npm >> 설정
yarn
pnpm
오류 TS2307: '@angular/core' 모듈을 찾을 수 없습니다.
error TS2307: Cannot find module '@angular/core'
https://github.com/angular/components/issues/8306
- 기본 앵귤러 파일 지우고 준비
- ng g component todo 투두라는 컴포넌트를 ng 명령어를 통해 생성 하겠다는 의미
- 레이지 로딩 - import { Component } from '@angular/core';
다이나믹 임폴트( 동적으로 임폴트를 하는 방법)
필요한 순간에 필요한 파일만 불러서 최적화를 하기 위한 임포트를 lazy 하게
<app-컴포넌트 이름></app-컴포넌트 이름>
- 앱 라우트
{ path: 'practice',
loadComponent: () => import('./pages/practice/practice.component').then(m => m.PracticeComponent)
}⬆️ import 가 한 블럭이고
프로미스 성격을 가지고 있어서 .then 으로 가지고 옴
Q. 프로미스 성격?
프로미스는 자바스크립트 비동기 처링 사용되는 객체 입니다.
자세한 것은 🔽
애로우 펑션이 들어가고
리턴하는 값은 해당 컴포넌트를 리턴 해주는 todo 실제 컴포넌트들이 들어감
비어있는 패스 일때 해당 투두로 갈수 있게 해줌
- tailwind angular
깔기 복붙 공식 홈 들어가서 깔면 됨
