2021년 11월 첫째주 WIL

회사 입사 후 첫 1주일이 지났다.

 

거의 환경세팅과 기존 코드 파악하는 시간을 많이 보냈는데 앞으로 매주간 알게된 지식들에 대해 꾸준히 기록 해두려고 한다.

---

NVM의 필요성 체감

NVM 이란 Node Version Manager 의 줄임말로 노드의 버전을 관리할 수 있는 도구이다. 그동안 혼자 공부하면서 NVM이 왜 필요한지 알지 못했었다. 하지만 이번에 회사에서 사용되는 프로젝트를 구동하면서 느꼈다.

프로젝트별로 구성된 node 버전이 다를떄 해당 버전에 맞게 node 버전을 맞추지 않고 실행하면 실행에러가 발생한다. 예를들어 10.17.0 버전으로 세팅된 프로젝트에 16.17.1 버전으로 모듈을 설치(npm install & yarn)하려면 버전이 맞지 않아서 설치가 불가능하다고 알림이 나온다. 이때 nvm을 사용하면 버전별로 node를 리스트에 다운로드 및 세팅을 해두고 바로바로 프로젝트에 해당되는 버전으로 바꿔서(명령어예시 : nvm use 10.17.0) 정상적으로 작업을 할 수 있게 해준다.

정말 편한 도구임에 틀림없다.

 

 

브랜치 전략

본격적인 개발을 시작하기 앞서 회사에서 사용하는 브랜치 전략에 대해 설명해주셨고 현업에서는 보통 어떤방식으로 브랜치 전략을 쓰느지 대략적으로 알 수 있었다.

취준생 시절 진행했던 포트폴리오용 프로젝트 규모에서는 서로의 코드가 겹치는 부분에 대해서만 관리하기 위해 거창한 전략없이 서로 자신이 구현하려는 기능명으로 브랜치를 파고 작업을 했었다.(ex. feature/login) 알고보니 이 방법이 feature 브랜치 전략과 조금 비슷한 느낌더라.

하지만 현업에서는 개발환경과 pre-release 환경 그리고 마지막 최종 실제 고객들에게 보여지는 master환경으로 구분해서 작업을 진행한다. 그래서 각 환경에 맞게 git 브랜치 전략을 써서 개발을 진행하며, 이때 각 환경별로 사용되어지는 변수를 관리할 수도 있고 안할 수도 있는데 여튼 이를 환경변수라고 부른다고 한다.

자세한 브랜치 전략은 회사마다 다를 수 있고 내가 이해할 때 읽었던 당근마켓 기술블로그 글도 같이 첨부한다.

 

https://medium.com/daangn/deploy-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EC%A0%84%EB%9E%B5-%ED%99%9C%EC%9A%A9-%EB%B0%A9%EB%B2%95-545f278ca878

deploy 브랜치 전략 활용 방법

 

환경변수

환경변수란?

일반적으로 하나의 코드로 프로젝트를 관리하지만 앞서 브랜치 전략에서 언급된 개발, pre-release, 운영 등 여러 환경에 프로젝트를 배포한다. 따라서 어느 환경에 배포하느냐에 따라 다르게 설정해야하는 항목들을 환경 변수를 통해 관리하게 된다. 

사실 취업전에 환경변수를 사용해본 경험이 전무했기 때문에 아예 존재조차 몰랐다. 알고보니 환경변수를 설정해두지 않으면 yarn start를 통해 프로젝트를 실행조차 할 수 없었더라.

 

그래서 환경변수에 어떤것들을 할당하고 관리하는지에 대해 정말 간략히 예를 들면

 

// local 환경
const BASE_URL = 'http://jjleesoft.com/api';
const LOGIN_CALLBACK_URL = 'http://localhost:3000';

// develop 환경
const BASE_URL = 'https://dev.jjleesoft.com/api';
const LOGIN_CALLBACK_URL = 'https://dev.example.jjlee.com';

 

이런식으로 로컬에서 접근하는 URL값과 개발환경에서 접근하는 URL 값을 따로 설정하여 사용할 수도 있는 것이다.

이런 환경변수는 .env 형식의 파일명으로 사용하며 로컬환경변수파일은 .env.local 로 개발환경변수파일은 .env.develop 의 형식으로 관리하며 gitingnore에 추가하여 저장소에 해당 변수값이 노출되지 않게 괸리한다. 

해당 내용에 대해 공부하다 보니 생각보다 깊어서(?) 따로 공부 후 포스팅을 해야겠다.

 

VPN

 가상 사설망의 줄임말이다.(Vertual Private Network)

가상 사설망은 데이터를 위해 암호화된 터널을 생성하고 IP 주소를 숨김으로써 온라인 신원을 보호하며 공용 Wi-Fi 핫스팟을 안전하게 사용할 수 있게 해준다고한다.

VPN의 기능은 사용자가 웹사이트에 액세스하려고 할 때 ISP(인터넷 서비스 공급업체)가 요청을 수신하고 사용자를 대상 사이트로 리다이렉션한다. 그러나 VPN에 연결하면 대상 서버로 전송하기 전에 먼저 VPN 서버를 통해 인터넷 트래픽이 리다이렉션하고 이 기능을 사용하면 사용자의 위치정보를 숨기고 데이터를 암호화해준다.

이를 사용하는 사람들은 공용 wifi 를 사용하면서 작업을 해야하는 경우 보안을 강화하기위해 쓴다고하는데

우리 회사의 경우 사내에 설치된 wifi는 인증된 네트워크이지만 재택근무나 회사 외부에서 일을 해야하는경우 일반 망에 접속하고 회사일을 하기때문에 정보가 노출될 가능성이있다. 그래서 이러한 경우에 VPN으로 접속을 하고 네트워크를 사용함으로서 회사 내부에서 일하는것과 같은 효과를 볼 수 있는 것이다.

좀더 자세한 내용을 이해하기위해서는 네트워크 공부를 좀 해야할것같다.

 

AbortController

프로젝트 기존 코드를 찬찬히 뜯어보던 중 useAbortable() 이라는 함수를 API 통신하는 부분에서 활용하고 있는 것을 보았고 당연히 이해되지 않았다. 알고보니 abortController 라는 비동기 중단 함수를 자체 Hook으로 회사에서 구현한 것이었다. abortController는 비동기 요청을 클라이언트 단에서 중단시키는 개념이고, 이를 활용할 수 있는 예시로

A와 B의 API 통신을 하는 버튼이 있다고 가정하자. 사용자가 A를 클릭하면 A에 해당되는 값이 화면에 보여질 것이다. 근데 A를 누르고 B를 바로 눌렀다면 A가 다 실행되고 B가 이어서 실행될텐데 그러면 사용자는 B를 보기위해 A를 보고 B를 봐야한다. 이때 A를 중단시킨다면 A가 나오는 순간까지 기다릴 필요 없이 B를 볼 수있게 되는것이고 이때 사용될 수 있는 것이 abortController인 셈이다.

 

이해에 도움을 준 글들

https://www.npmjs.com/package/abortcontroller-polyfill

abortcontroller-polyfill

 

 

https://canoe726.tistory.com/33 

AbortController를 통한 비동기요청 취소