내맘대로 개발일지

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" "이미지 클릭 하면 Ref 이용해서 하는거다" 라는건 기억이 나는데 막상 하려니까 가물가물 하더라 .. 역시 사람의 기억은 믿을게 안되나 보다. 그래서 이렇게 기록을 남기기로 했다. 언제나처럼 코드를 분리하기 위해서 쪼개서 작성하는 걸 기본으로 한다. 배울 때 코드는 최대한 쪼개서 작성해야 한다고 배웠기 때문ㅇㅔ ... // Modify.tsx const fileInputRef = useRef(null); { fileInputRef.current?.click(); }} /> // StyledDetail.tsx export const ContentImage = styled.img`..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 에 기본으로 텍스트를 넣어주기 위해 value 에 값을 넣어줬을 때 이후 값을 수정하려고 하면 값이 안들어가게 될 것이다. 그때는 당황하지 말고 value 를 defaultValue 를 사용하면 된다. Before {setTitle(e.target.value)}}/> After {setTitle(e.target.value)}}/>

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 서버와 통신하기 위해서 axios 사용하고 있었는데, 기존에는 그냥 GET, POST, PUT, DELETE 를 바로바로 사용했는데 그게아니라 인스턴스를 만들어서 재사용성을 높일 수 있도록 하기 위해서 리팩토링을 진행하였다. 만드는 방법은 아주 간단하다. axios.tsx export const axiosInstance = axios.create({ baseURL: BACKEND_API_ADRSS, timeout: 10000, }); .env 에 설정되어있는 BACKEND_API_ADRESS 를 baseURL 에 지정해놓고, timeout 은 10000초로 지정해놓았다. 이외에도..

2023.10.26 - [IT] - [IT] Tree Shaking ? webPack ?

📱테스트 환경 "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" 😢 내가 겪은 문제 이미지를 가운데 정렬 하는 건 기록한 적이 있다. [CSS] 이미지 세로 중앙(수직) 정렬 하는 방법 😢 내가 겪은 문제 이미지 옆 텍스트를 세로 중앙 정렬 하는 일은 정말 많은 것 같다. 그때마다 찾아 썼는데 그냥 내가 기록해놓고 써야겠다. 티스토리는 항상 켜놓는데도, 쓸때마다 구글에 검 8735.tistory.com 이미지보다 더 많이 사용하는 경우가 바로 텍스트를 가운데 정렬 하는 경우다. 네비게이션을 만든다거나, 탭메뉴를 만든다거나 등등 .. 그럴때마다 구글에다가 "CSS 텍스트 수직정렬 하는 방법" 검색해서 복사해서 썼는데 마진값을 사용하는 사람들도 ..

이걸 정리해놔야지 하면서 딴짓하다가 이제라도 정리하려고 한다. JavaScript에서 비동기 작업을 다루는데 사용되는 중요한 개념 중 하나이다. 비동기 작업은 주로 시간이 걸리는 작업을 다룰 때 발생한다. 보통 데이터베이스 관련된 작업이나 네트워크 요청이 필요한 작업에서 자주 사용하고 있다. 사실 프라미스 라는 단어는 생소할 수 있어도 비동기처리나, async / await 은 사용해봤거나 들어본적은 있을꺼다. 내가 그랬기때문에 다른 사람들도 그랬기를 바란다. 왜냐하면 이게 뭔지도 모르고 쓰냐고 혼난적이 있기 때문이다 ㅎ 동작은 크게 4가지로 구분지어서 살펴볼 수 있는데 상태(State) 대기(pending): 비동기 작업이 아직 완료되지 않은 상태. 이행(fulfilled): 비동기 작업이 성공적으로 ..

📱테스트 환경 "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 에서 보내려고 하니까 메일 전송하기 시스템 모달창이 나오지 않았다...