왜 href에 javascript:void(0)를 사용할까? ... or Main레거시 사이트들의 소스를 살펴보면 위와 같은 형태로 a태그의 href를 처리한 경우를 볼 수 있다.왜 a태그에 href="javascript:void(0);"를 사용했을까?void(0)을 사용하면, undefinded가 반환된다. 즉, 위 코드는 a태그의 고유 동작인 링크 이동을 막기 위함이다.즉, a태그에 걸어둔 공통 CSS 스타일링을 유지하며 실제 Link 이동을 방지하기 위함이라고 볼 수 있다.하지만 위에 처럼 a태그의 리다이렉트를 막기 위해 javascript:void(0); 을 처리하게 될 경우, 어떤 문제가 발생할까?문제 : 마우스 우클릭 액션이 막힌다마우스 우클릭을 했을 때의 “새탭에서 링크 열기/링크 주소 복사..
useCallback()useCallback(함수, [검사값]) 검사값이 변경되었을 때에만 함수를 생성하는 Hook이다.함수를 memoize → 재사용하기 위해서 사용(랜더링 성능 최적화)검사값에 따른 랜더링 비교[] : 검사값이 비어있으므로, 최초 랜더링시에만 함수를 선언하고 이후 계속 재사용한다[number] : number 값이 변경되었을 때에만, 함수를 다시 선언사용 이유자식 컴포넌트에게 props로 함수를 전달할 때 사용 → 자식 컴포넌트의 불필요한 랜더링을 방지함수 변경이 없거나, 연산이 큰 함수를 최초에만 선언하기 위해서 사용 useEffect()사이드 이펙트를 방지하기 위해서 사용함상세 사례API Fetching : 컴포넌트 내에 axios를 선언해놓았는데, 해당 컴포넌트가 부모에 의해 계..
Getting Started | Next.jsWelcome to the Next.js documentation! If you're new to Next.js, we recommend starting with the learn course. The interactive course with quizzes will guide you through everything you need to know to use Next.js. If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.https://nextjs.org/docs/getting-started..
ℹ️ SSR (Server Side Rendering)서버 사이드 랜더링은 서버측에서 데이터를 모두 구성하여 클라이언트에게 전달해주는, 전통적인 랜더링 방식입니다. 서버에서 HTML을 모두 작성하여 브라우저에게 전달, 브라우저는 랜더링을 통해 사용자에게 보여주는 형태이죠.☀️ 장점검색 엔진 최적화(SEO)에 유리이미 HTML 내에 모든 정보가 포함되어 있으므로, 검색엔진이 사이트를 탐색할 때 해당 정보를 가지고 올 수 있습니다.🌧 단점서버의 부하 증가 + 웹 로딩 속도 증가웹의 정보가 많아질수록 서버에서 담당하는 처리양도 늘어나게 됩니다.웹에서 모든 정보를 다 처리해서 전달하므로, 서버의 부하가 클 수록 웹 로딩 속도도 증가하게 됩니다.사용자 경험(UX) 감소새로운 페이지로 이동할 때마다 새로고침(깜빡)..