[수정 내역] 1. 이 게시글은 2021.06.09 23:44에 수정되었습니다. 이 게시글은 삽질보다 카테고리 선정에 가장 많은 시간을 할애한 것 같습니다. Django니깐 python에 작성해야 하나..? 그래도 Quasar는 Vue.js 기반인데 Frontend니 JS 카테고리에 넣어야 하나...? 이 글을 읽기 전에 웹에서의 Render 방식에 대해서 이해할 필요성이 있습니다. Modern Web의 4가지 렌더링 방식에 대한 고찰 Modern Web Modern Web 은 현대적인 웹 또는 최신 웹앱 혹은 멀티플랫폼 반응형 웹이라는 의미로 사용되는데, 정확한 사전 의미는 없고 직역하면 그냥 현대적인 웹입니다. 2021년 오늘날에는 아마도 Rea gmyankee.tistory.com 어쨌든 Djang..

Modern Web Modern Web 은 현대적인 웹 또는 최신 웹앱 혹은 멀티플랫폼 반응형 웹이라는 의미로 사용되는데, 정확한 사전 의미는 없고 직역하면 그냥 현대적인 웹입니다. 2021년 오늘날에는 아마도 Reactive(반응형)하면서, Virtual DOM Render(가상 돔 렌더)를 통해 DOM을 그려내거나 컴파일된 번들파일로 페이지 이동시 깜빡임이 없는 UX/UI를 제공하는 웹이라고 보입니다. 이러한 웹은 주로 JS/WASM 등을 통해 제공됩니다. JS JS 진영에서는 현재 React.js, Vue.js, Angular.js, Svelte.js의 4가지 라이브러리 및 프레임워크들이 척도를 다루고 있지만, 간간히 Vanilla JS를 통해 Observle 등을 이용해서 직접 Virtual DO..

GraphQL을 사용한지는 몇년이 지났지만, 토큰 인증을 사용할 때 토큰의 만료응답을 주기 위해서는 항상 NetworkError를 고집했었습니다. 즉 HTTP STATUS에서 401을 응답하기 위함이었습니다. 하지만 Apollo의 공식 문서를 보면 UNAUTHENTICATED 가 이미 Error Codes로 정의되어 있는 것을 볼 수 있습니다. https://www.apollographql.com/docs/apollo-server/data/errors/#error-codes Error handling Making errors actionable on the client and server www.apollographql.com GraphQL에서는 굳이 삽질하지 말고 GraphQLError로 반환하라는 그..

Nuxt.js에서는 Google Adsense(구글 애드센스) 광고를 이용할 때 가장 많이 사용하는 방법이 아마도 www.npmjs.com/package/@nuxtjs/google-adsense @nuxtjs/google-adsense Google Adsense Module for Nuxt.js www.npmjs.com 위 @nuxtjs/google-adsense 모듈을 사용하는 방법일 겁니다. 해당 애드센스 모듈은 저도 오랫동안 사용해왔지만, 스토리북과 관련된 이슈도있고.... 커스텀해서 붙이는 것처럼 동일된 태그를 계속해서 호출하는 문제가 있습니다. 이 문제는 정확히는 해당 모듈의 문제가 맞으면서도 아닌데, nuxt-router 즉 vue-router가 가상의 라우팅을 진행하면서 생긴 문제입니다. 초..

AWS Lambda@Edge를 이용해서 Server Side Rendering을 사용한 Nuxt.js를 배포하는 글을 작성하였는데 해당 방법은 gmyankee.tistory.com/349 docker를 사용하며 docker를 선행 학습하여야 하는 단점이 있었습니다. 하지만 요즘같은 CI/CD가 무료 한도로 많이 발전한 시대에는 자동화라는 개념이 필요로 합니다. 우리는 devOps에서 사용되는 이러한 CD로 2020년 4월 중순경 github에서 private와 기업용을 개인에게도 무료로 풀리면서 github actions의 장점을 획득할 수 있게되었습니다. Github Actions를 제가 선호하는 이유는 Docker Image를 기반 Docker를 기반으로 사용하니 필수 의존성을 예를들면 aws-cli..

AWS Lambda를 사용해서 Nuxt.js SSR(Server Side Rendering)의 배포 방식에 대해서는 게시글이 검색했을 때 생각보다 많지 않습니다. 대체로 진짜 아무것도 안 만든 hello World! 같은 프로젝트 생성한 것만 배포할 정도의 수준이죠 그 이유는 의외로 간단합니다. lambda에서 업로드 가능한 용량이 제한되기 때문입니다. 용량이 제한되니 많은 패키지 용량을 보유해야 하는 npm을 이용해 설치된 node_modules는 비상식적인 용량을 자랑합니다. 이러한 이유로 Nuxt.js 와 Next.js 등의 SSR 프레임워크를 사용하는 유저들은 Lambda@edge + Cloud Front + S3 조합을 포기하고 다른 방안을 찾는 시도를 하죠. 대체 방안은 다음과 같습니다. AW..