ice rabbit programming

최근 Vue.js를 사용하며 WebPack을 사용했는데, local에서 proxy table의 사용을 환경 변수에 따라 다르게 설정하고 싶었다. (webpack이 아닌 vue-cli를 활용한다면 이 글을 참고) dotenv 패키지 적용 그러던 중에 dotenv 패키지를 찾아서 적용하였다. npm install dotenv dotenv 패키지는 여러 프레임워크에 존재하는데, .env 파일을 통해 환경 변수를 설정해주는 패키지이다. const dotenv = require('dotenv'); dotenv.config(); 이렇게 간단하게 사용할 수가 있는데, dotenv.config 내에 아무 것도 명시해주지 않으면 루트에 있는 .env 파일을 찾아 적용하게 된다. 경로를 지정해주고 싶으면 아래와 같이 적으..

webapp과 webapi를 분리하여 개발하다보면, webapi 호출이 CORS 이슈로 인해 제대로 불리지 않는 경우가 많다. CORS는 Cross Origin Resource Sharing로, 도메인 또는 포트가 다를 경우에 호출을 허용하지 않는 정책을 말한다. 보안을 위해 고안된 정책으로, SPA를 기반으로 호출할 때에는 번거로운 것이 사실이다. 물론 개발 서버나 운영 서버에 올리고 나면 백엔드에 render를 붙이든, 따로 구성했지만 nginx를 통해 내부 호출을 구성하든간에 CORS 이슈를 위반하지는 않게 되어 운영상에 문제되지는 않는다. 다만 local에서 개발할 때 API 호출을 통해 테스트가 되어야 코드를 올리고, 빌드를 하고 배포가 될 것이다. CORS를 해결하기 위해 크게 두 가지 방법이..

npm은 node.js에서 사용하는 패키지 관리자인데, 많은 편리한 플러그인들이 있어 유용하게 사용할 수 있다. python의 pip와 유사하다. 그런데 npm도 버전이 다양한데, apt-get 등으로 설치할 경우에 버전이 제각각으로 설치되어, 나중에 꼬이게 되는 문제가 발생한다. 로컬에서 npm 버전을 업그레이드하거나, CI 서버에서 빌드를 할 때 등... 보통 그럴 때는 npm의 cache를 지워서 해결한다. npm cache는 일반적으로 npm-cache/_cache 폴더에 저장된다. 이 디렉토리는 모든 HTTP 요청 데이터와 패키지 관련 데이터를 저장하는 캐시이다. npm cache clean --force 첫 번째 방법은 npm cache clean --force 명령어이다. npm 버전 5 이..

사실 티스토리에 글을 올리면서, 아직 방문자 분들이 많지는 않지만 지식 공유가 목적의 한 부분이긴 했으나, 내용 정리에 목적도 있어 C#, C++ 등의 언어를 다룰 때에는 기본적으로 프로그래밍에 대해서 어느 정도 안다고 하고 글을 쓰고 있었다. 하지만 이번에 자바스크립트 강좌는 상당히 기초부터 시작해서, 입출력/자료형 등 기본적인 부분부터 다루고 있다. 필자는 자바스크립트를 미약하게나마 써본 적은 있어서 실제 강좌에서는 스킵했으나, 정리는 해 두려고 한다. 자바스크립트의 문법은 다른 언어들과의 문법과 비슷하다. 이전 글에서 설명한 'var' 키워드나 나중에 비동기, 콜백 부분으로 넘어갔을 때 아마 많은 차이를 느낄 것이다. 연산 기본적인 사칙연산(+, -, *, /, %)과 증감연산(++, --), 논리..

JavaScript에서는 데이터 타입별로 사용자를 위해 사전에 작성된 편의 기능인 프로퍼티와 메소드를 제공한다. JavaScript에서 모든 것은 객체라고 첫 글에 언급하였다. 프로퍼티는 해당 타입 객체 내의 변수, 메소드는 객체 내의 함수라고 생각할 수 있다. C++의 STL에서 제공해주는 함수들이나 C#에서 기본적으로 제공하는 프로퍼티, 메소드와 비슷하다. var str1 = "Hello, World!"; // string str1.length; // length property str1.charAt(0); // method str1.split(" "); // method var fruit = ["apple","pear","grape"]; // array fruit.length; // length p..

지난 글에서 설명한 String, Number, Function 타입에 이어서 데이터 타입에 대해 다루려 하는데, 내용이 많을 것 같지는 않다. 네 번째 타입은 Array 타입이다. 배열은 여느 언어에 있는 것과 같이 [같은 타입, 같은 크기]의 변수들을 묶어서 보관하는 타입이다. var arr = [] // ok var fruit = ["apple", "banana"]; // ok var fruit2 = ["apple", "banana", 1]; // 타입이 다르므로 error console.log(fruit); // 배열 자체 console.log(fruit[0]); // 배열의 첫 번째 index 값 위 fruit 배열과 같이 사용하는 것이 일반적이며, fruit2에서는 같은 타입이라는 규칙에 위배..

JavaScript는 원래 브라우저 등에 이용되는 스크립트 언어였으나, 요즘에는 IoT, 서버(Node.js) 등 광범위하게 쓰이고 있고, 사용 언어 순위에도 꾸준히 등장하고 있다. 요즘 개발자라면 웹은 거의 필수적으로 다루고, 관련 없는 개발을 하더라도 발은 한 번씩 담가보기 때문에 자바스크립트를 다들 조금씩은 해보게 된다. (자바와는 다르다) 필자는 학부 시절(이라 해봐야 2년 전) vue.js와 node.js를 이용한 웹 페이지를 제작할 때 좀 다루어 보았다. 다만 그 때는 여느 학생이 그렇듯이, 구현을 하는 것에 큰 목적을 두었어서 틈틈이 언어에 대해서 알아보기는 했으나 차근차근 공부하지는 못했었다. 그러다 이번 기회에 JavaScript 강의를 접하게 되어, 필자가 듣고 정리하며 이 글을 보는 ..

최근에 웹에서 함수명을 입력받아 실행하고, 그 return 값 object의 함수들을 출력할 일이 있었다. Eval string을 code로 실행하여 준다. var objectName = "myObject."; var methodName = "getProperty()"; var executeCode = objectName+methodName; eval(executeCode); // myObject.getProperty()가 실행된다. 즉, input 태그로 함수명을 입력하면 해당 함수를 실행할 수 있다. getOwnPropertyNames() getOwnPropertyNames는 객체의 모든 속성(Property)의 이름을 반환한다. 즉, 배열이면 원소들을 반환하고 클래스는 멤버들을 반환한다. https..