개발(Development)/React(리액트)34 [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 - 모달창 초간단 구현 방법 HTML 에서 기본 제공하는 dialog 엘리먼트를 이용하면, 아래의 2가지를 아주 쉽게 구현할 수 있다. 1. 모달창 2. 다이얼로그 모달창과 다이얼로그의 차이는 - 모달창: dialog 엘리먼트 외부 영역이 불투명하게 dim 처리되고, 스크롤을 제외한 인터랙션(클릭 등)이 허용되지 않는다. - 다이얼로그: 툴팁처럼 노출되며 인터랙션에 영향을 미치지 않는다. dialog 엘리먼트를 이용하면, React에서 useState 나 외부 상태 관리 라이브러리 등을 사용하지 않아도 아주 쉽게 모달창을 구현할 수 있다. 당연히 Next.js 13 환경에서도 동일하게 모달창을 구현할 수 있다. 1. 모달창 dialog 엘리먼트는 비노출 상태가 디폴트이며, (open 속성을 t.. 2023. 8. 15. [Next.js 13] async 서버 컴포넌트 JSX/Promise 반환 에러 해결 방법 # Async 서버 컴포넌트 Promise 반환 이슈 Next.js13에서 Data Fetching 등을 위해 async 함수 형태의 Server Component 를 사용하면 아래와 같은 에러가 뜰 때가 있다. 'ServerComponent' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786) # 원인 Next.js 13의 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환한다. React .. 2023. 5. 12. [React] 리액트 사이드 이펙트(Side-effect) 의미, 종류(feat. 순수함수) # 리액트 Side-effect의 의미와 종류 사이드 이펙트(Side-effect)란 React 자체에서는 제공하지 않는 모든 것을 말한다. 예를 들어, 아래의 작업들은 Side-effect 이다. fetch() 메서드 등을 통해 HTTP 통신을 시도하는 것 Local Storage 등에 데이터를 저장하는 것 DOM을 직접 조작하는 것 : ex) document.querySelector('.클래스명').add EventListener(...) setTimeout, setInterval 등의 타이밍 함수를 사용하는 것 위의 작업들은 브라우저의 Web API 등을 사용하는 것으로, React 자체의 기능은 아니다. React 입장에서는 자기가 제공하는 것 이외의 것(Side)으로 영향(Effect)을 미친.. 2023. 5. 6. [React] Next.js 환경 구글 애널리틱스(GA) 적용 방법 # React + Next.js 환경 구글 애널리틱스(GA) 적용 방법 1) 단순 React 환경과 2) Next.js 환경에서 GA 적용 방법을 정리한다. GA4 기준으로 작성했다. 1) 단순 React 환경(CSR)에서 Google Analytics 적용 방법 1. GA 스크립트 복사 - 애널리틱스 홈 > 관리 > 데이터 스트림 > 웹: 사이트 클릭 > Google태그: 태그안내보기 > 직접설치 2. GA 스크립트 적용 - public/index.html 파일의 내부에 스크립트 적용 끝. 2) Next.js 환경에서 Google Analytics 적용 방법 Next.js 환경의 경우, 추가 작업이 필요하다. 다행히 Next.js 를 만든 Vercel에서 해당 방법을 제공한다. https://githu.. 2022. 9. 22. [React] 카카오 애드핏 적용 방법(Next.js 환경) # React + Next.js 환경에서 Kakao AdFit 적용방법 리액트, 넥스트 환경에서 카카오 애드핏을 적용하는 방법을 정리한다. 1. 카카오 애드핏 적용 스크립트 확인 카카오 애드핏 광고 단위 생성 후, 아래 경로에서 카카오 애드핏 적용 스크립트를 확인한다. 그러나 위에서 취득한 아래의 스크립트를 리액트 + Next.js 환경에서 바로 적용하면 정상 작동하지 않는다. (그대로 적용하고 콘솔창을 확인해보면 에러 로그를 볼 수 있을 것이다) 2. KaokaoAdFit 전용 컴포넌트 사용 동적으로 엘리먼트를 생성해 스크립트를 적용해주면 된다. 아래와 같이 카카오 애드핏을 적용할 컴포넌트를 생성하고, 노출시킬 영역에서 사용해주면 잘 적용된다. 중복으로 광고를 로드하지 않도록 useRef를 사용했고, .. 2022. 9. 22. [Next.js] 환경변수 사용 방법: .env파일 (development, production, local) # Next.js 환경변수(Environment Variables) 사용 방법 Next.js는 아래의 3가지 방식으로 환경변수 기능을 지원한다. 1. process.env.NODE_ENV : 구동환경 체크용 환경변수 2. .env 파일 : 구동 환경별 환경변수 적용 파일 3. NEXT_PUBLIC_ : 브라우저에서 참조하기 위한 Prefix 각각의 기본적인 사용법을 정리해 본다. 1. process.env.NODE_ENV : 구동환경 체크 변수 - Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고, 구동 환경에 따라 아래의 3가지 값을 주입해 준다. 1) development : 개발 환경(npm run dev로 구동한 경우) 2) production : 배포 환경(npm r.. 2022. 8. 25. [React-Query] Query data cannot be undefined 에러 해결 방법 # Query data cannot be undefined 에러 발생 이유 React-Query에서 useQuery를 아래와 같이 사용하면 에러가 발생할 수 있다. const { data, status} = useQuery(['todo', id], () => { fetchByParam(id); }); 만약 이런 에러가 발생 했다면... Error: Query data cannot be undefined at Object.onSuccess .... 이유는 useQuery에 등록한 함수가 Promise를 반환하지 않아서이다. 분명히 Promise 를 반환하는 fetch나 axios 함수를 썼겠지만, 호출만하고 리턴은 하지 않았을 수 있다. # Query data cannot be undefined 해결 방법.. 2022. 8. 24. [React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) # Next.js와 Redux 설정에 대하여 Next.js와 Redux를 연동하는 것은 생각보다 간단하지 않다. 왜냐하면, 본질적으로 Next.js 와 Redux 의 출신성분이 다르기 때문이다. 단순하게 정리하면, Next.js는 서버에서 돌아가고, Redux는 클라이언트(브라우저)에서 돌아간다. 여러 브라우저들에서 제각각 돌아가는 Redux의 전역상태를 서버에서 돌아가는 Next.js 에서 사용하려면 일이 복잡해진다. 이 글에서는 이에 대해 좀더 자세히 알아보고, 실제 설정하는 방법을 정리한다. (Next.js + Redux-Toolkit + TypeScript 연동 코드는 하단에 따로 정리해두었다. ) # Next.js 와 Redux의 관계 1. Next.js 는 "서버" 프레임워크다. 1) Next.. 2022. 8. 23. [Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) # Next.js의 Link 태그에 속성 설정 방법 Next.js 에서 태그는 새로고침없이 페이지를 이동하는 client-side navigation을 위해 사용된다. 만약 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면, 컴포넌트에 직접 주는게 아니라, 태그 하위에 태그를 삽입하여 속성을 설정 주면 된다. import Link from 'next/link' export default function LinkAttr() { return ( // Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다. 링크 ) } * 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다. 참고로 공식문서의 원문을 첨부한다. If you need .. 2022. 8. 21. 이전 1 2 3 4 다음
