nextjs
-
Cursor + Next.js 개발설정Tool/VSCode&Cursor 2024. 12. 4. 17:37
1. Next.js 프로젝트 생성하기공식사이트를 보고 생성한다.test 폴더를 생성하고 source 프로젝트를 생성한다.$ mkdir test$ cd test$ npx create-next-app@latest source --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 노드 버전 오류npx: installed 1 in 0.905sUnexpected token '??=' node를 최신 버전으로 변경하고 재시도 한다. 2. 서버 실행$ cd source$ cat package.json$ yarn dev scripts를 확인하고 서버를 실행해 본다. node 버전이 낮으면 아래와 같은 에러가 발생..
-
nextJS 사용하는 iOS 단말기에서 뒤로가기 페이지 흰색 이슈Language/React 2024. 6. 20. 11:01
ios swift로 만든 wkWebView에서 페이지 크기가 큰 a페이지에서 스크롤을 내린상태에서 b페이지로 이동 하고 다시 a페이지로 가기 위해서 뒤로가기를 누르게 되면 a페이지 화면이 하얀색으로 나오게된다. 이상태에서 스크롤을 내리거나 클릭하면 페이지가 정상적으로 나오는 문제가 발생하였다. 문제### 전제조건 : a.page가 b.page보다 컨텐츠 내용이 많아서 스크롤이 길다### 1. a.page### 1.1. a.page에서 b페이지 크기의 스크롤 위치보다 더아래 위치로 스크롤을 내린다.### 1.2. b.page를 아래 코드로 이동 ... const push = useCallback(async (path, as, options) => { return await router.pu..
-
NextJS에서 queryString 변경 감지 hook 만들기Language/React 2023. 10. 20. 09:43
NextJS 환경에서 `/aaa?arg1=111` 경로를 `/aaa?arg1=222`로 push 혹은 replace 헀을떄 arg1를 받아오는 hook을 생성하는 과정을 간략하게 정리해 놓는다. useQuery 훅 생성 필자는 p가 팝업레이어 아이디인데 path가 바뀔때 그부분은 제외한 로직이다. export function useQuery() { const router = useRouter(); const [query, setQuery] = useState(router.query); useEffect(() => { const beforeQuery = { ...query }; const afterQuery = { ...router.query }; // 팝업 파라미터 제외 (레이어 팝업) delete be..