XSS XSS란? 웹 사이트에 악성 스크립트를 삽입하여 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다. 웹 사이트가 입력받은 값을 검증하지 않고 사용할 경우 발생 1. 테스트 예시 입력 값에 ["> ] 삽입 2. 해결 방안 2-1) NextJS 해결 방안 next.config.js 파일의 headers에 해당 값을 추가 해당 값을 추가하게 되면 XSS 공격을 XSS공격을 감지했을 때 페이지 로드를 중지한다. * XSS 해결 방안 공식문서 https://nextjs.org/docs/advanced-features/security-headers module.exports =..

1. 문제 원인 NextJS의 경우 SSR(Server Side Rendering)으로 서버에서 미리 HTML을 준비해 클라이언트한테 응답해주는데 최초 웹 페이지를 렌더링 할때에는 window나 document 전역객체는 선언되지 않아 해당 변수를 참조할 수 없기 때문에 해당 오류가 발생한다. SSR이란? 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 2. 해결 방법 useEffect 사용 useEffect은 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 렌더링 후..

1. 문제 원인 NextJS에서 Recoil을 사용할 경우 발생하는 오류로 파일이 변경되면 다시 빌드되면서 Atoms의 State들이 재선언 되어 발생한다. NextJS에서만 발생하는 오류로 기능적으로는 문제가 없다. 2. 해결 방법(1) 고유성이 보장되는 UUID를 활용하여 key값을 생성한다. npm install uuid // TypeScript npm i --save-dev @types/uuid import { atom, selector } from "recoil"; import { IVideo } from "../api/youTubeApi"; import { IGetListResult, getPopularList } from "./../api/youTubeApi"; import { v1 } fr..

서버와 클라이언트의 클래스명이 다른 것이 원인이다. NextJS는 첫 페이지 로드가 SSR로 동작하기 때문에, 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. * SSR / CSR 이란? 2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념 1. babel-plugin-styled-components 라이브러리 설치 환경에 따라 달라지는 className을 일관되게 해준다. npm add -D babel-plugin-styled-components 2. root경로에. babelrc파일 생성 ( .babelrc 파일) { "presets"..

NextJS에서는 기본적으로 라우트 설정이 되어있지 않는 페이지에 대해 서버사이드 랜더링을 하지 않게 아래와 같은 404 오류 페이지를 보여주도록 되어있다. * 공식 문서 * https://nextjs.org/docs/advanced-features/custom-error-page 1. 404 페이지 커스텀 방법 기존 오류 페이지를 사용하지 않기 위해서는 pages폴더에 404 파일을 생성한다. ( 404.tsx ) export default function NotFound(){ return "What are u doing here" } 원하는 화면으로 커스텀 404 파일은 기본적으로 빌드 타임에 만들어 지기 때문에 데이터를 불러오는 작업이 있다면 getStaticProps를 통해 가져와야한다. 2. 5..

NextJS에서는 img태그가 아닌 next에서 import 해 온 next/image의 Image태그를 사용해야 한다. NextJS에서 이미지를 최적화시켜주기 때문이다. * 공식 문서 * https://nextjs.org/docs/api-reference/next/image 1. 장점 Loader을 통해서 커스터마이징 가능 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소 가능 자동 스켈레톤 UI(placeholder 통해서), CLS 방지도 가능 이미지 캐싱도 자동으로 해주고 expiration time 설정도 가능 next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호 가능 2. 사용 방법 2-1..

EVN 란? 개발자만 알아야 하는 민감한 정보(Port, DB, API KEY 등)나 Git, 오픈소스에 올리면 안 되는 값들이 있다. 이때 환경변수 파일을 외부에 만들어 저장시켜 소스코드 내에 하드 코딩하지 않고 사용할 수 있다. 1. EVN 파일 사용 방법 1-1) 최상위 경로(root)에서 .evn 파일 생성 환경 변수로 지정할 값 작성 리액트(create-react-app)일 경우 변수명 REACT_APP_으로 시작한다. ( ex) REACT_APP_API_KEY ) NextJS의 경우 NEXT_PUBLIC_으로 시작한다. 1-2) .gitignore 설정 추가 .evn파일을 등록해주어야 Git에 Push 할 때, 파일이 올라가지 않는다. 1-3) 환경 변수 사용 const API_KEY = pr..

데이터가 유효할 때만 화면이 보이는 게 좋은가 또는 Loading화면을 보여준 다음에 데이터가 받는 게 좋을지 선택하여 SSR 방법을 사용할지 redirect, rewrites을 사용할지 선택하면 된다. * Source Code * https://github.com/kangilbin/React.js/blob/master/nextjs-study/next.config.js 1. redirect 사용 방법 요청 URL을 임의의 URL 변경시켜 준다. parameter 값은 확인 가능하다. ( next.config.js ) const { redirect } = require("next/dist/server/api-utils"); const nextConfig = { reactStrictMode: true, sw..

1. Style JSX 스타일을 꾸미는 방법 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } 컴포넌트에 CSS를 적용시켜준다. global : 모든 컴포넌트에 CSS 적용한다. - NextJS는 하나의 큰 앱이 아니라 각각의 나누어진 페이지이기 때문에 하나의 페이지에 작성한 global CSS는 다른 페이지에 영향일 끼칠 수 없지만, 컴포넌트로 하위에 넣게 되면 적용된다. ( _app.tsx에 넣어서 전체 페이지에 적용) 2. Custom App Component ( 템플..

* NextJS 프로젝트 설치 및 실행 * https://cocococo.tistory.com/42 * Source Code * https://github.com/kangilbin/React.js/tree/master/nextjs-study 1. Routes pages 폴더 안에 새로운 page 파일을 넣게 되면 자동으로 이동할 수 있다. ( about.tsx ) export default function Potato() { return "about"; } export default로 만들어 주어야한다. 함수명은 상관없다. 파일 이름이 그대로 url로 들어간다. index 파일은 메인 홈페이와 연결되어있다. http://localhost:3000 => index 페이지 2. Routing import L..