잼굴 코딩공장

잼폴

잼굴 — Thu, 22 Jun 2023 20:51:34 +0900

투표 커뮤니티.

오늘 뭐먹을지 골라줘, 옷 어떤거 살지골라줘, 어디 놀러갈지 골라줘 등 일상생활속 선택을 투표로 받는 커뮤니티

사용기술

1. React

2. TypeScript

3. Redux-toolkit

4. Axios

5. Firebase

기능

1. 커뮤니티 게시물 CRUD

2. 카테고리별 인기게시물 모으기

3. 인기게시물 메인좌측 / 랜덤게시물 메인 우측

4. 내가 올린 게시물들 모아보기

진행

1. 리액트+파이어베이스 연동 ✔️

2. 회원가입 기능 ✔️

3. 게시물 CRUD

4. 투표 기능

5. 인기게시물 취합

6. 랜덤게시물 뿌리기

7. 신고기능

참고

Next.js 'use client' 에러 고치는방법

잼굴 — Tue, 25 Apr 2023 23:41:41 +0900

Next.js를 사용한다면 클라이언트 컴포넌트와 서버 컴포넌트를 분리해서 컴포넌트를 생성한다.

Next.js에서 클라이언트 컴포넌트를 사용하기위해서는 코드 최상단에 'use client'를 작성해두면되고, 이후에는 다양한 함수들을 사용할수있게 된다.

그런데 !!!!!

'use client'를 사용하면

error - SyntaxError: Unexpected token u in JSON at position 0

at JSON.parse (<anonymous>)

뭐 이런 에러가 자꾸 뜬다.. 공식문서에서 해보라는 대로해도 똑같고 뭐 자꾸 JSON.parse 파싱에러가 자꾸뜬다...

그렇다고 use client를 안쓰면

 1 | // 'use client';
 2 | import { useState } from 'react'
   :          ^^^^^^^^
 3 | 
 4 | export default function Counter() {
 4 |     const [count, setCount] = useState(0);
   `----

클라이언트 컴포넌트 선언이 안됐을때 뜨는 오류가 뜬다..

아 모르겟고...

해 결 법

결론:

node_modules\next\dist\build\webpack\loaders\next-flight-loader\index.js 파일에서

const proxy = createProxy("${this.resourcePath}")


const proxy = createProxy(String.raw\`${this.resourcePath}\`)

첫줄로 되어있는걸 밑에
const proxy = createProxy(String.raw\`${this.resourcePath}\`)

이걸로 변경해주면 된다..

에러뜨는 이유

뭐 찾아보니까 13.3.0버전에서만 일어나는듯?

윈도우 환경에서 path 경로를 읽을때 백슬래시랑 문자열 이스케이프 과정에서 오류가 발생한단다...

모르겠고 그냥 저 경로에 저 코드만 변경해주면 잘 작동됨 수고링~

NEXT.js의 라우팅에 대해.araboja

잼굴 — Sun, 16 Apr 2023 16:08:59 +0900

현재 NEXT.js는 계속 업데이트 되고있다. 지금은 13.3 버전임 ㅎ

12버전 선배님들은

app폴더랑 pages폴더가 따로 구분되어있었다.

그리고 pages폴더에서 만든 페이지들이 자동으로 라우팅이 됐었다.

그냥 pages폴더에 apple.tsx 파일만들면 localhost:3000/apple 가면 끝났음;;

근데 13버전으로 바뀌면서 pages 폴더가 사라졌다.

그래서 사용자가 직접 app폴더안에 라우팅 하고자하는 폴더를 만들고 그곳에 page파일을 만어야 한다.

Q) 더 귀찮아진거 같은데.. 하향패치 아님?

A) ㅇㅇ;; 더 귀찮아지긴했는데.. 공통 컴포넌트 사용면에있어서 상향됨..

1. 정적 라우팅

app폴더 안에 라우팅 하기원하는 폴더 만들고 page파일 만들고,

하위 요소들 더 만들고싶으면 자식 폴더 만들고 또 page파일 만들고 뿌리 내리면 됐음.

대충 이런식으로 하나하나 하위폴더들 만들면 정적 라우팅 됨

localhost:3000/apple/icecream
localhost:3000/apple/juice

localhost:3000/apple/candy

이렇게 가면되는데 갑자기 localhost:3000/apple/tree << 이렇게하면 작동안됨

뭔가 자식폴더들 3,4개 수준이 아니라 50개 100개 필요한 경우도 있잖음? 하나하나 정적으로 하드코딩 할순없으니까

동적으로 만들수있음

이럴땐 리액트의 props 기능을 이용함

2. 동적 라우팅

만드는법:

1.app안에 apple폴더를 만들고

2. apple폴더 하위에 동적 라우팅이 필요한 자식폴더를 생성하고 폴더명을 [slug]라고 지정함. (이게 국룰이라고 하는데, 원하는 걸로 바꿔도 됨. [food] 이렇게 ㅇㅇ;)


type Props = {
  params: {
    slug: string;
  };
};

export default function page({ params }: Props) {
  return (
    <div>
      <div>{params.slug} 레시피!!</div>
      <div>{params.slug} 무봤나 ㅋㅋ </div>
    </div>
  );
}

이렇게 해야함. 무조건 {params} << 라고 받아와야 한다고함.

내 멋대로 {param} 이라고 해보니까 안되더라; 부모에서 {params}로 넘겨주니까 그런듯 ㅇㅇ;

이렇게 설정하고 이제

localhost:3000/apple/applejuice 로 들어가보면

이렇게 뜸. 덕분에 이제 100개 1000개도 거뜬할듯

근데 또 생각해보면 동적이랑 정적이랑 합쳐서 쓸수도 있음;;;;

동적 라우팅 필요한건 [slug]쓰고 무적권 필요한건 apple 하위폴더로 몇개 만들어 두면 되긴함

자세하게 안써도 먼말인지 알지?ㅋ

NEXT.js는 CSR임? SSR임?

잼굴 — Sun, 16 Apr 2023 14:09:24 +0900

CSR과 SSR은 각자 장단점이 있다.

CSR (Client Side Rendering)

장점

1. 한번만 로딩되면 나머지 동작에서 빠르다. (브라우저에서 한번에 다 다운받아서)

2. 서버의 부하가 적다.

단점

1. 페이지 로딩 시간이 길다.

2. SEO 최적화 is bad

3. 보안취약

SSR (Server Side Rendering)

장점

1. 페이지 로딩 빠름

2. SEO 최적화 is godd

3. 보안 good

4. 실시간 데이터 OK, 사용자별 데이터 OK

단점

1. 서버에 부하가 있을수 있다.

2. 요청할때마다 받아와서 조금 느릴수있다.

NEXT.js를 사용하면?

얘는 하이브리드라서

CSR이 필요한 곳엔 CSR로, SSR이 필요한곳엔 SSR로, 한페이지라도 CSR+SSR 섞어서 사용가능함 ㄷㄷ;

페이지별로 특징에 따라서 최적화 가능함

그리고 하이드레이션(Hydration)이라는 기술도 씀

일단 정적인 페이지로 HTML, CSS 만 보여주고, 사용자가 상호작용 하기전에 리액트파일을 보냄.

살짝 느낌은 비동기처리랑 비슷한 느낌인듯?

그래서 초기페이지 로딩속도랑 SEO 개선에 좋음.

Next.js 기본 폴더구조와 역할

잼굴 — Wed, 12 Apr 2023 21:28:47 +0900

보일러플레이트

Next.js를 설치하면 해당 폴더구조로 설치된다.

app폴더: 코드를 직접 짜는 공간

page.js : 메인페이지, 리액트의 App.js

layout.js: 메인페이지를 감싸는 용도. 리액트의 index.js

public폴더: 이미지나 static 파일 보관하는 공간

api 폴더 : 서버기능 만드는 공간

next.config.js : nextjs 설정 파일

node_modules 폴더 : 설치한 라이브러리 보관용 폴더

package.json : 설치한 라이브러리 버전 기록용 파일

이렇게 구성되어있다. 일단 기존 리액트랑 비슷하다..!

Next.js 설치방법

(터미널을 킨다)

1. npx create-next-app@latest --experimental-app

2. 프로젝트 명 설정하고, 타입스크립트니 뭐니 여러가지 설정을 한다. (y/n)

3. npm run dev 쳐서 실행시킨다.

4. http://localhost:3000/ 가서 확인한다.

Todo List에 타입스크립트 적용해보기

잼굴 — Thu, 6 Apr 2023 17:52:01 +0900

기본 양식

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo List</title>
    <link rel="stylesheet" href="main.css">
    
  </head>
  <body>
    <h1>Todo List</h1>
    <form>
      <input type="text" id="inputTodo" placeholder="Add Todo">
      <button type="submit">Add</button>
    </form>
    <ul id="todoList"></ul>
    <button id="clearButton">Clear All</button>
    <script src="index.js"></script>
  </body>
</html>

CSS

* {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  h1 {
    text-align: center;
  }
  
  form {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  input[type="text"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-right: 10px;
    width: 70%;
  }
  
  button[type="submit"] {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #4CAF50;
    color: white;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
  }
  
  li span {
    margin-right: 10px;
  }
  
  #clearButton {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #f44336;
    color: white;
  }

JavaScript

const form = document.querySelector('form');
const inputTodo = document.querySelector('#inputTodo');
const todoList = document.querySelector('#todoList');
const clearButton = document.querySelector('#clearButton');
let todos = [];
function renderTodos() {
    todoList.innerHTML = '';
    todos.forEach((todo) => {
        const li = document.createElement('li');
        li.innerHTML = `${todo.text} <span class="delete" data-index="${todo.index}">삭제</span>`;
        todoList.appendChild(li);
    });
}
form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (!inputTodo.value)
        return;
    const newTodo = {
        text: inputTodo.value,
        index: todos.length,
    };
    todos.push(newTodo);
    inputTodo.value = '';
    renderTodos();
    localStorage.setItem('todos', JSON.stringify(todos));
});
todoList.addEventListener('click', (e) => {
    const target = e.target;
    if (!target.classList.contains('delete'))
        return;
    const index = parseInt(target.dataset.index);
    todos = todos.filter((todo) => todo.index !== index);
    renderTodos();
    localStorage.setItem('todos', JSON.stringify(todos));
});
clearButton.addEventListener('click', () => {
    if (confirm('정말 모두 삭제하시겠습니까?')) {
        todos = [];
        renderTodos();
        localStorage.removeItem('todos');
    }
});

일단 기본 기능만 가지고 Todo 앱을 뚝딱 만들었따.

이제 타입스크립트로 적용해보자

TypeScript

const form: HTMLFormElement | null = document.querySelector('form');
const inputTodo: HTMLInputElement | null = document.querySelector('#inputTodo');
const todoList: HTMLUListElement | null = document.querySelector('#todoList');
const clearButton: HTMLButtonElement | null = document.querySelector('#clearButton');
interface Todo {
  text: string;
  index: number;
}

let todos: Todo[] = [];

function renderTodos(): void {
  todoList.innerHTML = '';
  todos.forEach((todo: Todo): void => {
    const li: HTMLLIElement = document.createElement('li');
    li.innerHTML = `${todo.text} <span class="delete" data-index="${todo.index}">삭제</span>`;
    todoList.appendChild(li);
  });
}

form.addEventListener('submit', (e: Event): void => {
  e.preventDefault();
  if (!inputTodo.value) return;
  const newTodo: Todo = {
    text: inputTodo.value,
    index: todos.length,
  };
  todos.push(newTodo);
  inputTodo.value = '';
  renderTodos();
  localStorage.setItem('todos', JSON.stringify(todos));
});

todoList.addEventListener('click', (e: MouseEvent): void => {
  const target = e.target as HTMLElement;
  if (!target.classList.contains('delete')) return;
  const index: number = parseInt(target.dataset.index!);
  todos = todos.filter((todo: Todo): boolean => todo.index !== index);
  renderTodos();
  localStorage.setItem('todos', JSON.stringify(todos));
});

clearButton.addEventListener('click', (): void => {
  if (confirm('정말 모두 삭제하시겠습니까?')) {
    todos = [];
    renderTodos();
    localStorage.removeItem('todos');
  }
});

전체 코드이다.

1. 상수에 타입을 정해준다. HTML타입을 정해주고 혹시몰라서 null도 해줬따

const form: HTMLFormElement | null = document.querySelector('form');
const inputTodo: HTMLInputElement | null = document.querySelector('#inputTodo');
const todoList: HTMLUListElement | null = document.querySelector('#todoList');
const clearButton: HTMLButtonElement | null = document.querySelector('#clearButton');

2. 계속 사용하게 될 Todo의 타입을 정해줬다. 내용은 text이고 index는 숫자이니까 string과 number로 해줬다.

interface Todo {
  text: string;
  index: number;
}

let todos: Todo[] = [];

3. 함수들은 작동은 하지만 return값이 없기 때문에 void를 줬고, 이벤트 핸들러에 Event 타입을 줬다.

function renderTodos(): void {
  // ...
}

form.addEventListener('submit', (e: Event): void => {
  // ...
});

todoList.addEventListener('click', (e: MouseEvent): void => {
  // ...
});

4. 기존 JS에는 없던것이다. 기존에는 'inputTodo'에서 얻은 값을 직접 'todos' 배열에 추가했지만, 타입스크립트에서는 새로운 변수를 선언해서 할당 해주는게 좋다.

1. 가독성

2. 디버깅 쉬워짐

3. 코드 유지보수 쉬워짐

const newTodo: Todo = {
  text: inputTodo.value,
  index: todos.length,
};

5. as로 e.target의 속성을 HTMLElement로 지정해준다.

const target = e.target as HTMLElement;

6. parseInt()로 index값을 숫자로 바꿔줬다.

const index: number = parseInt(target.dataset.index!);

Virtual Dom에 대해(feat.리액트).araboja

잼굴 — Sat, 4 Feb 2023 17:04:45 +0900

Virtual Dom(가상 DOM)

가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다.

..?

우선 가상 DOM을 이해하기 위해서 DOM이 뭔지 부터, 브라우저 렌더링 과정을 알아야 한다.

https://jamgul.tistory.com/76

브라우저 렌더링을.araboja

브라우저 렌더링 과정을 이해하기 위해서 먼저 웹 브라우저의 구조를 알아야한다. 사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버

jamgul.tistory.com

요약

브라우저가 렌더링할때, HTML파일과 CSS파일을 DOM으로 만들고, 그걸 화면에 어떻게 출력할지 계산하고 출력해준다.

여기서 이제 문제가 살짝있는데 DOM을 수정하려면 저 렌더링과정을 모두 진행해야해서 많은 연산이 필요함

=> 프로그램 성능 저하됨

예전엔 SSR 방식(DOM 동작 많이 X)을 많이 사용했는데, CSR방식을 사용하면서 DOM 동작이 많이 복잡해졌다.그래서 DOM조작 하는거 최적화 필요가 생김 => 가상 DOM이 만들어짐

가상DOM이 가벼운 이유

DOM 노드트리를 복제한 자바스크립트 객체이다.

그래서 class, style 등의 속성은 가지고있는데, getElementById() 같은 DOM api를 가지고 있지 않기때문에 가볍다 !

가상DOM의 동작 방식

순서

1. 기존 DOM의 가벼운 버전을 복제한다.

2. DOM노드에 변화가 생기면 가상DOM은 다시 새로운 가상DOM을 처음부터 만든다.

3. 변경전의 가상 DOM트리와 변경후의 가상 DOM트리를 비교한다.

4. 변경된 부분만 실제DOM에 적용한다

근데 DOM의 변화가 생길때마다 새로 DOM을 만드는거 효율 별로일거 같은데여?

=> ㄴㄴ DOM 새로 만드는건 비용 별로 안듬.. 렌더링 하는 과정에서 비용이 많이 드는거임

(가상 DOM안쓰면 변화할때마다 렌더링 함)

이러면 가상 DOM은 "버퍼링", "캐싱" 느낌이네여?

=> ㅇㅇ 변경 부분만 모아서 실제 DOM에 한번만 반영하는거라 그 느낌맞음, 그래서 성능 최적화에 굿임

리액트에서 Virtual DOM

1. 작동순서

1. JSX문법으로 작성함

2. Babel같은 툴로 JSX를 JS형식으로 바꿈. 이때 createElement 함수 호출

3. 함수에 의해서 객체로 바뀌게 됨.

4. 객체에서 type은 태그이름, props는 jsx에 포함된 모든 속성들. props의 자식에는 하위 노드들이 포함됨

5. 이 객체를 활용해서 가상 DOM트리를 만듬, 렌더하면 실제 DOM 됨

2. 재조정

리액트 공식문서:

Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화 하는 프로그래밍 개념이다.

재조정 => 가상DOM과 실제DOM을 비교하고 일치시키는 과정

변경전 가상DOM과 변경후 가상DOM 두가지 트리를 비교해서 변화된부분만 실제DOM에 적용함

이 과정에 Diffing 알고리즘을 사용함

Diffing 알고리즘 : jsx가 자바스크립트 객체로 변화된 결과에서 type이라는 키값을 가진다.

변경전 리액트 엘리먼트의 타입과 변경후 엘리먼트 타입을 비교하여 2가지 행동을한다

1. 타입이 같은 경우 : 변경된 속성만 변경

2. 타입이 다른 경우 : 이전 트리를 삭제하고 재생성한다.

key prop을 사용하는 이유: 재조정과 연관있음. 재조정 과정에서 이전의 가상돔과 재생성 가상돔을 비교한다.

식별자로 key prop을 적용한다.

자식노드들이 key prop을 갖고있으면 리액트는 키값으로 이전트리와 변경이후트리를 비교한다.

그러면 첫번째에 새로운 노드들이 추가되어도 문제없이 추가된 노드만 그릴수있따.

키값은 변경되지 않는 유일한 값을 넣어줘야한다.

만야 배열의 index를 키값으로 주면 배열의 index는 배열이 바뀔때마다 0부터 n가지 새롭게 할당된다. => 변하는값

브라우저 렌더링을.araboja

잼굴 — Wed, 1 Feb 2023 11:42:21 +0900

익스플로 쓰는 사람 없제??

브라우저 렌더링 과정을 이해하기 위해서

먼저 웹 브라우저의 구조를 알아야한다.

웹 브라우저의 구조

사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버튼)

브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 연결하는 것

렌더링 엔진: HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 것

통신: 네트워크 요청을 수행

UI 백엔드: 기본적인 위젯을 그려주는 것

JS엔진: 자바스크립트 코드를 실행하는 인터프리터

자료 저장소: 로컬 스토리지나 쿠키같은 보조기억장치에 데이터를 저장하는 파트

여기서 우리는 렌더링 엔진에 대해서 이야기할것이다.

렌더링 엔진의 목표

1. HTML,CSS,JS,이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다.

2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.

(업데이트: 사용자 동작으로 인한 입력, 애니메이션동작, 비동기 요청에의한 데이터로딩)

렌더링 엔진의 동작과정을 알아보자

Critical Rendering Pass

먼저 순서 요약

1. HTML을 DOM으로 => DOM TREE 생성

2. CSS를 CSSOM으로 => CSSOM TREE 생성

3. 둘이 합쳐서 렌더 트리 생성

4. 레이아웃 (계산 단계)

5. 페인트 (색칠 단계)

6. 합성 (색칠한거 합치기)

1. DOM TREE 생성

사용자가 요청한 HTML 문서를 불러오고 파싱을 한다.

콘텐츠 트리 내부에서 HTML태그들을 DOM 노드로 변환을 시킨다. 그리고 이 노드들을 연결시켜서 DOM트리를 만든다.

2. CSSOM TREE 생성

CSS도 DOM 트리처럼 CSSOM 트리를 만든다.

3. 렌더트리 생성

그러고나면 렌더링엔진이 DOM트리와 CSSOM트리를 합쳐서 렌더트리를 만든다.

렌더트리가 만들어지는과정

Document 부터 각 노드들을 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다.

그러면서 렌더와 관련되 요소들은 렌더트리에 포함을 시킨다.

이럴때 메타 태그나 Display: none 같은 태그는 필요없기때문에 렌더트리에 포함시키지 않는다.

근데 브라우저마자 조금씩 다르게 생성되긴함

4. 레이아웃 (계산단계)

뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정이다.

박스모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 스타일 속성이 계산된다.

이때 CSS에서 %나 em같은 상대적인 단위를 사용했을때, 기계의 뷰포트에서 맞춰서 픽셀단위로 변환된다.

5. 페인트 과정 (색칠)

레이아웃과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 어떻게 보여줄지 알게되면 화면에 실제 픽셀로 그려지도록 변환하느 과정을 거치는데 이것이 바로 페인트 과정이다.

이 과정에서 렌더트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀로 그려진다.

번외 과정 !!

사용자 동작으로 JS가 실행되어서 CSS가 변경되거나 애니메이션 재싱이 일어났을 경우

크게 3가지 경우가 있다.

1. 레이아웃이 다시 발생하는 경우

이때 레이아웃 수치를 다시 계산해서 배치해야하기 때문에 다시 발생하는거임. 마지막엔 레이어 합성과정까지 거침

2. Paint부터 다시 발생 하는 경우

레이아웃 수치를 변화시키지 않는 스타일의 변경이 일어났을때 발생. => 레이아웃 과정이 발생하지 않기 때문에 성능상 이점이 있다.

3. 레이어의 합성만 다시 발생하는 경우

레이어의 경우 정해진 기준에 의해서 레이어를 만들고 페인팅할 영역을 나누어 놓는다.

렌더트리에 있는 노드객체들은 생성된 객체들은 생성된 레이어에 포함된다.

레이어들은 트리형태로 구성된다. 렌더링 엔진이 각 레이어를 프린팅 과정에서 각각 그려준다음에 하나의 비트맵으로 합성해서 페이지를 완성한다. 이떈 레이아웃과 페인팅 모두 수행하지 않기 때문에 성능상 가장 큰 이점이 있다.

참고자료 : https://youtu.be/sJ14cWjrNis

CSR과 SSR 차이를(feat.SPA&MPA).araboja

잼굴 — Tue, 31 Jan 2023 10:55:32 +0900

CSR: 클라이언트 사이드 렌더링

SSR: 서버 사이드 렌더링

CSR = 클라이언트측에서 렌더링 하는 방식

SSR = 서버측에서 렌더링 하는 방식

+)SSG 라는것도 있음: Static Side Generation

SSR이랑 SSG 둘다 서버측에서 HTML을 보내는거라 비슷한데..

SSR은 요청이 들어오면 만들어서 보냄 (미리 만들어두기 어려운 경우)

SSG는 미리 다 만들어둔거 (캐싱해두기 좋은 경우)

CSR의 동작 과정과 특징

동작 과정

1. 유저가 웹사이트 방문한다.

2. 브라우저가 서버에 콘텐츠를 요청한다.

3. 서버는 빈 뼈대 HTML만 보내준다.

4. 브라우저가 연결된 JS링크를 통해 서버를 통해 JS를 다운받는다.

5. JS를 이용해 동적으로 페이지를 만들어서 브라우저에 띄운다.

특징

1. CSR은 브라우저가 JS파일을 다운받고, 동적으로 DOM을 생성하는 시간을 기다려야해서 초기 로딩속도가 느리다.

2. 초기 로딩이후에 페이지 일부를 변경할때는 서버에 해당데이터만 요청하면 되기때문에 이후 구동속도가 빠르다.

3. 서버는 빈 뼈대 HTML만 주면 되기때문에 서버 부하가 적다.

4. 클라이언트 측에서 연산 라우팅을 직접 처리하기때문에 반응속도가 빠르고, UX도 우수함 => 사용자경험↑

5. 웹 크롤러가 HTML을 읽는데.. 웹 크롤러 입장에선 빈 뼈대 HTML만 있어서 SEO(검색엔진 최적화)에 불리하다.

SSR의 동작 과정과 특징

동작과정

1.유저가 웹사이트에 방문한다.

2. 브라우저에서 콘텐츠를 요청한다.

3. 서버에서 즉시 필요한 데이터를 삽입하고 CSS까지 적용해서 렌더링 준비를 마친

HTML과 JS 코드를 브라우저로 전달한다.

4. 브라우저에서 전달받은 페이지를 띄운다.

5. 브라우저가 JS코드를 다운로드하고 HTML에 JS로직을 연결한다

특징

1. 서버에서 렌더링 준비를 마친 HTML을 응답으로 전달함 =>덕분에 SEO에 유리하다.

2. JS코드를 다운받고 실행하기전에 사용자가 화면을 볼수있음 => 초기 구동 속도가 빠름.

but JS연결이 모두 연결될때까진 사용자가 버튼을 클릭하거나 이동하려해도 반응이 안됨 (렉인줄 앎)

이걸 TTV !== TTI 이라고함 Time To View !== Time To Interact

정리

	CSR	SSR
장점	화면 깜빡임 X 초기 로딩이후 구동속도가 빠름 TTV와 TTI 사이 간극 X 서버 부하 분산	초기 구동속도가 빠름 SEO에 유리함
단점	초기 로딩속도가 느림 SEO에 불리함	화면 깜빡임이 있음 TTV와 TTI 사이 간극이 있음 서버 부하가 있음

SPA(싱글 페이지 어플리케이션) -> React, Vue, Anguler

: 페이지 하나에서 다 해결됨 => 원하는 부분만 클라이언트에서 동적으로 갈아끼움, 화면 깜빡임없음

MPA(멀티 페이지 어플리케이션)

: 새로운 탭으로 이동할때마다 서버로부터 새로운 HTML을 받아와서 페이지 전체를 새로 렌더링함

일반적으로 SPA(싱글페이지)는 CSR /// MPA(멀티페이지)는 SSR을 차용함

SPA는 웹 어플리케이션에서 필요한 정적 리소스를 초반 한번에 다운로드하고, 그 이후 새로운 요청이있을떄 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신함. => 주로 CSR 사용

MPA는 새로운 요청이 있을때마다 서버에서 이미 렌더링 된 정적 리소스를 받아오기떄문에 => 주로 SSR을 사용함

하지만 페이지가 몇개 렌더링을 어디에서 하냐에 따라서 달라지기도 함

요즘 대부분 SPA를 사용하는데.. CSR의 단점보완 방법은 없을까?

code splitting , tree-shaking , chunk 분리를 통해서 JS 번들 크기를 줄여서

초기 DOM 생성속도를 줄이기때문에 초기 로딩속도를 보완할수있다.

pre-rendering : 웹 라이브러리나 웹팩 플러그인을 통해 각 페이지에 대한 HTML파일을 미리 생성해둔뒤

서버에 요청하는게 크롤러라면 사전에 렌더링된 HTML버전을 보여주는 방식으로 개선가능함.

SSR 또는 SSG, ISR를 도입하는 방법도 있다.

SSG는 수정할수 없는 페이지, 그냥 거의 관상용으로 보기만 하는페이지에서 사용할수있다.

ISR은 SSG를 살짝 보완한 것으로, 약 5분마다 서버에서 새로운데이터를 받아온다. 하지만 여전히 사용자가 실시간 데이터는 사용할수 없다는 단점이 있다.

어떻게 CSR에 SSR과 SSG를 도입할까?

방법 1.

프레임워크 없이 도입하는 방법이다.

expressJS로 별도의 서버를 운영하는 방법, 타입스크립트가 걱정된다면 nest를 사용할수있다.

하지만 프론트엔드 개발자에겐 어려울수있다. (진입장벽)

방법 2.

SPA에서 SSR/SSG를 쉽게 적용할수있도록 도와주는 프레임워크가 있다.

리액트

NEXT : 페이지의 성격별로 SSR, SSG 사용을 정할수있다.

Gastsby: SSG에 최적화된 리액트 기반 정적페이지 생성 프레임워크. SSG에 최적화이긴 하지만 CSR, SSR, 레이지로딩도 지원함. 무엇보다 다양한 플러그인이 장점임 // 페이지가 적고 작은 서비스가 사용하기 좋음

뷰

NUXT : NEXT에 영감을 받아 만들어짐

앵귤러

UNIVERSAL : Angular4부터 코어 모듈에 포함됨. (더이상 프레임워크는 아님)

이런 프레임 워크들은 CSR에 비해 코드 복잡도가 올라간다.

또, 직접 제어할수없는 블랙박스 영역이 존재함

초기 렌더링 방식으로 SSR을 사용하고 이후엔 CSR을 사용하는 방식을

Isomorphic App, Universal Rendering 이라고 함

초기 로딩 속도 보완, SEO 개선, CSR의 장점을 모두 흡수!!

근데 이렇게 해도 모두 다 단점이 있는데 무엇을 써야할까?

서비스 성격마다 다르다.

개인정보가 많고 검색엔진 노출필요 X , 유저랑 상호작용이 많다 => CSR

회사 홈페이지, 누구에게나 같은 내용을, 매주 업데이트 한다 => SSR

근데 업데이트가 거의 없다 => SSG

사용자에 따라 페이지 내용이 달라짐, 빠른 인터랙션, 검색엔진 노출필요 => CSR + SSR (Universal Rendering)

참고자료:

https://youtu.be/YuqB8D6eCKE

[22일차] JS 프로그래머스 LV.1

잼굴 — Fri, 27 Jan 2023 11:11:29 +0900

문제 1. 콜라 문제

풀이 순서

1. while문을 사용, 조건은 빈병의 개수(n)가 빈병 요구량(a) 보다 크면 반복한다.

2. 빈병 개수와 요구량을 나눠주고, 마트에서 주는 콜라 개수를 곱한다.

3. 처음에 갖고 있던 빈병과 요구량을 나누고 남은것들이랑 마트에서 받은 콜라빈병이랑 더하고 계산을 다시한다.

function solution(a, b, n) {
  let answer = 0;
  while (n >= a) {
    const remain = n % a;
      
    n = Math.floor(n / a) * b;
    answer += n;
    n += remain;
  }

  return answer;
}

후..