내맘대로 개발일지

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