프로젝트/리액트 (3) 썸네일형 리스트형 js, jsx, ts, tsx jsx: js의 xml 확장 문법, html과 유사한 문법, 바벨을 통해 실행시 js로 변환ts는 typescript만 사용,tsx는 reactcomponent를 도입한 ts, jsx문법 사용 가능 NextJS란? 편리한리액트를 쓰는데 왜 또 NextJS를 쓸까?Next.js는 React 라이브러리의 프레임워크리액트는 Client Side Rendering(CSR)을 사용SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 한다.검색 엔진 최적화는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다반면, next.js는 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해준다. NestJS use client 클라이언트 컴포넌트 는, 버튼 또는 검색창과 같이 사용자와 상호작용하는 작은 UI 들을 클라이언트 단에서 렌더링되는 컴포넌트를 뜻한다.서버 컴포넌트 란, 말 그대로 서버 부분에서 렌더링 되는 컴포넌트이다.사용자와 상호작용하는 버튼 또는 검색창 UI 등을 제외한 나머지가 서버에서 렌더링되는 방식이다.모든 컴포넌트는 !서버 컴포넌트 가 기본이다.!따라서 클라이언트 컴포넌트 로 사용하고 싶다면, 'use Client' 를 입력해주면 된다.'use client' 를 파일의 최상단(import 보다 위, 첫 번째 줄)에 입력하면, 하위 구성요소를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다."use client"; import { Button } from "@/component.. 이전 1 다음
