동고 팔자 상팔자

JSONP가 무엇이고 어떻게 사용하는지 알아보자 JSONP(JSON with Padding)는 cross-origin 도메인으로의 요청을 우회할 때 사용되는 방법이다. 예를 들어 www.abc.com에서 www.example.com을 요청하는 경우를 말한다. JSONP는 단, JSONP cross-origin 요청이기 때문에 안전하지 않다. 권장되는 접근방식은 CORS이다. 참고 https://stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created/2067584#2067584

몽키패치(Monkey patch)가 무엇인지 알아보고 예제와 단점을 알아보자 몽키패치란(Monkey patch) 몽키패치는 원래 소스코드를 변경하지 않고 실행 시 코드 기본 동작을 추가, 변경 또는 억제하는 기술이다. 쉽게 말해 어떤 기능을 위해 이미 있던 코드에 삽입하는 것이다. 자바스크립트의 endwWith 함수를 예를 들어보자. 이 함수는 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 true 혹은 false로 반환한다. 만약 이 함수가 없었다면 이 기능을 어떻게 구현했을까 첫 번째 방법은 유틸리티 객체를 만드는 것이다. var Utility = { endsWith: function(string, suffix) { return string.indexOf(suffix, str..

console.log 사용할 때 시간 출력하는 방법 2가지 방법 1) (크롬) 브라우저 타임스탬프 기능 사용 개발자 도구 -> 설정 -> Show timestamps 로그 앞에 시간이 출력됨 방법 2) console.log 수정 몽키패치로 console.log를 수정하는 방법이다. 이렇게도 가능하다는 거지 권장하는 방법은 아님 var log = console.log.bind(console); console.log = function(data) { const timestamp = `[${new Date().toUTCString()}]`; log(timestamp, data); }; console.log(123) // [Fri, 30 Sep 2022 00:38:45 GMT] 123 파라미터를 여러 개 받아서..

axios-extensions를 사용하여 axios http 요청에 캐시를 적용해보고, 어떻게 캐시를 적용하고 있는지 구현 코드를 살펴보자 1. axios-extensions를 사용하여 axios에 캐시 적용 axios-extensions 설치 npm install axios-extensions --save axios-extensions에서 제공하는 cacheAdapterEnhancer를 axios 어답터에 적용 import axios from 'axios'; import { cacheAdapterEnhancer } from 'axios-extensions'; const http = axios.create({ // enabledByDefault는 캐시 사용 디폴트 설정 // default 값은 true이..

reduce와 스프레드 연산자(Spread syntax)를 함께 사용하는 걸 피해라 자바스크립트의 reduce는 매우 강력한 내장 함수이다. 배열의 덧셈, 곱셈 등의 연산에 많이 사용되지만 자유도가 높아서 map, filter 등의 함수도 모두 reduce로 구현할 수 있다. 하지만 reduce 사용 시 주의해야 할 점이 있다. 그건 바로 reduce와 스프레드 연산자를 함께 쓰지 않는 것이다. 다음 코드를 예로 들어보자. const arr = [ { id: "ironman", name: "Tony Stark" }, { id: "hulk", name: "Bruce Banner" }, { id: "blackwidow", name: "Natasha Romanoff" }, ]; const superheroes..

html2canvas는 어떻게 화면을 캡처하는지 코드를 통해 알아보자 html2canvas는 자바스크립트로 화면을 캡처할 때 많이 사용되는 오픈소스이다. 깃헙에 어떻게 동작하는지 아래처럼 나와있다. DOM과 스타일을 적용하여 캔버스 이미지로 그린다고 되어있다. 실제 사용법도 간단하다. 캡처 대상 element와 옵션만 설정하면 promise로 캔버스를 반환한다. jspdf 라이브러리를 통해 화면을 통째로 PDF로 내보낼 때도 이 오픈소스를 이용하기도 한다. (참고. 자바스크립트로 PDF 내보내기) html2canvas는 어떻게 element를 캔버스로 만들고 있는지 코드를 살펴보았다. 코드는 v1.4.1 기준이다. 1) 디버깅 모드 기본적으로 logging 옵션(default : true)을 지원한다. ..

자바스크립트로 PDF 생성 및 화면 내보내기 자바스크립트 화면 캡처에 이어 PDF 내보내기이다. PDF 생성은 jsPDF 라이브러리를 사용할 것이다. 간단한 텍스트, 표 생성 및 한글 깨짐 현상 해결 및 화면(dom 영역)을 캡처하여 PDF로 저장해보자 1. 기본 옵션 확인 및 PDF 생성. 한글 깨짐 현상 해결 jsPDF 설치 npm install jspdf --save # or yarn add jspdf 간단한 jsPDF 설정 및 문자열 출력 import { jsPDF } from "jspdf"; const doc = new jsPDF({ orientation: "p", // p: 가로(기본), l: 세로 unit: "mm", // 단위 : "pt" (points), "mm", "cm", "m", "..

크록포드(Crockford) 스타일로 자바스크립트 오브젝트 생성하기 자바스크립트는 자바처럼 전통적인 객체지향언어가 아니며 객체 지향 기능을 갖춘 프로토타입 기반 언어로 간주된다. (비록 다른 객체지향 언어들과의 차이점에 대한 논쟁이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다) 프로토타입 기반 프로그래밍은 클래스가 필요없는 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. 자바스크립트에서 객체를 다양한 방법으로 생성할 수 있는데, 크록포드는 객체를 어떤 스타일로 만드는지 살펴봤다. 더글라스 크록포드(Douglas Crockford)는 자바스크립트의 아버지로 불리는 미국의 개발자이다. 자바스..

Nuxt + Express + Supabase 인증 nuxt 사용시 미들웨어에서 supabse 인증하는 방법 1. Express middleware 구성 1) express 설치 npm install express --save 2) middleware 설정 nuxt.config.js serverMiddleware: ['~/api/index.js'] 3) express 샘플 코드 ~/api/index.js 생성 const express = require('express') const app = express() app.get('/', async (request, response) => { response.send('ok') }) module.exports = { path: '/api', handler: a..

Module Federation로 Micro Front-End 구축 맛보기 서비스 규모가 커짐에 따라 Front-End에서도 MSA를 적용하는 곳이 점점 많아지고 있다. 빌드 통합, 런타임 통합 등 방법도 다양하고 직접 바닐라 스크립트로 구현하거나 single-spa 같은 라이브러리를 이용하는 곳도 있다. 그리고 이번에 Webpack 5 버전에서 MSA를 지원하는 Module Federation이라는 피쳐가 추가 되었다. Module Federation이 뭔지 살펴보고 직접 사용해보자. Module Federation Module Federation은 Webpack 5에 새로게 추가된 기능이다. Module Federation은 여러 분리된 빌드들로 하나의 어플리케이션을 구성할 수 있도록 해준다. 컴포넌..

k8s로 올린 mysql(postgresql)에 직접 들어가야 할 경우가 있는데 컨테이너로 들어가서 DB를 접속해도 되고 // 컨테이너 접속 kubectl exec -it bash or sh // DB 접속 PGPASSWORD= psql -h -U 그냥 한번에 접속해도 된다. kubectl exec -it postgres -- bash \`PGPASSWORD= psql -h -U \`

파이썬에서 pymysql 사용하여 mysql에 이모티콘 등록 시 오류가 발생하면 캐릭터셋을 설정해주면된다. 에러 File "C:\Users\user\AppData\Local\Programs\Python\Python39\lib\site-packages\pymysql\protocol.py", line 221, in raise_for_error err.raise_mysql_exception(self._data) File "C:\Users\user\AppData\Local\Programs\Python\Python39\lib\site-packages\pymysql\err.py", line 143, in raise_mysql_exception raise errorclass(errno, errval) pymysql...

Nuxt에서 환경로 process.env 구분하기 .env.development, .env.production처럼 환경별로 파일을 만들어서 환경변수를 관리하는건 안티패턴이다. 설정과 코드는 분리되는 것이 좋다. 12-Factors Config 항목에도 아래와 같이 써져있다. config와 code는 분리하는게 좋지만 그건 그거고 해야한다면 아래처럼하면 된다. 먼저 환경별 파일을 생성 (@nuxtjs/dotenv을 따로 설치하지 않아도 된다.) package.json에 스크립트별 환경 설정 "scripts": { "dev": "nuxt --dotenv .env.dev", "build": "nuxt build --dotenv .env.prod", "start": "nuxt start --dotenv .env..

HTTP/3와 QUIC 알아보기 HTTP/3는 현재 개발중인 HTTP의 세번째 메이저 버전이다. HTTP/3와 QUIC를 알아보기 전에 HTTP/1.x와 HTTP/2에 대해서 알면 좋은데 HTTP/1.x와 HTTP/2 알아보기를 읽으면 도움이 될 것이다. HTTP/3는 HTTP/1.x, HTTP/2와 다르게 UDP 기반의 QUIC 프로토콜을 사용한다. 그럼 왜 HTTP/3는 TCP 대신 UDP를 선택했고 QUIC는 무엇일까? 1. TCP의 한계 1-1) 불필요한(?) 레이턴시 발생 TCP는 연결을 시작(초기화)할 때 3 Way Handshake를 연결을 종료할 때 4 Way Handshake 과정을 거친다. HTTP/1에서는 하나의 TCP 연결에 하나의 요청만 처리가 가능했다. 그래서 매 연결마다 핸드쉐..

HTTP/1.x와 HTTP/2 알아보기 현재 개발중인 HTTP/3를 알아보기에 앞서 HTTP/1.x와 HTTP/2에 대해서 알아보자. 이 글을 읽고나서 HTTP/3와 QUIC 알아보기를 읽으면 더 흥미로울 것이다. 1. HTTP/0.9 HTTP 초기 버전에는 버전 번호가 없었다. HTTP/0.9 이후에 차후 버전과 구별하기 위해 0.9로 불리게 되었다. HTTP/0.9는 단일 라인으로 구성되며 메서드도 GET이 유일했다. GET /mypage.html 응답 또한 파일 내용 자체로 단순하게 구성됐다. 상태 코드도 없었다. A very simple HTML page 2. HTTP/1.0 HTTP/1.0으로 오면서 Header, Status, Data(Content-Type)이 추가 되었다. GET /mypa..