TIL(23)

💻 Today

1. 코드스테이츠

• react

• Algorithm (9, 10)

• React Twittler (pair)

---

2. 학습

• SPA

• Routing

---

3. React

SPA(Single Page Application)

서버로부터 완전히 새로운 페이지를 불러오는 것이 아닌, 업데이트를 위해 필요한 데이터만 서버에서 전달받아 해당 부분만 업데이트 하는 방식

spa 장점

1. 전체 페이지가 아닌 필요한 부분의 데이터만 받아 업데이트 하기에 사용자와의 Interaction에 빠르게 반응

2. 서버에서는 요청 받은 데이터만 받으면 되기 때문에 서버 과부하 문제가 현저히 줄어듬

3. 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저 경험 제공

4. spa방식의 대표적인 서비스로 Youtube, facebook, Gmail, airbnb, Netflix 등이 있다.

spa 단점

1. js 파일의 크기가 크다.

2. 크기가 크기에 첫 화면 로딩 시간이 길다.

3. 검색 엔진 최적화(SEO)가 좋지 못하다. 구글이나 네이버 같은 검색엔진은 html 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 spa의 경우 html파일은 별다른 자료가 없기 떄문에 검색 엔진에 적절히 동작하지 못한다.

---

Wireframe

Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 다는 의미
이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해한다.

Mockup은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말한다.

---

SPA & Routing

라우팅(Routing)

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다." 라는 의미

React Router의 주요 컴포넌트

1. BrowserRouter : 라우터 역활
2. Switch : 경로
3. Route : 경로
4. Link : 경로 변경