본문 바로가기
반응형

개발729

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 .. 2024. 4. 27.
리액트 - Netlify 배포 에러 해결하기 (Netlify Build and Deploy Error) 리액트 전체 링크 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지에 배포했던 프로젝트를 Netlify에 배포하면서 발생했던 에러를 정리하였다.(배포 페이지 : https://react-project-bloodstrawberry.netlify.app/) 다음과 같은 경우가 발생하였다. - npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)- CI 설정 (CI= npm run build)- package.json : homepage 설정 npm install 에 옵션이 필요한 경우 (--legacy-peer-deps)  페이지를 배포했을 때 아래 에러가 나온다면 np.. 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 한다. Net.. 2024. 4. 25.
리액트 - Netlify로 리액트 프로젝트 배포하기 리액트 전체 링크 참고- 리액트 프로젝트 추가하기- gh-pages로 리액트 프로젝트 배포하기- .env 환경 변수 파일 관리하기 - Netlify로 리액트 프로젝트 배포하기 - Netlify로 배포된 프로젝트에 리액트 라우터 적용하기 - Netlify 배포 에러 해결하기 깃허브 페이지처럼 Netlify로 무료 웹 호스팅 서비스에 리액트를 배포해 보자. 먼저 깃허브에 리액트 프로젝트를 추가한다. (npm create react-app react-netlify) Netlify에서 로그인 / 회원가입을 진행한다. (깃허브로 가입) 깃허브 가입 후, repositoroy 접근 권한을 주면 Netlify에서 깃허브 저장소에 접근할 수 있다.overview 화면에서 Add new .. 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.
깃허브 액션 - github-pages-deploy-action로 리액트 gh-pages 자동 배포하기 Git / GitHub 전체 링크 참고 - gh-pages로 리액트 프로젝트 배포하기 - https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs - https://github.com/JamesIves/github-pages-deploy-action 리포지토리에 코드가 push 되는 것과 깃허브 페이지를 배포하는 것은 별개의 작업이다. (npm run deploy) 리포지토리에 push가 되면 페이지가 자동 배포되도록 깃허브 액션의 yml 파일을 만들어 보자. .github/workflows/push-and-deploy.yml을 만들어 보자. github-pages-deploy-action을 쓰려면 contents의 permi.. 2024. 4. 18.
반응형

티스토리툴바