Dotorimook's blog

env: python: No such file or directory M1 환경에서 gatsby를 사용하려고 했더니 에러가 났다. 관련된 플러그인 모듈들에서 난 것 같다. 는 v0.28.0 부터 apple silicon 지원이 된 것 같다. 하지만 내 경우에는 python과 관련된 에러 같다. 최신 버전이었던 v0.30.1 을 설치하려고 해도 설치가 실패하...

TDD 생활중에 마주한 뜻밖의 상황에 대한 원인과 해결 방법을 공유하고자 한다. jest Cannot find module 'module' 에러 (경로나 모듈명들 중요하지 않은 내용 일부는 각색했다.) 최근 작업하는 프로젝트에서 모듈을 하나 추가한 후 Jest로 테스트 코드를 작성했는데, 테스트 중에 이라는 에러 메시지를 만나게 됐다. 재밌는 점은 브라우저...

이 블로그를 만든지도 어느덧 1년 하고도 4개월에 접어들고 있는 것 같은데, 그사이에 많은 것이 변한 것 같다. Gatsby js 홈페이지를 보면 버전도 4대가 된 것 같은데 지금 내가 쓰는 것은 2.3 대... 얼마전에는 sharp 모듈 때문에 말썽이 있었는데 맥북을 바꾸고 나니까 비슷한 현상이 또 발생했다. 그래서 이참에 버전을 올려볼까 했는데 이것저것...

하하..벌써 새해가 밝아버렸다. 그간 테크 행사들도 봐와서 내용을 정리하고 그래야겠다고 생각했었지만, 사실 시간을 들여 보고 정리하는 것은 할 수 있었지만, 불특정 다수가 볼 수 있도록 정리해서 작성한다는 것은 또다른 문제였다 -.-;; 게다가 이직을 하게 돼서 새로운 환경에 적응하느라고 블로그를 어느정도 방치하고 있었던 부분도 있었던 것 같다. 그간 보고...

우아한 테크세미나: 시각적요소 테스트 자동화하기 우아한형제들의 기술 조직에서는 기술 블로그 뿐만 아니라 다양한 방식으로 그들의 기술적인 경험을 공유하고 있는데, 우아한 테크 세미나 역시 우아한 형제들에서 겪는 기술적인 경험을 간단한 세미나 형태로 공유한다. 이번에 열린 세미나는 시각적 요소 테스트 자동화하기라는 주제로 1월 27 목요일에 유튜브 라이브로 진...

Something went wrong installing the "sharp" module 등 개츠비 개발 또는 빌드 중에 아래와 같은 메시지를 보게 되는 경우가 있다. 나는 새로운 플러그인을 설치한 경우에 이렇게 되었는데, 해결법을 알기 위해 검색해보는 중에 브랜치를 옮겨다니면서 발생하는 경우도 있는 것 같았다. 원인은 의존성이 변경 될 때 모듈이 이 점...

LINE Creative Lab: HTML5 Canvas로 눈길 끄는 광고 만들기 <aside💡 제가 발표를 보면서 흥미롭게 보았던 내용 위주로 정리를 한 내용입니다. 모든 발표 내용을 수록하지 않고 있을 수 있고 더 자세하게 내용을 알고 싶으시다면 함께 첨부된 발표자료 링크나 유튜브를 보시길 바랍니다 😎 </asideAbstract LINE Creat...

개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기 <aside💡 제가 발표를 보면서 흥미롭게 보았던 내용 위주로 정리를 한 내용입니다. 모든 발표 내용을 수록하지 않고 있을 수 있고 더 자세하게 내용을 알고 싶으시다면 함께 첨부된 발표자료 링크나 유튜브를 보시길 바랍니다 😎 </asideAbstract 우리가 사용하는 다양한 NPM 패키지 중에는 개...

LINE NEWS에서 레이아웃 시프트 문제를 해결한 방법 <aside💡 제가 발표를 보면서 흥미롭게 보았던 내용 위주로 정리를 한 내용입니다. 모든 발표 내용을 수록하지 않고 있을 수 있고 더 자세하게 내용을 알고 싶으시다면 함께 첨부된 발표자료 링크나 유튜브를 보시길 바랍니다 😎 </asideAbstract LINE NEWS의 특징 중 하나는 개인 맞...

속독은 활자를 읽는 기술이라는 생각을 하게 된다. 몇 가지 알게된 속독하는 테크닉을 정리한다. 다시 돌아가지 않기 고정 (Fixations) Fixations라고 하는데, 눈이 계속 한 페이지에 머물러 있는 상태를 의미한다. 평균 비훈련자는 10~15번의 고정에 걸린다고 한다. 이런 고정 상태를 피해야한다고 한다. 다시 돌아가서 읽지 않으려고 하는 것이다....

vscode.dev(!) 공개 마참내! vscode.dev에 대한 포스트가 공개되었다. vscode가 2019년 당시 도메인이 오픈될 때, 도메인을 구입했고, 로 가리키게 해두었는데, 드디어 URL에 걸맞는 Web IDE가 출시 되었다는 느낌이다. vscode의 10여년간의 개발 역사를 공개한 키노트 영상도 있다. 그간의 Web IDE들은 꽤 있었지만, v...

아이폰13 미니 신지모루 에어로핏 구입 후기 신지모루 에어로핏 구매를 망설이는 분들께 조금이라도 정보가 되길 바라며 이 글을 작성합니다. 아이폰13 미니 사전주문 GET! 10월 1일 대란이었던 아이폰13 미니 사전주문을 성공했다. 쿠팡은 시잔주문 개시 시각이었던 10월 1일 0시 0분까지도 카드 즉시할인 혜택 등을 공개하지 않았다. 결론적으로 11번가가 ...

auto import 여러 기기에서 같은 React 프로젝트 소스 작업을 하고 있었는데, 윈도우 PC에서는 auto import를 잘했는데 맥에서는 이상한 경로로 오토 임포트가 되어서 좀 황당한 일이 있었고 그에 대한 해결책을 공유한다. vscode에서 나 등 리액트의 특정 기능들을 import 하려고 하면 에서 auto import가 생겨나는 문제가 발생...

Hidden class와 inline caching은 사소해보일 수도 있지만 javascript의 최적의 성능을 위해서 알아두면 좋은 개념인 것 같다. Hidden class javacript는 런타임에서 오브젝트의 속성을 추가/변경할 수 있는 동적인 언어이다. V8엔진은 hidden class를 통해 색인 등 속성 관리를 최적화하고 있다. 예를 들어 아래...

기계식 키보드 소음 감소 오링 장착 후기 나는 외장 키보드를 두 개 사용하고 있는데, 무접점 키보드와 저소음 적축 기계식 키보드다. 나는 노트북에 너무 익숙한 탓일까, 펜타그래프 키보드나 버터플라이 키보드도 충분히 만족하며 사용하고 있었다. 어렸을 때 어느집에서나 있었던 표준 멤브레인 키보드 시절, 펜타그래프의 슬림하고 심플하 디자인을 봤을 때 감동이 컸던...

JIRA 칸반 보드에 점들은 대체 무엇일까? 스크럼이나 칸반은 이미 업계 표준이 될 정도로 많이 사용되고 있는 방법론인 것 같다. JIRA 역시 마찬가지로 굉장히 많이 쓰는 툴인 것 같다. 요즘은 취준 전에 JIRA 사용 경험을 이미 하고 오는 사람들도 있을 정도다. 내가 있는 조직도 기본적으로는 스크럼으로 개발을 하고 있기 때문에 평소에는 스크럼 보드를 ...

module 'telegram' has no attribute 'Bot' 텔레그램 봇을 간단하게 만들었다가, 오랜만에 다른 환경에서 돌려야하는데 다음과같은 에러를 발견했고, 그 해결책을 찾아보고자 한다. ImportError: No module named telegram 처음 모듈을 import 하는 스크립트를 실행하려고 할 때 다음과 같은 메시지를 받게 ...

저렴하고 예쁜 키보드를 찾는 사람들이라면 한 번쯤 들어봤을 키보드 앤프로2. 키보드를 좋아하는 사람이라면 한 번쯤 살펴봤을만큼 유명한 키보드인데, 그도 그럴 것이 조금 써 보면 세심한 디테일에서 그 만듬새가 그냥 단순한 고민으로 만든 것이 아님을 짐작하게 한다. 일반적인 사용자들에게 익숙하지 않은 포커 배열임에도 앤프로를 결정하는 큰 이유는 디자인일거다. ...

4대 거래소 공동상장 알트코인 쟁글 신용도 평가 결과 블록스트리트는 쟁글의 알트코인 신용도 평가 중 4대 거래소에 공동으로 상장된 알트코인에 대한 결과를 정리하여 공개 했습니다. 4대 거래소에는 328종의 알트코인이 있지만, 그곳 모두 상장되어 있는 알트코인은 18개로 나타났습니다. 이들 18개의 코인은 다른 잡코인에 비해 상폐로부터 다소 안전할 것이라고 ...

잘되던 Auto Import가 왜 갑자기?! 맥환경 vscode에서 갑자기 auto import가 이상하리만큼 잘 안되기 시작했다..?! 다른 많은 유/무료 IDE를 제치고 vscode를 메인 IDE로 사용하고 있는 점 중 하나가 가벼움과 ts와의 궁합으로 auto complete과 auto import를 강력하게 지원한다는 것이었는데.. 대체 이유가 뭘까...

Background 사실상 Capacitor가 ionic과 궁합이 좋다지만.. 꼭 ionic을 위해 만들어진 것도 아니다?! 라는 생각이 들어서. 그렇다면 NextJS 세팅에선 어떨까? 하는 생각이 들었다. 그래서 한 번 테스트 해보았다. What is Capacitor? Capacitor는 웹플랫폼에서 네이티브 기능을 사용해 줄 수 있는 플러그인들을 제공...

애플 실리콘용 / 인텔용 확인하는 방법 M1 맥용 앱? 인텔 맥용 앱? m1 맥북 출시후 벌써 반년이 되어가고 있는데, 그동안 국내외 많은 유튜버 등 인플루언서, IT 커뮤니티, 벤치마크 사이트 등을 통해 m1 맥의 뜨거운 관심과 놀라운 성능이 입증되었고, 최근 애플은 m1칩을 탑재한 새로운 iMac을 출시했습니다. m1 프로세서는 맥에 새로운 세상을 열었...

Github는 패스워드 기반 인증을 지원하지 않기로 했다. 대표적인 무료 git 저장소인 github가 패스워드기반 인증을 사용하지 않겠다고 발표했습니다. 앞으로는 github를 이용할 때에는 1. 토큰 기반 인증 또는 2. SSH 기반 인증을 해야합니다. github뿐만 아니라 BitBucket이나 gitlab 등 일반적으로 많이 사용하는 git 기반 저...

git 푸시 실패: pre-receive hook declined git 브랜치에서 푸시를 하려고 하는데 푸시가 되지 않았다. 하려고 했던 푸시는 force to push였다. pre-receive hook declined 에러 해결 방법 그래서 내가 에러를 해결한 방법은? 푸시를 하려고 하는 해당 브랜치에 protect 설정이 있는지 확인했다. 역시나 p...

맥에서 갑자기 스크린샷 저장이 되지 않는다? 맥에서 스크린샷을 할 때에 또는 로 스크린샷을 찍는다. 최근 맥북을 바꾸면서 스크린샷이 되지 않는 문제가 있었다. 이전에는 터치바에서 저장 위치를 설정할 수 있었는데.. 이전 맥북은 터치바가 있는 모델이어서 스크린샷을 찍을 때에 저장될 위치를 선택할 수 있었는데, 새로운 맥북은 터치바가 없으면서 그것이 안된 것으...

Adsnese. 마참내!! (마침내 ㅋㅋ) 애드고사 통과! 사실 오랜기간 여러번 도전했으나 여러 실패를 겪고 거의 반 포기하고 있었다.. 그런데 얼마전. 약 일주일전인가? Jekyll 기반의 블로그를 gatsby로 업데이트하면서 한 번 더 도전했고.. 마침내 광고를 개제할 수 있게 되었다는 메일을 받았따.. 와우! 얼마나 수익을 낼 수 있을까라는 것과 별개...

최신버전 mobx mobx-react 패키지 설치 후 observer 리렌더링이 되지 않는다?! 😭 오랜만에 새로운 프로젝트를 세팅하느라 React 프로젝트를 만들고, state 관리로는 MobX로 결정. 롸 패키지를 설치한다. 테스트로 변수를 만들고 컴포넌트에서 상태 변화를 확인해본다. 그런데 갑자기 업데이트가 되질 않는다. 도대체 무슨 일인가?! 이것...

'React' was used before it was defined ? typescript 기반 CRA 프로젝트를 생성한 다음 eslint르 적용을 다음과 같이 적용했는데, 다음과 같은 어이없는 메시지를 발견하고 말았다. 정의 전에 가 사용되었다고? 무슨말인지...🤯 일반적으로 은 변수 선언 전에 변수가 사용되는 경우를 탐지하고 그 잠재된 위험을 발견하...

Gatsby 블로그 github.io로 빌드/배포하기 최근 Jekyll에서 Gatsby로 블로그를 변경했다. 여러가지 이유가 있겠지만 React 사용에 익숙하고, Gatsby를 활용해보고 싶은 마음이 컸다. 제일 중요한 것은 개발한 블로그를 github.io에 어떻게 보내는 것인가? 하는 것이었다. Netlify를 이용하면 편리해서 많이 이용하는 것 같은데...

cra 프로젝트를 docker를 이용해 빌드하려고 컨테이너에서 을 실행하도록 했는데 다음과 같은 에러를 마주하게 된다. 아무래도 에러는 특정 모듈이 linux 호환이 안된다는 것 같다? 이런 일이... 이미지로도 동일했다. 이 문제는 모듈의 문제로, 모듈이 MacOS를 위한 것이고, linux에서는 안되어서 인 것 같다. 그래서 yarn.lock 파일의 가...

도커 컨테이너에서 pm2를 실행하는 데 바로 꺼질 때 node 프로젝트를 프로덕션 환경에 pm2로 올려보도록 한다. node docker image를 이용해서 docker container에서 로 시작하도록 올려본다. 하지만 갑자기 시작하자마자 docker container가 종료된다. 분명 정확하게 프로세스기 실행되었는데.. 어찌된 일일까. 어떻게 해결할...

Yarn or NPM? 웹 개발시 이나 을 패키지 매니저로 사용한다. 과 은 거의 동일하다. 이 더 기본값이라고 생각할 수 있다. 나는 을 선호한다. 내가 처음 을 접하던 시기에 이 보다 미세하게 더 빨랐고, 이전에는 패키지를 설치할 때에 라고 옵션을 쓰지 않으면 추가한 패키지가 의 의존성에 작성되지 않았다. 그래서 항상 패키지를 설치할 때에 라는 옵션을 ...

nginx로 프록시 서버를 구성하게 되면, 프록시서버로 연결된 내부 백엔드 구조에서는 등 속성이 위부로 통하는 response에 적용되지 않는 문제가 발생한다. 이럴 때 nginx.conf 파일에서 아래와 같이 를 이용하여 설정할 수 있다. 크로스 도메인의 경우 처리도 필요하다. Refernce Stackoverflow

Portals - React Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. Why Portal? Portal은 기존 React Component가 담겨있는 DOM Tree 밖으로 Component를 렌더링을 할 때에 사용할 수 있는 기법이다. 의 대표적인 유스케이스가 있다. 다이얼로그...

ㅎㅎㅎ 예전에 네이버 블로그에서 작성했던 글이었는데, 최근 어떤 분이 댓글을 달아두셔서 뿌듯했던 포스트라 이쪽으로 옮겨온다. ㅎㅎㅎ Uncaught TypeError: a.indexOf is not a function JQuery 프로젝트 상에서 위와 같은 에러가 나올때에는 function이 있는지 찾아보고, 으로 바꾸어주면 됨. , , 가 deprecat...

mongoose는 timestamp라는 옵션을 제공한다. plugin은 스키마별로도 적용할 수 있지만, 전역 플러그인(global plugin)으로 모든 schema에 대해서도 적용이 가능하다. 와 이제부터 를 기록하기 위해서는 만을 사용한다. 는 document를 완전히 삭제할 때 사용한다.

mongoose 시작하기 MySQL과 같은 전통적인 SQL 데이터베이스가 여전히 많이 쓰이고 있고, 나도 꽤 익숙한지라.. mongoDB는 자주 접할 기회기 없었는데, javascript와의 찰떡 궁합이라는 이야기에 욕심내서 공부겸.. 사용해보려고 한다. mongoose? mongoose는 mongoDB의 ODM 라이브러리이다. ODM은 Object-Doc...

이슈 관리를 위해 Jira를 사용하고 있다. 일반적으로 Bitbucket과 연동해서 사용하고 있을텐데, 원격 저장소에 커밋을 할 경우 연동된 Jira 이슈에 몇가지 부가적인 기능을 하게 할 수 있다. 이것을 스마트 커밋 (Smart Commit)이라고 부른다. 스마트 커밋(Smart Commit)은 다음과 같은 몇 가지 기능을 제공한다. 스마트 커밋 문법 ...

이 글은 [ScrumPrimer][ref] 사이트의 스크럼의 이론과 실천에 대한 가벼운 안내서를 요약한 글입니다. 요즘 여기저기서 애자일을 도입한다, 스크럼 도입한다고만 하면서 여러가지 이유로 실제로 잘 운영되지 못하는 경우가 많은데... 내용을 보니 정말 중요한 이야기들이 많아 공유하려 합니다. 개요 Overview 스크럼은 다기능팀이 제품이나 프로젝트를...

로멀에서 Jekyll을 설치해서 블로그를 꾸며보기 최근 여유가 좀 있어서 Jekyll 본격적으로 꾸며 나가보려는 마음에 이것저것 시도를 해보고 있다. 새롭게 찾은 테마가 처음 마음에 들긴 했지만, 보다보니 마음에 안들거나 개선시켜 보고 싶은 부분들도 느껴지고, 개인적으로 좀 욕심도 생겨서 지금 테마를 진화시켜나가보려고 마음을 먹었다. 기본적으로 Jekyll...

Mac OS mds_store 리소스 점유율 문제 맥북이 점점 느려져서 활성 상태를 보니 mds_store가 CPU, 메모리 등 꽤 리소스를 점유하고 있었다.. 찾아보니 이렇게 mds_store의 리소스 점유율이 높은것은 spotlight 인덱싱 기능과 관련있는 모양. 어차피 alfred를 시용하고 있는 입장에서는 인덱싱을 비활성화되도 되어서 비활성화 처리...

Express 프로젝트에 Swagger를 달아보자. Swager? Swagger는 RESTful 웹 서비스에서 설계, 구축, 문서화 등을 도와주는 오픈소스 프레임워크라고 볼 수 있다. Spring 프로젝트에서 적용된 사례를 많이 접했는데, node.js도 지원하고 있었다. Swagger Tools Swagger는 다음과 같은 것들이 있다. Swagger E...

쿼리를 짜다보면 일정 특정 필드에 대해 오름차순이나 내림차순 뿐만 아니라 특정 순서를 만들어서 정렬하고 싶을 경우가 있다. 이럴 때 MySQL에서 제공하고 있는 함수를 이용하면 굉장히 간단하게 쿼리를 작성할 수 있다. 의 파라미터로 넘긴 값 외 다른 값의 정렬은 나 로 설정 가능하다. 다른 필드를 섞어서 정렬도 가능하다. 만약 를 사용하지 않는다고 한다면?...

, 진짜 그것만으로 충분할까? 아주 오래전 웹 개발에서 Chrome Insepctor 같은 강력한 도구가 없던 시절 자바스크립트 디버깅엔 가 필수였다. 그 때의 습관 탓일까, 디버깅 하면서 간단한 값 확인은 중단점을 걸고 스텝을 넘겨가며 로직을 확인하기보다 로그를 찍어 확인하는 것이 훨씬 빠르게 느껴져서 여전히 많이 사용하고 있다. 는 사실 유용하다. C나...

[ref]: https://marketplace.visualstudio.com/items?itemName=jsynowiec.vscode-insertdatestring

작성중인 포스트 보여주고 싶지 않아! github에서 Jekyll기반 블로그로 갈아타기 시작하며 몇 가지 장점? 특징?이 있다. 나름 재미를 느끼고 있다. 깃헙의 무료 포스트 테마 등 자유도가 높음 사용하는 IDE를 이용해서 작업하고 github으로 바로 올리면 된다. 마크다운 문법 (장점이자 단점이다..!!) CLI처럼 다 외우거나 자주 쓰지 않는 문법을...

React Hook Form은 14.7k에 빛나는 리액트용 폼 라이브러리이다. 폼 생성과 검증 등 개발 과정을 간소화할 수 있고, 폼 생성 과정과 코드를 좀 더 규격화 할 수 있다는 장점이 있다. 다른 폼 라이브러리에 비해서 React Hooks 형태로 사용할 수 있다는 점과 빠르다는 장점도 있다. 또한, 문서가 굉장히 잘 구성되어있다.ㅎㅎ (완벽하지는 않...

Jekyll 테마를 바꿔보기