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가 필요하다 다른 사람과 함께 사용하며, 내가 모르는 사이에 업데이트될 수 있다 앱에서 사용하는 데이터가 “유효 기간이 지난” 상태가 될 가능성을 가진다. 예를 들어 쇼핑몰의 상품 목록, 게시판의 댓글, 배달앱의 주문 진행 상황 등은 모두 위와 같은 특성을 가지고 있다. 그렇기에 다음과 같은 작업에 대한 필요가 생긴다. 캐싱 서버 데이터 중복 호출 제거 만료된 데이터를 백그라운드에서 제거하기 데이터가 언제 만료되는지 알고 있기 만료된 데이터는 가능한 빨리 업데이트하기 페이지네이션, 레이지 로딩 데이..

우선 저는 linux(ubuntu) 환경에서 nginx서버의 리버스 프록시를 이용해 Nextjs(Node)를 연결했습니다. 여기서 들었던 의문 사항이 1. 리버스 프록시를 이용하지 않고 node서버 하나만 띄우면 안될까? 2. 리버스 프록시를 사용하므로써 ssl은 문제가 없을까? 이 두 가지가 계속 생각이 났습니다. 그래서 직접 경험 && 검색을 토대로 정리해보겠습니다. 1. 리버스 프록시를 이용하지 않고 pm2로 node서버를 띄우기 이 부분에서 우선적으로 확인이 필요했던 사항이 있습니다. pm2는 해당 서버에서 동작관련해서 access,error로그의 확인이 가능한가? #정확한 이유는 모르겠으나 pm2는 access,error log가 일반적인 apache,nginx log와 같이 서버의 로그를 보여..

배포 환경 linux(ubuntu), nginx *react설치 방법과 다르게 처음부터 linux에서 작업이 시작됩니다. 1. Node 설치 Node.js는 Node Version Manager를 통해서 설치하는 것이 편리하므로, NVM을 설치한다. 먼저, 다음의 명령어로 설치 스크립트를 다운로드 받아서 실행한다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash nvm이 잘 설치되었다면 다음 명령어를 입력했을 때 nvm이 출력될 것이다. 만약 뜨지 않는다면 다시 접속하거나 Bash를 다시 실행해서 시도해본다. (source .bashrc) command -v nvm Node.js 홈페이지에 들어가 현재 버전을 ..