과제+기술 면접을 보고 부족하다고 생각한 부분과 의문점이 들었던 부분을 복습/학습했다.
정적웹? 동적웹? ssr? csr?
화면이 이미 만들어져 있냐? 요청하는 즉시 만들어지냐?
정적 웹(ssg) - 이미 만들어진 화면을 보여줌
동적 웹 - 클라이언트 요청에 따라 실시간 데이터가 반영된 화면을 보여줌
요청 즉시 만들 때 어디에서 만드냐?
ssr
- 서버에서 html에 데이터 반영해 만든 후 html파일 통째로 클라로보낸다.(렌더링 준비완료)
- 장점: 검색엔진 최적화에 유리
- 단점: 웹이 발전해 복잡해짐에 따라 수많은 요청에 서버 부하가 걸리고, 페이지 깜빡임으로 사용성이 저하됨에 따라 나타나게 됨. TTV와 TTI의 차이가 생김
=> csr등장
csr
- 클라이언트 단에서 화면 그리고 데이터 불러서 적용
- 비동기 필수(ajax) 오직 js만
- 정적 파일 불러오는 서버와 데이터 처리하는 서버를 따로 둘 수 있게 됨
- 장점: 부드러운 사용성, 서버부하를 줄여줌, 불필요한 렌더링을 줄임
- 단점: 빈 html에 의한 검색엔진최적화 불가능
=> 여러 대안 중 pre-rendering을 도와주는 nextJS를 사용할 수 있음.
csr+ssr(nextJS)
- 각 페이지가 처음 로드될 때 정적으로 만들어진 html이 불러지고, 컴포넌트가 연결됨.
- 이미 첫 로드 된 페이지로 다시 이동할 땐 라우트로 동작됨.
OOP와 FP의 차이? 프론트엔드에서의 OOP와 FP란?
- OOP는 코드를 객체를 이용해 분리하고, FP는 함수를 이용해 분리한다.
- 자바는 객체지향언어여서 OOP를 주로 하고, js는 멀티 패러다임이어서 OOP도, FP도 할 수 있다.
- 하지만 설계 구조를 OOP로 하고 로직 구현은 FP로 하는게 가장 이상적이다.
- 리액트의 클래스 컴포넌트는 객체지향과 가깝고, 함수 컴포넌트와 훅은 FP에 가깝다.
디자인 패턴이란? 리액트의 디자인 패턴과이 차이점?
- 일반적인 디자인 패턴과 리액트의 디자인 패턴은 의미하는게 다르다.
- 디자인 패턴은 OOP을 할 때 재사용성을 위해 클래스와 인스턴스를 어떻게 다루는지에 대한 방법들을 말한다.
- 리액트의 디자인 패턴은 컴포넌트를 재사용하기 위한 설계 구조를 말하는 것.
#프론트엔드