본문 바로가기

전체 글

 (24)
[React.js] objectFit 속성 html2canvas 에서 다르게 캡쳐되는 문제 아래와 같이 동그란 배경에 이미지를 올리는 작업을 하고, 스크린샷을 찍는 기능을 구현을 했습니다. 스크린샷은 html2canvas를 사용해서 찍었고, 코드는 아래와같이 구현을 하였는데, 스크린샷 이미지에서는 묘하게 이미지 비율이 바뀌는 문제가 있었습니다. circle: { width: '85px', height: '85px', borderRadius: '50%', overflow: 'hidden', }, circleImg: { width: '100%', height: '100%', backgroundColor: '#3a3a3a', objectFit: 'cover', }, 결과만 말하자면, "objectFit : cover" 속성이 html2canvas에서 제대로 동작하지 않는다는 것이 문제였습니다. 비교..
AWS Cloudfront https 페이지 ezoic name server 변경시 동작안함 복구 후기 요즘 진행하는 프로젝트가 있는데, 일단 구현을 완료해서 배포를 해 둔 상태였습니다. 광고수익을 위해 이번에는 Adsens 대신 Ezoic을 써보려고 진행하다가, 제 도메인 접속이 안되는 문제를 겪어서 후기 남깁니다. 일단 저는 http 웹페이지를 구현해서 배포했고, AWS의 Cloudfront를 이용해서 http를 https 로 redirect 시켜 https 페이지를 처리했습니다. Ezoic에 가입하고 도메인 입력후, 하라는데로 진행하다보니 Name Server Integration이라는 단계가 나왔습니다. 본인 도메인의 name server를 지정해준 ezoic name server로 바꾸라는 내용이었는데, Route53에서 레코드 확인해보니 NS유형의 처음부터 등록되어있는 레코드를 수정하면 되는것 ..
[Next.js] next-i18next로 웹페이지 다국어 지원 구현하기 & 에러 수정 현재 영어나 한국어로 웹페이지를 만들어서 한페이지씩만 제공하고있는데, 여러 언어를 지원하도록 처리해야겠다는 생각이 들었다. 빌드 후 배포시점에 페이지를 번역해서 페이지를 만들어 주는 툴이 있으면 좋을텐데, 그런건 찾기가 힘들었고 일반적으로 언어별 데이터셋을 만들어두고 next-i18next 패키지를 사용해서 변수형태로 사용하는 방법이 쓰이는것 같았다. 1. 패키지 설치 우선 npm install 로 next-i18next 패키지를 설치해준다. npm install next-i18next 2. next.config.js next-i18next.config.js 파일을 생성하고, 아래와같이 사용할 언어코드와 default 언어를 지정해준다. 영어, 한국어, 독일어를 사용할 locales 로 넣어주고, def..
AI 이미지 생성 사이트 / AI Image Generator - 내가 쓰려고 만든 툴 요즘 핫한 AI Image 생성하는 웹페이지를 만들어보았다. 페이지 링크 AI Image Generator - My Favorite Util This is AI Image generator. Let make your prompt into an image. myfavoriteutil.com AI 생성모델은 stabilityai/stable-diffusion-2-1-base 를 사용했다. 최근에 나온 생성모델 위주로 몇개 테스트 해봤는데, 이게 속도도 나름 빠르고 퀄리티도 괜찮은 것 같았다. 사용방법 & 리뷰 Prompt 입력 간단해서 딱히 사용법이랄것도 없지만, 입력창에 원하는 설명을 넣고 엔터키를 누르거나 옆에 Generate Image 버튼을 누르고 기다리면 된다. 보통 10초정도면 결과가 나오는 것 ..
[React] Helmet으로 og tag 설정시 이미지 적용 안되는 문제 요즘 chatGPT를 사용해서 react로 웹개발을 하고있는데, 이렇게 하다보니 별것아닌문제를 오랫동안 해결을 못하는경우가 종종 생기는것 같다. 그 중 하나가 페이지 공유시 OpenGraph tag로 설정한 것들이 제대로 안나오는 문제 였다. 문제코드 & 문제현상 우선 처음에는 단순하게 meta tag를 js 파일에서 수정하고 싶다는 생각이었고, 결국 아래와같이 처리하게 되었다. import { HelmetProvider, Helmet } from "react-helmet-async"; function MyPage(){ ... return ( ); } 이렇게 하고 배포한 뒤에 페이지를 카카오톡에 공유해봤는데, title만 나오고 description이나 image들은 모두 누락되는 상태가 발생했다. ti..
HEIC JPG 변환 사이트 / HEIC 파일 변환 프로그램 - 내가 쓰려고 만든 툴 HEIC 파일을 PNG나 JPG로 만드는 툴을 직접 쓰려고 만들었는데, 블로그에도 공유해 봅니다. HEIC파일 JPG로 변환 (JPEG) https://myfavoriteutil.com/heic2jpg HEIC to JPG Converter Free Web Tool Convert your HEIC files to JPG format for free with our easy-to-use online tool. Supports multiple files conversion. myfavoriteutil.com HEIC파일 PNG로 변환 https://myfavoriteutil.com/heic2png HEIC to PNG Converter Free Web Tool Convert your HEIC files to..
고추장채소솥밥 만들기(feat. 사계절맛있는 채소솥밥 보양식) 류니키친 최윤정 님의 책에 있는 고추장채소솥밥을 만들어 먹어보았다. 뭘 만들지 안정해진 상태에서 장보러 마트에 갔고, 세발나물이 가격도 싸고 괜찮아보이길래 내가만든 장보기 툴을 이용해서 세발나물이 들어가는 솥밥을 확인했다. 나머지 재료인 애호박과 당근, 표고버섯 모두 집에 있어서 저녁메뉴는 이걸로 결정완료! 류니키친 맛있는 솥밥 보양식 장보기도우미 책에 수록된 레시피들에 대해, 원하는 요리의 재료를 확인할 수 있는 웹페이지입니다. 남아있는 다진소고기를 사용하고싶을때, 차돌박이솥밥에 차돌박이 말고 뭐 myfavoriteutil.com 우선 재료는 아래와같다. (2인분 기준) 나는 2인분으로 할때 밥이랑 육수양만 200g으로 줄이고 나머지 재료는 그대로하는데, 딱 내 입맛에 맞게 만들어진다. 솥밥재료 - 쌀..
류니키친 솥밥 재료 장보기도우미 - 내가 쓰려고 만든 툴 작년에 류니키친 유튜브를 보고 이라는 책을 구매하게 되었는데, 여기나오는 솥밥 레시피들이 정말 맛있어서 집밥을 해먹을때면 매번 펴보곤 합니다. 지금은 책에 있는 절반 이상의 음식을 해먹어봤는데, 아직도 매번 해먹을때마다 만족스럽습니다. 그런데 책을 보고 요리를 해보면, 장볼때 재료를 찾아보기가 어렵다는점이 불편한것 같습니다. 장을 보다가 괜찮은 품목이 있으면, 갑자기 "오늘 그솥밥해볼까?" 하는 생각이 들고는 하는데, 나머지 재료가 생각이 안나는 경우가 많기때문입니다. 한번은 가지솥밥을 하려고 가지를 샀다가 두반장이 없어 못한적이 있습니다^^; 유튜브 영상으로 올라온 솥밥이라면 영상을 보고 확인하면 되지만, 영상이 없는 레시피가 꽤 많기때문에 밖에서는 확인할 수 없는 경우가 많더라구요. 요즘 웹개발 공부..

티스토리툴바