본문 바로가기

전체 글39

화살표 함수: () vs {} ✅ 화살표 함수의 리턴 방식 차이화살표 함수에서는 소괄호(())와 중괄호({})에 따라 반환 방식이 달라집니다.🔹 소괄호 사용 시 (())소괄호를 사용하는 경우, 명시적인 return 없이도 자동으로 반환됩니다.const test = () => ( a = 12);console.log(test()); // 12🔸 중괄호 사용 시 ({})중괄호를 사용하는 경우에는 return을 명시해야 값을 반환합니다. 그렇지 않으면 undefined가 반환됩니다.const test = () => { return a = 12;};console.log(test()); // 12const test = () => { a = 12;};console.log(test()); // undefined💡 요약형태자동 반환retu.. 2023. 10. 13.
[트러블슈팅] Zoom 오디오 꺼짐 시 이벤트 처리 🎯 구현 목표말하고 있는 사용자의 카드 컴포넌트에 테두리 깜빡이는 효과를 추가하고자 했습니다. 사용자가 말을 시작하면 효과가 적용되고, 말을 멈추면 효과가 사라지는 형태입니다.❗ 문제 상황Zoom SDK를 사용하던 중, 사용자가 말을 멈췄을 때를 감지하는 이벤트가 발생하지 않는 문제에 직면했습니다.Zoom SDK는 isSpeaking이 true가 되는 시점은 감지할 수 있지만, false로 바뀌는 시점은 자동으로 감지해주지 않습니다.관련 이벤트나 API도 제공되지 않아, 클라이언트 측에서 직접 처리해야 하는 상황이었습니다.🔧 해결 방법사용자가 말을 멈췄다고 판단할 수 있는 조건을 타이머 기반으로 구현했습니다.즉, isSpeaking이 true로 바뀐 뒤 일정 시간이 지나면 자동으로 false로 바꾸는.. 2023. 9. 14.
[트러블슈팅] 여러 페이지에서 중복된 쿼리 사용 시 에러 발생 문제 상황/mypage/channel (파라미터 없음)/manage/100/5eonzeu4i2hbjypm (100 = brandId, 5eonzeu4i2hbjypm = spaceId → 파라미터 있음)두 경로는 동일한 쿼리를 사용하지만, 파라미터 존재 유무에 따라 페이지 이동 시 에러가 발생했다.원인React Query는 기본적으로 컴포넌트가 마운트되면 자동으로 쿼리를 실행한다.하지만 파라미터가 없는 상태에서 실행되면 API 호출이 실패하면서 에러가 발생한다.해결 방법React Query의 enabled 옵션을 활용해 조건이 충족될 때만 쿼리가 실행되도록 제어할 수 있다.아래는 spaceId와 brandId가 존재할 때만 쿼리를 실행하도록 설정한 예시이다:useQuery({ queryFn: async .. 2023. 9. 10.
Early Return 하는 코드를 작성하자 🧠 Early Return 패턴이란?Early Return은 조건을 만족할 때 결과를 조기에 반환하여불필요한 중첩을 줄이고, 코드의 흐름을 더 명확하고 단순하게 만드는 패턴입니다.❗️왜 Early Return이 필요할까요?if-else 문이 과도하게 중첩되면 다음과 같은 문제가 발생합니다:가독성이 떨어지고 유지보수가 어렵습니다.조건이 복잡해질수록 코드의 흐름을 따라가기 어렵습니다.모든 조건을 명시적으로 표현하기 어렵습니다.✅ Early Return 패턴 예시if (조건 1) { return "조건 1"}if (조건 2) { return "조건 2";}if (조건 3) { return "조건 3";}→ 위처럼 조건을 만족할 경우 바로 반환(return) 하게 되면else 문이 필요 없고, 각 조건이 독립.. 2023. 8. 19.
forEach는 함수입니다 그렇다면, 위 예제에서 숫자 3을 만났을 때 반복이 중단될까요?아닙니다! forEach는 중단되지 않고 배열의 모든 요소를 끝까지 순회합니다.break나 continue 같은 제어문은 forEach 내에서 사용할 수 없기 때문입니다.forEach는 배열을 단순히 순회하면서 작업을 수행할 때 유용하지만,반복을 중간에 멈추거나 건너뛰어야 하는 경우에는 for, for...of, for...in과 같은 일반 반복문을 사용하는 것이 더 적절합니다. 2023. 8. 18.
자바스크립트 관련 깃허브 https://github.com/sudheerj/javascript-interview-questions#table-of-contents 2023. 8. 17.