React

리액트를 공부하다 보면 seo최적화 문제를 한 번쯤 듣게 되거나 경험하게 됩니다(저도 그랬고요)이때 next.js를 사용하면 react hook이라던지 기능들을 사용하면서 해결할 수 있다고 합니다오늘은 next.js에 대해 포스팅하겠습니다 1. next.js란 무엇인가?next.js 공식 홈페이지에 들어가면 이렇게 적혀있습니다 "웹을 위한 리액트 프레임워크로 세계적인 여러 대기업들이 사용하며 next.js는 리액트 컴포넌트의 강력함을 바탕으로 고품질 웹 애플리케이션을 만들 수 있다고 합니다" next.js는 2016년 10월에 처음 출시된 풀스택 프레임워크입니다말 그대로 프론트엔드와 백엔드를 다루는 프레임워크로 프론트엔드 부분에서는 react를 사용하게 됩니다next.js는 기본적으로 서버 사이드 렌더링..

props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 정보를 전달하는 방법이다props는 properties의 줄임말로 컴포넌트에 전달되는 속성값이다다만, props를 너무 별생각 없이 남발하면 props drilling이 일어나 상태관리에 문제가 생길 수 있으므로 useContext 혹은 Redux 등 전역 상태 관리 방식을 사용해야된다 1. 예제(기본 props 전달 예제)//부모컴포넌트import React from "react";import Welcome from "./Welcome";function App() { return ( );}export default App;import React from "react";function Welcome(props) { r..

리액트는 메타에서 개발한 오픈소스 라이브러리로 현 시점 웹에서 많이 사용하는 라이브러리입니다spa(single page application)방식으로 작동하며 당연히 사전에 노드가 설치 되있어야 사용가능하다기존의 create-react-app 방식은 지원이 종료 됬다는 이야기도 있다보니 vite로 설치 하겠다vite란? 빠르고 간결하게 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 한다 -설치방법 npm create vite@latest위에 명령어를 입력하고 실행 해주면 여러 설정이 나오는데요 project name은 현재폴더에 만들 프로젝트 네임입니다 적어주신대로 폴더 내부에 리액트 환경이 만들어집니다select a framework는 vite로 사용할 프레임 워크를 선택 해야됩니다 리액트..