CORS란? 교차 출처 리소스 공유(Cross-Origin Resource Sharing) 지정된 도메인 외부에 있는 자원에 대한 접근을 통제하는 브라우저 메커니즘 자원에 대한 접근은 httpd 헤더를 사용하여 허용함 SOP(Same-Origin Policy)가 확장된 정책 SOP(Same-Origin Policy) 동일한 port,http,host에서 자원에 대한 접근을 허용 에러나는 상황 API를 호출하는 도메인이 서버 측 도메인과 다를 경우 발생합니다. 해결 방법 서버 측에서 add_header 'Access-Control-Allow-Origin' '*'; 를 추가합니다. #nginx서버 시 $ sudo vim /etc/nginx/sites-avaliable/default server { liste..

React Query란 서버 상태(server state)를 관리하는 라이브러리다. 서버 상태란 원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다 데이터를 가져오고 업데이트하기 위해선 비동기 API가 필요하다 다른 사람과 함께 사용하며, 내가 모르는 사이에 업데이트될 수 있다 앱에서 사용하는 데이터가 “유효 기간이 지난” 상태가 될 가능성을 가진다. 예를 들어 쇼핑몰의 상품 목록, 게시판의 댓글, 배달앱의 주문 진행 상황 등은 모두 위와 같은 특성을 가지고 있다. 그렇기에 다음과 같은 작업에 대한 필요가 생긴다. 캐싱 서버 데이터 중복 호출 제거 만료된 데이터를 백그라운드에서 제거하기 데이터가 언제 만료되는지 알고 있기 만료된 데이터는 가능한 빨리 업데이트하기 페이지네이션, 레이지 로딩 데이..

글쓴 개요 : 기존 react router dom을 설치 후 발생한 hook들의 오류로 인해 확인 결과, v6로 업그레이드 되면서 변경 된 부분들이 생겨 작성하게 되었습니다. 사용 가능 버전 : React >= 16.8 1. Switch -> Routes로 네이밍 변경 2. exact 옵션 삭제 3. component={} || render={()=>} -> element={} 형식으로 변경 4. path="/web/:id" -> path=":id"로 상대경로로 지정 5. useHistory -> useNavigate로 변경 // v5 import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; imp..

배포 환경 linux(centos), apache 작업 환경 로컬(window) 1. Node 설치 아래 링크로 들어가서 윈도우용 Node.js를 설치해줍니다. nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. React 설치 리액트 프로젝트를 만들 수 있는 create-react-app 도구를 사용하기 위해 설치해줍니다. 이 도구에는 웹팩, 바벨 등이 있습니다. // react app을 생성할 수 있는 명령어 create-react-app을 설치한 후 $ npm install -g create-react-app // 원하는 이름의..

프로젝트명 : 달콤커피APP 역할 : 프론트개발 *퍼블리싱 제외, apache 셋팅 후 react연결 개발자 : 3명 기여도 : 50% 프로젝트 기간 : 2021년 10월 ~ 2022년 1월 + 현재 시간까지 운영 개발 스택 : Apache, React 소개 : 기존 하이브리드(native 90%+vue 10%)로 개발되어진 앱을 native 10% + react 90%로 리뉴얼하는 프로젝트였습니다. (웹뷰로 react를 감싸는 작업) 다운로드 : aos : https://play.google.com/store/search?q=%EB%8B%AC%EC%BD%A4%EC%BB%A4%ED%94%BC&c=apps 달콤커피 - Google Play 수백만 개의 최신 Android 앱, 게임, 음악, 영화, TV 프..