Memo 1장 - 배포, 환경 변수, axios, db

Frontend

React

서버 주소 및 ENV

• api 통신에 대한 코드를 작성 중 백엔드에서는 mongoose로 데이터를 넘겨주기로 했다.
• 백엔드에 작성된 URL 코드 안에는 MongoDB에 대한 아이디와 패스워드가 있었는데, 프론트에서 login등으로 요청이 오면 이를 connect된 mongoose와 연결해서 사용하는 것이 번거로웠다.
• 그래서 생각한 것이 “이런 번거로운 과정을 생략하고 프론트에서 작성된 mongoDB url로 직접 요청을 보내면 어떨까?” 였다.
• 이 url에는 mongoDB의 아이디와 패스워드가 들어있었고 그나마 생각했던 것이 환경변수로 이를 숨겨주자였다.
• 계획은 그럴싸 하다고 생각했지만, 개발자 도구에서 network 탭의 요청 주소에 이 모든 것들이 그대로 들어갔다.
• 환경변수를 사용하면 된다고 생각했지만, 이는 요청에 대한 url이기 때문에 환경 변수로 값 자체를 숨길 수 없이 노출되었다.
• 결론은, 보안성이 좋은 백엔드에서 해결해야 하며, 이렇게 개인정보가 노출된 url 등에 대한 정보를 프론트엔드에서 바로 사용하면 안된다.

Axios 인스턴스 (creditionals)

• 매번 baseURL 값을 작성하는 게 귀찮아 인스턴스를 만들려고 했다.

const api = axios.create({
    baseURL: 'http://localhost:3001',
    timeout: 3000,
    headers: {
        'Content-Type': 'application/json,
    }
    // withCredentials: true
})

• index 파일에서 인스턴스를 불러와 요청을 보내주니 요청이 가지 않고 중간에 멈췄다.
• 브라우저에서 개발자 도구를 확인한 결과 CORS에러가 발생했고, backend 코드에서 Access-Control-Allow-Origin: *으로 CORS에 대한 접근을 모두 허용했음에도 에러가 발생하기에 한참을 헤맸다.
• backend에서 nodemon으로 확인을 해봐도 요청에 대해 중간중간 작성해둔 console값이 찍히지 않는 것을 보아하니, 서버로 아예 요청이 오지 않는 것을 알 수 있었다.
• 그래서 axios로 바꾸고 주솟값 또한 직접 입력해주니 nodemon으로 console을 확인할 수 있었고 이제야 요청이 제대로 전송되는 것이었다.
• 출처를 모두 허용했고 nodemon으로도 확인을 안 되는 것을 보아, err가 발생하는 것이 아닌 요청이 도착하지 않는 것이고, 이는 프론트엔드 코드에 문제가 있다고 판단, axios로 직접 작성 시 요청이 전송되고 인스턴스로 작성 시 요청이 가지 않는 것을 보고 인스턴스에 문제가 있다고 판단, axios 인스턴스의 여러 옵션값을 살펴보던 중 습관처럼 작성한 withCredentials에 대한 옵션이 문제였다.
• 다른 도메인으로 요청을 보낼 때 인증 정보를 담아 보낼지를 결정하는 이 옵션은 기본값은 false이지만 쿠키나 인증 헤더 정보를 포함시키고자 true 값으로 바꿔주면 프론트엔드와 백엔드 모두 credential 옵션에 대한 설정이 필요하다.
• 만약 프론트(클라이언트)에서 옵션을 설정하고 백엔드(서버)에서 설정하지 않은 경우 모든 요청에 대해 거부되어 CORS 에러가 발생한다.
• 결론 : axios 인스턴스에 대해서도 깊이 있게 공부하자…

Backend

배포 EC2와 DB (Database)

• 아마존 서비스 중 하나로, 클라우드 컴퓨팅 서비스를 말한다.
• 복잡하게 생각할 것 없이 우리가 사용하고 있는 컴퓨터를 그대로 빌리는데, 여러 GUI 요소들은 모두 제외하고 터미널만 사용하는 거라 생각하면 된다.
• 그래서 처음 가졌던 의문은 “대체 아마존에 배포를 해서 뭐가 바뀌는 거지?”, 내가 모르는 것에 대해 정확하게 알고 있어야 질문을 할 수 있듯이, 질문도 못 하는 수준이었기에 내 궁금증을 해소할 명확한 키워드도 잡지 못 하고 있었다.
• EC2의 인스턴스를 먼저 작성하며, 접근 방식은 어떻게 할 건지, 비용과 컴퓨터의 스펙에 대한 설정 등 다양한 설정을 완료한다.
• 우리가 A컴퓨터에서 작성한 레포지토리의 코드들을 B 컴퓨터에서 사용하기 위해서는 git clone하여 레포지토리를 그대로 다운받고, 그 후에 패키지가 추가되었다면 npm install 을 하여 추가된 라이브러리를 B 컴퓨터에서도 설치 후 사용한다는 것을 알 것이다.
• 이것과 마찬가지로,EC2를 이용하면 터미널이 열린다. (운영체제에 대해 선택가능)
• 열린 터미널에서 node 설치를 진행하고, 본인의 레포지토리를 선택해 git clone한다.
• 똑같이 npm install과 npm run dev 등의 명령어를 사용하여 실행한다.
• 그렇다면 모든 준비는 끝났다. 백엔드에서 작성한 포트가 3000번이라면, 내가 빌린 한 대의 컴퓨터가 port3000으로 24시간 돌아가고 있다고 생각하면 된다.
• 여기서 DB를 사용하지 않으면, 개인 컴퓨터에서 localhost3000으로 회원가입이나 포스팅을 하고 종료했을 시 모든 데이터들이 초기 데이터 값으로 돌아가는 것처럼 EC2 또한 마찬가지로 동작한다.
• 이런 데이터들을 저장하기 위해 DB를 사용하는 것이다.