서론

위코드 프로젝트를 진행하며 우리는 백엔드와 데이터를 주고 받아야했다. 어느날 회원가입 후 로그인을 하여 네비게이션 바에 상태변화를 보기위해 팀에서 백엔드를 담당하고 계신 희택님께 서버를 열어달라 부탁드렸다. 희택님은 서버를 열어주셨고 계획대로 회원가입을 진행하려고 했는데 도무지 진행이 되지 않는 것이다.

본론

SignUp.js

 const signUpFetch = () => {
    fetch('http://12.57.227.39:8080/users/signup', {
      method: 'POST',
      body: JSON.stringify({
        account: signUpId,
        password: signUpPw,
        email: signUpEmail,
        phone: signUpPhone,
        nickname: signUpNick,
      }),
    }).then(res => res.json());
  };

Login.js

  const loginFetch = e => {
    e.preventDefault();

    fetch('http://13.125.227.39:8080/users/signin', {
      method: 'POST',
      body: JSON.stringify({
        account: loginId,
        password: loginPw,
      }),
    })
      .then(res => res.json())
      .then(result =>
        sessionStorage.setItem('token', result.SUCCESS.ACCESS_TOKEN)
      )
      .then(() => navigate('/'));
  };

SignUp.js과 Login.js의 코드이다. 희택님과 서로의 코드를 보며 문제가 무엇인지 찾았지만 도무지 찾을 수 없어서 결국 멘토님께 향했다. 코드를 보시던 멘토님도 코드 문제가 아닌 것 같다 판단하셨는지 개발자 도구를 보셨고 서버로 전송이 되지 않는 것을 확인하셨다. 그래서 뭐가 문제인지 다시 확인해보니 문제는 바로 url을 예전 것으로 사용했던 것이다. 😱

Config.js

const BASE_URL = 'http://13.125.227.39:8080/';

export default BASE_URL;

url을 관리하는 파일을 하나 만들었다.

SignUp.js

import BASE_URL from '../Config';

 const signUpFetch = () => {
    fetch(`${BASE_URL}users/signup`, {
      method: 'POST',
      body: JSON.stringify({
        account: signUpId,
        password: signUpPw,
        email: signUpEmail,
        phone: signUpPhone,
        nickname: signUpNick,
      }),
    }).then(res => res.json());
  };

Login.js

import BASE_URL from '../Config';

fetch(`${BASE_URL}users/signin`, {
      method: 'POST',
      body: JSON.stringify({
        account: loginId,
        password: loginPw,
      }),
    })
      .then(res => res.json())
      .then(result =>
        sessionStorage.setItem('token', result.SUCCESS.ACCESS_TOKEN)
      )
      .then(() => navigate('/'));
  };

그리고 각 페이지에 BASE_URL을 impor하고 fetch 부분에 ${BASE_URL}변수를 넣어서 URL이 변경되면 Config.js에서 변경하여 한번에 변경이 되도록 하였다.

결론

url을 관리하는 파일을 만들고 그것을 변수로 활용하는 이것이 엄청난 팁은 아니다. 하지만 백문이 불여일견 역시 한번의 경험이 정말 중요하다는 것을 깨닫게 되는 계기였다.