만족

약 2년 반 정도 사용한 맥북프로(2019)다. 지금은 비록 똥꾸릉내나는 인텔맥이지만 소싯적에는 끝판왕이였다... 내부는 열자마자 깜짝 놀랄 정도로 지저분했다. 하얀 가루가 모두 먼지고, 팬에도 먼지가 가득 껴있었다. 청소도구는 다쓴 칫솔이다. 원래 극세사 브러쉬를 이용해야 하지만 지금 코로나 격리중이기때문에 밖에 못나간다. 청소하기 전, 쇼트를 방지하기 위해 배터리 케이블부터 분리해준다. 배터리 케이블은 거의 종이정도로 얇게 되어있기 때문에 끊어먹지 않도록 주의한다. 팬을 제외하고 쌓여있는 먼지들을 칫솔로 살살 쓸어내리면서 청소한다. 에어 컴프레서가 있다면 그걸 쓰면 된다. 팬은 칫솔로 치아를 닦듯이 위아래로 문질러가면서 닦는다. 여기서 물티슈를 이용해 칫솔에 아주 소량의 물을 묻혀 닦아주면 먼지가 더..

현재 사용중인 노드 버전에서 https request를 보냈을 때 해당 TLS 버전을 레거시로 취급했기 때문에 나타나는 오류다. 따라서 TLS버전을 업그레이드하거나, 해당 TLS버전을 사용할 수 있도록 nodejs 버전을 낮춰 주면 간단히 해결이 가능하다. https://seunghyun90.tistory.com/52 [Install] windows NVM 설치하기 1. 필요 개발 환경 - Windows 10 - NVM (Node Version Manager) - nodejs & npm NVM은 nodejs의 버전을 개발 상황에 따라 바꿀 필요가 있는데, 버전 별로 설치를 지원하여 개발자 입맛에 따라 사용할 버전을 선택.. seunghyun90.tistory.com nvm을 이용해 사용중인 노드 버전을 ..

adsense를 포함하는 wrapper element에 지정한 적도 없는 스타일이 지정되는 문제가 발견되었다. height: auto !important;로 된 부분이 세 부분이 있는데, 전부 내가 지정한 적 없는 스타일 값이다. 이게 도대체 왜 생길까 며칠 동안 찾아보다가 결국 adsense 관련 문제라는 것을 깨달았다. 가장 마지막에 있는 div를 열어 보면 내부에 구글 ad를 표시하는 태그() 가 존재한다. 실제로 그 태그를 지운 다음 다시 열어보면 height: auto !important 는 지정되지 않는다. 이 스타일이 문제가 되는 지점 Nested Scroll을 사용하는 element 내부에 광고를 표시하려 할 경우 레이아웃이 깨진다. 당연하게도 다른 컴포넌트에서는 저 스타일이 문제되지 않지..

맥에서는 마우스로 할 수 있는 유용한 제스쳐 동작이 있기 때문에, 그것을 지원하지 못하는 일반적인 마우스를 사용하지 않는다. 마우스를 꼭 써야 겠다면 매직마우스를 써야 하는데, 대체제가 없어서 쓰는거지 정말 별로다. 그런데 mx master는 전용 소프트웨어를 통해 제스쳐를 대체할 수 있다고 해서, 이참에 직접 써보고 싶어서 어제 구매했다. 외관 좀 특이하게 생겼다 외적인 특이사항은 잘 보이지는 않지만, 엄지손가락 받침부분에 버튼이 있는 것과 측면 스크롤러가 있다는 것이다. 높이 역시 매우 높은 편인데, 매직마우스와 비교해보면 그 차이가 굉장히 부각된다. 물론 완벽히 수평을 맞춰 찍지는 않았기 때문에 실제로 이만큼 차이난다고 할 수는 없지만, 최대 높이 기준으로 매직마우스의 약 3배 높이정도 차이가 난다..

https://satisfactoryplace.tistory.com/131 [React] 검색엔진 최적화(SEO):: Prerendering (react-snap) React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결과물을 보면 는 텅 비어있고 js가 body를 바꾸기 때문에 검색엔진은 이 사이트를 비어있는 satisfactoryplace.tistory.com 위 포스트에서 react-snap 으로 prerendering을 사용하는 방법에 대해 설명했었다. 그러나 언제부턴가 오류와 함께 동작하지 않게 되었고, 해결 방법을 알아내기 위해 react-snap의 레포를 둘러보았으나 개발이 끊긴지 오래 되어 이슈는 많은데 픽스 버전이 전혀 나오지 않는 상..

|-components |---AAA |-----AAA.js |---BBB |-----BBB.js |-App.js 이런 구조로 되어 있을 때, AAA.js가 BBB.js를 import 한다면 아래와 같다. import * from '../BBB/BBB' 이정도는 괜찮다. 그런데 만약 components와 같은 레벨에 utils라는 디렉터리가 있고, AAA.js에서 utils/index.js를 import하려면 어떻게 할까? |-components |---AAA |-----AAA.js |---BBB |-----BBB.js |-utils |---index.js |-App.js import * from '../../utils'; 우우욱... 디렉터리이 깊이가 더 깊어지면 아래와 같이 ../로 도배된다 꺄아아아..

redux-thunk에 대해 redux 문서에서는 아래와 같이 설명하고 있다. For Redux specifically, "thunks" are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch and getState methods. Redux에서 thunks는 리덕스 스토어의 dispatch, getState와 상호작용하는 내부 로직을 포함한 함수를 작성하는 패턴입니다. 다시 말하면, 함수 내부 로직에서 별도로 redux store와 상호작용하는 로직을 구현하기 위해 사용하는 패턴이라는 뜻이다. 특히 비동기로 스토어와 상호작용할 때 유용하다. https://github.com/re..

http 프로토콜을 강제로 https로 변경하여 사용하도록 설정해보자. https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Strict-Transport-Security Strict-Transport-Security - HTTP | MDN HTTP Strict-Transport-Security response header (종종 HSTS (en-US) 로 약칭) 는 HTTP 대신 HTTPS만을 사용하여 통신해야한다고 웹사이트가 브라우저에 알리는 보안 기능. developer.mozilla.org MDN에 의하면, Strict-Transport-Securty 헤더를 통해 클라이언트(브라우저)에게 https를 사용해야 한다고 알려줄 수 있다고 한다. Strict..

redux에 대해 포스트를 작성하고, 이후 redux-toolkit에 대해 작성해보겠다 하고는 시간이 꽤나 지났다. https://satisfactoryplace.tistory.com/278 [Nodejs] Redux의 기본 이해 https://redux.js.org/tutorials/fundamentals/part-1-overview Redux Fundamentals, Part 1: Redux Overview | Redux The official Fundamentals tutorial for Redux: learn the fundamentals of using Redux red.. satisfactoryplace.tistory.com 이번에 회사에 입사하게 되었는데, 마침 상태관리 도구로 redux-t..

IOS Safari ios에서 유니콘 광고차단과 같은 앱을 사용하신다면 '화이트리스트에 등록'을 진행해야 합니다. ios의 경우 타 앱에서 내부적으로 safari를 사용할 수 있기 때문에 사파리 브라우저를 직접 사용하지 않더라도 다른 앱에서 열리는 페이지에도 영향을 미칠 수 있습니다. 사파리를 열고 광고차단 해제를 원하는 사이트에 접속 후, 하단의 공유 아이콘(3번쨰)를 누릅니다. 스크롤을 내려 '화이트리스트' 항목을 선택하여 해당 페이지에서 광고차단을 하지 않도록 변경할 수 있습니다. PC 구글 크롬 대부분 애드블록 확장 프로그램을 위의 확장 프로그램을 사용합니다. 여기에서 접속중인 사이트에 대해 애드블록을 해제하려면 Once/Always 둘 중 하나를 누릅니다. Once는 이번만 애드블록을 해제하고,..

위와 같이 스크립트 태그를 선언하고 사용했을 것이다. script에서 지정한 js에서 import/export를 사용하기 위해서는 type='module'을 사용해야 한다. 이제 /path/js/code에서 import/export를 사용할 수 있다. 사용해보기 // /path/js/lib.js export const foo= ()=>{ console.log('hello'); } lib.js 파일을 만들고 위 내용을 작성한다. lib.js는 script태그에 넣어주지 않아도 된다. // /path/js/code.js import {foo} from './lib.js'; foo(); /path/js/code.js에는 위와 같이 import를 사용해 lib.js에서 export한 변수를 사용할 수 있다. 주..

몽고디비를 캐시서버 역할로 사용중이다. 약 1년쯤 되었는데, 상당한 용량이 쌓여 오랫동안 사용되지 않은 데이터는 정리했다. # mongo shell use DB_NAME db.COLLECTION.deleteMany(...); 대략 이런 느낌으로 해서 6달 이상 사용되지 않은 데이터 약 100~200만개를 삭제했다. 그런데 삭제가 완료되었음에도 디스크 용량을 뱉어내질 않는다. 몽고디비는 공간이 남더라도 이후 쓰여질 document를 위해 disk space를 반환하지 않는다고 한다. 디스크 용량 회수 use DB_NAME db.runCommand({ compact: 'COLLECTION_NAME' }); 을 사용하여 해당 컬렉션의 비어 있는 디스크 공간을 회수할 수 있다. 이것을 모든 컬렉션에 대해 반복하..

몽고디비 커넥션이 갑자기 끊기고 작동하지 않았다. mongod 커맨드로 로그를 확인해본 결과 제목과 같은 오류를 얻을 수 있었다. NETWORK [initandlisten] Failed to unlink socket file /tmp/mongodb-27017.sock 해결법 로그에 찍힌 저 파일에 접근하지 못한다는 뜻이다. 따라서 파일의 소유권을 올바르게 변경해 주거나, 삭제하면 다시 시작할 때 몽고가 알아서 복구한다. //solution 1 sudo chown USER_NAME /tmp/mongodb-27017.sock //solution 2 sudo rm /tmp/mongodb-27017.sock 이후 몽고를 재시작한다. sudo service mongod restart https://stackove..

collection 이름이 matches인 데이터셋에서 2021-06-30 이전에 작성된 모든 데이터를 출력하려고 한다. 작성 날짜는 cacheDate라는 attribute에 저장되어 있고 date 타입이다. db.matches.find({cacheDate: {$lt: ISODate("2021-06-30")}}) $lt는 less than의 약자다. 2021-06-30 이후 작성된 모든 데이터를 출력하려면 $gt(greater than)을 사용하면 되겠다.

mongodb는 외부 접속이 기본적으로 막혀 있다. 외부에서 DB 접속 클라이언트를 사용해 접속하기 위해서는 조금 설정을 바꾸어 주어야 한다. https://ianlondon.github.io/blog/mongodb-auth/ How to connect to your remote MongoDB server I have MongoDB running on my Ubuntu server in Amazon EC2. Since there’s no simple all-in-one tutorial out there explaining how to set up user authentication for Mongo so that you can read and write to your MongoDB server from ..

웹 서버의 디스크 용량이 부족하다는 알림을 받아 화들짝 놀라 확인해보았다. df -h 위 명령어를 이용하면 마운트된 드라이브 별 사용량을 볼 수 있다. /dev/xvda1을 보니 정말로 디스크가 거의 꽉 찬 모습을 볼 수 있다. sudo du -a / | sort -n -r | head -n 20 위 커맨드를 이용하면 가장 큰 파일 사이즈를 가진 TOP 20을 볼 수 있다. 어떤 파일이 용량을 차지하는지를 찾아보다가, 웹 서버의 로그 파일이 10기가를 넘어서는 것을 포착했다. 그래서 rm으로 해당 로그 파일을 지우고 다시 df -h로 확인해 보았지만 Use%가 그대로였다. rm했는데 왜 사용량이 그대로일까? 그 파일이 다른 프로세스에서 open한 상태라면 rm하더라도 실제로 삭제하지 않는다. 그런 파일들..

애드블록은 브라우저를 사용할 때 표시되는 광고의 로딩을 막아 빠른 로딩이 가능하고 쾌적한 이용을 할 수 있게 해 주는 확장 프로그램이다. 그렇지만 개발자나 운영자 입장에서는 트래픽은 나오는데 수익으로 이어지지 않게 하는 아주 골치아픈 녀석이다. https://adblockplus.org/ko/faq_internal 자주 묻는 질문 - 내부 작동 원리 어려운 작업은 실질적으로 게코(Gecko)라는 파이어폭스, 선더버드 그리고 다른 애플러케이션에 내장된 상위 엔진에 의해 이루어집니다. 게코는 "콘텐츠 정책(content policies)"으로 불리는 것을 허용 adblockplus.org 애드블록은 브라우저에서 요청을 보낼 때 그 요청 대상이 등록된 광고 관련 주소일 경우 요청을 드랍시키는 방법으로 광고를 ..

가보자고~

AWS lightsail 인스턴스에서 장시간 CPU에 높은 부하를주면 CPU 성능이 강제로 떨어져버린다. 위 사진은 CPU Utilization Metric인데, 계속 CPU를 갈구다가 뚝 떨어져버렸다. 비단 나만의 문제는 아니고, 실제 다양한 VPS사의 인스턴스에서 장시간 부하 테스트를 했을 때 라이트세일은 독보적으로 낮은 점수를 보인다. 라이트세일쪽이 전부 최하위를 기록하고 있다. Lightsail: 4GB 2cores는 심지어 월 20달러 플랜이다. 그럼에도 디지털오션의 1GB 1core의 5달러 플랜에 떡발리는 모습을 보여준다. 왜 그럴까? 라이트세일의 인스턴스는 burstable capacity라는 것을 가진다. 쉽게 말해 CPU 사용량이 burstable zone에 진입($3.5플랜에서는 10..

전제조건 사양은 다음과 같다 https://browser.geekbench.com/v5/cpu/compare/12269910 [Turbo] MacBook Pro (15-inch Mid 2019) vs MacBook Pro (15-inch Mid 2019) - Geekbench Browser [Turbo] MacBook Pro (15-inch Mid 2019) MacBook Pro (15-inch Mid 2019) Difference Single-Core Score 881 539 163.5% [Turbo] MacBook Pro (15-inch Mid 2019) MacBook Pro (15-inch Mid 2019) Multi-Core Score 6694 4410 151.8% [Turbo] MacBook P..