본문 바로가기

리액트27

[리액트 next.js 테이블 에러] Expected server HTML to contain a matching <tr> in <table> # Next.js에서 React로 table 생성시 에러 해결 방법 - 문제 현상 Next.js 환경에서 React로 생성시, 아래와 같은 에러가 발생할 수 있다. Expected server HTML to contain a matching in . Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. There was an error while hy.. 2024. 1. 17.
[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.
[AWS|GCP EC2] React+Next.js HTTPS 도메인 적용 방법 (Nginx 리버스프록시 연결 + snapd SSL 인증서 자동 갱신) # AWS | GCP : EC2에서 React+Next.js 서버 https 적용방법 AWS나 EC2 인스턴스에서 Next.js 기반의 React 프로젝트를 구동하고, SSL인증서를 설치(+자동갱신)하여 HTTPS로 연결하는 방법을 정리한다. 이 글은 Nginx 리버스 프록시와 Certbot을 통한 Let's Ecrypt 인증서를 사용한다. # 작업 순서 및 내용 순서 작업 내용 1 도메인 AWS|GCP IP 연결 설정 2 Next.js 배포용 설정 추가(+GitHub 업로드) 3 EC2 접속 및 Node.js 설치 4 GitHub에서 소스코드 Clone 해오기 5 npm 패키지 설치 6 .env 설정파일 생성 7 Next.js프론트 서버 빌드 및 구동 8 Nginx 설치/설정/구동 9 certbot-a.. 2022. 9. 23.
[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.
[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.
[React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) 이 글은 useState, useRef 등만을 활용하여 수동으로 모달창을 구현하는 방법입니다. 이 것만으로도 이미 충분히 간단하지만, 만약 HTML의 dialog 엘리먼트로 훨씬 더 쉽게 구현하는 방법이 필요하시다면, 아래 글을 참고해주세요. [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 모달창 구현 방법 - redux나 별도 라이브러리 없이 아주 쉽게 모달창을 구현하는 방법 1. state 로 Modal 노출 여부를 관리한다. - useState 훅으로 모달창 노출 여부를 관리해준다. 2. Modal 창이 최상위에 노출되도록 CSS를 조정한다. - position: absolute로 위치를 조정한다. - z-index를 높게 줘서 최상위에 노.. 2022. 8. 16.
[Next.js] getServerSideProps 에서 undefined 반환 이유 # getServerSideProps 에서 undefined 가 반환되는 이유 Next.js 의 getServerSideProps은 오직 Pages 폴더에 있는 페이지 컴포넌트에서만 사용 가능하다. 즉, pages 외부 경로(src/components 등) 에 위치한 컴포넌트에서 getServerSideProps사용시, 호출 자체가 정상적으로 되지 않아 SSR이 작동하지 않는다. 따라서 아래와 같이 데이터를 받아서 사용하려 해도 애초에 받는게 없으니 undefined 로 찍힐 수 밖에 없다. type PropsType = { message: string; }; // pages 외부의 컴포넌트 function Test({ message }: PropsType) { console.log(message); /.. 2022. 8. 16.
[React] JSX 특수 문자/기호 입력 방법(꺽쇠, 괄호, 슬래시 등) # 리액트에서 특수 기호 및 특수 문자 입력 방법 HTML에서 꺽쇠( ), 괄호( {, } ), 주석용 슬래쉬 ( //, /* ) 등의 특수문자 입력시, 특수문자 표를 참고하여 <, > 등으로 입력한다. 하지만 리액트 JSX에서는 중괄호를 이용해 쉽게 특수문자를 표현할 수 있다. => 중괄호 내부의 따옴표 사이에 원하는 특수기호를 입력해주면 끝! 1{''}1 괄호 {'{'} 내부 {'}'} 괄호 주석 표시 : {'//'} 주석 표시 : {'/*'} 2022. 8. 15.

티스토리툴바