내맘대로 개발일지

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 공유하기 버튼을 생성하는 일이 제일 많은 일 중에 하나라고 뽑을 수 있을 정도로 참 많이 작업을 하는 것 같다. 그래서 함수로 만들어서 필요할때마다 붙여쓸 수 있도록 해놓았는데, 다른 프로젝트를 하거나 필요한 상황이 있을 때 쉽게 가져가다 붙일 수 있도록 하려고 한다. 시스템 공유나 URL 복사하기 같은 경우에는 이전 포스트에서 정리해놓았으니 확인하고 오면 더 시스템 공유까지 붙여 있어보이는 공유하기를 만들 수 있을 것이다. [ 시스템 공유하는 방법 & URL 복사하는 방법 보고오기 ] [NextJS] NextJS 모바일 시스템공유 하는방법 📱테스트 환경 "r..

😢 내가 겪은 문제 이미지를 모자이크 처리하는 경우가 생각보다 많았다. 미리보기를 생성하거나, 로딩바를 생성했을 경우 또는 데이터 시각화를 통해 집중시키는 효과를 보고 싶을 때 사용하였다. bulr 라는 단어는 생각이 나는데 잘 기억이 안나는 경우가 많아서 다른 사람들도 그렇지 않을까 싶어서 기록해둔다. 실제로 나는 잘 기억이 안나서 자꾸 검색해보게 되더라 ^^ filter: blur(5px); -webkit-filter: blur(5px); 5px 만큼 모자이크 처리를 하는건데, 생각보다 5px 만큼만 해도 적당하니, 잘 조절해서 사용하면 될 것같다. -webkit-filter 같은 경우에는 WebKit 기반 브라우저(예: 사파리)에 대응하기 위해 같이 사용해주는게 좋다.

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 기존에 .tsx 파일에 같이있던 함수를 분리하는 도중에 해당 코드에서 에러가 발생했다. unhandledRejection: Error [ReferenceError]: Image is not defined const imageElement = new Image(); ^ 이게 에러가 브라우저 콘솔창에서는 안나왔는데, VS Code 터미널에는 발생하는 에러였다. 딱히 문제가 되는 건 없었는데, 매우 거슬렸다. 해당 스택오버플로우를 참고해서 수정해봤는데 깔끔하게 실패했다. 에러는 나랑 같은 것 같은데, 이렇게 하는게 아닌 것 같았다. { }, [])

이미지 크기를 조정하는 일은 참 많다. 간단한 SVG 파일 같은 경우에는 width 나 heigth 만 수정해주면 크기를 쉽게 조정할 수 있지만 g 태그 있고, path 태그 막 여러개 섞여있기 시작하면 머리아프다 .. 일일이 수정하는 방법도 모르고, 비율에 맞게 수정하는 방법 또한 모른다 ! 하지만 요즘같이 좋은 세상에는 다 해주는 페이지가 있는데, 자주 애용하고 있어서 소개해주려고 한다. [ I LOVE IMG ] Download file | iLoveIMG Download the processed file with iLoveIMG and share the link with who you want. www.iloveimg.com 이미지를 넣고 width 나 hieght 를 조정해주면 비율에 맞게 알아..

😢 내가 겪은 문제 이미지 옆 텍스트를 세로 중앙 정렬 하는 일은 정말 많은 것 같다. 그때마다 찾아 썼는데 그냥 내가 기록해놓고 써야겠다. 티스토리는 항상 켜놓는데도, 쓸때마다 구글에 검색해서 찾는것도 귀찮은 것 같다. vertical-align:middle; 이 간단한 걸 맨날 구글에 "이미지 옆 텍스트 수직 정렬" 검색해서 찾아 쓰고 있으니 .. 그 시간이 오히려 더 아까운 것 같다.

😢 내가 겪은 문제 나는 역시 개발을 못하는 구나. 하고 느끼는 부분이 CSS 다. 참 모바일 뷰 대응을 진짜 너무 못하겠다. 진짜 모바일 뷰 대응하다가 머리카락 다 빠질것 만 같다. 핸드폰은 왜 크기가 다 다른지 정말 싫다. 뭐 하나하면 다른 화면에서 문제고 수정하면 또 다른 화면에서 문제다. 일단 해결방법 중 하나가 CSS @media 를 이용하는 방법인데, 이 방법도 많이 사용한다고 하니, 기록하려고 한다. /* 화면 너비가 320px 이하일 때 스타일 적용 */ @media (max-width: 320px) { /* 스타일 */ } /* 화면 너비가 768px 이하일 때 스타일 적용 (일반적인 모바일 기기) */ @media (max-width: 768px) { /* 스타일 */ } /* 화면 너..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 이 문제가 제일 짜증난다. 내가 하는 방법이 맞는지도 모른다. 되니까 쓰고는 있는데 ... height: 100% 해도 높이가 100% 가 안된다. 진짜 너무 답답하고 화가나는데 .. 일단 되긴 하니 방법을 공유하려고 한다. 나같은 문제를 겪는 사람이 많은 것같다. 검색해보면 참 많은 정보가 나온다. globals.css html, body, body > div:first-child, div#__next, div#__next > div { height: 100%; } div#__next > div { height: calc(100% - 61px); } 여..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 개발환경 ( http ) 에서는 문제가 없었는데 배포환경 ( https ) 에서는 한번씩 디자인이 깨졌다. 아니면 새로고침 했을 때 디자인이 깨져있다가 원상복구되는 현상을 겪었었다. 해결방법을 찾아보니, .babelrc 를 이용하여 해결하는 방법은 되게 많이 설명되었는데, NextJS 11 버전부터는 비권장 하는 방법이다. 그래서 열심히 정보를 찾아봐서 하는 방법을 찾아서 기록해두려고 한다. 언제나 복사 + 붙여넣기 하면 사용할 수 있도록. 먼저 stlyed-components 를 추가해준다. 나는 NextJS + Typescript 환경이니까 설치 npm i..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 이 코드는 정말 많이 사용하는 것 같다 .. 아무래도 모바일 대응을 하다보면 공유하기 버튼을 클릭 했을 때 시스템 공유 모달이 열리게 하고 싶은 경우가 많아서 그렇다. 그래서 언제든지 꺼내사용할 수 있도록 여기에 기록하려고 한다 . 언제나 똑같이 복사 + 붙여넣기 하면 바로 사용할 수 있도록 .. 개발을 못하는 나를 위해 복붙은 언제나 중요한 것 같다 ^^ share.tsx export const testShare = () => { const baseUrl = window.location.origin; const url = new URL("/", baseUrl..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 모듈화가 중요하다는 말을 참 많이듣는것같다. 전부 함수화 해서 모듈화 해서 사용하고 있는데 이미지를 다운로드 하는 일은 많을 것 같아서 해당 함수를 여기에 기록해두려고 한다. 언제든지 복사해놓고 사용 할 수 있도록 코드를 넣어놓도록 해야겠다. downloadImage.tsx export const downloadImage = ( imageUrl: RequestInfo | URL, fileName: string ) => { // 이미지를 불러와서 Blob 객체 생성 fetch(imageUrl) .then((response) => response.blob()) ...