akjfal

작년에 신규 프로젝트를 하면서 Nextjs를 사용하던 중 Next 13이 출시되었었습니다. 이때 당시엔 정신이 없어서 살펴보지 못했는데 옆 팀 프로젝트 마감 기한이 너무 빡빡하게 잡혀서 2달 정도 도와주게 된 프로젝트에서 Next 13을 사용하고 있다고 합니다. 이번 기회에 공식 문서를 토대로 기존 방식과 달라진 점을 살펴보려고 합니다. Next 13 New App Directory(Beta) app directory는 현재 베타 버전이고, PR에는 추천하지 않습니다. 그리고 아직 pages directory는 next/image와 next/link 등 기존의 안정된 기능들과 함께 사용할 수 있습니다. app directory는 아래 기능들은 지원합니다. Layouts : state를 유지하고 리렌더링을..

next13에서 head에 title을 변경하려고하니 방법이 많이 바뀌었습니다. 그리고 SSR, CSR에 title을 변경해주는 방식들이 다양해서 관련한 방법들을 정리해보았습니다. 해당 글에서는 title만을 설정해주고 있으나, 기타 head에 들어가는 값들은 필요한 값을 넣어주면 됩니다. github code SSR에서 head 변경 여러 페이지에 고정값 일괄 설정하기 Next13으로 넘어오면서 기존에 사용하던 방식이 아닌 Medata를 export하는 방식으로 title을 설정해줍니다. import Head from 'next/head'; /** * title이 변하지 않습니다. * @returns */ export default function Page() { return ( default page..

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 ..

이슈 원인 Date를 통해서 오늘 날짜를 가져와 값을 비교하는 로직이 필요했습니다. 그런데 문득 new Date()와 Date()의 차이가 무엇인지 궁금해졌습니다. 동작 확인 new ***Date***(date) vs ***Date***() console.log(new Date('2023-03-27T15:40:11'), Date()); // Mon Mar 27 2023 15:40:11 GMT+0900 (한국 표준시) Fri Apr 14 2023 11:29:49 GMT+0900 (한국 표준시) console.log(Date('2023-03-27T15:40:11'), Date()); // Fri Apr 14 2023 11:30:11 GMT+0900 (한국 표준시) Fri Apr 14 2023 11:30:11..

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이라는 콘솔이 계속 찍히게 됩니다. 이때 탭을 옆으로 넘어가거나 ..