본문 바로가기
반응형

ReactJS5

[NextJS] framer-motion을 활용한 모달(Modal) 구현 framer-motion을 굳이 사용한 이유는? React에서 제공하고 있는 Portal기능만을 사용하여 모달창을 구현할 수는 있으나 "Exit Animation"을 주기가 어려웠다. React환경에서는 show/hide의 상태값을 변경하여 리렌더링 되면, 모달 컴포넌트가 보이거나 사라진다. 하지만 "리렌더링"이 되면서 보이거나 사라지기 때문에 사라질 때는 애니메이션 없이 바로 사라지는 현상이 발생한다. 라이브러리도 있는 마당에 어떻게든 구현할 방법은 있겠지만 이미 훌륭하게 제공하고 있는 라이브러리를 굳이 쓰지 않을 이유가 없었다. 그리고 라이브러리 종류 역시 많았는데 그 중에 framer-motion을 선택한 이유는, 어차피 이왕 선택해서 사용하는 거 가장 인기가 많고, 호환성이 좋다고 알려진 라이브러.. 2024. 3. 22.
[ReactJS] dangerouslySetInnerHTML가 뭘까? Next.js 환경에서 개발을 시작한 지 꽤 지났지만 최근까지도 나는 dangerouslySetInnerHTML 이게 innerHTML을 XSS로부터 보호해 주는 내장된 innerHTML이라고 생각했었다. 충격적이게도 innerHTML이랑 전혀 다를 게 없었다. 공식문서 내용을 가져와보자. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따.. 2024. 2. 15.
[NextJS] 빌드/운영 배포 시 console.log 제거하기 NextJS 빌드 시 console 제거하기 로그라는 게 서비스할 때 로그가 노출되면 위험한 부분이 있겠지만, 아무래도 개발을 하는 도중에는 로그를 살려두고 작업을 하는 게 매우 편리하다. 당연하게도 "빌드"시에만 콘솔을 제거해주는 기능을 Nextjs 자체적으로 제공하는 중이다. ▷ next.config.js module.exports = { compiler: { removeConsole: true, }, } console.* 와 일치하는 모든 콘솔을 제거해 달라는 설정이다. 공식문서에서는 babel-plugin-transform-remove-console와 비슷하다고 명시되어 있다. (일전에 NuxtJS에서 동일한 주제로 정리한 글이 있는데 거기서도 babel-plugin-transform-remove.. 2024. 1. 9.
[ReactJS] snippet을 사용한 템플릿 자동 완성 기능 사용하기 ReactJS 코드 템플릿을 자동 완성하는 방법에 대해 알아보자. 1. 우선 당연히 확장 프로그램부터 설치를 진행해야 한다. Reactjs code snippets Reactjs code snippets - Visual Studio Marketplace Extension for Visual Studio Code - Code snippets for Reactjs development in ES6 syntax marketplace.visualstudio.com Reactjs code snippets라는 확장 프로그램을 설치해주자. (vscode에서 설치해주면 된다.) 2. 설치가 완료되었다면 파일에서 특정 코드를 입력해주면 된다. 지원하는 파일 확장자는 .js / .ts / .jsx / .tsx 이다. 아래.. 2022. 7. 26.
[ReactJS] React 시작하기 - 프로젝트 생성 및 실행 (ft. npm, yarn) React 역시 Vue와 마찬가지로 프로젝트를 생성하기 위해서는 node.js가 필요하다. (없다면 얼른 node.js를 설치해주고 오자) 1. 프로젝트 생성 npm의 패키지 실행 도구인 npx를 사용해서 React 프로젝트를 생성할 수 있다. 본인이 설치를 원하는 경로에 들어가서 아래 명령어를 입력해주자. (여기서 만약 yarn을 사용하고 싶다면 따로 설치를 진행해주고 npm과 yarn의 생성 구문이 다르다.) # create react-app use npm npx create-react-app my-app # create react-app use yarn yarn create react-app my-app 여기서 "my-app"이라고 입력한 부분은 프로젝트명으로 본인이 원하는 이름을 정해주면 된다. .. 2022. 7. 1.
반응형
TOP

티스토리툴바