TIL-23.05.06

 

 

문제점

미니프로젝트를 진행하며 코드를 작성 중, 계속해서 반복되는 axios 통신요청이 어느 순간 눈에 들어왔다.

어차피 똑같은 호스트 주소일텐데 이걸 계속 반복해서 작성하는게 효율적이지 않다고 생각했다.

그래서 api.js라는 파일을 만들어 한군데에서 통신요청 메소드들을 미리 작성해놓아, 필요할때마다 꺼내쓰기로했다.

호스트 주소는 상수로 대체했고, 뒤에 경로만 붙여서 호출하는 식으로 만들어놓았다. 그 후 코드들을 보다보니

useNavigate, Link에도 경로가 쓰여져있고, api통신도 호스트주소는 생략했지만 여전히 경로는 적혀져있었다.

이것마저 하나의 파일에서 관리하기로했다. 하나의 파일에 경로들을 모아 상수로 선언했고, 필요한 곳에서 불러와 사용하게끔 작성했다.

import axios from 'axios';
import Cookies from 'js-cookie';

const API_URL = process.env.REACT_APP_SERVER_URL;

export const api = axios.create({
  baseURL: API_URL, //백엔드 서버 들어올 예정
  headers: { Authorization: `Bearer ${Cookies.get('token')}` },
});

export const user = axios.create({
  baseURL: API_URL, //백엔드 서버 들어올 예정
});

export const PATH_URL = {
  HOME: '/',
  LOGIN: '/user/login',
  SIGNUP: '/user/signup',
  BOARD: '/boards',
  POST: '/boards/:boardId',
  CREATE: '/boards/create',
};

이런식으로 따로 모아서 관리하니, 혹여나 오타를 써서 오류가 발생할 확률도 적어지고, 수정해야할때도 효율적이였다.

이번에도 느끼는거지만 다른방법이 또 있지않을까? 라는 생각이 든다면 거의 대부분은 있다는 경험에 다른방법이 무엇이 있는지 찾아보고

내가 알고 있는 지식으로 바꾸기로했다.

 

 

 

시도한 것

구글링을 하던 중, env 라는 걸 발견했다. env에 대한 개념을 읽다가, 아.. 개발자는 이러한것도 신경 써야하는구나.. 라는 생각이 들었다.

웹개발을 하다보면 포트, DB관련정보, API_KEY등 개발자들만이 알아야 하는 값, 즉 git,오픈소스에 올리면 안되는 값이 있다는 걸 알았다.

생각해보니 맞는말이다. 아무나 확인할수있는 깃헙같은 오픈소스에 그러한 값들이 있다면 보안적으로 당연히 좋지 않을것이라는 생각이 들었다. 

.env 파일 내부에 개발자들만이 볼수있는 환경변수를 설정하고 이것을 보안적으로 취약할수도 있는 곳에 설정해놓은 변수로 대체해 놓아 보안성을 높일수있다.

위의 코드도 .env파일을 이용한 환경변수를 활용한것이다. 예약어인 process.env.REACT_APP_뒤에 변수를 설정해 놓고 필요한곳에서 사용하면된다. 심지어 임포트같은 절차도 필요없다.

 

 

 

알게된점

그동안 작성한 코드가 기능을 수행하는것에만 포커스를 맞춰 그것에 대한 공부만 한것같다. 보안에 대한 개념이 거의 없던것이다..

아직은 보안에 대한 지식이 많이 부족하지만, 이런것까지 신경써야하는게 개발자니까

많은 걸 할수 있는 능력있는 개발자가 되어보자