오늘의 목표
- 사이트 전체적인 프론트엔드 레이아웃 구성
Node.js 호스팅 서버
호스팅 서버에 대한 고민이 드는데, 가장 쉬운 방법은 cafe24의 node.js호스팅 웹 서비스를 이용하는 방법
두번째로는 AWS, GoogleCloud, OracleCloud 등 무료 가상서버를 대여받는 것!
이 중에는 오라클 클라우드의 무료 서비스가 가장 훌륭하다..!!
쉬운 길을 택할 것인지, 어려운 길을 택할 것인지..! 일단은 오라클 클라우드 시도해보자!!
안되면 로컬으로라도 일단 하자
어제 고민했던 부분들(CSR, SSR, SPA, MPA)
이미 나와있는 정답이 있었다. 어떤 개념으로 검색해야 할지도 몰랐었다..
웹 사이트 분류
-
Static website
정적 웹 사이트, 화면에 보이는 콘텐츠를 다 담은 html파일이 있고, 서버에 저장된 html파일 그대로 브라우저에 보여주는 웹 사이트를 말한다. 변화가 많지 않은 소개 페이지나 포트폴리오 페이지에 많이 사용한다. -
Dynamic website
동적 웹 사이트, 디자인과 레이아웃은 그대로 유지한 상태로 출력되는 요소들이 계속 바뀌는 형태의 웹 사이트. 요즘 대부분의 웹 사이트는 동적으로 제작된다.
CSR(Client Side Rendering)
클라이언트가 웹 사이트를 구성하는 방식을 말한다. 데이터가 없는 빈 HTML 및 이외 정적파일들만 받아오고, 데이터는 빈 문서와 여러 정적 파일들이 로드 된 이후에 요청해서 받아오는 방식이다.
html와 포함된 자바스크립트에서 ajax, axios, fetch등의 함수를 써서 필요 데이터를 서버에 요청하고 받아오는 것?!
SSR(Server Side Rendering)
서버에서 필요한 데이터들 전부 포함시켜 완성된 html파일을 보내는 방식이다.
Node.js에서 모든 데이터를 포함시켜 보내는 것이잖아?!
SPA(Single Page Application)
서버로 부터 처음에만 페이지에 필요한 데이터를 한번에 다 받아오고, 이후에는 동적으로 페이지를 구성해서 새로운 페이지를 받아오지 않는 웹 어플리케이션이다. 쉽게 새로고침이 없는 형태
게임으로 생각해보면, 처음 로딩을 길게하고 나중에 로딩이 없게 만드는 느낌이랄까..?
MPA(Multi Page Application)
서버로 부터 완전한 페이지를 받아오고 이후에 데이터를 수정하거나 조회할 때, 다른 완전한 페이지로 이동하는 것이다. URL이 바뀔 수 있다.
내가 고민했던 부분들이 여기에 답이 있었다..
MPA, CSR로 지금 진행하고있다. 레이아웃 잡는데 css.. ㅈㄱ
참고 자료 및 사이트 (감사합니다)
- https://medium.com/%EC%95%84%EB%AA%BD%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4/csr-ssr-spa-mpa-ede7b55c5f6f
- https://brownbears.tistory.com/411
- https://d2.naver.com/helloworld/7804182
- https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8 (이미지 출처)
