process.env 설정

서버와 프론트의 배포가 완료되었다. 배포환경의 경우, openvidu나, api의 URL 값이 다르기 때문에 환경에 따라, 전역변수 경로 값이 달라지도록 process.env를 설정하였다.
리액트에서 process.env 설정 방법은 다음과 같다.

1. 프로젝트 root 디렉토리 계층에, .env 파일을 생성한다.
  - .env.development
  - .env.production
  - .env.test
  
2. .env 파일 내 변수를 설정한다. 각 파일에 변수를 정할 때 앞는 항상 `REACT_APP_`을 붙여여한다.

3. npm start를 사용하는 경우 .env.development 파일의 내용이 사용된다.
4. npm run build를 사용하는 경우 .env.production 파일의 내용이 사용된다.
5. npm test 를 사용하는 경우 .env.test 파일의 내용이 사용된다.

React.StrictMode란?

이전부터 느꼈던 점인데, 리액트 관련 함수들이, 두번씩 호출되는 것을 종종 목격하였다. 왜이러한 증상이 나타나는지 찾아보자, 개발 환경에서 StrictMode에서 그러한 증상이 나타날 수 있다는 것을 발견하고, StrictMode에 대해 자세히 알아보기로 했다.

StrictMode 는 안전하지 않은 것들에 대한 경고이다. 리액트는 렌더링 단계와 커밋 단계 두가지의 단계로 동작을 한다. 렌더링 단계는 render 함수를 호출해서 이전 render 와 비교를 수행하는 단계이고, 커밋 단계는 라이프 사이클 함수를 실행하여 DOM 노드를 추가/변경해주는 단계이다. 여기서 커밋단계는 일반적으로 렌더링 단계보다 빠르기 때문에 느린 렌더링 단계에서 여러 생명주기 메서드가 반복하여 호출되기도 한다.
이러한 것들을 StrictMode 에서 미리 파악하고 우리에게 경고를 해준다.

이러한 메서드들은 여러 번 호출될 수 있기 때문에 원하는 결과값을 보존하고자 미리 잡아야 하는데, 이때 StrictMode 를 활용하여 2번 수행되는 메서드들을 잡아 미리 고칠 수가 있는 것이다. 물론 StrictMode 가 자동적으로 모든 부작용을 찾아낼 수는 없지만, 문제가 될 만한 생명주기 함수를 두 번 실행하는 방법으로써 이러한 발견을 도와준다.

StrictMode 는 다음과 같은 문제점을 발견한다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

StrictMode는 개발모드에서만 적용된다. 생명주기 메서드들은 프로덕션 모드에서 이중으로 호출되지 않는다.