반응형

전체 글 218

axios 캐시 적용 및 원리 (by axios-extensions)

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이..

개발 2022.09.24

자바스크립트 reduce 사용 시 주의점

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..

개발 2022.09.21

쌍둥이별 - 의료 해방과 사랑에 관한 이야기

마이 시스터즈 키퍼 쌍둥이별 중요한 윤리적 논쟁들을 제기하는 조디 피콜트의 소설『마이 시스터즈 키퍼: 쌍둥이별』. 백혈병에 걸린 언니를 치료하기 위해 태어난 소녀 안나가 자신의 권리와 존재를 찾아가는 과정을 그려내었다. 장기 기증, 맞춤아기, 자녀에 대한 부모의 통제권 등 윤리적 논란이 될 만한 이슈들을 소재로 다루고 있다. 각 인물들이 화자가 되어 자신의 시점에서 이야기를 이끌어간다. 안나는 백혈병에 걸린 언니 케이트를 위해서 유전자를 수정하여 태어난 아이다. 안나는 태어난 직후부터 언니에게 필요한 제대혈, 백혈구, 줄기세포, 골수 등을 제공해왔고, 그런 삶과 역할에 대해 한 번도 도전한 적이 없었다. 이제 열세 살이 된 안나는 다른 평범한 10대들처럼 자신이 누구인가를 질문하기 시작한다. 언니와의 관..

취미 2022.09.18

html2canvas는 어떻게 캔버스를 그릴까

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

개발 2022.09.18

자바스크립트로 PDF 내보내기

자바스크립트로 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", "..

개발 2022.09.16

수리남 관련주 매수 고민될만큼 재밌다

어제, 오늘 수리남 몰아서 봤는데 정말 재밌다. 얼마전 공개된 '서울대작전'과 비교할 수 없을 정도이다. (서울대작전은 미술도 어색하고 카매라 무빙도 일부러 그렇게 찍은건지 촌스럽고 이상해서 끝까지 못봤음) 이 드라마가 실화라는게 더 믿기지 않았는데, 어디까지가 실화고 얼마나 각색한건지 살펴봤다. 2000년 초에 있었던 실제 이야기인데, 먼저 황정민이 연기한 역할은 조봉행이라는 인물이다. 목사 컨셉으로 나오는데 캐릭터 분위기가 영화 아수라의 시장 역할과 거의 비슷했다. 이런 연기에 최적화된 배우인 듯. 하정우가 연기한 인물은 K씨인데, 엄청난 베짱을 지닌 사람이다. 민간인이라고 믿을 수 없을 정도 베짱을 가졌는데 실제로도 그랬다고 한다. 조직내에 언더커버로 침투했을때 조직원에게 정체를 들켰는데 오히려 적..

취미 2022.09.10

마블 뭔가 이상하다 - 토르 : 러브앤썬더를 보고

토르: 러브 앤 썬더 "신을 죽이는 자, 신이 상대한다!" 슈퍼 히어로 시절이여, 안녕! 이너피스를 위해 자아 찾기 여정을 떠난 천둥의 신 '토르' 그러나, 우주의 모든 신들을 몰살하려는 신 도살자 '고르'의 등장으로 '토르'의 안식년 계획은 산산조각 나버린다. '토르'는 새로운 위협에 맞서기 위해, '킹 발키리', '코르그', 그리고 전 여자친구 '제인'과 재회하게 되는데.. 그녀가 묠니르를 휘두르는 '마이티 토르'가 되어 나타나 모두를 놀라게 한다. 이제, 팀 토르는 '고르'의 복수에 얽힌 미스터리를 밝히고 더 큰 전쟁을 막기 위한 전 우주적 스케일의 모험을 시작하는데...7월 6일, 우주 최고의 ‘갓’ 매치가 시작된다! 평점 5.0 (2022.07.06 개봉) 감독 타이카 와이티티 출연 크리스 헴스..

취미 2022.09.09

크록포드 스타일 자바스크립트 오브젝트 (Crokford Style Javascript Ojbect)

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

개발 2022.09.07

Nuxt + Express + Supabase 인증

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..

개발 2022.09.03

새는 날아가면서 뒤돌아보지 않는다

한 개의 기쁨이 천 개의 슬픔을 사라지게 한다. 나는 내가 강한 사람이지만 동시에 약한 사람이라는 것을 안다. 인간은 겨울을 견디는 나무이면서 또한 연약한 나뭇잎이다. 내게는 삶을 경이롭게 바라본 경험도 있고 상처받은 경험도 있다. 자비심을 발휘한 적도 있고 참을성을 잃은 적도 있다. 껴안은 적도, 주먹을 날리고 싶었던 적도 있다. 그 모든 감정 상태 중에서 내가 결국 죽을 때 기억하는 것은 사랑하고 사랑받은 경험일 것이다. 사랑을 잊지 못하는 것은 절벽에서 떨어질 것 같은 그때, 누군가가 팔을 뻗어 붙잡아 추락을 멈추게 해 주었기 때문이다. 진정한 여행은 어딘가에 가는 그 자체이다. 일단 도착하면 그 여행은 끝난다. 결코 서두르지 말자. 여행은 길수록 좋다. 이타카로 여행을 떠날 때 기도하라, 그 길이..

취미 2022.03.31

세계사를 바꾼 전염병 13가지

13가지 전염병에 대한 생각을 본인의 생각와 함께 다룬 책이다. 13가지 전염병에 에이즈는 빠져있다. 작가는 이미 죽어서 말할 수 없는 자들의 이야기를 들려주는 것이 자기의 역할이라고 생각하고, 이미 에이즈를 겪었거나 겪고있는 사람들이 자기보다 더 잘 이야기할 수 있기 때문에 에이즈에 대해서는 다루고 싶지 않다고 하였다. 코로나 초기에 확진자들을 모욕하는 글이 많이 보였다. 그들의 신상을 퍼뜨리고 마치 그들이 방역을 제대로 안해서 질병을 자초했다고 몰아부치는 사람들도 있었다. 그리고 아직도 종종 코로나에 걸린 사람들을 방역을 제대로 하지 못했다고 치부하는 사람들이 보인다. 우리는 결고 질병에 걸린 사람을 혐오하거나 모욕해서는 안된다. 질병은 생각이 없고, 사람들을 골라 감염시키지 않는다. 그리고 질병을 ..

취미 2022.03.23

Module Federation로 Micro Front-End 구축 맛보기

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은 여러 분리된 빌드들로 하나의 어플리케이션을 구성할 수 있도록 해준다. 컴포넌..

개발 2022.03.23

죽은 경제학자의 살아있는 아이디어

애덤 스미스, 맬서스, 리카도, 존 스튜어트 밀, 카를 마르크스, 마셜, 케인스 등 많이 들어본 경제학자들의 이야기이다. 그들의 경제 사상을 기반으로 지금까지 경제관념이 어떻게 흘러왔는지 풀어냈다. 경제도서중에 탑픽이라고 꼽힐만큼 유명한 책인데 읽는 동안 집중력이 떨어져서 그런가 한번 읽고 잘 이해하지 못한 부분도 많았다. 일단 이런 경제학자들이 어떤 사상, 이론을 제시했는지 정도만 파악을 했고 올해 한번더 읽어봐야할 책으로 킵한다.

취미 2022.03.21

금융은 어떻게 세상을 바꾸는가

금융이 현재 위상을 어떻게 가지게 되었는지 잘 설명 되어있다. 외국 자본이 한 국가로 들어가서 그 나라 경제에 어떻게 영향을 미치는지 그리고 우리나라에는 어떻게 들어왔고 어떤 영향을 미쳤는지도 잘 나와있다. 금융 자본이 기업에 어떤 영향을 미쳤고 그 영향을 받은 기업들의 행보에 관한 이야기도 나와있다. TMI로 애플이 스티브잡스 때 왜 주가가 많이 오르지 않았는지 그리고 스티브잡스 이후 왜 주가가 많이 올랐는지도 나와있다. 경제에 깊은 지식이 없어도 재밌게 읽을 수 있는 책이다.

취미 2022.03.20
반응형