close
프로필 배경
프로필 로고

매일 작성하는 개발 일기

스파르타코딩클럽/내일배움캠프 · 2022. 11. 17. fullscreen 넓게보기

[TIL] 내일배움캠프 React 과정 2022.11.16_SPA, DB 특강

JS로 하는 SPA 정리

SPA와 MPA의 차이점

 

  SPA MPA
개념 Single Page Application
한 개의 페이지로 구성됨		 Multiple Page Application
여러 개의 페이지로 구성됨
렌더링 방법 Client Side Rendering
최초 한 번만 전체 리소스를 다운받음		 Server Side Rendering
매번 전체 페이지가 렌더링됨
장점 1. 필요한 리소스만 부분적으로 로딩함
2. 자연스러운 페이지 이동이 가능함 (깜빡임X)
3. 컴포넌트별 개발이 용이함		 1. 검색엔진최적화(SEO)가 유리함
    (검색엔진이 크롤링하기 좋음)
2. 첫 로딩이 짧음
단점 1. 초기 로딩 속도가 느림 
2. 검색엔진최적화(SEO)가 어려움
3. 보안 이슈 (핵심 비즈니스 로직 최소화 필요)		 1. 페이지 이동 시 불필요한 템플릿까지 로딩함
2. 페이지 이동이 매끄럽지 않음

 

참고 

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/

 

 

SPA 코드 로직 Process의 이해

const route = (event) => {
  event.preventDefault();
  window.location.hash = event.target.hash;
};

const routes = {
  404: "/pages/404.html",
  "/": "/pages/index.html",
  about: "/pages/about.html",
  lorem: "/pages/lorem.html",
};

const handleLocation = async () => {
  let path = window.location.hash.replace("#", ""); //#about -> about

  // "http://example.com/"가 아니라 도메인 뒤에 / 없이 "http://example.com" 으로 나오는 경우
  if (path.length == 0) {
    path = "/";
  }
  const route = routes[path] || routes[404];
  const html = await fetch(route).then((data) => data.text());

  document.getElementById("main-page").innerHTML = html;
};

const GoToLorem = () => {
  window.location.hash = "#lorem";
};

// hash url 변경 시 처리
window.addEventListener("hashchange", handleLocation);

// 첫 랜딩 또는 새로고침 시 처리
document.addEventListener("DOMContentLoaded", handleLocation);
  1. SPA를 구현할 것이므로, 호스팅 서버는 오직 index.html 라는 하나의 파일만을 로드한다.
  2. 브라우저가 html, css, js 순서로 다운로드를 마치면 js/router.js 파일 내부의 로직이 시작된다.
  3. 브라우저가 index.html 파일을 완전히 다운 및 분석을 끝내면 handleLocation 함수가 실행된다.
  4. handleLocation 함수는 현재 url path에 해당하는 page html 파일 위치를 파악하여 변수에 저장한 후 #main-page인 div 엘리먼트의 자식으로 저장했던 html 파일을 삽입한다.
  5. Nav Bar나 Button 클릭을 통해서 다른 화면으로 이동할 때 마다 “hashchange 이벤트리스너”에 감지되어 다시 한번 handeLocation함수가 실행되어 #main-page의 자식 html의 내용이 변경된다.

 

코드 출처

https://github.com/rjc1704/SPA-Practice-by-Vanilla-JS

 

 

Hashed URL

https://example.com/abc/#def

브라우저에서는 해시(#)이전까지의 url을 호스팅 서버에서 데이터 또는 문서를 GET 받아오는 것으로 인식함.

 

Hash Routing 사용 이유

  • 브라우저는 url에 #가 있으면 #포함 그 이후부터 페이지로 받아들이지 않는다.
  • “http://example.com/#about”로 첫 랜딩 또는 새로고침이 되어도 브라우저는 역시 index.html 이라는 하나의 파일만을 로드한다.

장점

  • 브라우저는 해시 뒤의 경로를 별도의 페이지로 간주하지 않는다. 페이지를 새로 고치면 index.html이 다시 로드되므로 브라우저의 이러한 동작은 SPA에 이상적이다.
  • 프런트엔드에서 해시로 링크를 정의하면 페이지를 다시 로드하지 않으므로 안전하다.
  • 서버 구성이 간단하고 API와 프런트엔드 요청을 구분하기 쉽다.

단점

  • 일부 사용자는 해시된 URL을 비정상적이라고 생각할 수 있다.
  • SEO에 적합하지 않다.

 

출처

https://blog.bitsrc.io/using-hashed-vs-nonhashed-url-paths-in-single-page-apps-a66234cefc96

 

 

 

DataBase 이해하기

데이터베이스란?

데이터베이스는 구조화된 정보 또는 데이터의 조직화된 모음, 간단하게 말하면 '데이터의 모음'이다.

데이터베이스는 데이터베이스 관리 시스템(DataBase Management System, DBMS)에 의해 제어된다.

 

 

데이터베이스 관리 시스템(DBMS)이란?

데이터를 제어해주는 프로그램. DBMS는 DB 제어뿐 아니라 모니터링, 튜닝, 백업, 복구 등 다양한 관리 작업도 한다.

유명한 DBMS에는 MySQL, Oracle Database 등이 있다.

 

 

관계형 데이터베이스(RDBMS)란?

데이터가 열과 행의 테이블 형태로 저장되어 데이터 구조를 쉽게 파악하고 이해할 수 있도록 사전에 정의한 관계로 데이터를 구성하는 데이터베이스 시스템.

 

장점: 직관적이고, 테이블 간의 관계도 파악하기 쉽다. 아주 정확하다!

단점: 성능을 향상하려면 아주 비싸다.. 게다가 사전에 데이터베이스 설계를 잘못하게 된다면..? 🥶

 

RDBMS의 종류: MySQL, Oracle, SQLite, MariaDB, PostgresSQL

 

 

SQL(Structured Query Language)이란?

SQL은 Structured Query Language (구조적 질의 언어)의 줄임말로, 관계형 데이터베이스 시스템(RDBMS)에서 자료를 관리하고 처리하기 위해 설계된 언어이다. 사전에 잘 정의하여 구조화된 관계형 데이터베이스를 조작할 때 사용된다. 대부분의 관계형 데이터베이스에서 SQL 문법을 지원하고, 때로는 관계형 데이터베이스를 SQL라고도 부른다.

 

SQL 사용 예시

SELECT *
FROM Reservation

SELECT * 
FROM Customer 
WHERE Name='홍길동'

SELECT *
FROM TABLE
ORDER BY Age ASC

테이블에 있는 모든 정보를 가져오거나, 조건(Name이 A인 것들만 가져오기)이 맞는 정보를 가져오거나, 나이 기준 오름차순으로 정렬해서 정보를 가져올 수 있다.

 

 

비관계형 데이터베이스(NoSQL)란?

Not Only SQL (SQL만을 사용하지 않는 데이터베이스)

RDBMS를 제외한 나머지를 비관계형 데이터베이스라고 한다. 즉, 관계형 데이터베이스(SQL)가 아닌 모든 곳에서 사용된다. 사전에 구조를 정의하는 관계형 데이터베이스와는 다르게, 유연하게 데이터를 쓰고 읽을 수 있다.

 

NoSQL이 왜 나왔을까?

정형화된 데이터뿐 아니라 다양한 데이터를 축적하게 되면서, 데이터의 복잡도와 양이 늘어나게 되고, 기존 RDBMS의 장점인 정확성이 그렇게 중요하지 않게 되었다.

 

NoSQL 데이터베이스 유형: Key-Value 타입, Document 데이터베이스, Column DB 등

 

 

Scale Up과 Scale Out

  • 서버의 성능을 늘려 처리 능력을 향상
  • 하드웨어 발전의 한계가 있음
  • RDBMS

 

  • 서버의 대수를 늘려 처리 능력을 향상
  • 정확성의 한계가 있음
  • NoSQL

 

SQL과 NoSQL 비교

  SQL(RDBMS) NoSQL
데이터 저장 구조 열과 행이 있는 테이블 구조 Key-value, document, column 등 구조가 다양함
데이터 사전 정의 엄격하게 column에 대한 정의 필요 SQL보다 유연함
확장 Scale Up (수직 확장) Scale Up (수직 확장)

 

 

출처

안동훈 튜터님의 강의자료

https://teamsparta.notion.site/DB-a465653d495c4935b6a77b1b5bfef987

 

 

저작자표시
스파르타코딩클럽/내일배움캠프 관련 글
더 보기

티스토리툴바