전체 글
-
[ETC] CDN(콘텐츠 전송 네트워크)ETC 2022. 11. 15. 11:14
CDN은 지리적으로 분산된 여러 개의 서버, 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높인다. CDN은 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱한다. CDN은 마치 ATM처럼 생각해도 좋다. 여러 곳에 ATM을 설치해 놓으면 사용자가 빠르고 효율적으로 현금을 찾을 수 있다. 은행에서 긴 줄을 서서 기다릴 필요 없이 가까운 곳에 있는 ATM을 바로 사용하면 된다. CDN의 미션은 지연 시간을 줄이는 것, 지연 시간은 웹 페이지 또는 비디오 스트리밍 콘텐츠가 디바이스에 완전히 로딩되기 전에 발생하는 불편한 지연을 의미한다. CDN이 보다 광범위하고 넓게 분산되어 있으면 사용자와 최대한 가까운 곳에 콘텐츠를 배치함으로써 웹 콘텐츠를 보다 ..
-
[ETC] Promise.all로 성능 개선하기ETC 2022. 11. 10. 16:30
기존 로직 const a = await updateA(); const b = await updateB(); const c = await updateC(); return { a, b, c } updateA, updateB, updateC 로직이 끝난 후 return문에서 값을 반환해야 하기 때문에 3개의 로직은 동기적으로 처리되어 있다. 여기서 놓친 포인트가 있었는데 3개의 로직이 다 끝난 후에 return문을 거쳐야 하는 것은 맞지만 3개의 로직이 동시에 처리될 필요는 없었다. 그렇기 때문에 아래와 같이 개선할 수 있었다. 개선된 로직 const [a, b, c] = await Promise.all([ updateA(), updateB(), updateC(), ]); return { a, b, c } 위..
-
[AWS] Lambda 적용기AWS 2022. 11. 6. 22:04
회사에서 개발중인 백오피스에 일정한 간격으로 DB의 특정 데이터를 업데이트 해야 되는 요구사항이 생겼다. 이 요구사항을 AWS의 람다를 활용하여 충족시키기로 결정 되었고, 이 업무는 내가 맡게 되었다. AWS의 람다는 처음 써보는 것이기도 했고, 다음 번의 람다를 사용하게 될 때 똑같은 삽질은 반복하지 않기 위해 기록한다! 람다는 서버리스 함수이다. 찾아보면 정말 자세하고 디테일하게 설명된 곳이 많지만 내가 사용하는 현 수준에서 쉽게 정의하자면 서버가 없이 실행되는 함수이다. 말 그대로 서버가 없이 동작하는 함수다.(사실 엄밀히 말하면 서버가 없는 것은 아니고 함수가 돌아가는 서버는 AWS에서 관리하고, 사용하는 개발자 입장에서는 서버가 없으니 이해하기 쉽게 서버리스라 말함) 1. 서버리스 프로젝트 생성..
-
[CI/CD] Vue.js GitHub Actions 적용기 #3 (sandbox, qa)CICD 2022. 8. 16. 14:55
https://honggom.tistory.com/199 [CI/CD] GitHub Actions 적용기 #1 (Front-prod) 회사에서 기존에 모든 프로젝트를 GitLab을 통해 관리하고 있었는데 여러 이유로 GitHub으로 이전하기로 결정했다. 그래서 GitLab에 구축 해놓은 CI/CD를 GitHub에 맞게 다시 구축해야 됐고 그 일을 나도 honggom.tistory.com https://honggom.tistory.com/202 [CI/CD] GitHub Actions 적용기 #2 (test) https://honggom.tistory.com/199 [CI/CD] GitHub Actions 적용기 #1 (Front-prod) 회사에서 기존에 모든 프로젝트를 GitLab을 통해 관리하고 있었..
-
[CI/CD] Vue.js GitHub Actions 적용기 #2 (test)CICD 2022. 8. 16. 14:00
https://honggom.tistory.com/199 [CI/CD] GitHub Actions 적용기 #1 (Front-prod) 회사에서 기존에 모든 프로젝트를 GitLab을 통해 관리하고 있었는데 여러 이유로 GitHub으로 이전하기로 결정했다. 그래서 GitLab에 구축 해놓은 CI/CD를 GitHub에 맞게 다시 구축해야 됐고 그 일을 나도 honggom.tistory.com 이전 글에서는 prod의 워크플로우를 다뤘고, 이번 글에서는 test 워크플로우를 다룬다. test의 워크플로우는 prod의 워크플로우에 비해 간단하다. test는 tag가 push됐을 때를 제외하고는 매번 동작하는데, 따로 build된 소스를 업로드 하거나 push, commit 등의 과정이 없기 때문에 그냥 lint,..
-
[CI/CD] Vue.js GitHub Actions 적용기 #1 (prod)CICD 2022. 8. 6. 15:52
회사에서 기존에 모든 프로젝트를 GitLab을 통해 관리하고 있었는데 여러 이유로 GitHub으로 이전하기로 결정했다. 그래서 GitLab에 구축 해놓은 CI/CD를 GitHub에 맞게 다시 구축해야 됐고 그 일을 나도 맡게 되었다. GitLab CI/CD 작업을 내가 직접 해보진 않아서 정확히는 모르지만 GitHub Actions를 사용하면서 내가 느낀 점은 GitLab은 상대적으로 내가 직접 스크립트로 로직을 만들어줘야 하는 것들이 많은 반면에 GitHub Actions는 대부분의 기능을 플러그인으로 제공하기 때문에 사용하는 개발자 입장에서는 그냥 갖다가 쓰면 되기 때문에 매우 편했다. 워크플로우는 총 3개다. prod를 deploy하는 워크플로우 sandbox, qa를 deploy하는 워크플로우 ..
-
[ETC] Webpack 이란?ETC 2022. 7. 17. 13:47
Webpack Webpack은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler)이다. 1. import / export가 없던 모듈 이전 상황 JavaScript는 script 태그를 사용하여 외부의 스크립트 파일을 가져올 수는 있지만, 파일마다 독립적인 파일 스코프를 갖지 않고 하나의 전역 객체를 공유한다. ... a.js function mul(x, y) { return x * y; } b.js mul(3, 4) console.log(mul(3, 4)); // 12 문제는 mul이 전역 스코프라는 것이다. 만약 mul에 다른 값을 할당해버리면 mul을 사용하지 못하게 된다. 2. IIFE 즉시 실행 함수 표현(IIFE, Immediately Invoked Function ..
-
[ETC] npm, yarn의 차이는?ETC 2022. 7. 17. 12:42
npm NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다. 전세계적으로 가장 많이 사용하고 있는 패키지 관리 툴이다. 이러한 관리 툴을 이용하여 Node.js로 만들어진 모듈을 웹에서 받아서 쉽게 설치하고 관리해주는 프로그램으로 개발자 입장에서는 단 몇 줄의 command로 기존 공개된 모듈들을 설치하고 활용할 수 있다. 또한 그렇게 설치된 모듈들이 업데이트되었는지를 체크해주는 등 JavaScript로 진행하는 프로젝트를 편하게 진행할 수 있도록 도움을 준다. command-line client인 npm과 온라인 데이터베이스인 npm registry로 이루어져 있으며, 일반적으로 command-line client를 npm이..
-
[ETC] ESLint, Prettier란?ETC 2022. 7. 17. 12:22
ESLint 동적 타이핑 언어인 JavaScript는 코드 에러가 자주 발생한다. 동적 타이핑 언어이기 때문에 에러가 있는 상태에서 코드가 배포될 수 있다. 이를 해결하기 위해 ESLint는 JavaScript의 코드를 정적으로 파악하여 에러를 찾아내거나 일관성 있는 코드를 유지하게 도움을 준다. Prettier Prettier는 코드의 형식을 일관되게 해주는 Formatter 이다. ESLint, Prettier를 사용하는 이유 프로젝트 진행 시, 코드의 유지보수와 협업을 용이하게 하기 위하여 통일된 형식, 문법 즉, 코딩 컨벤션을 정하고 작업을 하게 되는데 이를 쉽게 적용하기 위한 도구. 예를 들어 Git을 사용할 시 Prettier를 사용하지 않고 개발자 각각이 본인의 스타일로 작업하게 되면 잦은 ..
-
[Vue.js] useVModel 사용하며 겪은 이슈Vue.js 2022. 6. 18. 16:27
useVModel vueuse 라이브러리에서 제공하는 함수다. 양방향 데이터 바인딩을 간략하게 구현할 수 있게 해준다. 사용법 import { useVModel } from '@vueuse/core' export default { setup(props, { emit }) { const data = useVModel(props, 'data', emit) console.log(data.value) // props.data data.value = 'foo' // emit('update:data', 'foo') }, } 겪었던 문제 ParentComponent.vue ChildComponent.vue 대충 위와 같이 구현돼 있었는데 ChildComponent에서 vModel값을 바꿔도 ParentComponen..