[개념 스터디] 4주차 (FE)

1. CSR과 SSR

 

CSR(Client-side Rendering) 이란?

 

 

CSR방식은 클라이언트 즉 사용자 측에서 화면을 렌더링 하는 방식이다.

먼저 사용자가 특정 웹 서비스에 접속을 하면 웹 서버에서 html을 먼저 다운받는다.

그런데 지금 받아진것은 그냥 html 파일 뿐이므로 각각의 페이지에 필요한

자바스크립트 파일들을 다시 요청을 하게되고 서버로부터 다운을 받게된다. 

이렇게 모든 파일들이 다 다운되고나서야 사용자 화면에 그려지게된다. 

react도 기본적으로 CSR 방식을 사용하기 때문에 모든 자바스크립트 파일을 다운받고나면

react web application이 실행되고 그다음 react 컴포넌트들이 화면에 그려지고 그때서야

사용자에게 화면이 보이게되고 그 페이지와 상호작용이 가능해진다. 

 

 

SSR(Server-side Rendering) 이란?

 

 

SSR방식은 처음 html 파일만 다운받아와도 화면이 보인다. 

자바스크립트 파일이 전부 다운로드 되지 않아도 화면이 보이지만 사용자가 사용을 할수는 없다. 

결국 페이지와 상호작용을 하기위해서는 자바스크립트 파일이 모두 다운이 되어야 가능하다는 뜻이다.

CSR방식보다는 페이지를 구상한는 속도가 느리지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 

완료되는 시점은 빨라진다는 장점이 있다. SEO(search engine optimization)또한 쉽게 구성할수 있다.

react의 경우도 자바스크립트파일이 모두 다운이고 소스코드가 실행되면 컴포넌들도 화면에 

그려지게 되고 그때부터 제대로된 동작이 가능하다. 

 

*React는 Next.js , Vue는 Nuxt.js 를 사용해서 좀더 쉽게 SSR방식을 사용할수 있다. 

 

따라서 사실상 SSR과 CSR모두 동작은 리액트가 실행된후이고 , CSR은 모든 파일이 다운되기 전에도

화면을 볼수가 있다. 

 

 

2. SEO와 SSG, 그리고 gatsby.js까지

 

SEO

SEO 는 Search Engine Optimization의 약자로 검색 엔진 최적화 라는 뜻이다.

이 SEO 를 가장 제대로 사용하고 있는게 바로 구글인데, 요즘 많은 사람들이 네이버나 다음 같은 우리나라

포털 사이트보다 구글에서 검색하는것을 선호할것이다. 특히 계발자의 경우는 거의 99%가 구글 검색 엔진을

사용할 정도로 인기가 있다. 나도 대부분의 검색은 구글을 이용하고 있다. 

 

SEO는검색엔진의 검색 결과에서 상위에 표시되게 하는 대첵을 말한다. 사용자들은 보통 어떤 주제를 검색해서

찾을때 가장 위에 뜬 글들위주로 들어가기 마련이다.

 

검색엔진의 작동원리의 주요 요소는 사이트의 정볼르 수집해서 분석하는 크롤러 이다. 

우리가 새로운 사이트,페이지를 만들면 이 크롤러가 인터넷을 돌아다니면서 업데이트를 하기때문에 

일정 시간이 지나면 검색결과에 노출이 된다. 

 

보통 웹사이트를 올리고, 콘텐츠를 올리는 가장 큰 이유는 홍보이다. 다른 사이트보다 내가 만든 사이트의

유입이 많게하려면 내 사이트가 다양한 검색어로 검색이 잘 되게 하는것이다. 그럼 어떤식으로 해야 

검색 엔진 최적화를 성공적으로 할수 있을까?

 

검색 엔진 최적화 3요소 -> 키워드 / 링크 / 콘텐츠

 

1. 키워드

내용의 핵심 키워드 포함.

간결한 제목

검색순위가 높은 키워드 사용

 

2. 링크

내가 쓴글을 다른 사람들이 얼마나 참고했는지

 

3. 콘텐츠 (가장 중요)

글 전체의 논리적 흐름

좋은 내용은 인용하고 저작권 링크 표시

글 속에 동영상과 이미지를 적절히 사용

다양한 키워드들을 유의어로 사용

 

 

SSG

SSG는 Static Site Generator의 약자로 정적사이트 생성기 이다. 즉 정적인 웹사이트를 생성해주는

툴을 말한다. 

일반적으로 mark down 파일을 읽어 html을 생성한다. 

SSG는 서버에서 이미 만들어진 페이지만 제공하면 되기때문에 빠르게 페이지 로딩이 가능하다. 

유명한 정적사이트 생성기에는 Gatsby, Hugo, Jekyll등이 있다. 

 

Gatsby

Gatsby는 JAM Stack을 활용한 정적 사이트 생성기 이다.

Gatsby에대해 알아보기 전에 JAM Stack이 뭔지 알아보면,

JAM Stack이란 JavaScript와 Api, Html, Css등을 칭하는 MarkUp 으로 이루어진 웹 구성 방법이다.

JAM Stack의 장점에 대해 간단히 살펴보면

렌더링할 화면들을 모두 pre-render 해서 제공하기때문에 기존 방식보다 더 빠르게 웹 사이트를 제공할수 있고

안전한 웹 사이트를 제공할수 있으며, 스케일링하기 쉬운 사이트를 제공할수 있다. 

 

Gatsby는 서버 없이, 오직 정적 사이트 생성을 위해 사용하는 프레임워크이다. 

그래서 서버에서 데이터들을 수시로 받아오지 않아도 되는 기업 소개 페이지, 블로그, 포트폴리오 등에 많이 사용된다. 

또 Gatsby는 단순히 정적 페이지를 만들어주는 것으로 끝나지 않고 , 필요에 따라 CSR과 SSR을 적절히 섞어 사용할 수 있어서 성능 면에서도 단순 정적 페이지보다 큰 장점이 있다. 

 

 

 

3. styled component, scss(css modules), 그리고 더 나아가 bootstrap, tailwind CSS 등

styled component

styled-component는 CSS-in-JS 라이브러리 중에서 현재 가장 많이 쓰이는 라이브러리 이다.

*CSS-in-JS 방식이란 자바스크립트 안에 style을 선언하는 방식을 말한다. 

따로 css나 scss파일을 만들지 않아도 된다는게 장점이라면 장점일수 있다.

설치는 npm install styled-component 명령어를 통해서 할수 있다.

 

간단하게 이용방법을 알아보면 

설치한 styled-component 라이브러리에서 import 해온 styled객체를 사용한다.

 

import styled from 'styled-components';

 

const 컴포넌트명 = styled.태그종류` 

 여기는 css 스타일 요소들이 들어감 

`;

....

render(

   <컴포넌트명></컴포넌트명>) 

 

이런식으로 작성하면 된다. 

 

Sass(SCSS)

CSS 전처리기로 복잡한 작업을 쉽게 할수 있게 해주고 코드의 재활용성을 높여주며

가독성또한 높여주어 유지보수를 쉽게해준다.

 

Sass 와 SCSS의 차이 

Sass 의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을

도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합 이라고 생각하면 된다.

Sass에서는 .scss 와 .sass 확장자를 지원한다.

두개의 문법은 꽤 다른데, .sass 확장자는 {} 중괄호 와 ; 세미콜론 을 사용하지 않는다.

 

Sass

.list
	width: 100px
    float: left
    li
    	color:red
        background: url("./image.jpg")
        &:last-child
        	margin-right:-15px

 

SCSS

.listP
	width:100px;
    float:left;
    li{
    	color:red;
        background: url("./image.jpg");
        &:last-child{
        	margin-right: -15px
            }
          }
        }

 

Sass(CSS)는 웹에서 직접 동작할수가 없기때문에 반드시 css로 컴파일을 해줘야 한다.

Node.js 에서 사용할수있는 컴파일 도구로는 SassMeister, node-sass 등이 있다. 

 

 

Bootstrap

 

부트스트랩은 웹사이트를 쉡게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 

하나의 css로 스마트폰, 태블릿, 데스크탑까지 다양한 기기에서 작동할수 있게 해준다.

각종 레이아웃, 버튼, 입력창 등의 디자인들을 미리 만들어 놓았기 때문에 디자인을 걱정하지 않고

페이지를 꾸밀수 있다. 

하지만 그렇기 때문에 부트스트랩으로 만든 페이지는 디자인적인 부분이 비슷할수있다.

 

 

Tailwind CSS

 

대부분의 CSS 프레임워크들은 미리 정해진 디자인의 컴포넌트들이 있고 그것들을 가져다

쓰는 방식이였다면 Tailwind CSS는 개발자가 원하는 형태의 디자인을 적용하기 쉽다는 특징이있다.

학습 난이도도 낮기때문에 즉, CSS만 알아도 쉽게 사용할수 있다.

 

 

 

 

4. PWA(Progressive Web App) 이란 무엇인가

모바일 사이트의 개선을 고려할 때, 지금 가장 주목받는 기술 중 하나가 PWA이다. 

PWA는 모바일에서 웹 사이트를 볼때 마치 네이티브 앱과 같은 동작을 하게한다.

PWA는 Progressive Web App의 약자로 모바일 사이트에서 네이티브 앱과 같은 사용자 

경험을 제공하는 기술이다. 즉 웹과 앱의 장점을 결합한 것이다. 

 

번거롭게 앱 스토어나 구글 플레이스토어를 통해  설치를 안해도 되고

하지만 푸시 알림, 홈 화면에 아이콘 추가, 오프라인에서 열람 가능 등의 유용한 기능들을 제공한다.

 

많은 홈페이지들이 PWA로 개발되고 있으며 React를 사용하면 쉽게 PWA로 홈페이지 제작이 가능하다. 

 

 

 

 

 

 

 

 

 

 

이번 개념 과제의 경우 생소한 주제들이 대부분이라서 다른분들이 정리해주신 내용들을 많이 참고하였다.

 

참고 : https://d2.naver.com/helloworld/7804182  /  https://slowalk.com/2359

https://velog.io/@mnz/Gatsby-Gatsby-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

https://heropy.blog/2018/01/31/sass/