만족

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

사용 중인 맥북 프로 2018 15인치 모델이 이제 슬슬 맛탱이가 가는 것 같다. 구매는 2019년 7월에 했으니 이제 한 2년 반 정도 썼다. 문제는 배터리 사이클이 약 400회인 반면(공식 홈페이지에서는 1000까지를 정상 사용 가능 범위로 본다) 배터리가 가벼운 작업(웹 서핑 등)만 해도 4시간을 못 간다는 것이다. (보통 3시간정도 되면 꺼지고 오래가면 3시간 30분정도 간다) 발열도 굉장히 심한 데다 배터리까지 빨리 닳으니 화가 날 때도 많다. 이번에는 터보 부스트를 꺼서 배터리 소모와 발열을 줄일 것이다. 터보 부스트란? CPU에 부하가 걸릴 때, CPU클럭을 높여 작업 성능을 끌어올리는 인텔의 기술을 뜻한다. 꺼지면 성능은 줄어들겠지만, 베이스 클럭으로만 동작하게 되니 어느 정도 성능은 떨어..

현재 운영중인 서비스에서 VPN으로 아이피를 해외로 돌려 악성 댓글을 작성하는 경우가 포착되었다. 따라서 요청 아이피를 확인해 해외 아이피인 경우 일부 기능을 사용할 수 없도록 할 것이다. 클라이언트 아이피 가져오기 function getClientIP() { $ipaddress = ''; if ($_SERVER['HTTP_CLIENT_IP']) { $ipaddress = $_SERVER['HTTP_CLIENT_IP']; } else if ($_SERVER['HTTP_X_FORWARDED_FOR']) { $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR']; } else if ($_SERVER['HTTP_X_FORWARDED']) { $ipaddress = $_SERVER['..

2021년에 나는 무엇을 했고 어떤 일이 있었는지를 정리해보려고 한다. 거창한 것은 아니고.. 1년치 일기를 하나의 포스트에 담아보았다. 토익 올 초에는 토익 시험을 준비했다. 영어 실력을 향상시키고 싶다거나 하는 것은 아니였고, 4학년이였기 때문에 취업을 위해 800점 정도만 따놓으려고 공부를 시작했다. 약 한달정도 공부하고 시험을 봤는데 790점(LC390/RC400)이 나왔다. 평소에 LC가 잘 나오는 편이였지만 내가 간과한 것은 시험장 스피커는 음질이 쓰레기라는 점이였다... 결국 LC 점수가 곤두박질쳤지만, 시간을 더 투자하기엔 아깝고 개발 직군의 토익 컷이 대부분 600~700선(800점도 있긴 하지만 일부 공기업에 한했다)이였기 때문에 여기까지만 하고 토익은 그만뒀다. 나중에 더 높은 점수가..

MDN문서 내용을 바탕으로 설명할 것이다. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EA%B8%B0%EB%8A%A5%EC%A0%81_%EA%B0%9C%EC%9A%94 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org CORS는 무엇이고, 왜 필요하며, 어떻게 CORS 문제를 해결하는지는 평소 개발할 때도 크게 도움이 되고, 웹 개발 직무 면접 시에도 자주 등장하는 만큼 반드시 ..