react
-
[React] React에서 상태관리3(React Query)IT/코딩히스토리_FE 2025. 10. 14. 16:39
Zustand (상태 관리): 클라이언트의 상호작용에 의해 변경되는 데이터를 관리합니다. (예: 다크 모드 토글)React Query (데이터 페칭): 서버에 의해 관리되고 제공되는 데이터를 관리합니다.이전 포스팅에서 서버에서 가져오는 데이터(상태)는 React Query로 관리하는 것이 효율적이라고 했다.왜일까? 1. 네트워크 비용 증가- 페이지를 전환할 때마다 네트워크에 새로운 데이터를 요청한다면 ? 또 그게 fireStore같은 접근단위로 과금이 되는 구조라면? 2. 응답 속도 저하/ 서버 부하 / 비효율- 위와 같은 이유로 이미 있는 것을 또 호출할 필요가 없다. 3. 데이터 일관성 문제- 여러 컴포넌트에서 동시에 요청한다면, 데이터 갱신 타이밍이 다를 수 있다. React Query같은 서버..
-
[React js] .env 파일로 설정IT/코딩히스토리_FE 2024. 1. 24. 00:13
로컬에서 할 때는 문제가 안되지만 저장소에 올릴때는 토큰/api 설정이나 서버url을 안올리는게 좋겠다. 그래서 .env파일에 별도로 관리하는 것이 좋다. [사전 조건] 1. create-react-app을 이용해 생성한 리액트 프로젝트 create-react-app으로 생성했다면 ' dotenv '를 통해 .env 파일을 import하지 않아도 된다. 다만 리액트에서 .env 설정값을 가져와 사용하려면 조건이 있다. REACT_APP_ 접두사 사용: 리액트에서는 환경 변수의 이름이 REACT_APP_로 시작해야 합니다. 예를 들어, REACT_APP_API_KEY=your-api-key와 같이 설정합니다. .env 파일의 재시작 없는 변경은 불가능: .env 파일의 내용이 변경되면, 개발 서버를 다시 ..
-
[리눅스-Ubuntu-APACHE2-REACTJS] 프론트 배포하기/고정IP설정IT/코딩히스토리_서버 2024. 1. 21. 20:56
[목적] 리액트JS로 만든 프론트소스를 리눅스 서버로 올려 배포를 하기 [선행 조건] 1.VMWARE에 우분투로 리눅스 서버를 생성 2.아파치를 리눅스 서버에 설치 3.PUTTY를 통해 리눅스 서버 접속 설정 [차례] 1. fe 디렉토리의 터미널에서 npm run build를 통해 build파일 생성 그러면 디렉토리에 build파일이 생성됨 2. 이제 PUTTY 로 접속해서 scp 명령어를 통해 리눅스로 해당 빌드파일을 전달하면 됨 그전에 리눅스 서버에 원격파일 전송 경로를 미리 생성해주는 것이 좋음(이따가 apache2 설정 파일에서 운영디렉토리 설정할 건데, build, remote, backup 이런 식으로 나눠서 배포할때만 해당 파일을 옮기는게 맞겠다는 판단이 들었음) scp -r C:\[프로젝트..