반응형

전체 글 179

[React] 검색어 하이라이트 효과

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 검색기능이 있으면 당연 하이라이트 기능도 있는게 이쁘고 사용자 입장에서도 좋다고 생각한다. // Search.tsx const [keyword, setKeyword] = useState(""); { setText(e.target.value); }} /> {Highlighting({ text: data.title, keyword: keyword })} useState 를 통해서 검색어 키워드를 가지고 있고 이 키워드가 하이라이팅 글자가 될 것이다. // type.tsx export interface HighlightingData { text: string; keyword: stri..

Javascript/React 2024.04.15

[Express] AWS S3 Image 삭제하기

📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" [Exprss] AWS S3 Image 업로드하기 📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Exprss Server 를 만들고 S3에 이미지를 넣었던 적이 있다. 이때는 이미지 보안때문에 이미지를 base64 로 만들고 해당 이미지를 S3 에 저장했는데 그때 8735.tistory.com 에 이어서 이미지를 업로드만 하면 S3 에 계속해서 쌓이고 .. 더미데이터가 계속 쌓이고 .. 비용이 비싸진다 .. 그렇다면 이미지도 지워야하는데, 이미지를 지우는 방법은 업로드보다는 훨씬 쉽다 ! // awsConfig.ts import AWS from "aws-sdk"; c..

Javascript 2024.04.12

[React] "@babel/plugin-proposal-private-property-in-object" ...

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 학생이메일로 기분좋게 WebStorm 을 사용하고 있었는데 갑자기 이메일 정리로 인해 계정이 막혀버렸다 ...😭 아무튼 .. 이 당시 WebStorm 으로 React Typescript 프로젝트를 생성했었는데프로젝트를 실행시킬때마다 One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working be..

Javascript/React 2024.04.12

[Express] AWS S3 Image 업로드하기

📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Exprss Server 를 만들고 S3에 이미지를 넣었던 적이 있다. 이때는 이미지 보안때문에 이미지를 base64 로 만들고 해당 이미지를 S3 에 저장했는데 그때 작성한 코드는 다음과 같았다. export const ImageUpload = (base64: string, imageName: string) => { // AWS 설정 AWS.config.update({ accessKeyId: process.env.ACCESS_KEY_ID, secretAccessKey: process.env.SECRET_ACCESS_KEY, }); // S3 객체 생성 const s3 = new AWS.S3(); const bu..

Javascript 2024.04.12

[React] console.log 두번 출력될때 React.StrictMode

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 이게 한번씩 consol.log 가 2번씩 출력될때가 있다. useEffect(() => { ... console.log("hi"); ... }, []); 컴포넌트가 처음 랜더링될때 딱 한번만 실행되어야 할텐데 개발자도구를 열어서 확인해보면 2번씩 찍혀있는 경우가 있다. 이런경우는 대부분 개발모드에서 발견되는데 해결방법은 아주 간단하다. // index.tsx const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( // // ); React.StrictMode 때..

Javascript/React 2024.04.11

[React] 이미지 클릭 시 파일 선택 <Input /> 사용하기

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

Javascript/React 2024.04.09

[Kotlin] Android studio JDK 버전 변경하는 방법

원래는 따로 JDK 버전을 설정한 적이 없었는데최근에 11 을 썼다가 1.8 까지 내려가야 해서 해당 버전을 수정해주는 일이 있었다.File > Settings... 로 이동Build > Gradle 로 이동나는 초기에 Build 탭이 따로 보이지 않아서 검색해서 해당 탭으로 이동했다.그 이후에는 잘보이긴 했는데 안보이면 당황하지말고 검색기능을 사용하자.나는 JAVA_HOME 이라는 환경변수로 설정한 것을 사용했는데Add JDK 나 Download JDK 를 이용해서도 사용할 수 있다.밑에 있는 11버전 ,1.8 버전 등이 해당 기능을 이용해서 추가한 거였다.보면 1.8, 1.8 (2) 뭐 이렇게 다양한 걸 볼 수 있는데당연히 해당 작업을 해줘도 변경이 안된적이 있다 ^_^ 그래서 이짓저짓 다 해봤지만 ..

Android/Kotlin 2024.04.08

[Kotlin] A problem was found with the configuration of task

A problem was found with the configuration of task ':app:checkDebugManifest' (type 'CheckManifest') [Kotlin] com.android.ide.common.signing.KeytoolException 해당 에러를 해결하면서 첨부한 링크의 에러도 발생했었는데 .. 나랑 똑같은 상황을 겪고있다면 위의 링크도 한번 확인해보면 도움이 될 수도 있을 것이다 :) 해당 에러도 하도 오래된 프로젝트의 유지보수를 진행하면서 발생했던 거였는데 com.android.tools.build.gradle 의 버전을 변경해주면서 에러를 해결하였다. // 3.5.4 -> 4.2.0 classpath 'com.android.tools.build:grad..

Android/Kotlin 2024.04.08

[Kotlin] com.android.ide.common.signing.KeytoolException

com.android.ide.common.signing.KeytoolException: Failed to read key AndroidDebugKey from store "경로": Invalid keystore format 최근에 버전이 매우 낮은(JDK 1.8 오랜만에 써보는 ... ) 프로젝트를 진행하다 보니 .. JDK 버전 낮추고 .. 이런저런 라이브러리 충돌나고 .. 이래서 버그를 열심히 잡던 도중에 .. 해당 에러때문에 스트레스를 조금 받았는데 해결방법은 매우 간단하다. 메시지에 표시된 경로로 가서 debug.keystore 를 제거하고 툴 재실행시켜보면 문제없이 실행된다.

Android/Kotlin 2024.04.08
반응형