여러가지 방법이 있지만 최대한 간단하고 따로 설정할 필요가 없는 방법을 소개 한다. 비슷한 상황에서 시행착오를 겪지 않길 바랍니다. 1. aws cli를 설치해준다. Macos 기준 pip3가 기본 설치되어 있기 때문에 pip대신 pip3로 설치 ( pip는 파이썬 인스톨 패키지 관리 도구 ) pip install awscli 2. gatsby-plugin-s3를 설치해준다. npm install gatsby-plugin-s3 3. gatsby-config.js 파일에 Bucket설정을 추가 한다. plugins: [ { resolve: `gatsby-plugin-s3`, options: { bucketName: "my-website-bucket", }, }, ] 4. .env를 통해서 AWS 환경변수 ..
AWS AWS는 Amazon Web Service, 즉 아마존에서 제공하는 클라우드 서비스이다. 다양한 기능을 서비스로 제공한다. 현재 가장 유명하고 많이 쓰인다고 할 수 있다. 개인 기업 할거 없이 현업에서도 많이 사용하고 있기 때문에 웹 개발자라면 알아두는 것이 좋다. 필자도 개인 사이트 등록을 위해서 AWS 공부를 시작했다. AWS 같은 클라우드 서비스는 직접 물리적 기기를 관리할 필요가 없고 사용량에 따른 유연한 비용과 서버의 스펙을 원격으로 조절할 수 있는 등의 편리한 점이 많다. S3란? S3(Simple Storage Service)는 클라우드 공간에 데이터(파일)를 저장하고 사용자에게 제공 해 주는 온라인 스토리지 웹 서비스이다. (일반적인 기존의 환경으로 기준으로 얘기하자면 CDN서버나 ..
gatsby-plugin-image gatsby-plugin-image를 사용해서 gatsby 이미지를 최적화하는 방법을 알아보자. 설치 하기 npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp 설정 파일 gatsby-config.js 파일에서 plugin에 추가 해준다. module.exports = { plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, // 동적 이미지 생성을 위해서 필요함 ], } 정적인 이미지 Static Image 사용 시 import { Static..
setOnDismissListener vs setOnCancelListener setOnDismissListener의 경우 취소 뿐만 아니라 확인 버튼을 클릭했을때에도 이벤트가 발생한다. 즉 AlertDialog가 닫히는 모든 상황에서 발생하는 이벤트, 그러므로 바깥영역을 클릭해서 취소하는 경우에만 이벤트를 발생 시키고 싶다면 setOnCancelListener를 사용해야 된다. setOnCancelListener는 바깥영역을 선택해서 취소했을때와 안드로이드 백버튼을 클릭했을시 모두 정상 동작 한다. 적용 예시 코틀린으로 적용하기 val dialogBuilder = AlertDialog.Builder() .setOnCancelListener(object : DialogInterface.OnCancelLi..
안드로이드 개발 시 위와 같은 alert dialog를 많이 사용 합니다. 하지만 사용자가 alert dialog 바같 영역을 터치해서 alert dialog를 닫아버리면 YES / NO 그 어떤 콜백도 없이 무시 됩니다. 그럴 경우 2가지 방법으로 처리가 가능합니다. 1. setCancelable 설정하기 val dialogBuilder = AlertDialog.Builder(it) .setTitle(title) .setCancelable(false) 위처럼 하면 뒤로가기를 누르거나 대화 창 이외의 공간을 터치해도 무시합니다. setCancelable를 true로 하면 뒤로 가기 키와 배경 터치를 통해 대화 창을 취소 할수 있고 false로 하면 해당 이벤트로 취소를 할수 없습니다. 2. setOnDi..
patch-package 말그대로 npm 에 올려져 있는 모듈을 내가 커스텀하거나 버그 픽스를 해서 내 프로젝트에서 사용 하는 방법이다. 오픈 소스의 경우 버그를 고치고 PR를 통해서 해당 프로젝트에 기여하는 것도 좋다. 하지만 언제 프로젝트 오너가 머지 해줄지 모르기 때문에 급하게 버그를 고쳐서 사용하는 경우 patch-package를 통해서 커스텀해서 사용할수 있다. patch-package - npm https://www.npmjs.com/package/patch-package 보통 패치 패키지는 git diff 를 사용하는데 npm을 통한 모듈의 경우 node_modules 내부에 있고 node_modules는 git ignore되기 때문에 git diff를 통해서 변경점을 작성하기가 어렵다. 그..
html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } 아이폰의 경우 모바일 웹에서 Long press 하고 있으면 Copy 등 버튼이 떠서 이미지나 텍스트를 복사할수있습니다. 하지만 제작자 입장에서는 이를 막고 싶은 경우가 있습니다. 이럴때 css 만으로 방지 하는 방법 입니다. 다만 위 방법으로 했을떄 이슈가 있습니다. react-clipboard 를 구 버젼을 사용하는 경우 클립보드에 텍스에 복사가 안되는 경우가 있습니다. 이때는 해당 라이브러리를 최신버젼으로 설치하는 것을 추천합니다.
IOS 에는 풀다운 이라는 잡아 당기는 액션이 있습니다. 이를 이용해서 새로고침 액션을 주기도 하지만 특정 애니메이션이나 슬라이드에서도 액션이 발생 하기 때문에 버그처럼 느껴지는 동작이 있습니다. 방지 하기 위해서는 간단하게 CSS로 가능합니다. html, body { position:fixed; overflow:hidden; }
