목록전체 글 (385)
만족
기존에는 앱/웹과 사이퍼즈 API 서버가 직접 통신했습니다. 매우 간단하고 빠르지만, 치명적인 문제가 있습니다. 사이퍼즈 API 서버가 다운되거나, 점검 상태에 들어가면 모든 요청이 실패한다는 것입니다. 해결법 중간에 프록시 서버를 하나 두어 요청 성공 시 일정 시간동안 그 정보를 저장하고, 사이퍼즈 API 서버가 죽어버리면 저장된 정보를 돌려주는 것입니다. 그러나 이것 역시 문제가 있습니다. 첫째로 한 번도 조회되지 않은 데이터는 프록시 서버에도 존재하지 않기 때문에 오류가 발생한다는 것이고, 또한 거쳐야 하는 서버 갯수가 하나 늘어남으로써 데이터 송/수신 속도가 느려진다는 것이죠. 두 가지 모두 완벽하게 해결할 수 있는 방법은 없으나, 후자의 경우는 비교적 쉬운 방법으로 완화시킬 수 있습니다. 바로 ..
새로운 프로젝트 시작 시 내가 반드시 포함하는 몇몇 모듈이 있어 공유해 본다. 모듈 설치는 npm install [모듈명] 또는 yarn add [모듈명] 위의 명령어를 이용해 한다. axios http request를 간편하게 만들어주는 모듈이다. classnames 조건부로 className이 변경될 경우 유용하게 사용할 수 있다. 예컨데, className={`${someCondition? 'positive': ''}`}를 classnames를 사용하면 className={classNames({positive: someCondition})} 처럼 쓸 수 있다. 조건부 className의 가짓수가 적을 때는 번거로워 보이지만 2~3개만 되어도 훨씬 편해진다. moment Date관련 로직을 간소화해주..
서버에서 MongoDB를 사용한 이후 별로 무거운 작업이 없음에도 CPU 로드율이 미친듯이 날뛰는 문제가 포착되었다. MongoDB를 사용하기 이전에는 볼 수 없었던 문제인데다, 쿼리들 역시 단순히 특정 컬럼을 하나 찝어 일치하는 row 하나를 불러오는 아주 간단한 작업이였기 때문에 어떤 이유로 저런 그래프가 그려지는지 궁금해졌다. 해당 문제에 대해 조사하던 중, 크게 세 가지 원인이 있음을 알아냈다. 1. 거대한 Log 사이즈 mongodb는 기본적으로 /var/log/mongodb/mongod.log 에 로그를 저장한다. 그런데 해당 로그 사이즈가 너무 거대해질 경우(GB단위 이상) 성능에 큰 영향을 끼친다고 한다. cd /var/log/mongodb 로 로그파일이 있는 경로로 이동하고, ls -al..
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key has just been changed. The fingerprint for the ECDSA key se..
해당 오류를 검색해 본 결과 원인은 통신 중 어느 한 쪽의 커넥션이 끊겼을 때 발생한다고 한다. 상대 서버를 조사해 본 결과 상대측에서 끊은 것은 아니라 좀 더 찾아보니, 내 서버에서 병렬적으로 네트워크 요청을 할때 그 갯수가 한계치를 넘어서면 더 이상 요청을 발송하지 못하고 뻗어버린다고 한다. const axios = require("axios"); axios.default.timeout = 5 * 1000; 커넥션을 하는 부분을 찾아 우선 timeout 값을 지정해 줘서 일정 시간이 지나도록 상대 서버가 응답하지 않으면 이쪽에서 먼저 커넥션을 끊어버리게 만든다. 나는 axios를 사용중이라 위 방법대로 지정했고, 다른 http request module을 사용할 경우 해당 문서를 읽고 타임아웃 최대 ..
forever 모듈로 express 서비스를 배포한 후, 서비스가 죽는 현상이 관찰되었다. DDoS공격이 감지되긴 했지만, 서버가 아예 서버리는 상태가 아니라면 서비스가 죽은 후 다시 해당 서비스를 실행시키는 액션을 기대했지만 튕긴 상태로 유지될 뿐이였다. error: Forever detected script exited with code: 1 forever 에러 로그 맨 마지막엔 해당 오류가 찍혀 있었고, 그 외에 다른 특이사항은 없었다. 재미있는 것은 어떤 로그에서는 해당 로그가 표시된 뒤 서비스를 재시작한 이후, SIGTERM을 받고 프로세스가 죽어버리는 경우도 있었다. error: Forever detected script exited with code: 1 error: Script restar..
운영중인 서비스(사이퍼즈 서포터)는 AWS Lightsail을 이용중이다. 사양은 1Core/1GB RAM인데, 기존까지는 평균적으로 CPU는 20% 이하, RAM은 70%정도가 사용되고 있었다. 사람들이 몰릴 경우 CPU가 40~60%, RAM은 90%정도 사용되는데, 금일 오전 DoS공격을 받아 결국 서버가 뻗어버렸다. ...공격이 아니더라도 간당간당한 수준이라 슬슬 사양을 업그레이드 하기로 했다. CPU쪽은 별로 할 필요가 없을 것 같고, 램 정도만 업그레이드 할 것이다. (1Core/1GB RAM-> 1Core/2GB RAM) 시작해보자 lightsail.aws.amazon.com/ls/webapp/home/instances https://lightsail.aws.amazon.com/ls/weba..
velog.io/@velopert/react-hooks#4-usereducer 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 velog.io 작성자분이 잘 정리해두셨기 때문에 위의 링크를 참조하면 좋다. 공식 문서에서 useState/useEffect/useRef 정도만 읽고 사용해봤는데, 이 밖의 유용한 hook도 많은 것 같다. 조만간 보고 프로젝트에 적용해 봐야지
얼마전 www.warning.or.kr/ 을 피해 폰헙 등 차단된 사이트에 들어갈 수 있는 방법을 게시한 포스트가 방심위 요청으로 삭제되었다. 항상 티스토리를 이용하고 사랑해 주시는 회원님,회원님께서 더 편안하고 즐겁게 티스토리를 이용하실 수 있도록 안내 말씀 드립니다.신고가 접수되어 살펴본 결과, 회원님의 블로그 내에 이용약관 및 운영원칙에 위반되는 내용이 발견되어 아래와 같이 조치되었습니다. 일자 : 2020-11-30 조치내용 : 경고 위치 : 만족 잡동사니게시글 삭제 조치(방송통신심의위원회요청)* 심의번호 : [번호 비공개]* URL : http://satisfactoryplace.tistory.com/119* 결정사유 : 해당 정보는「정보통신망 이용촉진 및 정보보호 등에 관한 법률」등 관련 법령..
우선 맥 사양은 다음과 같다 맥북 프로 15인치 (2019) i9-9980H Radeon Pro 560x 16GB RAM 512GB PCIe SSD MacOS Big Sur 가격 버츄얼박스는 무료고, 페러렐즈는 일회성 구매 기준으로 96000원이다. 페러렐즈가 훨씬 비싼데다, 맥 메이저 업데이트 시 하위호환이 안되는 경우가 있어 새로 사야할 때가 있다. 구독을 하면 1년에 96000원을 내는 것으로 맥 업데이트에 대응해주지만 차라리 일회성 구매를 하고, 호환이 안될 때 마다 업그레이드(60000원)하는게 낫다. 아니그래도 무슨 가상컴퓨터에 십만원을 갖다박습니까? 얘기 조금만 더 들어봐라.. 성능 사실 포스팅을 하는 이유도 성능 때문이다. 버츄얼박스의 성능은 개쓰레기다. 우선 벤치를 보자. (버츄얼박스와 ..
이런식으로 포맷팅되지 않은 JSON 파일은 사람이 읽기 힘들다. 해당 문자열을 복사해서 jsonformatter.curiousconcept.com/# JSON Formatter & Validator Format and validate JSON data so that it can easily be read by human beings. jsonformatter.curiousconcept.com 위의 사이트에 붙여넣으면 보기 좋게 포맷팅해준다. 물론 문자 인코딩은 해주지 않으니 포맷팅에만 중점을 두면 된다. 오른쪽 아래의 세 번째 버튼을 누르면 전체 화면 보기도 할 수 있다. JSON외에도 다른 데이터 포맷 문자열을 정렬하고 싶다면 ~~beautify 를 이용해 검색하면 된다. (EX: JSON beauti..
Google Play Developer Console와 GCP를 연동하면서 발생한 문제다. the project id used to call the google play developer api has not been linked in the google play developer console. 분명 GCP와 개발자 콘솔 API가 분명히 연결되어 있음에도, 위의 오류 메세지를 뱉어내면서 403(Forbidden) 오류가 발생한다. 이걸로 6시간이 갈려나갔는데 해결법은 매우 간단하다... 개발자 콘솔 내 대상 앱의 인앱 상품 페이지로 들어가 아무 상품이나 새로 만든 다음, 그 상품을 지우면 해당 오류가 해결된다.
이미 다른 RecyclerView에 사용된 LayoutManager를 사용하려 할 때 발생하는 문제다 해결법은 그냥 각각 만들어서 주면 된다
기존 사용하던 서버에서 Apache+php 조합을 사용하고 있기 때문에 nginx를 새로 설치하기는 부담스러워 apache+express 조합으로 서비스할 것이다. node/npm은 기존에 설치되었다고 가정한다. 설치하지 않았다면, soojae.tistory.com/25 를 참고해 설치를 진행하면 된다. apache의 경우엔 단순히 sudo apt-get install apache2 하면 된다. 버전 정보 Ubuntu 16.04 Apache 2.4.18 아파치 설정 sudo nano /etc/apache2/sites-avaliable/000-default.conf 를 이용해 vhost정보를 수정할 것이다. ... ServerName [도메인명(ex: test.com)] ServerAdmin [관리자 이메..
http://test.com 에 배포하기로 했다고 해보자. npm run build (yarn build)로 빌드한 후, 서버에 업로드했을때 정상적으로 표시되는 것으로 보인다. 그런데 /가 아닌 다른 경로로 처음 접속하면 404 페이지가 보인다. 리액트 프로젝트를 빌드하면 html파일은 index.html하나뿐이기 때문에 /, /index.html이 아니면 다른 경로로 접속했을 때 index.html을 읽어올 수 없기 때문이다. 즉, 어떤 경로로 접속하더라도 index.html 파일을 읽을 수 있도록 apache설정을 조금 만져주어야 한다. Ubuntu 16.04, Apache 2.4.18을 기준으로 설명한다. sudo nano /etc/apache2/apache2.conf 설정파일을 열고 (nano 대..
waifu2x.udp.jp/index.html waifu2x waifu2x Single-Image Super-Resolution for Anime-Style Art using Deep Convolutional Neural Networks. And it supports photo. Show full demonstration | Go to GitHub This website uses Google Analytics to help us improve the website content. waifu2x.udp.jp 다른 곳도 많지만 대부분 몇개까지만 무료로 변환해주고 결제를 요구하는데 위의 사이트에서는 무료로 무제한 변환이 가능하다. 그 대신 하나씩 해야 한다는 단점이 있다... 성능 확실하구만...
오류 로깅이나, 버그 접수 시 사용중인 버전 정보 확인이 필요하다. 그래서 package.json을 임포트하여 version값을 뽑아오려 했으나 오류가 발생한다. package.json은 프로젝트 루트 위치(src보다 상위 레벨임)에 있기 때문에 임포트가 불가능하다. 따라서 다른 방법을 사용해야 한다. ... "scripts":{ "start": "node scripts/start.js", "build": "node scripts/build.js", ... } ... package.json의 scripts 값을 보면 다음처럼 되어 있을 것이다. 여기서 nodejs에 환경 변수를 넣어줄 것이다. ... "scripts":{ "start": "REACT_APP_VERSION=$npm_package_versi..
리액트로 개발 도중 에러가 발생하면 다음과 같은 화면을 볼 수 있다. 그런데 이건 개발 중일 때 보여지는 화면이고, 프로덕션에서 오류가 나면 아무것도 표시되지 않는다. 말 그대로 페이지가 백지가 되버린다. 당연히 사용자 경험상으로 좋지 않을 뿐더러, try-catch로 모든 컴포넌트의 로직을 감쌀 수도 없는 노릇이니 개발자로서도 에러가 어디서 어떻게 발생하는지 가늠하기도 어렵다. 이럴 때 Error Boundary를 사용하면 문제가 해결된다. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError..
window.addEventListener('online', ()=>{ /*끊김->연결로 변경될 때 호출*/}); window.addEventListener('offline', ()=>{ /*연갤->끊김으로 변경될 때 호출*/}); window.navigator.onLine //true== connected, false == disconnected 몇몇 웹사이트는 네트워크 끊김/연결될 때 시각적으로 알려주던게 신기해서 한번 알아봤다.
HOC가 뭘까? A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. HOC는 리액트에서 컴포넌트 로직 재사용을 위해 사용하는 고급 기술입니다. HOC는 React API의 일부가 아니며, 단지 리액트의 집합 특성에..