잠시 제 자랑 좀 하겠습니다. 저는 6월 9월 모의고사 영어에서 문제를 틀린 적이 없습니다. 매번 시간이 남아서 일찍 풀고 잤습니다. 다른 모의고사도 비슷합니다. 수능 때는 2개 틀렸습니다..ㅠㅠ
영어 공부를 특별히 열심히 한 것도 아닙니다. 어학연수를 다녀와서도 아닙니다. 영화 해리포터를 외우다시피 봤더니 저절로 영어 실력이 늘었습니다. 특히 영국식 영어를 좋아했습니다.
'라우팅'은 미국식 영어를 국어의 로마자 표기법으로 옮긴 것입니다. 그래서 처음에 무슨 뜻인지 이해가 안됐습니다. '루팅'이라고 했다면 이해가 빨랐을 겁니다.
라우팅
사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 방법입니다.
라우트 시스템
라우트 시스템은 여러 페이지로 구성된 웹 애플리케이션을 만들 때 사용합니다. 페이지 별로 컴포넌트를 분리하면서 프로젝트를 관리하기 위해서죠.
라우트 시스템에는 React Router와 Next.js 두 가지 선택지가 있습니다. 이 글에서는 React Router를 사용하여 라우트 시스템을 구현합니다.
route
1. (한 곳에서 다른 곳으로 가기 위해 따라가는) 길[경로/루트]
3. (어떤 일을 달성하는) 길[방법/경로]
서버-사이드 라우팅
① 클라이언트가 브라우저에 "irae.com"을 요청합니다.
② 서버는 index.html를 응답합니다.
③ 클라이언트는 서버로부터 받은 index.html을 렌더링합니다.
④ 렌더링한 웹페이지는 새로고침됩니다.
클라이언트-사이드 라우팅
SPA(Single Page Application)는 클라이언트-사이드 라우팅을 이용합니다. 클라이언트-사이드 라우팅은 서버로 어떤 요청도 날리지 않습니다. 모든 라우팅은 클라이언트 코드(자바스크립트)가 해결합니다.
① 클라이언트가 브라우저에 "irae.com"을 요청합니다.
② 프론트엔드 서버가 리액트 애플리케이션을 반환합니다. 여기에는 브라우저에 필요한 모든 리소스(html, css, javascript)가 포함돼 있습니다.
③ 클라이언트가 "irae.com/login"을 요청합니다.
④ 리액트 라우터가 요청을 가로챕니다.
⑤ 리액트 라우터 로직은 "irae.com/login"을 해석해 Login Component를 렌더링합니다.(그래서 인터넷이 끊겨도 실행됩니다.)
💁♂️reference
React.js, 스프링 부트, AWS로 배우는 웹 개발 101
김다정 지음ㅣ에이콘출판ㅣ2022ㅣ도서 정보
리액트를 다루는 기술
김민준 지음ㅣ길벗ㅣ2019ㅣ도서 정보
EOD.
