LG CNS 부트캠프 학습일지 8일차

학습 내용

• React Router
• 블로그 토이프로젝트

React Router

react-router-dom 패키지를 설치해야 했다.

npm install react-router-dom

간략하게 아래와 같은 방식으로 만들 수 있다.

export const MyPage = () => {
	return (
		<BrowserRouter>
			<Routers>
				<Route
					path={"/main"}
					element={<MyMainComponent/>}
				></Route>
				<Route
					path={"/sub"}
					element={<MySubComponent/>}
				></Route>
			</Routers>
		</BrowserRouter>
	);
}

export const MyMainComponent = () => {
	const navigate = useNavigate();

	const handleButtonClick = (event) => {
		navigate("/sub");
	}

	return (
		<button onClick={handleButtonClick}>
			to SubComponent
		</button>
	);
}

export const MySubComponent = () => {
	const navigate = useNavigate();

	const handleButtonClick = (event) => {
		navigate("/main");
	}

	return (
		<button onClick={handleButtonClick}>
			to MainComponent
		</button>
	);
}

리엑트에서 <a>는 일반적인 경우와 같이 작동하지 않는다. 다시 말해 페이지를 이동하지 않는다. 만약 페이지를 이동하게 만들어도 이렇게 되면 더 이상 SPA (Single Page Application) 가 아니기 때문에 사용자 경험 측면에서 문제가 생긴다. 때문에 라우터를 사용해서 페이지를 이동하는 것 같은 경험을 할 수 있게 해준다.

SPA에서 라우터가 중요한 이유는 웹 앱의 구성을 상황마다 다르게 구성할 수 있기 때문이다. 예를 들어 리엑트로 전자상거래 웹사이트를 만들었다고 해보자, 판매하는 상품이 나열된 페이지가 있고 그 상품을 구매하기 위해 결제를 하는 페이지가 구분되어 있을 것이다.

블로그 토이프로젝트

지금까지 배웠던 것을 활용해서 블로그 토이프로젝트를 만들어봤다. 아직은 스스로 뭔가를 만들었다기 보다는 강사님이 만드시는 것을 따라서 만들어보는 정도이다. 리엑트를 스스로 공부할 때도 느꼈지만 다른 프레임워크에 비해서 배우기 쉽다. 웹페이지를 만들 때 HTML, CSS, JavaScript 세 가지로 나누어서 생각할 필요가 없기 때문이다.

회원가입 및 로그인 페이지를 만들었다. 등록된 사용자인지 확인하는 것은 백엔드에서 담당해야하는 것이기 때문에 입력된 이메일과 비밀번호를 확인하는 과정은 건너뛰어야 했고 그 점이 아쉬웠다. 하지만 라우터와 axios 라이브러리 사용법을 연습할 수 있었다.

인증 vs 인가

한자어다보니 정확한 의미를 파악하려면 대응하는 영어 단어의 의미를 찾아보면 도움이 된다. 인증(Authentication)은 너가 누구인지 확인하는 것이다. 예를 들어 로그인을 하는 것은 인증된 사용자인지 확인하는 것이다.

반면 인가(Authorization)은 너가 무엇을 할 수 있는지 확인하는 것이다. 사용자라고 하더라도 모두 같은 것은 아니다. 어떤 사용자는 다른 사용자보다 권한이 더 많이 주어질 수 있다. 예를 들어 군대에서 소령은 소위보다 더 많은 권한을 갖는다. 커뮤니티에 다양한 사용자들이 글을 작성한다. 사용자 A가 작성한 글을 사용자 B가 임의로 수정한다거나 삭제하면 안될 것이다. 이처럼 어떤 사용자가 글을 수정 또는 삭제하려고 할 때 그 사용자에게 허락해도 되는지 확인하는 작업은 인가라고 할 수 있다.

일단은.. 내가 이해한대로 적어봤는데, 나중에 백엔드를 공부하면서 더 자세하게 배우게 될 것 같다. 내가 이해하고 있는 내용과 그 때 배우는 내용이 다르다면 그 때 작성하는 학습일지에 다시 이야기하겠다.

결론

쉽지는 않았다. 하지만 작성하는 코드를 웹브라우저에서 바로 확인할 수 있어서 재미있었다. 간단한 웹앱을 만들 때는 라우터를 사용할 일이 없었는데, 이번에 제대로 배웠다.