타입스크립트4 썸네일형 리스트형 [Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript] Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c.. 웹 개발/소소한 팁, 버그 해결2024. 3. 22. [Typescript] 변수 타입 확인 방법 [Javascript] 변수가 boolean인지, string인지, 아니면 number인지 확인하고 싶을 때가 있다. 그럴 땐 아래와 같이 string 형태로 확인하면 된다. switch (typeof variable) { case "boolean": // variable is a boolean break; case "string": // variable is a string break; case "number": // variable is a number break; default: break; } 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Typescript] TypeError: Webpack imported module is not a function 해결 서버 쪽에서 데이터를 가져오는 api와 연결하는 메서드를 작성하고 있었는데, 위 에러가 떴다. 똑같은 형태의 다른 파일은 해당 에러가 안 뜨는데 특정 함수 두 개에만 뜨는 게 이상했지만, 어쩌겠나 해결해야지. 아래와 같이 코드를 수정하여 해결했다. 해결 전: export function getUserInfo() { // Do something } export function getUserLocale() { // Do something } 해결 후: function getUserInfo() { // Do something } function getUserLocale() { // Do something } export {getUserInfo, getUserLocale} 다른 파일은 해결 전 코드가 정상적으로.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Typescript] 제네릭(Generic) 메서드 작성 제네릭(Generic)은 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용되는데, 이를 활용하면 재사용성이 높은 컴포넌트를 만들 수 있다. 일반적으로 아래와 같이 작성하며, 함수 사용 시 같이 넘겨준 모든 타입 T에 대해 동작한다. function genericFunctionName(arg: T): T { // Do something return arg; } 코드를 작성하다보면 arrow function ("=>" 이용하는) 형태로 사용해야 할 때도 있는데, 그럴 땐 아래와 같이 작성한다. const genericArrowFunctionName = (x: T) => { // Do something retrun x; }; 조금 더 확장하면 아래와 같이 제네릭 타입(인터페이스)이랑 제네릭 클래스도 작성.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. 이전 1 다음
