내맘대로 개발일지

📱테스트 환경 "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.타이틀} } 이렇게 그냥 쓰면 된다. 근데 이제 문제는 컬러명이 서브 타이틀 로 넘어왔을 때는 ? 저렇게 꺼내쓰면 에러난다. 사이에 공백이 있어서 인식을 못한다. 그래서 난처했..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 바로 어제도 아니다. 몇 시간 전 포스팅에서 카카오톡 인앱에서 이미지 다운로드 하는 방법을 기록했다. { const baseUrl = window.location.origin; const url = new URL("/", baseUrl); const userAgent = window.navigator.userAgent; const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( userAgent ); if (isMobile && navigator.share !==..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 NextJS 에서 개발을 하고 있는데, 이미지를 첨부하고 나면 기존의 틀과 이미지의 크기가 달라져서 버튼의 위치가 달라지거나 뭔가 화면의 요소들이 왔다갔다 하는 경우가 있었다. 내가 보기에도 너무 불편한데 당연히 지적당하겠다는 생각에 먼저 수정하기로 했다. 코드만 봐도 간단하게 이해할정도로 쉽지만, 이미지 URL 이 있으면 를 보여주고 없으면 RectangleSVG 를 보여준다. RectangleSVG 같은 경우에는 다음과 같다. width="100%" maxWidth="430px" height="100%" maxHeight="430px" 정사각형 모양이..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 지난 포스팅에서 이미지 다운로드 하는 방법을 기록했다. [NextJS] 이미지 다운로드 하는 방법 📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 모듈화가 중요하다는 말을 참 많이듣는것같다. 전부 함수화 해서 모듈화 해서 사용하고 있는데 이미지를 다운 8735.tistory.com 이게 진짜 소름인게, 크롬이나 사파리 같은 곳에서 잘 되는데 카카오톡 인앱 웹에서는 안된다. ( 나는 진짜 너무 열받았었다. ) 카카오 데브톡에 가도 나랑 비슷한 상황에 처한 사람이 많..

보통 이미지를 다운받으면 PNG 나 JPG 확장자를 받게되는 것 같다. 디자이너와 협업할때도 .PNG 이미지를 받았다. ( 나같은 경우에는 그랬다 ... ) .ico 확장자를 가진 이미지가 필요하고 화면 크기별로도 있으면 참 좋은데 코드 작성하기는 귀찮다 .. 그런 나를 위한 아주 좋은 사이트가 있는데 바로 https://www.favicon-generator.org/ 이다. Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generat..