오늘한일
클라이언트 빌드의 개념을 알게되었고 Vercel을 이용해서 클라이언트를 배포하는 연습을 하였다.
처음에 splint에서 제시하는 학습 방향이 헷갈려서 헤매다가 이전에 페어를 같이 진행했던분과 같이 과제를 진행해보았고 잘 해결하였다.
Achievement goals
- 정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다
- 빌드가 무엇인지 이해할 수 있다
- 정적 웹사이트 형태로 만들어지는 현대의 웹 앱이 왜 빌드 과정을 필요로 하는지 알 수 있다
Browser Rendering
브라우저라는 프로그램이 서버로부터 html css js파일을 받아와 파싱하는 작업을 말한다.
SSR vs CSR
SSR
SSR은 Server Side Rendering의 줄임말이며, 웹 페이지를 브라우저에서 렌더링하는 대신에,
서버에서 렌더링한다.
브라우저가 서버 URI로 GET요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다.
버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다.
CSR
CSR은 Client Side Rendering 을 의미한다. 일반적으로 CSR은 SSR의 반대로 클라이언트에서 페이지를 렌더링한다. 처음 서버에서 html을 받아오고 애플리케이션에서 필요한 자바스크립트를 추가적으로 요청한다. 받아온 자바스크립트를 이용해 동적으로 html을 생성하여 최종적인 html을 보여준다.
차이점
받아온 html이 이미 내용이 있느냐 없느냐의 차이라고 설명할 수 있겠다.
SSR은 서버에서 받아온 html의 내용이 렌더링 된채로 온다고 설명하고,
CSR은 서버에서 받아온 html의 내용이 렌더링 되어있지않고 클라이언트에서 렌더링한다고 설명하겠다.
SEO에 대해서는 SSR이 더 효율적이다.
CSR은 정적 웹사이트고, SSR은 동적 웹사이트이다.
정적 웹 vs 동적 웹
인터넷을 이용하면서 보게되는 웹 페이지는 크게 정적, 동적 두가지로 나눌 수 있다.
정적 웹 페이지는 언제 접속해도 같은 응답을 보내준다. 일단 HTML, CSS, JS 파일 등이 서버에 업로드되면 개발자가 수정하기 전까지 매번 같은 파일을 브라우저에 건네준다.
웹 서버가 동적 웹 페이지에 대한 요청을 받은 경우 서버는 추가적인 처리 과정 이후 클라이언트에게 응답을 보낸다. 동적 페이지는 방문자와 상호작용하기 때문에 페이지 내용은 그때그때 다르다.
정적 웹 페이지 (Static Web Page)
- 서버에 미리 저장된 파일 (HTML, CSS, JavaScrpt 이미지)이 그대로 전달되는 웹페이지
- 서버는 사용자의 요청에 해당하는 저장된 웹 페이지를 보냄
- 사용자는 서버에 저당된 데이터가 병경되지 않는 한 고정된 웹 페이지를 보게됨
- 요청에 대한 파일 전송만 하면 되기 때문에 추가적인 작업이 없다.
동적 웹 페이지 (Dynamic Web Page)
- 서버에 있는 데이터들을 스크립트에 의해 가공처리한 후 생성되어 전달되는 웹 페이지
- 서버는 사용자의 요청을 해석하여 데이터를 가공한 후 생성되는 웹 페이지를 보냄
- 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게됨
- 요청에 대한 전 처리 과정이 있기때문에 느리다.
개념만 보면 동적 웹 페이지가 더 최신기술이고 좋아보인다.
동적 웹 페이지가 좀더 최신기술은 맞긴하나, 이는 서버에 무리를 주는 단점이 있어,
정적 웹 페이지의 기능을 좀더 업그레이드해서 사용을 하는 쪽으로 기울고있다.
Build
소프트웨어는 수십 수백개의 파일이 있다. 사용한 라이브러리를 위한 파일이나 이미지파일, 실제 작성한 코드, 이들을 배포하기 위해 압축하는 과정을 Build라 칭한다.
이를 위한 목적에는 여러가지가 있는데, 주로 사용자가 바로 실행할 수 있게 해주기 위함이 있고,
개발자들이 작성한 코드를 숨기거나 못알아보게(컴파일)하기 위함일수도있다.
참고사이트
