React.js9 react PDF 다운로드 > @react-pdf/renderer React 진영에서 PDF를 편하게 만들어주는 라이브러리라는 점이 장점이다. 최근 업데이트도 활발히 진행되고 있는 라이브러리이지만, 미리보기 구현이 아쉬웠다. 다운로드 이전에 미리보기 화면이 해당 내용을 순수하게 보여주는게 아니라, 라이브러리에서 특정 view를 고정시켜 두었기 때문에 production으로 사용하기에 고민되었다. 순수 다운로드 기능으로만 사용하기에는 아주 적합한 라이브러리 🤔 > html2canvas+ jspdf 현재 보이는 화면에 대한 스크린샷을 찍어서 이를 pdf로 변환해주는 방식이다. How to generate PDF from HTML in React / Node.js app How to generate PDF from HTML in Rea.. 2023. 10. 11. React 모달 밖 영역 클릭시 닫기 (2가지 방법) > useState 사용 모달 바깥 부분(OutModal)에 투명한 배경을 뷰포트 크기로 깔고 이곳을 클릭했을때 모달을 닫아준다. 여기서 중요한점은 모달(DetailModal)과 모달 바깥 부분(OutModal)은 "형제"여야 하고, 모달의 z-index가 모달 바깥 부분보다 더 높아야한다. 즉 모달과 모달 바깥 부분은 다른 층에 존재하는 것이다. (이벤트 버블링을 막기 위해서!) // 모달을 사용하는 컴포넌트 function Container() { const [modal, setModal] = useState(false); const openModalPopup = () => { setModal(true); document.body.style.overflow = "hidden"; }; const clo.. 2023. 10. 10. 구글 애널리틱스 적용하기 2편(react-ga4) > 구글 애널리틱스 GA4 적용 (230710) 2023년 7월 1일부터 유니버셜 애널리틱스 속성이 데이터를 수집하지 않습니다. 대신 Google 애널리틱스 4 속성을 만드는 것이 좋습니다. 구글 애널리틱스가 드디어 결국 GA4를 사용해야 하는 날짜가 되었고 그에 따라 기존 유니버셜 ID를 추적했던 react-ga 라이브러리에서 react-ga4로 변경하였다. https://www.npmjs.com/package/react-ga4 다행히도 변경사항이 그리 많지않아 기존 글에서 수정만 하였다! 1. 리액트와 구글 애널리틱스 연결하기 배포할 때 포함되는 dependencies에 설치 $yarn add react-ga4 $npm install react-ga4 --save 2. 추적 ID를 환경변수로 저장하기.. 2023. 7. 10. Axios 호출시, Proxy를 이용하여 크로스브라우징(CORS) 해결하기 > 이슈 타사이트 api에 접근하여 데이터를 받아 프론트에서 활용해야 하는 업무가 있었다. 포스트맨으로 호출 했을때는 정상 작동했는데, localhost 또는 우리 웹사이트에서 호출하면 CORS 에러가 발생하였다. Access to XMLHttpRequest at “타사이트 URL” from origin "localhost:8080” has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. > 원인 브라우저에서는 내가 IP마다 CORS 정책을 허용해주.. 2023. 2. 1. 패키지 업데이트하며 발생한 에러 정리 # 패키지 업데이트 (yarn.lock만 변경됨) $yarn upgrade # yarn.lock에서 설치된 버전으로 package.json을 업데이트 $yarn global add syncyarnlock $syncyarnlock -s -k # package.json의 현재 버전 제약 조건으로 yarn.lock을 업데이트 $yarn react-typescript 프로젝트를 패키지 업데이트 이후 여러가지 에러들이 발생하였는데, 해결한 내용들을 정리하였다. 🚫 node_modules/@types/babel__traverse/index.d.ts: ']' expected. 66 | } 67 | > 68 | export type ArrayKeys = keyof { [P in keyof T as T[P] extend.. 2022. 11. 30. 운영서버에 SEO 구현이 안되던 이슈 (react-snap) 1. 이슈 상황 작년 연말에 회사에서 소규모 웹사이트 하나를 만들었는데 CSR로 구현된 React 페이지에서 SEO를 적용하기 위해 react-snap 라이브러리를 사용했었다. 그런데 확인해보니 개발서버에서는 SSR 환경의 파일을 소스보기한 것처럼 동일하게 구현되지만 운영서버에서는 SEO를 구현하기 이전과 같이 아무것도 보이지 않는 이슈가 발생했다. production과 develop의 yml파일이나 package.json도 동일하게 구성되었는데 운영서버에만 나타나지 않았다. 확인 결과 S3에 올라간 build파일을 비교해보니 index.html의 크기가 달랐다. 개발서버의 index.html은 페이지별 내용이 생성되어있고, 운영서버의 index.html은 기존처럼 빈 파일이 올라가 있었던 것! 2. 발.. 2022. 4. 8. react-router v6 달라진 점들 1. Routes - exact를 작성할 필요가 없어졌고, component 대신 element로 사용한다. // 기존 // react-router v6 2. useNavigate() - 동적라우팅 시, useHistory가 사라지고 useNavigate로 대체되었다. // 기존 const history = useHistory(); history.push('/'); history.replace('/'); // react-router v6 const navigate = useNavigate(); navigate('/'); navigate('/', {replace: true}); 3. useLocation() - 현재 페이지 path 확인시, history객체가 아닌 useLocation을 활용한다. // .. 2021. 12. 21. react-router-dom의 Link 컴포넌트와 a 태그 페이지 전환 차이점 React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만 jsp혹은 일반 html에서는 태그를 이용해서 페이지 전환을 한다. 1. 태그 - 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버린다. - 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링! - 따라서 상태 값이 유지되지 못하고 속도도 저하된다. - 해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 한다. 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. // 렌더링을 초기화 하고 싶을때 2. Link 컴포넌트 .. 2021. 9. 29. React Typescript 초기세팅 git repository 생성 repo 생성후 연결! # 연결하고자하는 vscode 레포지토리로 가서 $git init $git remote add origin {레포지토리 주소} $git add . $git commit -m "first commit" $git push -u origin master 1) CRA 설치 $npx create-react-app 폴더명 2) 필요한 패키지 설치 dependencies에는 애플리케이션에 직접 관여하는 라이브러리가 들어가며 devDependencies에는 개발할 때만 쓰는 (typescript, eslint, prettier, babel 등) 도구들이 들어간다. build하고 최종적으로 내보낼때에는 dependencies에 있는 내용만으로 배포된다. 즉, 배포할.. 2021. 8. 8. 이전 1 다음
