1. Algorithm Basic 9, 10
- 문자열 조건을 맞추는 문제에서 정규표현식과 .test()를 사용해봤는데 아직 익숙하지 않은 것 같다. 써볼 일이 더 있으면 더 써봐야겠다. 정규표현식으로 어떻게 해결하긴 했다!
2. React SPA (Single Page Application)
- 전통적인 웹페이지는 페이지 전환을 하면 페이지 전체를 로딩하고, SPA는 중복되는 부분은 새로 로딩하지 않는다.
- 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식
- SPA는 필요한 부분만 업데이트하기 때문에 불필요한 트래픽을 발생시키지 않고, 서버 과부화 문제도 현저히 줄일 수 있다. 또 유저의 행동에 빠르게 반응해 보다 나은 경험을 제공한다.
- 단점으로는 대부분의 코드가 JS파일에 들어있기 때문에 첫페이지 로딩이 느려진다.
- 또 검색엔진 최적화가 좋지 않다. 대부분의 코드가 JS에 있고 HTML이 비어있기 때문에 검색로봇이 충분한 자료를 수집하지 못한다. 때문에 검색 노출이 중요한 웹페이지는 따로 대응책을 마련해야함 >> 검색 엔진의 발전으로 이 단점은 사라지는 추세
- 컴포넌트 구성
- 어느 페이지에 가도 있는 것 >> 따로 만드는 것이 아닌 모든 페이지에 사용될 수 있게 한번만 만들수 있게 로직
- 반복적인 형태로 화면을 구성하는 것 >> 컴포넌트를 반복사용이 가능하게 한번만 만들어서 재사용
- 컴포넌트들끼리 보다 유기적으로 데이터를 주고 받을 수 있게 설계해야한다 >> React Router를 활용하자
3. React Router
- 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅이라고 한다
- React Router의 주요 컴포넌트는 크게 3가지로 나뉜다
BrowserRouter, Switch와 Route, Link
- BrowserRouter 라우터 역할
- Switch와 Route 경로 매칭
- Link 경로 변경 역할 - import {BrowserRouter,Switch,Route,Link} from 'react-router-dom' 과 같이 비구조화 할당과 비슷하게 이용할 수 있다
- npm install react-router-dom 으로 라이브러리 설치를 할 수 있음
<Switch>는 여러<Route>를 감싸서 그 중 경로가 일치하는 하나의 라우터만 렌더링, Switch를 사용하지 않으면 모든 요소를 렌더링<Route>컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동<Link>컴포넌트는 페이지 전환을 통해 페이지를 새로 불러들이지 않고 페이지의 주소만 변경한다
ReactDOM으로 렌더하면<a>태그로 바뀐다- 주어진 경로와 정확히 일치시키기 위해 exact path ="/" 와 같이 exact를 사용한다.
exact를 사용하지 않으면 path 경로에 설정된 /로 시작하는 모든 컴포넌트를 보여준다 - Link는 to 속성으로 path 주소를 연결한다(
<a>태그의 href와 비슷한듯?)
4. Pair Programming / Twittler SPA
- 컴포넌트로 값을 전달하는 방법을 정확히 몰라서 헷갈렸다... 다음주 스케줄에 props가 있는 것 같은데 그때 자세히 봐야지
개발자 공부 일기😉