🐾 리액트에서 라우팅(경로에 따라서 알맞은 페이지를 보여주는 방법)
react-router-dom라이브러리next.js프레임워크 를 사용하는 방법
🐾 Next js 이란?
리액트를 활용하여 만든 프레임워크
라우팅까지자동으로 될 수 있도록
👉 nextjs 설치 (❗️항상 공식문서확인 업데이트가될수있음)
cd 폴더명
npx create-next-app
Ok to proceed? (y) y
√ What is your project named? ... dashboard
√ Would you like to use TypeScript? ... "No" / Yes
√ Would you like to use ESLint? ... "No" / Yes
√ Would you like to use Tailwind CSS? ... "No" / Yes
√ Would you like to use `src/` directory? ... No / "Yes"
√ Would you like to use App Router? (recommended) ... No / "Yes"
√ Would you like to customize the default import alias? ... "No" / Yes
Success!!src 폴더가 있는 이유? 리액트 개발자는 src 있는게 더 편해서,
있어도 되고 없어도되고, 🐾 React vs Next 차이점
📒 React
SPA(Single Page Application)+CSR(Client Side Rendering)
html파일은 하나밖에 없기 때문에 페이지 별 서로 다른
📍 meta 태그를 설정할 수 없고,
📍 검색 했을 때 노출이 쉽게 되지 않는 단점이 존재(SEO에 불리하다)
만약에 html에서,
<head>
<meta charset="uif-8">
카톡 링크 보낼때, 미리보기 이미지
페이지별로 다른땐 설정해주기가 힘듦📒 Next.js
📍
기존 react+라우팅기능+SSR(Server Side Rendering)
SEO에 최적화가 가능, 라우팅도 쉽게 다룰 수 있다
🌟 이 둘의 차이는 유저가 브라우저에서 보는 화면인 UI를 어디서 만들어 주는지에 따라 구분된다.
CSR은 클라이언트, SSR은 서버에서 화면을 구성한다.
📍SEO
"
Search Engine Optimization"의 약어로, 검색 엔진 최적화를 의미합니다. SEO는 웹사이트나 웹 페이지가 검색 엔진 결과 페이지(SERP)에서 높은 순위로 나타날 수 있도록 최적화하는 프로세스를 말합니다. 주로 구글을 비롯한 다양한 검색 엔진에서 웹 사이트의 가시성을 높이고 유저들에게 더 나은 검색 결과를 제공하기 위해 사용됩니다.
🐾 CSR (Client-Side Rendering) VS SSR (Server-Side Rendering) 차이점
📒 CSR (Client-Side Rendering)
장점:
📍
빠른 페이지 전환: 초기 페이지 로딩 후에는 클라이언트 측에서 빠른 페이지 전환이 가능하다.
📍인터랙티브한 UI: 자주 변경되는 부분을 동적으로 업데이트하므로 인터랙티브한 사용자 경험을 제공할 수 있다.
단점:
📍
초기 로딩 속도: 초기 페이지 로딩 시 필요한 자바스크립트 파일을 다운로드하고 실행해야 하므로 초기 로딩 속도가 느릴 수 있다.
📍SEO 문제: 검색 엔진 최적화가 어려울 수 있다. 검색 엔진이 자바스크립트를 실행하지 않고 페이지 내용을 인식하기 때문에 SEO에 문제가 발생할 수 있다.
📍브라우저에서 바로 사용하니, 보안상 문제도 생길수있다.
📒 SSR (Server-Side Rendering)
장점:
📍
초기 로딩 속도: 서버에서 페이지를 렌더링하여 완전한 HTML을 제공하므로 초기 로딩 속도가 빠르다.
📍SEO 우수성: 검색 엔진이 페이지의 내용을 쉽게 식별하므로 SEO에 유리하다.
단점:
📍
서버 부하: 매 페이지 요청마다 서버에서 렌더링 작업을 해야 하므로 서버에 부하가 발생할 수 있다.
📍인터랙티브한 UI 제약: 페이지 변경 시마다 서버 요청이 필요하므로 빈번한 UI 업데이트에 제약이 있다.
어떤 렌더링 방식을 선택할지는 프로젝트의 요구사항과 우선순위에 따라 결정됩니다. CSR은 빠른 페이지 전환과 동적 UI에 강점이 있지만 초기 로딩 속도와 SEO 문제가 있습니다.
반면에 SSR은 초기 로딩 속도와 SEO에 강점이 있지만 서버 부하와 인터랙티브한 UI에 제약이 있을 수 있습니다.
👉 사용법 ❗️
📍
app 폴더내의layout.js가 먼저 그려지고,
비어있는body태그안에page.js에서export default되고 있는 컴포넌트가 그려진다
layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}page.js
const Suji = ()=>{
return(<h1>hello</h1>);
}
export default Suji;📍
app 폴더내에 다른 폴더를 만들고,
그 폴더 안에page.js를 만들면 자동으로 라우팅 처리가 된다
💁🏻♀️ 예를들어,
http://localhost:3000/abc입력을 하면,
app/abc/page.js 파일에서export default되고있는 컴포넌트가layout의 body안쪽에 그려진다
💁🏻♀️ 예를들어,app폴더안에 원하는 경로이름을 적고, http://localhost:3000/dashboard 치면, 경로가 폴더 이름대로 dashboard로 가진다.
👍 이렇게 라우팅하는게 간단하고 쉽다❗️
📒 npm vs yarn
👉 무엇을 써도 상관없다. 명령어만 다르다.
📍1. 라이브러리 sjk 를 설치하고 싶다.
npm npm install sjk yarn yarn add sjk
📍2. 라이브러리 sjk를 삭제하고 싶다.
npm npm uninstall sjk yarn yarn remove sjk
📍3. node-modules 폴더가 없어서 설치하고 싶다면?
npm npm install --> package.json에 dependencies 보고 거기에있는 라이브러리 모두 설치 yarn yarn install --> package.json에 dependencies 보고 거기에있는 라이브러리 모두 설치yarn은 npm 을 통해서 설치해야한다.
npm install yarn --> 로컬영역에서만 설치 npm install --global yarn --> 전체영역에 yarn을 사용하겠다.
🐾 next.js 기본 프로젝트 구조 설치
📒 npm
npx create-next-appnpm 5.2버전 부터 npx를 제공해주는데, 기존방식은 npm을 통해 사용할 모듈을 지역 공간에 설치를 해야한 실행시킬수 있었는데, 모듈을 설치하지 않고도 매번 최신 버전 파일만 불러와서 실행시키고, 그 파일은 사라지는 방식으로 사용할수 있도록 npx가 제공된다.
📒 yarn
yarn create next-app
📒 next.js 프로젝트 서버 실행
npm
npm run devyarn
yarn run dev
or
yarn dev🐾 PORT 포트번호
실행되고있는 컴퓨터의 프로그램을 식별하기위해 사용하는 번호
- 변수에 저장 localhost = 127.0.0.1 localhost:3000 ==> 127.0.01:3000 👉 컴퓨터주소:3000ex) 카카오톡, zoom, 필기프로그램, vscode ..... 8080 포트에서 database 프로그램
기본적으로 react 프로젝트나 next.js 프로젝트는 3000번에서 동작하도록 설정 하나의 포트에서 하나의 프로그램
📒 react를 기본 포트인 3000번이 아닌, 다른 포트에서 동작시키기
package.json에서 scripts 부분에서 --> "start": "export PORT=3001 && react-scripts --> npm start를 통해 react 프로젝트를 실행하면 "설정된 포트"에서 실행이 된다
지금 하고있는, 리액트 프로젝트는
-npm start -yarn start로 실행
넥스트 프로젝트는,
-yarn dev -npm run dev
🐾 css 문법
선택자
div:hover{
color:red;
}//가상클래스 -->
:root {
//html태그에 적용하고싶은 대상이 있을때 사용
}
html{
//이렇게 쓰는거랑 위에 :root 이렇게 쓴것이 같은 의미
}📒 css에서 변수 사용
이렇게 하나하나 다 쓴다고?? 🤨
글자색 #000000
h1{
color:#000000;
}
h2{
color:#00000;
}
.detail{
color:#000000;
}
.content{
background-color:#fffff
}
//만약 dark-mode로 바꾸고 싶으면 다 일일이 바꿔줘야하니, 변수에 색을 담아서 필요에 따라 변수에 저장된 값만 바꿀수있다.이렇게 쉽게 쓸수있는방법이 있는데🌟👍
글자색
a= #000000
b= #ffffff
h1{
color:a;
}
h2{
color:a;
}
.detail{
color:a;
}
.content{
background-color:b;
}👉 css 에서 변수 만들기
--변수이름 : 값;
--변수이름: 값;
--a : #000000;
--b : 0, 0, 0;
--c: 3px solid black;
--d: 강수지;css 에서 변수 사용하기
var(--변수이름)👇
div{
color : var(--a);
border : var(--c);
display: var(--d);✏️background :rgb(0, 0, 0);
👉 변수를 써서 나타낸다면??
background :rgb(var(--b));
//그림자 주고싶으면 이렇게도 가능.
background-color : rgba(var(--b), 0.5);
}