내맘대로 개발일지

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

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

https://school.programmers.co.kr/learn/courses/30/lessons/12940 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n, m) { return [gcd(n, m), lcm(n, m)]; } // 최대공약수 function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); } // 최소공배수 function lcm(a, b) { return (a * b) / gcd(a, b); }