내맘대로 개발일지

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

📱테스트 환경 "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 터미널에는 발생하는 에러였다. 딱히 문제가 되는 건 없었는데, 매우 거슬렸다. 해당 스택오버플로우를 참고해서 수정해봤는데 깔끔하게 실패했다. 에러는 나랑 같은 것 같은데, 이렇게 하는게 아닌 것 같았다. { }, [])

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

📱테스트 환경 "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..