[TIL] Week#3-HW#1 (2022-02-16)

고병표·2022년 2월 16일
TIL원티드위코드프리온보딩
0

원티드 프리온보딩 프로젝트 회고

목록 보기
5/8
post-thumbnail

프리온보딩 4번째 과제(니콘내콘 페이지 구현 프로젝트) 회고

Facts (사실, 객관)

  • Next.js와 TypeScript 의 조합을 처음 사용해 보았다.
  • 예상보다 구현해야하는 기능이 많이 시간이 오래 걸렸다.

Feelings (느낌, 주관)

  • 실제 상용화된 페이지를 클론 하다 보니 이해가 안 되는 부분이나 디자인적으로 막히는 부분은 없어서 좋았다.
  • 다음엔 좀 더 기획 의도가 들어간 프로젝트를 진행해 보고 싶었다.

Findings (배운 점)

🧇 SPA

벨로그 정리

Static Website

  • 말그대로 정적인 웹사이트.

  • 화면에 보이는 컨텐츠 그대로 html 파일에 작성되어있어서, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것.

  • 예를 들어, wecode.co.kr(실제로는 static website는 아니지만) 도 사용자에 따라, 시간에 따라 항상 똑같은 내용을 보여주는 사이트이므로 static website로 만들어도 된다.

  • Static website에 적합한 사이트는 뭐가 있을까요?

Dynamic Website

  • Static website와 반대.
    • 서버에 저장된 html 파일이 그대로 브라우저에 그려지는 것이 아니라, 다이나믹하게(=동적으로) html 파일이 만들어지는 것이다. 요즘 대부분의 웹사이트가 dynamic website라고 생각하면 된다.

  • 예를 들어, airbnb 사이트에서 어제 접속하고, 오늘 접속할 때마다 추천 숙소 목록이 바뀐다. 목록 디자인은 그대로인데, 숙소 목록 데이터가 바뀜!

🧇 CSR vs SSR

벨로그 정리

  • 위에서 언급했던 CSR과 SSR의 차이에서 알 수 있듯, SSR은 서버에서 첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식.
  • CSR과 비교하면,
    • 1) SEO 측면에서 유리
      • 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있음.
    • 2) UX 측면에서 유리
      • CSR에 비해 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
    • 주의) 페이지를 잘못 구성할 경우 CSR에 비해 서버 부하가 커지거나 / 첫 로딩이 매우 느려질 수 있음

자세한 설명보다도

가장 아랫 줄 그림에 집중하여 비교해봅시다

🧇 SPA for SSR

벨로그 정리

CSR + SSR? ⇒ Next.js (like CRA)

  • 그렇다면 SSR과 CSR을 섞어 쓸 수는 없나요?
  • 사용할 수 있다! ⇒ 생산성을 위해 Next.js가 주로 채택됨 Next.js by Vercel - The React Framework
    • SSR의 CRA, 간단히 구성 가능
    • 원티드, 토스, 배민, 카카오커머스 등 사용 중

:: 원리 & 구조

  • SSR은 다음과 같은 요소로 구성된다
    • node.js로 구성된 (서버사이드에서 렌더링을 해주는) FE 서버
    • pyhton, django로 되어 있는 (데이터를 주고 받는) BE 서버
  • 다음과 같은 과정을 거쳐 SSR이 진행된다 (링크)
    1. 유저가 브라우저에 /를 입력.
    2. 미리 실행되고 있는 FE 서버가 요청을 받고 서버사이드 렌더링.
    3. 만들어진 html 을 브라우저에게 보냄.
    4. 브라우저가 응답받은 html 을 그림.
    5. html 에 기능을 부여할 **index.js**파일을 다운로드 받음. (hydration)
    6. 다운로드가 완료된 이후, go to second 링크를 클릭.
    7. /second로 라우팅하고 second 페이지 코드를 생성.

:: 장점

  • 페이지 기반 라우팅 시스템 (동적 라우팅 지원)
  • pre-rendering , 페이지별 정적파일 생성과 서버사이드 렌더링 지원
  • 코드 스플리팅
  • CSS, Sass 기본 지원 및 다른 CSS-in-JS 라이브러리 지원
  • ...

🧇 Next.js 사용해 보기

https://elite-seeder-e55.notion.site/Next-js-de7156a84569405b82a9c84fe4c87afb

.

Affirmation(자기 선언)

  • 지치지 않기!!
  • 복습 빼먹지 않기!!!
profile
고병표
이전 포스트

[TIL] Week#2-HW#2 (2022-02-13)

다음 포스트

[TIL] Week#3-HW#2 (2022-02-20)

0개의 댓글