반응형 next.js23 [js, Next.js] <input> 한글 입력 후 엔터 시 중복 이벤트 발생 문제 JavaScript, Next.js에서 한글 입력 후 엔터 시 중복 이벤트 발생 문제가 생기는 이유 js혹은 Next.js의 태그에서 숫자 혹은 알파벳 입력 후 엔터 시 이벤트 발생 순서 (onKeyDown, onKeyPress, onKeyUp) - 숫자 혹은 알파벳 입력시 발생 순서: keydown => keypress => keyup - 엔터 입력시 이벤트 발생 순서: keydown => keypress => keyup * 한글 입력시 한글 입력시 발생 순서: keydown => keyup 엔터 입력시 이벤트 발생 순서: keydown => keyup => keydown => keypress => keyup 빨간색 글씨 keyup과 keydown에서 isComposing속성이 true(keyCode .. 2023. 4. 27. [Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns, [js] SyntaxError: Invalid shorthand property initializer [Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns 에러 [js] SyntaxError: Invalid shorthand property initializer 에러 아래와 같이 객체 안에서 c = 3으로 선언하였을 경우의 코드가 존재하였을 경우 x = { a:1, b:2, c=3 } console.log(x) [Next.js]에서의 에러창 ./src/main.tsx Module parse failed: Shorthand property assignments are valid only in destructuring patterns (62:34) File was processe.. 2023. 4. 19. [js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) [js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) 1. 반응형 웹을 사용할 때, css의 @media screen을 통해 PC와 모바일 화면을 다르게 설정한다. 2. 독자적인 모바일 기기용 UI를 구현할 경우, 홈페이지에 접속하는 기기가 모바일 기기 여부 또는 안드로이드 인지 아이폰인지 종류를 확인을 해야하는 경우가 생긴다. 3. 모바일 화면에선 일부 css나 자바스크립트를 로드하지 않게 하여 성능 최적화를 노릴때도 모바일 기기 감지가 필수적이다. 모바일 / PC 구분하기 자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent 라는 객체를 사용하여 아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를 반환하는 방식으로 간편하.. 2023. 4. 6. [Nextjs] client의 IP주소를 가져와 비교하여 특정 IP주소에서만 홈페이지 이용을 허용 [Nextjs] client의 IP주소를 가져와 비교하여 dev, qc서버를 허용하고 싶은 IP 주소 (ex. 회사 IP주소 or 집 IP 주소)가 아니라면 리다이렉트하기 1. Next.js에서 client의 IP주소를 가져오는 방법 axios.get("https://geolocation-db.com/json/").then((res) => { console.log(res?.data?.IPv4); }); 출력값 "내가 사용하고 있는 IP주소가 string 형태로 출력" 2. router를 사용하여 외부주소로 리다이렉트하는 방법 import { useRouter } from "next/router"; const router = useRouter(); router.push("redirect하고 싶은 주소");.. 2023. 4. 3. [Next.js] window is not defined, document is not defined 1. Next.js에서 window is not defined, document is not defined가 출력되는 이유 1. Next.js는 서버측에서 움직이는 SSR(Server Side Rendering)과 클라이언트 측에서 움직이는 CSR(Client Side Rendering)을 수행하는 프레임워크이다. 2. document, window 두 객체는 클라이언트 측에서만 정의되는 전역 변수이다. 3. 서버측에서 Redeing을 할 때, 코드를 읽으면서 document와 window 두 객체를 읽을 수 없기 때문에 window is not defined, document is not defined 두 error가 출력된다. 4. 따라서 document, window를 쓴다면 서버쪽에서 docume.. 2023. 3. 29. [Next.js] <Link> 태그 사용 Next.js에서 URL 혹은 경로이동을 할 때, Link 태그 사용 pages 하위 디렉토리 구조일 때 pages/index.js pages/about.js pages/blog/[slug].js import Link import Link from 'next/link' 사용하는 방법 // pages/index.js Home // pages/about.js About Us // pages/blog/[slug].js Blog Post Link의 props정리 필수 값 1. href ... 이동할 경로 혹은 URL을 입력한다. 옵션 값 1. as ... 브라우저의 주소창에 표시될 URL을 입력한다. 2. passHref (기본값: false) next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역.. 2023. 3. 27. [Next.js] Error: There was an error while hydrating this Suspense boundary. Switched to client rendering Next.js 13에서 Error: There was an error while hydrating this Suspense boundary. Switched to client rendering - 웹 사이트내에서 useEffect, useState를 사용하는 페이지에서 출력되는 Error - 콘솔창에서 useEffect, useState를 사용하는 페이지에서 출력되는 Error 서버 HTML이 에 를 포함할 것으로 예상하지 않는다고 Error가 명시되고 있다. Error: There was an error while hydrating this Suspense boundary. Switched to client rendering가 발생할 때 일반적으로 이 문제는 사전 렌더링과 브라우저 간에 다를 수 있는 .. 2023. 3. 6. [Next.js] 개발환경 구축 및 Next.js 13으로 업데이트 [Next.js] 개발환경 구축 명령어 및 Next.js 13으로 업데이트 명령어 Next.js 시작 $ npx create-next-app@latest $ yarn create next-app $ pnpm create next-app 위 3개 명령어 중 하나로 설치 TypeScript 프로젝트로 시작하려면 --typescript 플래그를 사용할 수 있다. $ npx create-next-app@latest --typescript $ yarn create next-app --typescript $ pnpm create next-app --typescript 위 3개 명령어 중 하나로 설치 react 및 react-dom 프로젝트에서 다음을 설치 $ npm install next react react-do.. 2023. 3. 4. [React, Next.js] 모달(Modal) 구현_2 (recoil을 통한 제어) [React, Next.js] 모달(Modal) 제어부 (실제 모달 제어부분) 1. 전역관리 도구인 recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들 예제 코드 import { useRecoilState } from "recoil"; const [modalState, setModalState] = useRecoilState(atomModalState); - recoil이 필요하므로 modal을 제어할 컴포넌트에서 recoil을 import해준다. - useRecoilState로 recoil의 atom을 제어한다. 2. 전역적으로 모달 상태 선언 및 초기화를 해주는 전역관리 도구인 recoil의 atom을 모아놓은 atom.ts 파일 예제 코드 export const aModalState =.. 2023. 2. 22. [React, Next.js] 모달(Modal) 구현_1 (react-modal을 통한 생성) [React, Next.js] 모달(Modal) 생성 부 (모달 관련 파일 생성부분) 1. import ReactModal from "react-modal" 사용해 구현한 modal.tsx파일 http://reactcommunity.org/react-modal/ react-modal documentation react-modal Accessible modal dialog component for React.JS We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility .. 2023. 2. 22. 이전 1 2 3 다음 반응형
