light한 기능을 사용하기 위해서 lightsail을 사용하고 있는건데 light한 프로젝트도 계속 세월이 흐르다보면 고도화하다보니 더이상 light하지 않아져, 점점 다른 고도화된 요구사항들이 생깁니다. 이때는 ec2나 다른 aws의 고도화된 서비스로 인프라를 이동, 교체하여 이용할수도 있겠지만 기존의 lightsail에 덧붙이고 싶을수도 있죠 lightsail을 사용하다보면 lightsail에서는 지원하지 않는 다른 기능들을 사용해야할일도 생깁니다 예를들면 elasti cache라던가 document db라던가 말이죠 물론 내가 직접 설치해서 세팅할수도 있지만, 역시나 이미 만들어져있는것을 사용하는것이 우리의 고통과 시간을 줄여주니 좋습니다. 그런데 elasti cache나 document db를 사용하려고 해당 서비스의 인스턴스를 실행시켜도 lightsail의 인스턴스에서 이것들로 바로 연결이 되지 않습..

aws.amazon.com/ko/blogs/korea/lightsail-containers-an-easy-way-to-run-your-containers-in-the-cloud/ Amazon Lightsail Container 출시 – 클라우드에서 컨테이너를 손쉽게 실행하는 방법 | Amazon Web Services 개발자를 대상으로 AWS 클라우드를 소개할 때 저는 보통 Amazon Lightsail을 언급하고 시연하는 데 시간을 어느 정도 할애합니다. AWS에서 작업을 시작하는 방법 중 이보다 쉬운 방법은 없습니다. 몇 aws.amazon.com 저는 lightsail이 타사의 저렴한 가상호스팅 서버를 참고해서 가격 경쟁력을 높여 인스턴스만 제공해주는 그런 역할일줄 알았는데, lightsail에 점점 더 많은 기능이 추가되고 있는것 같습니다. 작년 연말에 aws lightsail container 서비스가 출시되었는데요 AWS ECS처럼 lightsail에서 컨테이너 서비스를 제공합니다. 개발자가컨테이너를클라우드에배포할수있는간단한방법을제공합니..

aws.amazon.com/ko/blogs/korea/lightsail-containers-an-easy-way-to-run-your-containers-in-the-cloud/ Amazon Lightsail Container 출시 – 클라우드에서 컨테이너를 손쉽게 실행하는 방법 | Amazon Web Services 개발자를 대상으로 AWS 클라우드를 소개할 때 저는 보통 Amazon Lightsail을 언급하고 시연하는 데 시간을 어느 정도 할애합니다. AWS에서 작업을 시작하는 방법 중 이보다 쉬운 방법은 없습니다. 몇 aws.amazon.com 저는 lightsail이 타사의 저렴한 가상호스팅 서버를 참고해서 가격 경쟁력을 높여 인스턴스만 제공해주는 그런 역할일줄 알았는데, lightsail에 점점 더 많은 기능이 추가되고 있는것 같습니다. 작년 연말에 aws lightsail container 서비스가 출시되었는데요 AWS ECS처럼 lightsail에서 컨테이너 서비스를 제공합니다. 개발자가컨테이너를클라우드에배포할수있는간단한방법을제공합니..

angular 8 버전 이상을 사용하신다면 프로젝트에 firebase analytics를 적용하기가 매우 쉽습니다 https://github.com/angular/angularfire angular/angularfire The official Angular library for Firebase. Contribute to angular/angularfire development by creating an account on GitHub. github.com angularfire를 사용하면 현재 사용하는 angular 프레임워크에 매우 쉽게 적용이 가능합니다 아주 좋은 점은 angular의 라우터를 인식한다는 점입니다. 라우터 화면마다 직접 firebase event를 호출하지 않아도, 자동으로 router가 변경될때마다 firebase screen_view 이벤트를 호출합니다 1. 설치 ngadd@angular/fire 2. firebase의 환경변수 수정 firebase console에서부터 제공받은 정보를 environment.ts 파일에 넣어줍니다 3. NgModule을 설정합니다 angular 앱 전체에서 사용할것이기때문에 app.module.ts 파일에 아래와 같이 세팅합니다 firebase ..

angular 8 버전 이상을 사용하신다면 프로젝트에 firebase analytics를 적용하기가 매우 쉽습니다 https://github.com/angular/angularfire angular/angularfire The official Angular library for Firebase. Contribute to angular/angularfire development by creating an account on GitHub. github.com angularfire를 사용하면 현재 사용하는 angular 프레임워크에 매우 쉽게 적용이 가능합니다 아주 좋은 점은 angular의 라우터를 인식한다는 점입니다. 라우터 화면마다 직접 firebase event를 호출하지 않아도, 자동으로 router가 변경될때마다 firebase screen_view 이벤트를 호출합니다 1. 설치 ngadd@angular/fire 2. firebase의 환경변수 수정 firebase console에서부터 제공받은 정보를 environment.ts 파일에 넣어줍니다 3. NgModule을 설정합니다 angular 앱 전체에서 사용할것이기때문에 app.module.ts 파일에 아래와 같이 세팅합니다 firebase ..

webpack-manifest-plugin 는 웹팩을 사용할때 유용하게 활용하는 플러그인중 하나입니다 웹팩을 통해 번들링 된 파일은 고정된 특정 파일명으로도 생성이 가능하지만, 번들링의 해시를 넣어 유니크한 이름으로 만들수도 있습니다. 그런데 매번 내용 변경이 있을때 새롭게 만들어진 에셋이 최종적으로 무슨 파일명으로 만들어졌는지 알아야 우리가 html파일에 해당 js나 css파일을 해당 경로로 추가하지 않겠어요? 그래서 이 플러그인은 애셋의 매니페스트 파일을 만들어냅니다 이런식으로 웹팩설정에 플러그인을 적용합니다 {"dist/batman.js":"dist/batman.1234567890.js","dist/joker.js":"dist/joker.0987654321.js"} 번들링이 끝나면 지정된 경로 manifest.json 파일이 생기는데요 번들링을 통해 생성된 파일들의 정보가 manifest.json 파일에 기록됩니다 그래서 우리는 이 json 파일을 ..

webpack-manifest-plugin 는 웹팩을 사용할때 유용하게 활용하는 플러그인중 하나입니다 웹팩을 통해 번들링 된 파일은 고정된 특정 파일명으로도 생성이 가능하지만, 번들링의 해시를 넣어 유니크한 이름으로 만들수도 있습니다. 그런데 매번 내용 변경이 있을때 새롭게 만들어진 에셋이 최종적으로 무슨 파일명으로 만들어졌는지 알아야 우리가 html파일에 해당 js나 css파일을 해당 경로로 추가하지 않겠어요? 그래서 이 플러그인은 애셋의 매니페스트 파일을 만들어냅니다 이런식으로 웹팩설정에 플러그인을 적용합니다 {"dist/batman.js":"dist/batman.1234567890.js","dist/joker.js":"dist/joker.0987654321.js"} 번들링이 끝나면 지정된 경로 manifest.json 파일이 생기는데요 번들링을 통해 생성된 파일들의 정보가 manifest.json 파일에 기록됩니다 그래서 우리는 이 json 파일을 ..

처음부터 react, vue, angular 그리고 svelte 등을 사용한다면, wepback설정이 기본적으로 되어있기 때문에 딱히 초기 설정을 건드리지 않아도 큰 무리가 없습니다 반면 webpack을 사용하지 않던 기존프로젝트에 웹팩을 도입한다면, 이것저것 설정해야할 부분들이있죠 저도 오랜만에 웹팩설정을 해보았는데요 css loader에서 3.x.x 버전과 4.x.x 버전에서 차이가 발생하는 기본 설정을 발견했네요 기존 3.x.x에서는 css 절대경로와 루트 path의 상대경로를 해석하지 않았는데, 4.x.x부터는 url을 해석해서 resolving 처리를 합니다 그러니깐 css에 public path를 기준으로 루트 패스에서 어떠한 이미지나 폰트를 가져오는 경우 이렇게 css에서 선언해서 사용했었는데요 background:url("/img/complete.svg")no-repeatcenter30px; src:url("/font/NotoSansKR-Bold.otf")format("opentype"); 이렇게 css 선언이 되어있..