만족

https이 적용된 상태에서만 정상 작동하는 동작들이 있다. 이 포스트에서는 로컬에서 https를 적용하는 방법을 알아본다. 아이디어 우리가 https 가 적용된 웹사이트에 접속할 때 어떤 일이 일어날까? https://nuritech.tistory.com/25 HTTPS 통신 원리 쉽게 이해하기 (Feat. SSL Handshake, SSL 인증서) 이 글을 쓰게 된 이유는,, 나의 평소 HTTPS 에 대한 지식은 HTTPS 가 암호화된 네트워크 통신 프로토콜이고 HTTPS 를 사용한 네트워크 통신에서는 주고받는 패킷을 까도 데이터가 암호화되어 있어 안 nuritech.tistory.com 암/복호화 부분을 제외하고 살펴보면 1. 서버가 클라이언트에게 인증서를 제시 2. 클라이언트는 인증 기관(CA)에..

결론만 보고싶다면 스크롤 맨밑으로 ㅎㅎ.. 현재 apache+express 조합으로 서비스를 운영중이다. client가 request를 보냈을 때 express project까지 도달하는 과정은 위와 같다. 그런데 express에서 req.ip 값을 확인하니, 전부 127.0.0.1로 찍혀 있었다. 왜 그럴까? 사실 express의 관점에서는 앞단에서 아파치가 프록시를 해주고 뭐고 그런건 관심없고 apache가 express에게 request를 보내는 것으로 인식된다. 따라서 자기 자신에게 포트 번호만 바꿔서 보내는 것으로 작동하므로, 요청 ip가 127.0.0.1로 찍히는 것이다. req.ip express의 req.ip는 어떻게 구현되어 있을까? expressjs https://github.com/e..

지난 포스트에서 jest, eslint를 적용해봤다. 그렇다면 이 스크립트를 커밋 전 실행해서 안전한 코드일때만 허가할 수는 없을까? https://www.npmjs.com/package/husky husky Modern native Git hooks made easy. Latest version: 8.0.1, last published: 13 days ago. Start using husky in your project by running `npm i husky`. There are 2316 other projects in the npm registry using husky. www.npmjs.com husky 허스키를 사용하면 githooks 스펙을 손쉽게 사용할 수 있다. https://git-s..

https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 설치 yarn add --dev jest devDependency에 jest를 추가한다 yarn jest --init 초기 설정이 필요한 경우(browser 환경, typescript 사용 등) 위 커맨드를 이용한다. 테스트 코드 작성 // index.js // object[key] value is not null? const requireValues = (object, keys = []) => { let result = true; keys.map(key => { if (!object[ke..

top 명령어를 사용하면 실행 중인 nodejs 프로세스는 다음과 같이 표시된다. 별도의 부가 정보 없이 node로만 표시되기 때문에 정확히 어떤 스크립트가 실행되고 있는지는 알 수 없다. ps -aef | grep node 이 명령을 이용하면 실행 중인 node 프로세스의 상세 정보를 함께 보여준다 (윈도우 계열에서는 사용할 수 없다) 마지막 행에 node프로세스가 실행중인 스크립트 정보가 표시된다. (정확히는 node 프로세스 실행 시 사용한 커맨드 전체가 출력된다) 첫 행이 pid이므로, 종료할 프로세스가 있는 경우 그 node 프로세스가 어떤 스크립트를 실행하는 것인지 확인한 후 kill 커맨드를 이용해 종료할 수도 있다.

nodejs 환경에서 개발하다 보면 오타 등으로 인한 syntax error 가 발생하는 일이 잦다. const foo= ''; fooo.split('1'); // fooo is not defined 가령 이런 코드는 당연히 오류가 나지만, 실행 전에 알아차릴 수 있는 오류임에도(fooo가 정의되지 않음) 적극적으로 알려주지 않는다. 그래서 추후 오류가 발생하면 코드를 한줄한줄 읽어 내려가면서 찾곤 하는데 여간 쓸데없고 재미없는 일이 아니다. Eslint eslint를 사용하면 문법 오류를 사전에 알려주고, 심지어 자동으로 수정해줄 수도 있다. 예를 들어 위의 오류 코드에 eslint를 적용하면 오류를 하이라이팅해줄 뿐만 아니라 일부 규칙에 어긋나는(foo의 경우 선언 후 사용되지 않음)구문까지 잡아낼 ..

Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 갑자기 를 로 감싸라는 오류가 출력됐다. 그런데 Mac환경에서는 정상 작동하다가 플랫폼을 옮기니 이 오류가 발생해서 의아했다. 원인과 해결 react-router 6버전부터 로 를 감싸는게 강제되었기 때문이다 return ( ) 버전 5까지는 위처럼 작성할 수 있었지만 버전 6부터는 아래처럼 작성해줘야 한다 return ( ) Mac에서는 됐던 이유? package.json에 react-router의 버전이 latest로 되어있었기 때문이다. 과거 5버전이 최신 버전일때 설치하고 package.loc..

지난 번 작성했던 github action이 됐다 안됐다 한다. 아예 터져버리는것도 아니고 queued상태로 몇시간째 있으니 답답하기만 하다. 원인 https://stackoverflow.com/questions/71027513/all-github-action-jobs-are-queued-and-never-running all github action jobs are queued and never running Updated: 2~3days After, my job is failed automatically with below message I have some trouble all github action jobs are queued and never executed. I have checked Git..

https://satisfactoryplace.tistory.com/106 [React] scp명령어를 이용한 배포 간소화 현재까지 배포 과정은 다음과 같았다. 1. yarn build 입력 후 빌드 대기 2. FTP클라이언트를 켠 후, build폴더 내용을 원격 서버에 복사 터미널에 yarn build후, 다른 창으로 이동하여 작업을 이어나가야 satisfactoryplace.tistory.com 이전에 배포 간소화를 위한 스크립트 작성법을 소개했었다. 그러나 매번 deploy 스크립트를 입력하는 것과, test code가 통과되는지를 확인하는 점이 번거로웠다. 또 scp 명령어에서 pem키를 입력으로 받는데 여러 환경에서 작업하다 보면 pem키를 옮겨오는 것도 일이라서 다른 방법을 찾아보기로 했다. ..

바탕 화면에 있는 것을 누르거나, 뭐 직접 explorer.exe를 실행시키면 문제되지 않지만, 작업 표시줄의 탐색기 아이콘을 누르면 explorer(파일 탐색기 뿐만 아니라 작업 표시줄에도 관여하는 프로세스)가 마치 꺼졌다 켜지듯이 동작한다. 뭐 찾은 해결법에서는 레지스트리를 등록, 삭제해라... 시스템 스캔을 해라... 이미지 복구를 해라.... 아무 소용도 없어서 2일동안 스트레스 왕창받다가 결국 MS 포럼(영문)에서 답을 얻었다. https://techcommunity.microsoft.com/t5/report-an-issue/windows-11-taskbar-file-explorer-crashes/m-p/3150492 Windows 11 Taskbar File Explorer crashes Hi..

npm run build후 결과물로 번들링된 javascript가 출력된다. 이 bundle의 크기가 크면 SEO의 단점인 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리는 매우 중요하다. 그렇다면 이 번들 사이즈가 얼마나 큰지, 또 어떤 부분을 점검해야 하는지 어떻게 알 수 있을까? webpack-bundle-analyzer를 사용하면 번들에서 어떤 요소가 얼마나 용량을 차지하는지를 알 수 있다. 설치 yarn add -D webpack-bundle-analyzer webpack-bundle-analyzer를 설치한다. webpack 설정을 건드려야 하기 때문에, eject 하지 않았다면 해준다. yarn eject /config/webpack.config.js에서 맨 위에 const BundleAn..

https://www.npmjs.com/package/class-validator class-validator Decorator-based property validation for classes.. Latest version: 0.13.2, last published: 5 months ago. Start using class-validator in your project by running `npm i class-validator`. There are 3348 other projects in the npm registry using class-validator. www.npmjs.com class-validator는 이메일, 휴대전화 등 다양한 입력에 대한 유효성을 검증할 수 있는 기능을 지원하는 모듈..

android의 공식 UI 라이브러리를 사용해 Chip 컴포넌트를 화면에 그려보자. 해당 라이브러리에는 다양한 UI 컴포넌트가 존재하지만, 이번에는 Chip 을 사용해 볼 것이다. 물론 내가 지금 필요한게 Chip이라서 그렇기도 하다 ㅎㅎ; 설치 implementation 'com.android.support:design:30.0.0' build.gradle 에 다음을 추가한다. 단 버전은 targetSDKVersion 값을 참조해서 지정한다 (targetSDKVersion 29버전을 사용중이라면, 29.x.y 처럼 29버전을 사용한다) 사용: Chip 아주 간단하게 Chip 컴포넌트가 추가되었다. 물론 터치했을 때의 rippleEffect도 적용되어 있다. 닫기 버튼은 closeIconEnabled 속..

css에서 box-shadow를 이용해 그림자 효과를 내듯이, android 에서는 elevation을 이용해 그림자 효과를 낸다. 다만, 위의 이미지처럼 컴포넌트를 위로 띄워 발생하는 그림자라는 컨셉트를 가지고 있어서, '얼마만큼 컴포넌트를 위로(z축) 띄울 것인가?' 를 지정하는 방식이다. 이렇게 elevation이라는 속성을 추가함으로써 손쉽게 그림자를 표시할 수 있지만, 그림자가 정상적으로 표시되지 않는 문제가 빈번히 발생한다. 몇 가지 케이스들을 통해 원인과 해결법을 살펴본다. 거두절미하고 결론만 보려면 맨 아래로 스크롤하면 된다. 그림자가 생길 공간이 없는 경우 이 코드에서 두 번째 TextView는 elevation 속성을 가지고 있다. 이 경우 그림자가 표시될까? 표시되지 않는다. 왜냐하면..

node your_js.js 이런식으로 .sh 파일을 작성했을 때 node를 찾을 수 없는 오류가 발생할 수 있다. 이 경우 shell이 node가 어디 있는지를 찾지 못하는 것이므로 절대경로로 입력해주면 해결된다. 일반적으로 ubuntu에서는 /usr/local/bin/node your_js.js 처럼 node의 경로는 /usr/local/bin/node 다. 하지만 사용자나 운영체제에 따라 조금씩 다를 수도 있고, nvm을 사용중일 경우엔 저 경로가 확실히 아니기 때문에 which node 명령어의 출력값을 이용하는 것이 좋다. which node는 node의 절대 경로를 출력한다. $(which node) your_js.js 정리 터미널에서는 node가 잘 되지만 sh와 같은 스크립트에서 node를..

문제 우리가 프로젝트에서 어떤 데이터를 로드하고 사용할 때, 그 데이터가 반복적으로 로딩될 필요가 없다면 어떤 식으로 구현할까? //return Promise const loadData= ()=>{ //load data return new Promise((rs)=> rs({msg: 'hi!'})); }; const MyComponent= ()=>{ const [data, setData]= useState(); useEffect(()=>{ loadData().then(setData); }, []); return {data?.msg} } 위 코드에서는 MyComponent가 마운트될때마다 계속해서 loadData를 호출하면서 데이터를 로드한다. 갱신될 필요가 없는 데이터인데도 마운트될 때는 데이터가 없으므로..

약 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배 높이정도 차이가 난다..