React33 [리액트 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. [Next.js 13] Server Component vs. Client Component 기본 및 사용 방법 # Server Component vs. Client Component 기본 Next.js 13에서는 Server Component와 Client Component를 개발자가 선택적으로 정의하여 사용할 수 있다. 이에 대한 기본적인 이해를 위해 렌더링부터 가볍게 정리해본다. # 렌더링(Rendring)이란? 렌더링이란 결국 코드를 UI로 만드는 것을 의미한다. 따라서 React에서의 렌더링은 React Component를 HTML 로 만드는 과정이다. # React 18 이전의 렌더링 1. CSR (Client Side Rendering) React 18이 나오기 전, 리액트 컴포넌트의 모든 렌더링은 클라이언트(브라우저)에서 이루어졌다. - 서버는 React로 작성한 JS 코드 뭉텅이들을 브라우저에 응답.. 2023. 8. 21. [Next.js 13] import alias @ 설정/추가/수정/삭제 방법 # Next.js 13 - import alias 란? import alias 란 import 할 때마다 매번 복잡한 경로를 입력할 필요 없이, 공통되는 부분은 @로 치환하여 사용하는 방법을 의미한다. import Header from "@/components/common/Header"; export default function BoardPage() { return ( BoardPage ); } 만약 import alias 없다면, 매번 import 할때마다 "../../components/common/.." 등의 복잡한 경로를 작성해주어야 한다. import Header from "../../components/common/Header"; export default function BoardPage(.. 2023. 8. 19. [Next.js 13] 설치, 빌드, 서버 구동 방법 (개발 모드/프로덕션 모드) # Next.js 13 설치 방법 기본적으로 Node.js 16.8 이상이 설치된 상태에서 진행해야 한다. (node.js 공식 홈페이지에 방문하여 OS에 맞는 설치파일을 다운로드 받아서 설치하면 된다.) 1. 설치 `create-next-app` 명령어를 사용하여 Next.js를 설치하면, 관련 설정까지 자동으로 세팅된다. 터미널에서 상에서 원하는 경로로 이동 후, 아래 명령어를 실행한다. npx create-next-app@latest 만약 현재 경로 상에 설치하려면, 명령어 뒤에 마침표( . )를 하나 붙여준다. npx create-next-app@latest . 2. 세팅 설치를 시작하면 터미널 상에서 몇가지 질문을 받게 된다. 프로젝트 이름, 사용할 라이브러리, 추가 설정에 관한 것으로 추천하는.. 2023. 8. 18. [Next.js 13] Next.js란? 주요 기능과 역할 # Next.js란 Next.js는 React로 웹 서비스를 구축할 수 있는 풀스택 프레임워크이다. 구체적으로 Next.js는 다음과 같은 역할을 수행할 수 있다. Front-End Server: 브라우저의 요청을 받으면, React로 렌더링한 HTML페이지를 응답한다. API Server: 클라이언트의 API 콜을 받아서 JSON등을 응답한다. Back-End Server: Node.js 환경에서 구동되므로, 데이터 베이스 연동, 파일시스템 접근 등이 가능하다. 이 외에도 복잡한 번들링, 컴파일 등의 설정 작업을 Next.js 에서 기본적으로 제공해주기 때문에, 개발자는 좀더 웹 개발에만 집중할 수 있게 되어 아주 유용하다. (+성능 또한 좋다) 한마디로 Node.js의 Express와 유사한 프레임워.. 2023. 8. 18. [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. [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. 이전 1 2 3 4 다음
