내맘대로 개발일지

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

📱테스트 환경 "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초로 지정해놓았다. 이외에도..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" ReactQuill 라이브러리를 사용하였고, 여기서 작성한 값을 저장하려고 하니까 태그가 함께 값이 넘어왔고 스타일을 이대로 넣기 위해 dangeroulsySetInnerHTML 을 사용하였다. styled-components 를 사용하여 디자인을 하고있었고 해당 Content 디자인은 아무것도 적용하지 않은 상태였다. 어차피 태그에 적용된 스타일대로 들어갈 것이라고 예상했고, 그냥 그대로 보여주면될 것이라고 생각했기 때문이다. export const Content = styled.div``; 그래도 이렇게 만들어놓은 이유는 나중에 혹시나 디자인이 필요한 경우 작업하기 위해서 만..

📱테스트 환경 "nuxt": "^3.9.3" "nuxt-jwt-auth": "^0.0.28" 개인적인 궁금함으로 시작된 내용이였는데 코드 작성할때 try { ... } catch(e) { ... } 로 묶어주는 경우가 많았다. 유지보수 측면이나 안전성을 높일 수 있는 기본적인 방법이라고 생각했고 디버깅 할때도 편했기 때문이다. 타입스크립트로 작성하면 e 에 타입을 정해지지않았다는 에러를 만날 수 있는데 나는 원래 Any 타입을 사용했다. 실제로도 그렇게 사용하는데 문제도 발생하지않았고 괜찮았는데 타입스크립트 4.0 이상부터는 unknown 타입으로 기본으로 설정되어 있다. try { ... } catch (e) { console.log(e) } // 'throw' of exception caught lo..