본문 바로가기
반응형

분류 전체보기1062

리액트 - 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# Logslogs*.log... 하지만 test 폴더의 파일을 변경해도 커밋에 여전히 포함되어 무시되지 않는 경우가 있을 수 있다.해결 방법 위의 경우는 test에 있는 파일이 깃허브에 업로드 되어서 깃이 추적하기 때문이다.따라서 추적되지 않도록 .. 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 vulnerabilitieson: pushjobs: security: runs-on: ubuntu-latest steps: - name: Test for.. 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-pa.. 2024. 4. 18.
리액트 Custom Hook - 모든 페이지의 로컬 스토리지 변경 감지하기 (useLocalStorage) 리액트 전체 링크 참고- 로컬 스토리지 사용 방법과 세션 스토리지 비교- 게으른 초기화로 useState 초기화하기 다음과 같이 로컬 스토리지 변경을 감지하는 커스텀 훅을 만들어보자.여기서는 모든 페이지에 대해 이벤트를 감지한다. 예시 코드는 다음과 같다.로컬 스토리지가 변경되면 useEffect에서 storage 변경 이벤트 리스너를 등록하면 된다.import React, { useState, useEffect } from "react";const KEY0 = "MY_DATA_0";const LocalStorageHook = () => { const [localStorageData, setLocalStorageData] = useState( localStorage.. 2024. 4. 15.
리액트 Custom Hook - input 입력 유효값 검사하기 (useInput) 리액트 전체 링크 다음과 같이 이 있다. 리액트에서는 아래와 같이 input state를 관리한다. import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> ); }; export default MyInput; (빈 문자열을 포함하여) 숫자만 입력 가능하도록 코드를 수정해 보자. import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(""); const handleChange = (val.. 2024. 4. 15.
Node JS - archiver로 폴더 압축해서 전송하기 (Compressing and Sending a Directory with Archiver) Node JS 전체 링크 참고 - https://www.npmjs.com/package/archiver 다음과 같은 경로가 있다고 가정하자. let folderPath = "D:\\github\\node-server\\macro\\myfiles"; // 압축할 폴더 경로 해당 경로에는 아래의 폴더와 파일이 존재한다. 리액트에서 버튼을 클릭하면 위의 폴더를 zip으로 다운로드 받아보자. 리액트 예시 코드는 다음과 같다. import React from "react"; import axios from "axios"; const DownloadZip = () => { const handleDownload = async () => { let server = `http://192.168.55.120:3002/fi.. 2024. 4. 15.
반응형

티스토리툴바