- React SPA 들어가기에 앞서 check 해보기
☑️ JSX
☑️ React Component
☑️ Create React App
-
SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.
o
전통적인 웹 사이트에서는 사용자가 웹 사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해서 매번 HTML 파일로 된 페이지 전체를 불러와야만 했다. 이러다보니 불필요한 요소들도 매번 불러오면서 불필요한 트래픽이 발생하고 좋은 사용자 경험을 제공할 수 없게 되었다. 이러한 단점을 보안하고자 요구되는 부분만 업데이트하는 방식으로 작동하는 방식이 SPA가 등장했다. -
SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
o
핗요한 부분만 업데이트하기 때문에 사용자 행동에 빠르게 반응할 수 있고, 불필요한 트래픽이 발생하지 않아 과부하 문제도 줄어들 수 있다. 또한, 화면 전체를 재렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공할 수 있다.다만, 대부분의 데이터가 HTML이 아닌 JavaScript 파일 안에 담겨있다보니
JS의 파일이 무겁고, 이로 인해 첫 화면의 로딩 시간이 길어진다.
HTML의 데이터를 읽어 정보를 수집하고 분석하는 검색엔진에는 최적화되지 않다는 단점이 있다. -
와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.
o
중복되어 재사용 가능한 부분을 컴포넌트로 구분하여 작성할 수 있다.
또한, 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 한다. -
React에서 npm으로 React Router를 설치(npm install react-router-dom@6.3.0)하고 이용할 수 있다.
o
-
React Router를 이용하여 SPA를 구현할 수 있다.
o
-
라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.
o
과제 React Twittler SPA
-
npm을 이용해 react-router-dom을 설치할 수 있다.
o
6 high severity vulnerabilities 라는 문구가 떴다.
나는 설치 시에 에러가 난 줄 알았는데 이 문구는 설치할 때,
경로에서 파일 충돌로 일어난 문구라고 한다.
해당 폴더에 대한 vscode에 있는 package.json 안에
dependencies에 react-router-dom 부분이 있으면 설치된 것이다.
나는 react-router-dom": "^6.11.2"인 6 버전으로 설치되었다. -
컴포넌트 단위로 Client-side routing을 할 수 있다.
o
React Router 라이브러리는 Client-side routing을 가능하게 한다.전통적인 웹사이트에서는 브라우저가 서버에 새로운 문서를 요청하고
CSS 및 JS, HTML을 다운로드해서 이를 화면으로 보여주고
사용자가 그 페이지에 있는 링크를 클릭할 때마다
이 프로세스를 계속 반복하여 렌더링한다.따라서 클라이언트 사이드 라우팅은 사용자가 링크를 클릭했을 때,
서버에 새로운 문서를 요청할 필요 없이 UI를 업데이트할 수 있도록 허용해 준다. 서버에 요청하는 대신, 사용자는 즉각적으로 새로운 UI를 볼 수 있고
이 UI에 필요한 데이터를 fecth를 통해 받아옴으로써
새 정보로 업데이트할 수 있다.이렇게 하면 브라우저가 완전히 새로운 문서를 요청하거나
다음 페이지를 위해 CSS 및 JavaScript 등을
다시 평가할 필요가 없으므로 더 빠른 사용자 경험을 제공해 줄 수 있다.
또한 애니메이션과 같은 보다 역동적인 사용자 경험을 제공할 수 있다. -
react-router-dom를 활용하여 Twittler SPA를 구현할 수 있다.
o
-
나만의 컴포넌트 페이지를 제작해보기.
- 개별 컴포넌트를 import 구문으로 불러올 수 있는 것을 배웠다.
- 그리고 React Router로 각 페이지를 연결하는 것도 배웠다.
- 이를 응용하여 Twittler SPA 안에
나만의 메뉴와 나만의 컴포넌트를 제작해서 넣어보자. - useNavigate를 이용하여 뒤로가기 기능을 만들어보자.
소감
🔡➡️💻➡️🤓👍
이번 한 주의 학습을 마쳤다.
오늘은 npm으로 react router를 설치하는 데에 시간을 많이 썼다.
중간에 에러가 발생했다고 생각했는데, 경로 충돌로 인한 메시지였고,
해당 package.json에 react-router-dom이 잘 받아진 걸 보고
과제를 진행했다.
과제를 시작할 때 살짝 멘붕이 왔지만,
잘 해결하여 제출하였다.
리액트를 시작하기는 했지만,
기본이 부족함을 느꼈다.
꾸준함이 부족함을 채워줄 것이니
다음주도 힘내보자!
이번주도 고생했다! 👏👏👏
