전체 글

[ React ] Next.js

Next.js에 대해 간단히 설명 Next.js는 React 기반의 프레임워크입니다. React 는 기본적으로 Client Side Rendering만 지원합니다. 하지만 Next.js는 Server Side Rendering을 지원하기 때문에 SEO에 유리합니다. Next.js의 특징 Server Side Rendering 지원 기본적으로 리액트는 CSR만 지원하기 때문에 SEO에 유리하지 않습니다. 하지만 Next.js는 SSR을 지원하기 때문에 SEO에 유리합니다. Dynamic Routing 지원 Next.js는 폴더 및 파일 시스템 기반의 라우팅을 지원합니다. Code Splitting 지원 첫 페이지가 로딩되는 시간을 줄이기 위해 코드 스플리팅을 지원합니다. 페이지를 이동할 때마다 필요한 코드..

[ React ] Portal 이란 무엇인가

Portal이란? 게임이나 영화등에 나오는 물체를 순간이동 시키는 신기한 공간을 만들어내는 것을 포탈이라고 하죠. React 에서 사용하는 포탈도 비슷한 개념입니다. 부모 요소 밑에 있는 자식 요소를 부모 요소보다 더 위로 보내주는 역할을 하는 Portal 을 알아봅시다. Portal 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법 입니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 포탈 ); }; export default App; import React from "react"; const Portal = ({ children }) => { return ReactDOM.createPo..

[ React ] XSS, CSRF 공격이란

XSS (Cross Site Scripting) XSS는 웹사이트 취약점 공격의 일종으로, 사용자가 입력한 내용이 웹사이트에 그대로 반영되는 취약점을 이용하여 악의적인 스크립트를 삽입하는 공격입니다. XSS 공격에는 크게 Stored XSS와 Reflected XSS 그리고 DOM-based XSS가 있습니다. XSS 공격의 종류 Stored XSS -- 저장형 XSS XSS 취약점이 있는 웹 서버에 악성 스크립트를 입력해두고 방문자가 해당 페이지를 읽는 순간 방문자의 브라우저를 공격하는 방식이다. 일명 저장 방식이다. Reflected XSS -- 반사형 XSS 특정 파라미터 값을 통해서 공격하는 방식으로 검색, 에러메시지, URL 등 사용자로부터 입력한 값을 받아 브라우저에게 응답할 때 전송되는 방법..