본문 바로가기
반응형

전체 글986

리액트 - Vercel로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- gh-pages로 리액트 프로젝트 배포하기- Netlify로 리액트 프로젝트 배포하기- Netlify 배포 에러 해결하기 이번에는 Vercel로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. Vercel 페이지로 이동해 Start Deploying 버튼을 클릭한다. GitHub 프로젝트를 배포할 예정이므로 Continue with GitHub 버튼을 클릭한다. Vercel과 깃허브가 연동되도록 Authorize Vercel 버튼을 클릭하자. 이제 Install 버튼을 누르자. 배포가 필요한 저장소를 연결한다. 깃허브의 저장소가 연결되면 리액트 프로젝트를 Import 하자. Project 이름을 설정한다. ([Project Name]-[random string].vercel.ap.. 2024. 5. 2.
Node JS - FormData와 multer로 여러 파일 업로드하기 (Upload Multiple Files with FormData and multer) Node JS 전체 링크 참고- multer로 이미지 업로드하기 다음과 같이 웹에서 여러 파일을 업로드하면 서버로 전송되도록 구현해 보자.리액트 input 태그에 multiple을 설정하면 여러 파일을 선택할 수 있다. handleUpload 구현은 전체 코드를 참고하자.formData의 append를 이용해 e.target.files를 순회하면서 파일을 추가한다.한글 파일이 있는 경우 파일 이름을 처리하기 위해 encodeURIComponent를 이용해야 한다.formData와 config("content-type": "multipart/form-data")를 post에 설정하여 서버로 전송하면 된다.import React from "react";import axios from "axios";const.. 2024. 4. 27.
리액트 - Netlify 배포 에러 해결하기 (Netlify Build and Deploy Error) 리액트 전체 링크 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지에 배포했던 프로젝트를 Netlify에 배포하면서 발생했던 에러를 정리하였다. 다음과 같은 경우가 발생하였다. - npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)- CI 설정 (CI= npm run build)- package.json : homepage 설정 npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)  페이지를 배포했을 때 아래 에러가 나온다면 npm install이 잘 설치가 되지 않는 경우다. (Initializaing Failed)Failed during.. 2024. 4. 25.
리액트 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 리액트 전체 링크 참고- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기- 리액트 라우터 react router (최신 node ver) - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 Netlify도 깃허브 페이지와 마찬가지로 라우터 설정을 해야 한다.그렇지 않으면 라우터 페이지에서 새로고침을 할 경우, Page Not Found를 만나게 된다.라우터 설정 먼저 react-router-dom을 설치해서 라우터를 구현해 보자. npm install react-router-dom 링크를 참고하여 라우터를 설정하자. 코드가 완성되면 원격으로 push 한다. Netlify는 깃허브 페이지와는 다르게 pus.. 2024. 4. 25.
리액트 - Netlify로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- 리액트 프로젝트 추가하기- gh-pages로 리액트 프로젝트 배포하기- .env 환경 변수 파일 관리하기- Vercel로 리액트 프로젝트 배포하기 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지처럼 Netlify로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. 먼저 깃허브에 리액트 프로젝트를 추가한다. (npm create react-app react-netlify) Netlify에서 로그인 / 회원가입을 진행한다. (깃허브로 가입) 깃허브 가입 후, repositoroy 접근 권한을 주면 Netlify에서 깃허브 저장소에 접근할 수 있다.overview 화면에서 Add.. 2024. 4. 25.
리액트 - 페이지 가시성 확인하기 (useEffect with Visibility Change Event) 리액트 전체 링크 참고- 마우스가 일정 시간 움직이지 않는 경우 새로고침하기 페이지가 가려졌거나, 보이지 않는 경우에 이벤트를 감지해 보자.구현 페이지 가시성은 document의 visibilityState로 확인할 수 있다.const [visibility, setVisibility] = useState(document.visibilityState); 그리고 visibilitychange 이벤트로 가시성 상태 변경을 감지한다.useEffect에 이벤트를 등록해서 이벤트를 처리하면 된다. (clean-up 함수에서는 이벤트를 제거한다.) useEffect(() => { const handleVisibilityChange = () => { setVisibilit.. 2024. 4. 24.
리액트 - 마우스가 일정 시간 움직이지 않는 경우 새로고침하기 (useEffect with Mouse Move Event) 리액트 전체 링크 참고- 페이지 가시성 확인하기 다음과 같이 마우스가 5초 이상 움직이지 않는 경우, 새로고침을 하도록 해보자.또한 페이지 내에서 마우스가 움직이는 것이 아니라면 여전히 타이머는 증가한다.구현 타이머를 표시할 변수를 useState로 선언한다. const [seconds, setSeconds] = useState(0); 최초 렌더링시 useEffect에서 mousemove 이벤트를 등록한다.5초 이상 시간이 지나는 경우 window.location.reload()로 새로고침을 실행하였다. useEffect(() => { let timer; const handleMouseMove = () => { setSeconds(0); .. 2024. 4. 24.
Git Bash - gitignore의 경로가 무시되지 않는 경우 해결하기 (git rm --cached) Git / GitHub 전체 링크 참고 - .env 환경 변수 파일 관리하기 - 커맨드 창을 Git Bash로 변경하기 .env의 파일과 같이 github에 업로드하고 싶지 않거나 커밋을 무시하고 싶은 파일은 .gitignore에서 설정할 수 있다. 예를 들어 저장소의 test 폴더를 업로드 하지 않고 싶다고 가정하자. 그러면 .gitignore에 경로에 /test를 추가하면 된다. /test # Logs logs *.log ... 하지만 test 폴더의 파일을 변경해도 커밋에 여전히 포함되어 무시되지 않는 경우가 있을 수 있다. 해결 방법 위의 경우는 test에 있는 파일이 깃허브에 업로드 되어서 깃이 추적하기 때문이다. 따라서 추적되지 않도록 처리해야 한다. 먼저 git bash로 이동한 후, git.. 2024. 4. 19.
깃허브 액션 - is-website-vulnerable로 웹사이트 취약점 점검하기 Git / GitHub 전체 링크 참고 - https://github.com/lirantal/is-website-vulnerable - github-pages-deploy-action로 리액트 gh-pages 자동 배포하기 인터넷 서점 알라딘의 취약점을 점검하는 깃허브 액션을 만들어 보자. 링크에 있는 예제를 리포지토리의 .github/workflows/check-website.yml에 추가한다. name: Test site for publicly known js vulnerabilities on: push jobs: security: runs-on: ubuntu-latest steps: - name: Test for public javascript library vulnerabilities uses: .. 2024. 4. 18.
반응형

티스토리툴바