Proxy error 와 LocalStorage,SessionStorage

☑️ 리액트에서 프록시 설정

(CORS 설명)

리액트 애플리케이션은 일반적으로 'localhost:3000'에서 실행된다. 하지만 백앤드는 다른 포트에서 실행이

될 수 있기 때문에 이 경우, 리액트에서 API요청을 백앤드 서버로 보내려면 CORS 문제 발생할 수 있다.

여기서 CORS란(Cross-Orbin-Resource Sharing) 웹애플리케이션이 다른 도메인에서 제공하는 리소스에

안전하게 접근할 수 있도록 해주는 보안기능으로 쉽게말해 웹사이트에서 다른 웹사이트의 데이터를 안전하게 

가져올 수 있도록 도와주는 규칙이다.

 

따라서 프론트앤드(리액트)와 백앤드(스프링부트)를 연결하기 위해 프록시는 리액트 개발서버가 백엔드 서버에

요청을 대신 보내주도록 설정하는 것이다

(설정 방법)

백앤드(스프링부트) application.properties에서  server.port와 동일하게 

package.json에서 "prxy":"http://localhost:번호",를 입력한다.

"private": true,
  "proxy": "http://localhost:666",

여기서 중요할 점은 마지막에 쉼표를 꼭 적어줘야 한다. 그렇지 않으면 리액트가 실행되지 않는다.

 

☑️ Proxy error 발생

리액트 실행시 터미널에서 아래와 같은 오류가 발생 하였다!

 

또한 아래는 콘솔 에러 화면이다.

이럴 경우 package.json에서 프록시 설정을 해주지 않았거나. 서버포트가 다르거나

백앤드 서버를 실행하지 않아 위와 같은 에러가 발생한다!

백앤드 서버 스프링부트를 실행시 정상적으로 로드 되었다!

 

오류가 발생 하였을 때는 에러가 난다고 하지 말고 어떤 에러가 나는지 확인을 하고 에러를 확인하고

원인을 파악후 하나씩 해결책을 찾아가는 습관을 가지도록 노력해본다!!

 

☑️ LocalStorage 와 SessionStorage 

   LocalStorage 

   - 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능하며 사용자가 브라우저를 닫거나 컴퓨터를

     재시작해도 데이터가 사라지지 않는다.

   - 도메인마다 별도로 로컬 스트로지가 생성되며 같은 도메인 내의 모든 페이지에서 접근 가능.

    LocalStorage  예시

// 테마 설정 저장
localStorage.setItem('theme','dark');
// 테마 설정 불러오기
const theme = localStorge.getItem('theme');
console.log(theme); //출력: 'dark'

- 쇼핑카트 : 사용자가 로그인을 하지 않은 상태에서 쇼핑카드에 상품을 담을 수 있게 하는 경우에 데이터를

                    LocalStorge에 저장하여 페이지를 새로고침하거나 브라우저를 닫았다가 열어도 카트의 내용이 유지

 

SessionStorage 

- 데이터가 지속적으로 보관되지 않는다. 브라우저 기반 세션 쿠키와 성질이 비슷한데 현재 페이지가 브라우징되고

  있는 브라우저 컨텍스트 내에서만 데이터가 유지.

- 사용자가 브라우저 창이나 탭을 닫으면 데이터가 사라진다.

SessionStorage 예시

// 사용자 이름 저장
sessionStorage.setItem('username','JohnDoe');
// 사용자 이름 불러오기
const username = sessionStorage.getItem('username');
console.log(username); // 출력 : 'JonhDoe;

 

▶ 즉 LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속해도 그 데이터를 사용할 수 있는 반면

     SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다. 즉 브라우저가 종료되면 SessionStorage도 삭제 됨.