[React.js] .end 백엔드와 통신 전역변수 설정하기

백엔드와 통신할 때 전역 변수를 사용하여 백엔드 호스트를 지정하는 것은 일반적으로 좋은 아이디어다.

이렇게 하면 나중에 백엔드 호스트가 변경되거나 다른 환경으로 전환해야 할 때 코드의 여러 부분을 수정할 필요 없이 전역 변수만 변경하여 쉽게 적용할 수 있고 유지 보수 및 확장성 측면에서 매우 편리하기 때문이다.

전역 변수를 사용하여 백엔드 호스트를 지정하는 것은 편리하지만, 보안상의 이슈가 있을 수 있기 때문에 보안을 고려해야 한다. 백엔드 호스트가 민감한 정보를 포함하고 있다면, 이를 절대 외부에 노출하지 않도록 보호해야 한다.

1. 보안 문제: 전역 변수로 백엔드 호스트를 노출하면 악의적인 공격자가 해당 호스트에 대한 정보를 얻을 수 있습니다. 이 정보를 통해 서버에 대한 공격을 시도할 수 있다.
2. 데이터 노출: 백엔드 호스트를 클라이언트 측에 노출하면 사용자가 해당 호스트를 알 수 있습니다. 이는 서버의 위치와 구조에 대한 정보를 제공하므로 보안 상의 위험을 초래할 수 있다.
3. 보안 취약점: 클라이언트 측 코드는 공격자가 변경하고 조작할 수 있으므로 전역 변수에 저장된 백엔드 호스트도 변경될 수 있습니다. 이는 공격자가 다른 서버로 유저의 데이터를 전송하거나 조작할 수 있는 가능성을 열어둔다.

따라서 보안을 고려하여 전역 변수로 백엔드 호스트를 노출하는 것은 권장되지 않는다. 대신, 백엔드 호스트와 같은 민감한 정보는 서버 측에서 관리하고 클라이언트에는 식별자만 전달하거나 토큰을 사용하여 인증하는 것이 좋다.

또한, git에서 보안을 고려해서 올린다면 .env 파일과 같은 방법으로 중요한 정보를 관리하고 .gitignore를 사용하여 해당 파일을 git 저장소에서 제외하는 것이 좋다. 이렇게 하면 보안 정보가 소스 코드와 함께 공개되지 않기 때문이다.

 

또한, 코드의 가독성을 높이기 위해 전역 변수의 이름을 BACKEND_HOST와 같이 명확하고 의미 있게 지정하는 것이 좋다. 

src에 .env파일을 생성 후 위와 같이 HOST를 입력해준다.

const response = await fetch(`${process.env.REACT_APP_BACKEND_HOST}/api/users/login`, {

이런식으로 각 컴포넌트별로 적용시켜주면 끝난다.