본문 바로가기

Development

(19)
자바스크립트 환경변수 설정하기 환경 변수란? 일반적으로 우리는 하나의 코드를 관리하지만 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포한다. 따라서 어느 환경에 배포하느냐에 따라서 다르게 설정해야하는 항목은 환경 변수를 통해 관리하게 된다. 즉, 환경에따라 다르게 관리하는 변수라고 생각하면 될 것 같다. 우리팀의 경우 yarn start를 통한 development의 경우에는 아래와 같은 url 설정이 필요했고 const BASE_URL = 'https://dev.cvi-korea.kro.kr/api/v1'; const LOGIN_CALLBACK_URL = 'http://localhost:9000'; yarn build를 통한 production 경우에는 아래와 같은 url 설정이 필요했다 const BASE_URL = 'h..
Npm vs Yarn Package Manager 패키지 매니저는 패키지의 설치, 업데이트, 삭제를 편리하고 안전하게 수행하기 위해 사용되는 툴이다. Node.js의 대표적 패키지 매니저로는 npm과 yarn이 있다. 먼저 npm에 대해 알아보자. npm npm은 자바스크립트 런타임 환경인 Node.js의 기본 패키지 관리자이다. 전세계적으로 가장 많은 자바스크립트 개발자들이 사용하는 패키지 매니저이다. npm의 등장으로 개발자는 새로운 기능을 추가할 때 코드를 직접 작성하거나 github를 통해 다운로드하지 않아도 되게 되었다. 그런데 npm의 다운로드 수가 계속해서 늘어나면서 사용자가 많아질 수록 몇 개의 문제를 마주쳤다. 대표적인 예로는 의존성 문제가 있다. 개발자들이 동일한 패키지의 다른 버전을 사용하는 경우가 생겼다..
Webpack과 Babel 모듈 번들러 모듈 번들러란? 모듈 번들러는 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 번들링할 때 사용되는 도구이다. 예시) wepback, rollup, fusebox, parcel 모듈 번들러는 왜 필요한가? 요즘은 아니더라도, 이전 브라우저들은 모듈 시스템을 지원하지 않았다. 코드의 종속성을 효율적이게 관리하고, 종속성 순서대로 모듈을 가져올 수 있다. asset(종속성 순서, image, CSS,,,)을 가져오는데 도움이 된다. 위의 파일로 구성된 어플리케이션을 빌드하려면 script tag를 통해 자바스크립트 파일을 html에 추가하고, 어플리케이션을 시작하기 위해서는 5개의 왕복 요청에 대한 http 요청이 필요하다. 하지만 모듈 번들로를 통해 , 이들을 모두 다..