부트캠프 28일차 (React SPA / Router)

 

오늘의 생각

조금 더 심층적으로 리액트를 배우기 시작했다. 

 

SPA 정의와 와이어프레임의 경우 이해하는데 전혀 어렵지 않았다. 리액트 라우터도 재밌게 이해할 수 있어서 다행이었다. 이전에 독학했을 때 리액트 버전이 매우매우 outdated(use history를 썼었다)되어서 새롭게 리액트를 배울 때 추가된 업데이트들에 매우 감사했다. 

 

또한 라우터가 얼마나 유용한 지 새삼 알게 되었는데 버전이 바뀌면서 라우터 문법에 잦은 변동이 있어서 검색할 때 어려움이 있는 것 같다. (Switch 컴포넌트의 자식으로 Route를 두는 것에서 현재는 Routes 컴포넌트 아래에 Route 컴포넌트를 자식으로 두고 있다.)

 

오후에 진행된 페어 프로그래밍에서는 SPA 특성을 활용한 라우팅 기능을 구현했는데, import를 적절히 활용하고 주어진 더미 데이터를 활용해 기본적인 기능 구현을 무리없이 해낼 수 있어서 라우터를 잘 이해하고 있다는 생각이 들었다.

 

---

오늘의 키워드

Single Page Application (SPA), 와이어프레임Wireframe, 리액트 라우터 (라우터, 경로 매칭, 경로 변경)

 

---

오늘의 학습내용

• Single Page Application의 정의와 장단점
  • 장점: 사용자와의 Interaction에 빠르게 반응, 서버 과부하 부담을 줄임, 더 나은 UX 제공
  • 단점: JS 파일이 커서 첫 화면 로딩 시간이 길어짐, 검색 엔진 최적화가 좋지 않음
• 와이어 프레임의 정의와 리액트를 활용한 설계 시 주의점
• 리액트 라우터를 활용한 라우팅
  • 라우터 역할 (BrowserRouter): 자체적으로 History API를 사용해 주소 변경
  • 경로 매칭 (Routes, Route): path 속성을 활용해 경로가 일치하는 하나의 라우터만 렌더링, element 속성을 활용해 컴포넌트를 추가
  • 경로 변경 (Link): <a> 태그를 대체 (새로고침 flicker 방지), to 속성을 활용해 라우터에 설정된 path 주소를 연결

 

---

어려웠던 keyword / 활용한 질문

 

Q. 왜 SPA는 검색 엔진 최적화가 좋지 않은가요?

 

A. SPA는 명시적인 코드 작성을 위해 JSX, 즉 자바스크립트 파일을 통해 중점적으로 페이지가 구성되기 때문에 기본 뼈대를 구성하는 HTML이 거의 비어있습니다. 이는 검색 엔진이 검색 결과에 맞는 웹페이지를 검색할 때 URL 외에 HTML 문서 내의 각종 태그나 링크 등을 분석하기 때문에 불리하게 작용해 웹페이지 노출이 어렵습니다.

 

Q. 와이어 프레임과 목업의 차이점이 무엇인가요?

A. 와이어 프레임은 디자인에 들어가기 전 단계로 웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대만을 보여줍니다. 목업은 데스크톱, 스마트폰의 프레임을 덧씌워 평가를 위한 최소한의 기능만 담은 모형입니다. 즉, 와이어프레임은 앞으로 구축해나갈 어플리케이션의 전체적인 뼈대를 상의하기 위해 사용하고 목업은 완성된 제품이 어떻게 보일지 최소한의 기능을 담아 보여주는 쇼케이스입니다. 

또한, 프로토타입은 목업에서 더 나아가 제품 출시 직전의 상태를 보여주기 때문에 어플리케이션의 기능에 좀 더 집중되어 있습니다.

 

Q. 라우터를 설정할 때 정의하지 않은 경로를 다루기 위해서는 어떻게 해야 하나요?

A. 라우터Route 컴포넌트에 path 속성을 *로 설정해 유저가 정의하지 않은 경로를 입력할 시 보여줄 수 있는 페이지 또는 alert 같은 행동을 정의할 수 있습니다.