nextjs
-
모달 적용 하기nextjs 2024. 11. 15. 18:14
const dialogRef = useRef(null); const [isMounted, setIsMounted] = useState(false); const { num, value, innum } = useStoreModal(); useEffect(() => { setIsMounted(true); if (!dialogRef.current?.open) { dialogRef.current?.showModal(); dialogRef.current?.scrollTo({ top: 0, }); } }, [value]); if (!isMounted) { return null; // 서버 사이드에서는 렌더링하지 않음 } const mo..
-
-
-
-
카카오 지도 api 활용nextjs 2024. 7. 29. 17:33
기존 리액트에서 사용 했던 코드에서 많은 변화는 없지만지도의 에러가 계속 나서 애먹음 리액트에서 사용 했던 코드 그대로 가져왔다에러1. Cannot read properties of undefined (reading ‘Geocoder’) - window.kakao.maps.services.Geocoder에서 정의되어 있어야 하는데, window.kakao 객체나 그 하위 객체인 maps 또는 services가 아직 로드되지 않은 상태라서 에러가 난듯 하다 2. Cannot read properties of undefined (reading 'maps')- kakao Maps SDK 스크립트가 완전히 로드되지 않은 상태에서 kakao 객체에 접근하려고 시도해서 에러 난듯.. 결론은 로드가 되지 않았는데 접..
-
action이란nextjs 2024. 7. 29. 13:57
nextjs에서만 있느게 아니라 react에서도 있음 1.서버 action : 데이터베이스와 연관- 서버에서 렌더링되고 클라이언트로 전달되는 컴포넌트- 서버 측에서 데이터 로딩, 데이터베이스 쿼리, 외부 API 호출 등 서버 액션을 수행- 서버 컴포넌트는 클라이언트 측에 전달되기 전에 서버에서 모든 데이터를 미리 가져오고 렌더링- 데이터베이스에서 데이터 조회, 삽입, 수정, 삭제, 외부 API호출, 인증 권한처리서버에서 파일업드, 다운 2.클라이언트 action- 브라우저에서 실행되는 컴포넌트 - 클라이언트 컴포넌트는 비동기 요청을 통해 서버와 상호작용- 서버 측에서 처리된 데이터를 받아서 UI를 업데이트
-
Recoil은 무엇인가?nextjs 2024. 7. 17. 14:39
Redux, Context API, useState처럼 상태관리 - 1. atom에 기본적인 틀만 있고, selector에서 초기값에 맞춰서 반환하는 경우 - 2. atom에 데이터가 다 있고, 각각의 selector에서 다른 데이터를 가져오는 경우 순서1. atom 정의 -> 2. selector 정의 -> 3. 상태 업데이트 및 읽기(컴포넌트에서 아톰 연동)-> 4. 아톰에 들어 온 값이 selector 에게 전달 -> 5. selector 는 들어 값에 추가 계산 또는 읽어 옴 Recoil- 페이스북에서 개발한 상태 관리 라이브러리- 컴포넌트 기반으로 상태를 관리할 수 있는 기능을 제공 Recoil에서 상태는 atom과 selector로 관리RecoilRoot 설정예시// pages/_app.js..
-
캐싱 종류nextjs 2024. 7. 1. 11:02
Next.js에서 사용할 수 있는 주요 캐싱 유형Static Generation (SSG)Server-Side Rendering (SSR)Incremental Static Regeneration (ISR)API Routes 캐싱브라우저 캐싱CDN 캐싱 Static Generation (SSG)- Next.js에서 모든 페이지를 빌드 타임에 미리 생성하여 정적인 HTML 파일로 저장- 사용자 요청 시 서버 측 연산 없이 미리 생성된 정적 파일을 제공- getStaticProps / getStaticPaths 사용 되는 주요 함수Server-Side Rendering (SSR)- 사용자가 페이지를 요청할 때마다 서버에서 HTML을 동적으로 생성- 최신 데이터를 항상 제공할 수 있지만, 서버 부하가 커질 수 ..