내맘대로 개발일지

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 Canvas 이용해서 열심히 동적 썸네일을 그리고 있는데 .. 텍스트에 그림자 효과를 넣어달라고 하더라. 뭐 당연하게 그냥 기존에 작성해뒀던 코드를 재활용했다. context.shadowColor = "rgba(0, 0, 0, 0.5)"; // 50% 투명도의 검은색 그림자 context.shadowBlur = 10; // 흐림의 정도 context.shadowOffsetX = 5; // 그림자의 x 방향 오프셋 context.shadowOffsetY = 5; context.fillText(text, textX, textY); 오 .. 근데 그림자를 넣었더니 ..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 전에 쓴 블로그 내용과 이어지는 내용인데 [NextJS] blob to base64 바꾸기 📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 canvas 에서 이미지를 다시 새롭게 그리려고 하고있는데, cavas.drawImage 에 나는 blob 형식을 넣었는데 구글에 검색 8735.tistory.com 바로 코드로 넘어가도록 하겠다. 기록의 목적이고 다른사람들도 그냥 코드만 원할것 같다. 내가 그랬어서 .. ㅎ convertBlobToBase64.tsx expo..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 canvas 에서 이미지를 다시 새롭게 그리려고 하고있는데, cavas.drawImage 에 나는 blob 형식을 넣었는데 구글에 검색해서 이곳저곳 살펴보니 대부분 base64 를 넣더라 .. 이유는 잘 모르겠지만, 다 그렇게 하니까 나도 그렇게 해야겠다는 생각을 하게 돼었다. 그래서 일단 blob 를 base64 로 타입을 변환시켜야 하는데 그냥 이해하진 못해도 그대로 복사해서 붙여쓸 수 있도록 함수화 하였다. 생각보다 쓸일이 많지 않을까 싶어서 ... ㅎ converBlobToBase64.tsx export const convertBlobToBase64 =..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 내 짧디짧은 개발인생중에 그래도 웹개발을 제일 오래했는데, 모바일에서 문의 버튼이나 메일을 보내야하는 상황이 왔을 때 모바일에서 시스템 모달을 열어야 하는데 모르겠더라 ... 그 짧게 공부했던 코틀린에서도 작성해봤는데 .. 제일 오래 개발한 웹에서 할 줄 모른다니 .. [Kotlin] Android 12 이상 메일 보내는 방법 📱테스트 환경 Samsung Galaxy Android 13 • Android 10 😢 내가 겪은 문제 Android 10 에서 테스트 할 때는 문제가 없었는데 , 13 에서 보내려고 하니까 메일 전송하기 시스템 모달창이 나오지 않았다...

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 Moblie Web 과 PC Web 에서 작동하는 방식이 생각보다 많이 다르다. 예로 공유하기 버튼을 눌렀을 때도 모바일의 경우 시스템 공유 모달을 띄우면 되지만 PC 에서는 그럴 수 없기 때문에 다르게 작동을 해야한다. [NextJS] NextJS 모바일 시스템공유 하는방법 📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 이 코드는 정말 많이 사용하는 것 같다 .. 아무래도 모바일 대응을 하다보면 공유하기 버튼을 클릭 했을 때 시 8735.tistory.com ..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 SEO 에 사용할 이미지를 하나만 사용하면 사용할 일 없었겠지만, 같은 페이지라도 query 값에 따라 보여지는 SEO 이미지가 달라야했다.. 예를 들어서 localhost:8000/result 에는 A 이미지가 보여야 했다면 localhost:8000/result?id=123 에는 B 이미지가 보여야했다. 그리고 예시로 든 URL 에 result 가 들어있는것만봐도 결과값을 이용해서 썸네일을 만들고 싶었다... ^^ 대충 이런식의 썸네일을 만드려고 했다. 규격이 800x400 인 이유는 카톡 썸네일 기준이기 때문이다. 내가 보기엔 이거 할 줄 알면 canva..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 .map() 함수는 배열을 변환하거나 새로운 배열을 생성할 때 사용한다. 이 함수는 배열 내의 각 요소에 대해 지정된 함수를 호출하하게 되는데 배열의 각 요소를 하나씩 가져와서 그 요소를 변환한 후 새로운 배열로 만들어주는 역할을 한다. const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((number) => number * 2); // doubledNumbers = [2, 4, 6, 8, 10] 이렇게 아주 간단하게 사용할 수 있다. const names = ["Alice", "Bob", ..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 NextUI 를 이용해서 디자인을 적용하고 있는데, Button 을 이용하면 해당 경고 메시지가 나온다. NextUI - Beautiful, fast and modern React UI Library Beautiful, fast and modern React UI Library nextui.org onClick is deprecated, please use onPress 그래서 나는 경고창을 보기 싫어서 onClick 를 onPress 로 바꾸는 작업을 해줬는데 이게 문제였던 것 같다. { router.push("/"); }} > 아니 이렇게 하고나니까 모바일..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 형변환을 해야하는 경우가 정말 많다. 보통 DB 에 데이터는 String 으로 저장해놓는다. 이유는 그냥 편해서 .. 이게 나만 그런게 아니라 DB 튜닝하는 내 지인에게 DB 설계를 요청해도 그냥 타입을 varchar 타입으로 다 ~ 지정해놓는다. 그럼 프론트 개발을 하다보면 형변환을 해야하는데, 방법은 아주아주 쉽다. String to Number let id = "1"; console.log(typeof Number(id)); // number Number to String let id = 1; console.log(typeof id.toString());..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 Array.map() 함수는 너무나 자주 쓰기 때문에 데이터 꺼내 쓰는 방법 정도는 알고 있다. dataArray.map((v, i) => { return {v.title} } 보통 이런식으로 다 꺼내 쓸 것이다. 나도 지금까지 다 ~ 이렇게 꺼내왔다. 근데 오늘 API 에 데이터 컬럼이 한글로 내려왔다. 그것도 문제없다. dataArray.map((v, i) => { return {v.타이틀} } 이렇게 그냥 쓰면 된다. 근데 이제 문제는 컬러명이 서브 타이틀 로 넘어왔을 때는 ? 저렇게 꺼내쓰면 에러난다. 사이에 공백이 있어서 인식을 못한다. 그래서 난처했..