만족

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

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

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

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 속성을 가지고 있다. 이 경우 그림자가 표시될까? 표시되지 않는다. 왜냐하면..

문제 우리가 프로젝트에서 어떤 데이터를 로드하고 사용할 때, 그 데이터가 반복적으로 로딩될 필요가 없다면 어떤 식으로 구현할까? //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를 호출하면서 데이터를 로드한다. 갱신될 필요가 없는 데이터인데도 마운트될 때는 데이터가 없으므로..