내맘대로 개발일지

📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Front 에서 ReactQuill 라이브러리를 이용해서 텍스트 입력을 받고 있었다. 이렇게 하니까 백앤드에서 데이터를 저장할 때 html 코드 그대로 저장해야 했다. 그래야 Bold 나 정렬, 줄바꿈 등 그대로 다시 보여줄 수 있었기 때문이다. 근데 검색기능을 만들다 보니까 html 코드 안에 있는 텍스트도 함께 LIKE 조건에 걸리다 보니 본문에 없는 내용도 있는걸로 인식돼어서 검색결과에 걸려서 나왔다.ㅇㅣ를 해결하기 위해서 정규식 REGEXP_REPLACE 를 사용하였고 REGEXP_REPLACE(a.content, ']*>', '') 이처럼 사용해주었다. 전체 사용한 코드는 다음과같다. SELECT a.a..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 이게 웃긴게 공백문자를 넣으려고 하는데 {" "} 이렇게 넣으면 인식을 못한다. By{" "}John 공백문자를 넣어야할 때 사용하는게 바로 이다. Non-breaking Space 의 줄임말로 줄바꿈이 일어나지 않는 공백문자라는 의미인데 HTML 에서 스페이스 바 처리가 필요할 때 사용한다. 여러 개를 사용해서 공백문자를 여러개 삽입할 수도 있다. By John 근데 말 그대로 줄바꿈이 일어나지 않기 때문에 무분별하게 사용하면 내가 원하는 대로 안되겠지 ? 그럼 줄바꿈도 하게 하려면 어떻게해야하냐면 CSS 를 사용하면된다. white-space: pre-wrap;

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

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

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

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

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

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

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

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..