본문 바로가기

javascript17

serverless next.js 를 사용해보자! 그리고 자동화까지? 사이드 프로젝트로 앱을 만들면서, 어드민 페이지가 필요했었는데, 자연스럽게 어드민 페이지 배포를 위해 배포방법을 고민을 하게 되었다. 우리가 next 앱을 배포하기 위해서 다양한 방법을 고려해볼 수 있다. Netlify Vercel Github page EC2, Lambda, s3 등을 구축하여 배포 하거나 기타 aws 인프라를 직접 구축 serverless next.js component 이번에 선택한 것은 serverless next.js component package 를 사용해보기로 했다. 사실 s3 에 정적 웹 호스팅 하고 cdn 으로 cloudfront, 도메인 연결로 route53 이용해서 이미 어느정도 구축을 다 해놓은 상태이긴 했으나, serverless 를 써보고 싶기도 했고, gith.. 2022. 3. 23.
V8은 JS를 컴파일 할 때 Interpreter 의 느린 실행 속도를 어떻게 개선 했을까? 우선 v8의 간략적인 소개부터 하자면 v8은 c++ 로 개발된 자바스크립트엔진 이다. 크롬에서는 해당 v8엔진을 사용하여 자바스크립트를 컴파일 한다. 참고로 html과 css를 처리 하는 renderer 엔진도 물론 있는데 크롬에서는 blink라는 엔진을 사용한다. blink엔진이 html, css를 처리하다가 script 코드를 만나면, v8이 javascript코드를 컴파일한다. 사전에 인터프리트와 컴파일 방식의 차이를 알고가자 컴파일 방식은 사람이 고급언어(java, c) 를 작성하면, 해당 고급언어를 한번에 번역 한다. 그렇기에 번역시간이 오래 걸린다. 하지만 한번 번역을 해놓으면 실행 파일이 생성 되기 때문에, 다음 실행 시 해당 실행 파일을 가져와 실행하면 되기 때문에 인터프리터에 비해 실행 .. 2022. 1. 12.
리팩토링 해보자 with JS - 1 공연료를 청구하는 시스템을 만든다고 해보자. 공연료를 청구하는 시스템 코드를 리팩토링 해보자 시스템의 코드는 아래와 같다. function statement(invoice, plays) { let totalAmount = 0; let volumeCredits = 0; let result = `청구내역 (고객명: ${invoice.customer})\n`; const format = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2 }).format; for (let perf of invoice.performances) { const play = plays[perf.platId]; let .. 2021. 12. 1.
range와 느긋한 L.range 함수형프로그래밍이 아직도 아직도 어렵지만, 재밌는 개념들이 많은 것 같습니다. (유인동 개발자님 감사합니다...) 이번에는 숫자를 받고, 그숫자만큼의 배열을 리턴하는 range 함수를 만들어 보겠습니다. const range = l => { let i = 0; const res = []; while (i++ [1, 2, 3, 4, 5] 이번엔 해당 배열의 모든 값을 더해보겠습니다. 이때 reduce를 사용할건데, 기존 js Array.prototpe.reduce 말고 이터레이터를 순회하는 reduce를 만들어 사용하겠습니다. const reduce = (fn, acc, iter) => { // reduce (add,.. 2021. 10. 26.
추석하루 간단하게 본 NEST JS 추석하루 집에서 누워있으려 했는데 그냥 그동안 호기심만 있던 nest를 간단하게 보고 정리를 좀 해보았다. 기술을 채택하기전 우리는 늘 "왜" 라는 물음에 답할 줄 알아야한다. "왜" nest가 뜨게 됐고 핫한지 기존 express만 쓰던 nodeJS 개발자들이 "왜" nest를 쓰기 시작했는지? 나도 깊이본건 아니지만 간단하게 본 지나가는 사람으로서 본 바로는 참 구조가 잘 잡혀있다 라는 느낌을 받았다. 기존 express는 굉장히 프리덤 했다! 말그대로 아주 자유로운! 근데 nest 이자식 구조가 참 잘잡혀있고 마치 spring 같다. nestJS는 컨트롤러, 모듈, 서비스 등 각각 역할이 분명하기때문에 그로인한 구조화된 작업 진행이 가능한 듯 보였다. 📌 정리 1. 기본 express와 간단 비교 .. 2021. 9. 22.
똑똑하게 외부코드 사용 고고 외부코드, 외부라이브러리, 외부.. 등과 같이 가져와서 붙여서 사용하는 것들은 우리에게 정말 많은 편의를 제공한다. 머리아프게 생각해야했던 로직들을 라이브러리단에서 모두 해결해주고 시간단축까지 해주며, 개발의 편의성을 높여준다. 하지만, 이런 외부코드를 사용하는 것은 늘 위험에 따른다. 우리는 외부코드를 "잘" 고를 수 있어야 하고, "똑똑하게" 사용할 줄 알아야한다. "잘" 고르기 세상에는 수많은 라이브러리가 있으며, 어떤 기능을 수행하는 라이브러리가 필요할 때, 같은 기능이 있는 라이브러리를 여러 개 찾을 수 있을 것이다. 그러나 선택지가 너무 많으면 우리 같은 웹 개발자는 혼란에 빠지게 된다. 제일 좋은 것이 무엇인지 어떻게 알 수 있을까? 만약 잘못된 선택을 한다면 어떡할까? 웹 개발을 할 때 단.. 2021. 8. 7.

티스토리툴바