dongQueue's dev

현재 VUE 로 클라이언트쪽을 개발해서 별도의 웹서버 없이 AWS의 정적 호스팅 기능을 사용하여 호스팅 하고 있습니다. 웹서버가 없으니 장점만 있고 단점은 없다고 생각하고 있었는데 문제가 발생했습니다. 비교하고 있는 다른 사이트 보다 초기 로딩 속도가 너무 느립니다. -_-;; 아무래도 클라이언트 단에서 렌더링이나 관련 소스의 해석이 이루어지다 보니 동작속도가 클라이언트 성능에 많이 좌우되는 문제가 발생하였습니다. SERVER-SIDE-RENDERING으로 바꿀까 하다가, 우선 속도개선 작업을 먼저 진행해 보기로 하였고 첫번째로 Lazy Loading 을 적용하였습니다. 1. Lazy Loading 이란? Lazy loading 이란, 화면의 보이는 부분 또는 동작에 필요한 소스를 먼저 로드하고 다른 소..

함수를 사용하다 보니 비슷비슷한 함수가 너무 많이 생겨 관리하기가 어려워 졌습니다. 그래서 function을 하나로 통합하고 if 문을 쓰다보니 이번에는 코드가 지저분해 지는 문제가 발생했습니다. // 통합전 A function a( val ){ val = val * val; return val; } // 통합전 B function b( val ){ val = val + 10; return val; } // 통합 후 function c ( val, condition ){ if (condition === 'A') { val = val * val } else { val = val + 10 } return val } 위의 A, B 함수의 경우 목적이 다른 함수라면 분리하는것이 맞습니다. 하지만 목적이 같다면 ..

이전에 서치콘솔을 적용 한 후 (이전글: vue로 개발한 페이지 검색엔진에 노출시키는 법) 이번에는 사이트 접속자 통계 및 페이지별 노출 빈도를 좀 더 자세히 확인하기 위해 구글 애널리틱스를 적용해 보았습니다. 도메인만 있으면 무료로 사용할 수 있고 실제 적용하고 보니 기능도 강력한 것 같습니다. 1. 사이트 등록 구글 애널리틱스(https://analytics.google.com)에 접속해서 애널리틱스용 계정을 만들고 사이트를 추가합니다. 첫번째로 간단하게 계정이름을 입력합니다. (아래에 계정 데이터 공유 설정은 권장사항대로 전체를 선택하였습니다.) 다음으로 측정 대상을 선택합니다. 웹 또는 앱, 웹/앱을 동시에 측정할 수 있는데, 저는 홈페이지 트래픽을 측정하려는게 목적이고, 웹/앱 전체는 베타버전이..

한줄요약: vue-router를 histroy 모드로 변경 후, Prereding으로 빌드하도록 vue.config.js 변경 이번에는 Prerendering으로 사이트를 빌드하여 검색엔진에 노출시키는 법에 대해 작성하겠습니다. 기타 방법은 이전글(vue로 개발한 페이지 검색엔진에 노출시크는 방법)을 참고해 주세요. Prerendering 은? 프리렌더링은 웹사이트를 빌드할때 지정한 특정 페이지를 미리 렌더링해서 저장하는 기술입니다. 구현이 쉽고 빌드 타임에 모든 처리가 끝나므로 런타임에 추가로 부담이 들지 않습니다만, 빌드 타임은 당연스럽게 늘어나게 됩니다. 단, vue-router 이 hash 모드(xxx.com/#/home 과 같이 #이 router에 붙는 방식)가 아니라 history (xxx.c..

서비스 개발 중 한국 AWS ip 주소 영역이 막혀있는 경우가 있어 어떻게 할까 고민해 보았습니다. 서비스 리전 변경을 변경하는 건 속도 문제도 있고 기존 설정을 모두 이동해야 하므로 다른 리전에 proxy 서버를 설정하여 우회하기로 결정하였습니다. EC2에 설정할 proxy 우회 프로그램은 tinyproxy(로컬 테스트용)와 squid(운영환경용) 두가지로 결정하였으며 아래와 같이 셋팅하였습니다. EC2 인스턴스 추가 및 권한 설정 등의 설명은 제외합니다. ■ Tinyproxy 1. 설치 sudo su apt-get update apt-get install tinyproxy 2. Configuration nano /etc/tinyproxy/tinyproxy.conf (우분투 14에 설치할 경우 /etc..

시퀄라이즈에서는 console 창에 쿼리 실행문을 보여주는게 default입니다. 처음에 시퀄라이즈를 쓸때 원래 그런줄 알고 있다가 운영환경으로 이관하고 나서 쿼리가 너무 많이 log에 쌓이는 문제 때문에 어떻게 log를 보이지 않게 할수 있는지 찾아보았습니다. 해결방안은 의외로 간단합니다. const Sequelize = require('sequelize') let options = { host: '', port: '', pool: { max: 5, min: 0, acquire: 30000, idle: 10000 }, logging: false } const sequelize = new Sequelize( 'database', 'user', 'password', options ) 시퀄라이즈가 가진 op..

1. 시나리오. - images.xxx.com S3 생성 - images.xxx.com 을 cloudfront로 연결 2. S3 생성 - S3에서 [버킷 만들기] 버튼을 클릭 버킷 이름 (image.xxx.com)과 리전을 선택 - 옵션 선택 : 입맛에 맞게 옵션을 선택한다. 여기서는 기본 암호화만 선택함. - 권한을 설정: 이 시나리오에서는 최종사용자가 s3에 직접 접근하는 것이 아니라 cloudfront를 통해 image에 접근할 것이므로 퍼블릭 액세스를 차단한다. 이제 마지막으로 [버킷 만들기] 를 클릭하여 버킷을 생성 3. S3와 CloudFront 연결 최종사용자가 S3를 직접 접근(http://s3.ap-northeast-2.amazonaws.com/image.xxx.com/)하는 것 보다는 ..

조건: express 서버, sequelize 사용하여 DB 접속 서버 로직 테스트를 하던 도중 쿼리 로그는 보이는데 아래와 같이 쿼리가 여러개인 경우 어떤 위치에서 실행되는 쿼리인지 보기 어려운 상황이 발생했다. Executing (default): SELECT `id`, `title`, `boardTypeCd`, `flex`, `color`, `startDate`, `endDate`, `createdAt`, JSON_LENGTH(replyJson) AS `replyCount`, (select name from users b where b.id = Board.CreaterId) AS `createrName`, (select name from users b where b.id = Board.Updater..

AWS CodeDeploy를 사용하여 블루/그린 배포 방식을 적용하기로 했습니다. * 블루/그린 배포 : ECS 에서는 서비스를 생성할때 rolling update 또는 blue/green 방식으로 update 방식을 결정할 수 있다. (서비스 생성 이후에는 수정 불가) rolling update는 신규 버전의 health check 가 통과하면 이전 버전을 바로 내리기 때문에, rollback 이 필요한 경우 다시한번 서비스 업데이트 과정을 거쳐야하는 문제가 있다. (만약 이전버전의 이미지가 없다면 code build부터 다시해야 한다.) 반면 블루/그린 업데이트 방식은 이전 버전의 어플리케이션이 구동되어 있는 상태에서 신규버전의 어플리케이션을 함께 구동시킬수 있기 때문에, 트래픽을 신규 버전으로 라우..

이래저래 보안 강화를 위해 vpn을 써야할 일이 생겼다. AWS에서 vpn서비스도 제공하고 있긴한데. 요금이 문제 인증을 받으려면 AD(액티브 디렉토리) 나 사설인증서 를 써야 하는데 둘다 월에 기본 400불 정도는 예상해야 했다. 한푼이라도 아껴야 하는 입장에서 어떤 대안이 있나 찾아보다 ec2에 openvpn을 설치해서 사용하기로 했다. 1. 용도: 사무실 외부에서 DB 관리 및 test 환경 접속용. 2. ec2 생성 인스턴스 유형은 가장 저렴한 t3a.micro - ubuntu 18.04 로 선택. (만약 free tier가 남아있다면 t2.micro 선택) t3a.nano 도 있지만 이것저것 설치하고 나니 용량부족이 떠서 인스턴스 유형을 한등급 올린 상태. 설정시 보안그룹에서 inbound를 아..