akjfal

jQuery의 val() 메서드는 파라미터를 전달하지 않으면 해당 요소의 값을 반환합니다. 이 때, 값이 정의되어 있지 않은 경우 (즉, undefined가 전달된 경우) val() 메서드는 해당 요소의 값을 빈 문자열('')로 설정합니다. 예를 들어, 다음과 같은 HTML 코드가 있다고 가정해봅시다. htmlCopy code 이제 jQuery를 사용하여 해당 요소의 값을 가져와보겠습니다. javascriptCopy code var value = $('#myInput').val(undefined); console.log(value); 위 코드를 실행하면 value 변수에는 '' (빈 문자열)이 할당됩니다. 이는 val() 메서드에 **undefined**가 전달되어 해당 요소의 값을 빈 문자열로 설정했기..

getDate()의 경우에는 로컬 시간을 기준으로 데이터를 가져옵니다. 그렇기 때문에 daylight saving time(서머타임)을 고려해서 일정 시간 표기가 사라지는 등의 문제가 발생합니다. 따라서 보통 웹 프론트엔드에서 시간을 만들어서 연산하기보다 서버에서 시간을 전달해주고 이를 사용하는 것을 권장합니다. 에러 발생 아래 코드의 의도는 2월 1일이였지만, 실제로 2월 32일이 출력됩니다. const day = '2023.02.01'; const date = new Date(day); const dateString = date.getFullYear() + "년" + (date.getMonth() + 1) + "월" + (date.getUTCDate() + 1) + "일; // 결과 : 2023년2월..

에러 발생 React로 된 페이지를 접근했을 때, 페이지 URL을 GET으로 의도하지 않은 호출이 발생했습니다. 그런데 해당 URL을 GET하는 API가 존재하지 않아서 에러가 발생하고 있었습니다. 원인 아래와 같이 css background 속성에서 문제가 발생하는 것을 발견했습니다. // index.js function Page(){ const [data, setData] = useState(''); return ( ); }; 확인 해보니 이미지를 불러오기 위해서 GET을 호출하는데 상대 경로를 의미하는 ‘’ 등을 입력하게되면 URL/{data} 로 API를 쏘게 됩니다. 현재는 해당 URL이 존재하기 때문에 에러는 뱉지않고 있지만, 의미없는 호출과 만약 변수가 undefined 등의 존재하지 않는 ..

페이지에서 서버에 파일을 업로드하며 API를 setInterval로 지속적으로 쏘고, 응답을 받아서 진행률을 업데이트 해야하는 작업이 있었습니다. 그런데 이때 화면을 보고 있을때는 정상적으로 페이지가 동작하지만, 파일 업로드를 눌러놓고 다른 탭의 작업을 진행했을 때 setInterval이 비정상적으로 동작하는 현상을 발견했습니다. 원인 setInterval이나 setTimeout를 통해 polling을 구현하고 있는 페이지에서 돌리고 있다고 가정해봅시다. // app.js interval 발생시키기 setInterval(()=> { console.log('setinterval') }, 100); 위 코드를 실행 시킬 시 setinterval이라는 콘솔이 계속 찍히게 됩니다. 이때 탭을 옆으로 넘어가거나 ..

next.js github discussion에 질문을 올린 내용입니다. https://github.com/vercel/next.js/discussions/49433 notFound()를 사용하면서 이슈를 해결하기 위해 테스트하다보니 여러 케이스를 발견하게 되었습니다. 상세한 로직은 해당 github를 참조하시기 바랍니다. https://github.com/osydoo/next13-not-found Summary ‘use client’의 useEffect의 동작이 의존성에 따라서 다르게 동작하는 이유가 뭔가요? axios.interceptors를 동기적으로 실행했을 때는 notFound()가 에러를 뱉고, 비동기로 했을때는 동작이 무시되는 이유가 뭔가요? 클릭이벤트에선 왜 에러를 뱉나요? Case In ..

getDate의 경우에는 로컬 시간을 기준으로 데이터를 가져옵니다. 그렇기 때문에 daylight saving time(서머타임)을 고려해서 일정 시간 표기가 사라지는 등의 문제가 발생합니다. 따라서 보통 웹 프론트엔드에서 시간을 만들어서 연산하기보다 서버에서 시간을 전달해주고 이를 사용하는 것을 권장합니다. 예시를 통해 getUTCDate와 getDate를 잘못 사용한 경우를 보도록 하겠습니다. 아래 코드는 2월 1일 인데 2월 32일이 출력됩니다. const day = '2023.02.01'; const date = new Date(day); const dateString = date.getFullYear() + "년" + (date.getMonth() + 1) + "월" + (date.getUTCD..

Effect Hook 사용하기 💡 useEffect는 class에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 방식이라고 생각하면 된다. React에는 두 종류의 side effects가 존재하는데 clean-up이 필요한 것과 필요 없는 것 두가지가 있다. clean-up이 필요 없는 Effects class형에서 어떠한 데이터를 업데이트 하기 위해서는 컴포넌트가 방금 마운트 되엇는지(componentDidMount), 업데이트되었는지(componentDidUpdate)에 상관없이 모든 동작을 수행해줘야 할 수도 있습니다. class Example extends React.Component { constructor(props) {..

Hook API 참고서 기본 Hook useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 처음 렌더링 하는 동안, 반환된 state와 첫번째 전달된 인자의 값은 같습니다. setState는 리렌더링시에도 변하지 않아, useEffect와 useCallback의 의존성목록에 추가하지 않아도 됩니다. useEffect useEffect(didUpdate) 명령형 또는 어떤 effect를 발생시키는 함수를 인자로 받습니다. 화면에서 제거될 때 setTimeout과 같은 것들을 제거하기 위해서는 clean-up함수를 반환하면 됩니다. 조건부 발생시키기 useEffect(()=>{}, []) useEffec..