학습내용

백준 1단계

• 10171 - 고양이
• 10172 - 개
• 25083 - 새싹

SPA와 라우팅

• MPA와 SPA
• HashRouter와 BrowserRouter

웹퍼블리싱 4-5주차

• 스타일 코드 관리하기

백준

1단계 - 입출력과 사칙연산

10171 : 고양이

≒ 10172, 25083

문제
아래 예제와 같이 고양이를 출력하시오.

\    /\
 )  ( ')
(  /  )
 \(__)|

제출 답안 및 정답

print("\\    /\\", " )  ( ')", "(  /  )", " \\(__)|", sep='\n')

1단계의 마지막 세 문제는 별다른 로직 없이 이스케이프 문자라는 개념만 알면 풀 수 있는 간단한 문제들이었다. 만날 이런 난이도라면 얼마나 좋을까🙃

이스케이프문자

백슬래시\와 조합해서 사용하는 문자

• \n 줄바꿈
• \t 탭
• \b 백스페이스
• \000 null
• \\ \
• \' 문자열 안에서 작은따옴표 사용시
• \" 문자열 안에서 큰따옴표 사용시

---

JS로 하는 SPA

목표
MPA와 SPA 차이 설명하기
SPA에서 HashRouter가 필요한 이유 설명하기
JS로 SPA Router 구현하기

MPA와 SPA

MPA(Multiple Page Application)

여러개의 페이지로 구성된 어플리케이션. 새로운 페이지를 요청할 때마다 정적 리소스를 다운로드 한다. 쉽게 말하면 페이지를 이동하거나 새로고침시 전체 페이지를 다시 렌더링 한다. = SSR(Server Side Rendering)

장점

• 짧은 첫 랜딩 속도
  서버에서 이미 렌더링을 완료해서 가져오기만 하기 때문. 단, 클라이언트가 JS 파일을 다운로드-적용하기 전까지 각각의 기능은 동작하지 않는다.

• SEO(Search Engine Optimization)에 최적화
  완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색엔진이 페이지를 크롤링 하기에 적합하다.

단점

• 성능 저하
  • 새로운 페이지를 요청할 때마다 리로딩 작업 필요
  • 페이지 이동시 불필요한 템플릿 중복 로딩
  • 서버 렌더링에 따른 부하 가능성
• 생산성 저하
  모바일앱을 추가로 개발시 백엔드 작업 필요

SPA(Single Page Application)

하나의 페이지로 구성된 어플리케이션. 페이지 최초 로딩시 웹 어플리케이션에 필요한 정적 리소를 모두 다운 받고, 새로운 페이지 요청이 있을 때마다 페이지 갱신에 필요한 데이터만 전달 받는다. 전달받은 데이터는 전부 캐시로 저장한다. = CSR(client Side Rendering)

장점

• 성능 향상
  • 필요한 리소스만 부분적으로 로딩
  • 서버의 템플릿 연산을 클라이언트로 분산
• 자연스러운 사용자 경험
  • 깜빡임 현상 X
  • 자연스러운 페이지 이동 = 웹앱
• 생산성 향상
  • 컴포넌트별 개발 용이
  • 협업 업무 분담과 유지보수에 유리
  • 모바일앱 개발에 용이

단점

• SEO에 취약
  크롤링 로봇이 가져올 수 있는 정보는 페이지를 라우팅한 index.html만 볼 수 있기 때문. index.html에서 라우팅된 상세페이지 내용은 검색엔진이 열람 불가

• 느린 첫 랜딩 속도
  code splitting 필요

• 보안 이슈
  핵심 로직 최소화 필요

HashRouter와 BrowserRouter

라우팅(Routing)이란?

메인페이지에서 새로운 페이지로 데이터를 전달한다고 가정했을 때 전달 경로와 같은 개념. 크게 정적 경로 설정과 동적 경로 설정으로 나뉜다.

📌 라우팅(Routing)의 기본 개념

HashRouter와 BrowserRouter

• 동작방식
  • HashRouter : 주소에 해시태그#를 붙이는 방식
  • BrowserRouter : <Link> 태그를 통해 이동할 경로를 추가하는 방식
• 용도
  • HashRouter : 정적 페이지에서 사용
  • BrowserRouter : 동적 페이지에서 사용
• 새로고침시 에러 발생 여부
  • HashRouter : X
    www.domain.com/#/path 👉🏻 # 이전에 대한 경로만 요청
  • BrowserRouter : O
    www.domain.com/path 👉🏻 해당 경로를 통째로 요청

이 밖에도 MemoryRouter, NativeRouter, StaticRouter 등 다양한 라우터 방식이 있다.

---

웹퍼블리싱

스타일 코드 관리하기

style.css

@import url('./css/common.css');
@import url('./css/login.css');
@import url('./css/timesquare.css');
@import url('./css/shopping.css');

여러페이지를 제작해야 하는 경우, 스타일 코드들만 @import한 페이지를 제작해서 html 파일에 불러오면 손쉽게 스타일 코드들을 관리할 수 있다.

---

이번주는 특강을 포함해서 실전에서 직접 적용할만한 이론들 위주로 배웠다. 다음 프로젝트 때는 배운 내용을 모두 적용해서 확실히 내 것으로 만들어야겠다.

프로젝트에 적용할 내용

• html, css, js 파일을 분리해서 작업하기
• HashRouter 사용하기
• 슬라이더 기능 구현하기
• Git으로 협업하기