지금은 급하게 본가인 대전에 내려와서 공부하고 있다.

집에서 공부할 때보다 뭔가... 공부하기 어려운 분위기라서 많은 양을 공부하고 있지는 못하는 것 같다 ㅜㅜ

노션에 따로 면접 관련 공부 및 정리를 하고 있어서 해당 내용을 TIL에 기록해 보려고 한다.

해당 내용은 어느정도 작성이 완료되면 포스팅으로 변경할 생각이다.

추가로, 몇몇 회사에 지원해보고 있는데 추가로 코딩테스트 요청이 왔다!

가비아 프론트엔드 직무로 지원했고, 코딩테스트는 1.20 ~1.21 중 편한 시간에 응시할 수 있다!

코딩테스트도 면접도 경험이 중요하기 때문에 최대한 많은 기회를 통해 도전해보고 싶다!

프로그래머스로 응시하면 돼서 따로 준비는 하지 않고 최대한 열심히 풀어볼 생각이다!

SPA(Single Page Application) & CSR

정의
하나의 HTML을 기반으로 JS를 사용해 동적(CSR)으로 컨텐츠를 변경하는 방식
장점
- 첫번째 로딩만 기다리면 화면 깜빡임 없이 좋은 UX를 제공할 수 있다.
- 서버에 요청하는 횟수가 적기 때문에 부담이 덜하다.
단점
- 모든 스크립트 파일이 로드될 때까지 기다려야 한다.
- 첫 로딩화면이 오래 걸린다.
- 검색엔진 봇이 크롤링하기 어려워 SEO가 좋지 않다.(구글봇은 JS지원)
왜?
- SPA과 CSR은 같을까?
  SPA은 하나의 Page를 사용하는 것이고, 콘텐츠를 변경하기 위해 CSR방식을 사용하는 것! CSR은 렌더링을 하기 위한 방법이다.
- 왜 SEO가 안 좋아?
  React를 생각해 보면 쉽다. 검색엔진 봇이 보는 HTML 파일은 id:app인 하나의 div만 바라볼 수 있다. 크롬 도구에서 javascript를 끄는 기능을 활성화해서 확인하거나, 페이지 소스보기를 통해 확인할 수 있다.
- SPA은 왜 쓰는 거야?
  초기 로딩이 오래 걸린다는 단점과 SEO최적화가 어렵다는 단점을 제외하면 콘텐츠 변경을 화면 깜빡임 없이 빠르게 변경할 수 있고, 서버의 부하를 낮춰 좋은 UX를 제공하는 방식이다. 전체 페이지를 렌더링 하는 것이 아니라, 필요한 부분만 변경할 수 있는 장점이 있다.
경험
- React를 활용한 SPA&CSR 구현 경험

MPA (Multiple Page Application) & SSR

정의페이지 이동하거나 새로고침 하면 전체 페이지를 다시 렌더링 한다.
여러 개의 Page로 구성된 애플리케이션. 사용자가 요청할 때마다, 서버에서 렌더링 된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
장점
- SEO에 유리하다
- 첫 로딩이 매우 짧다.(단, JS 스크립트를 모두 다운로드하기 전까지는 작동하지 않는다.)
단점
- 페이지 이동 시 전체 페이지가 다시 렌더링 되며, 화면 깜빡임이 있다.
- 페이지 이동 시 불필요한 부분도 렌더링 된다.
- 서버의 부하가 심하다.
왜?
- MPA은 SSR으로만 만들어야 하나? Next.js를 활용해 적절하게 SSR과 CSR을 활용할 수 있다.
경험
- Next.js를 활용한 SEO 개선 경험
  - Next의 GetServerSideProps를 활용한 SSR 구현
  - IP주소 → knoticle.app 도메인 변경
  - SSL인증서를 통한 https 배포
  - <Head>에 title, meta 태그 추가
  - sitemap 작성
- CSR과 SSR을 적절히 사용한 경험
  - 초기 화면 → Next.js를 사용해 SSG방식으로 GNB 등을 먼저 보여줄 수 있도록 구현
  - 페이지 이동, 모달 등 → Link를 활용해 CSR방식으로 페이지 이동 등을 구현
  - 책리스트 등 필요한 정보 → useEffect를 활용해 CSR 방식으로 구현
  - 책, 메인 콘텐츠 화면 → Next.js의 GetServerSideProps를 활용해 SSR 구현