🧱 부채

기술글

글감

Vue.js Google Tag Manager, Google Analytics, UserID 적용

카톡 썸네일, 설명 적용하기

HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정

Vue.js use both inline and external SVGs

useEffect 훅에서 async await 문법을 어떻게 사용할지 결정하는 방법

iOS React Native Webview에서 캐시 갱신이 안되는 문제

@media print로 페이지를 프린트에 적합하도록 하기

Vue.js + prettier에서 의도치 않게 생성되는 공백 제거하기 (WhitespaceSensitivity)

heroku + node.js app + google chart로 Vuepress 블로그에 실시간 주식 차트 그리기

마이크로소프트 블리자드 인수
node-yahoo-finance2
heroku + express
- heroku github connect
- 에러 로그 확인
  - heroku cli 설치
  - login, heroku logs -a <app> -tail
- 왜 heroku?
  - 무료
  - 귀찮은 설정 없이 빠르게 할 수 있을 것으로 봤음 -> 맞았음, 특히 github 연동
  - cors anywhere app 사용 경험
- 향후
  - web dyno 아닌 app으로 변경하는 방법?
- 참고
google chart
- 왜?
  - 다양한 예제, 자세한 문서 (chart documentation - linechart)
  - 구글이 만들었으니까 다양한 고려가 미리 돼있을 것이라는 믿..음..
  - 심플한 차트를 지향하는 것 같아보였음
  - 향후 비교 차트 형태 추가 필요 : google finance - 비교 차트

Promise, async await등 ES6이상 문법들의 ES5 polyfill과 성능 측정

git alias를 이용한 빠른 핫픽스 브랜치 생성 및 package.json, package-lock.json 버전 업데이트

[alias]

hf = "!function hf(){ git checkout master && v=$(cat package.json | grep -m 1 version | sed 's/[^0-9.]//g'); p=${v##*.}; uP=$((p+1)); mV=${v%.*}.$uP; sed -i '' 's/\"version\": \"'$v'\"/\"version\": \"'$mV'\"/g' package*.json; git checkout -b hotfix/$mV;}; hf"

사내에서 반복적으로 사용하는 hotfix 브랜치 생성 및 package.json 버전 수정을 스크립트화

참고

vite + vue github pages에 배포하기

multiline truncate + `with more` text

수량 입력 input Vue 컴포넌트 만들기

input event 활용
DOM에 직접 접근, 값이 변경된 후 발생하는 input 이벤트에서 변경된 값을 덮어주는 방식
실제 데이터, 보여지는 값 2가지 상태를 정의

checklist

[ ] 입력되어 있는 값을 지울 수 있다.
[ ] 0으로 시작하지 않는 숫자, 빈 값만 입력 가능하다.
[ ] 변경 중에는 데이터에 반영되지 않는다.
[ ] focus가 벗어날 때 데이터에 반영된다.
[ ] 최대 구매 수량을 초과한 경우, 최소 구매 수량 미만인 경우 tooltip message 를 띄우도록 한다.
[ ] 최대 구매 수량을 초과한 경우 focus를 벗어날 때 최대 구매 수량으로 변경된다.
[ ] 최소 구매 수량 미만인 경우 focus를 벗어날 때 최소 구매 수량으로 변경된다.

참고

strapi aws에 구성하기

ec2, postgres rds, s3 bucket

Amazon Aws

mix-blend-mode 속성 사용하기

svg에 gradient 색상 적용하기

Vue 3 프로덕션 적용기

AWS Lambda + Puppteeer (with Serverless Framework)로 주기적인 Scraping하기

chrome-aws-lambda로 chrome binary 탑재
puppeteer-core를 사용해 lambda 용량 제한을 피함
serverless-offline plugin으로 로컬에서 테스트, 로컬 테스트를 위해 puppeteer 사용, puppeteer를 devDependencies로 설치
[Node.js] serverless computing with AWS Lambda (feat.puppeteer)
chrome-aws-lambda
Flexible Environment Variable Support for AWS Lambda - Serverless Framework V1.2
serverless-managing-environment-variables-efficiently-with-stages-part-1
ktseo41/aws-lambda-puppeteer

How to deploy fastify server to fly.io (fly.io에 fastify 서버 배포하는 방법)

follow the instructions

install flyctl

https://fly.io/docs/hands-on/install-flyctl/

bash

curl -L https://fly.io/install.sh | sh

or (Mac OS)

bash

brew install flyctl

create or login to fly.io account

https://fly.io/docs/speedrun/

bash

fly auth signup

bash

fly auth login

launch

bash

flyctl launch

you can choose app name, region.

bash

? Choose an app name (leave blank to generate one): [your-app-name]
automatically selected personal organization: [your-username]
? Choose a region for deployment:  [Use arrows to move, type to filter]
  Ashburn, Virginia (US) (iad)
  Johannesburg, South Africa (jnb)
  Los Angeles, California (US) (lax)
  London, United Kingdom (lhr)
  Chennai (Madras), India (maa)
  Madrid, Spain (mad)
  Miami, Florida (US) (mia)
> Tokyo, Japan (nrt)
  Chicago, Illinois (US) (ord)
  Bucharest, Romania (otp)
? Would you like to set up a Postgresql database now? No
? Would you like to set up an Upstash Redis database now? No
? Would you like to deploy now? No

✨ ready to deploy

deploy

(optional) define node version in fly.toml

https://fly.io/docs/laravel/the-basics/php-node-version/

toml

[build]
  [build.args]
    PHP_VERSION = "8.1"
    NODE_VERSION = "14"

check host and port

https://fly.io/docs/getting-started/troubleshooting/#host-checking

The problem is that no one else can talk to the localhost so although the app may have the right port, it's on the wrong network interface. The Rule of thumb to fix this is to get the app to open up port 8080 on the IP address 0.0.0.0. That's anyone outside the system

...
const start = async () => {
  try {
    await fastify.listen(8080,"0.0.0.0")
...

🎉 deploy

flyctl deploy

🧱 부채 ​

기술글 ​

글감 ​

Vue.js Google Tag Manager, Google Analytics, UserID 적용 ​

카톡 썸네일, 설명 적용하기 ​

Vue.js use both inline and external SVGs ​

useEffect 훅에서 async await 문법을 어떻게 사용할지 결정하는 방법 ​

iOS React Native Webview에서 캐시 갱신이 안되는 문제 ​

@media print로 페이지를 프린트에 적합하도록 하기 ​

Vue.js + prettier에서 의도치 않게 생성되는 공백 제거하기 (WhitespaceSensitivity) ​

heroku + node.js app + google chart로 Vuepress 블로그에 실시간 주식 차트 그리기 ​

Promise, async await등 ES6이상 문법들의 ES5 polyfill과 성능 측정 ​

git alias를 이용한 빠른 핫픽스 브랜치 생성 및 package.json, package-lock.json 버전 업데이트 ​

참고 ​

vite + vue github pages에 배포하기 ​

multiline truncate + with more text ​

수량 입력 input Vue 컴포넌트 만들기 ​

checklist ​

참고 ​

strapi aws에 구성하기 ​

mix-blend-mode 속성 사용하기 ​

svg에 gradient 색상 적용하기 ​

Vue 3 프로덕션 적용기 ​

AWS Lambda + Puppteeer (with Serverless Framework)로 주기적인 Scraping하기 ​

How to deploy fastify server to fly.io (fly.io에 fastify 서버 배포하는 방법) ​

follow the instructions ​

deploy ​

책 ​

🧱 부채

기술글

글감

Vue.js Google Tag Manager, Google Analytics, UserID 적용

카톡 썸네일, 설명 적용하기

Vue.js use both inline and external SVGs

useEffect 훅에서 async await 문법을 어떻게 사용할지 결정하는 방법

iOS React Native Webview에서 캐시 갱신이 안되는 문제

@media print로 페이지를 프린트에 적합하도록 하기

Vue.js + prettier에서 의도치 않게 생성되는 공백 제거하기 (WhitespaceSensitivity)

heroku + node.js app + google chart로 Vuepress 블로그에 실시간 주식 차트 그리기

Promise, async await등 ES6이상 문법들의 ES5 polyfill과 성능 측정

git alias를 이용한 빠른 핫픽스 브랜치 생성 및 package.json, package-lock.json 버전 업데이트

참고

vite + vue github pages에 배포하기

multiline truncate + `with more` text

수량 입력 input Vue 컴포넌트 만들기

checklist

참고

strapi aws에 구성하기

mix-blend-mode 속성 사용하기

svg에 gradient 색상 적용하기

Vue 3 프로덕션 적용기

AWS Lambda + Puppteeer (with Serverless Framework)로 주기적인 Scraping하기

How to deploy fastify server to fly.io (fly.io에 fastify 서버 배포하는 방법)

follow the instructions

deploy

책