2023.02.06

📖오늘 배운  것

리액트

- jsx XSS 공격 방지

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;

React DOM에서는 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하기 때문에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 반환하기 때문에 XSS 공격을 방지할 수 있다.

 

* 이스케이프란?

THML 엔터티와 같은 특정 문자를 HTML로 변환하는 행위

 

React.js와 Next.js의 차이

- React.js는 라이브러리, Next.js는 프레임워크이다. 

-React.js는 CSR(Client Side Rendering)을 하고, Next.js는 SSR(Server Side Rendering)을 한다.

 

NextJS

: ReactJS를 바탕으로 만들어진 프레임워크이다.

-> 리액트의 SEO문제를 해결하기 위해 등장

 

- Page 폴더

: Pages 에 들어있는 파일명으로 라우터 생성

예) Pages 폴더 안에 Hello 라는 이름의 파일이 존재 -> '/hello'라는 라우터를 갖게 된다.

 

 

- Link

리액트에서는 <a>태그를 대신해서 react-router-dom의 <Link>  태그를 사용한다.

NextJS에서는 <Link>태그로 감싼 <a>태그를 사용한다. 그래서 className 등의 속성을 지정할 때 a 태그에게 지정해줘야 한다.

...
return (
	<>
     <Link herf="/">
    	<a className="example">Example</a>
     </Link>
    </>  
);

 

- _app.tsx

: 각페이지는 _app파일을 통해 렌더링된다. 즉, pages 폴더의 파일들을 import해서 실행시키는 상위 컴포넌트가 _app

 

 

💭배운 점

오늘은 리액트 공식문서를 처음부터 읽기 시작했고, 이후 팀프로젝트에서 nextJS를 사용할 건지 React를 사용할건지 정해야해서 nextJS의 특징에는 뭐가 있는지 간단하게 살펴보았다.

리액트 공식문서의 경우 초반부를 읽으면서 그래도 대부분 아는 내용이었는데 XSS 공격 방지에 대한 내용은 처음에 공부할 때 들어봤던 내용이었는데 잊고 지냈던 것 같아서 다시 기록해보았다.

nextJS는 제대로 공부해 본 적이 한번도 없는데 이번에 정보를 찾아보면서 nextJS가 프레임워크라는 것을 처음 알았고 React 기반이다보니 러닝커브가 그렇게 높진 않을지도 모르겠다는 생각이 들지만 제대로 공부를 시작해봐야 알 것 같다. 프로젝트에 적절한 기술스택을 선정하는 것은 참 어려운 일 같다...