1. NextJS
1-1. NextJS?
- Next.js는 React를 기반으로 하는 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 지원한다.
- 페이지 라우팅, 서버 기능 등을 기본적으로 제공하므로, 더 복잡하고 기능이 많은 폴더 구조를 가지고 있다.
1-2. NextJS 사용하기
설치하기
-
설치 전 터미널로 위치 확인해서 지정할 곳으로 이동하기
-
터미널에 npx create-next-app@latest 입력하기
-
물어보는 질문은 현재 상황에 맞춰서 선택하기
2. Next 페이지 이동
2-1. 만들어둔 react -> next 변환하기
- react 라우터에 있던 .tsx파일 복사해서 새롭게 들어갈 next쪽에 파일 만들어서 붙여넣어줌.
- 그런 후 생긴 문제점 2가지(1. 링크문제, 2. usestate문제)
import { Link } from "react-router-dom";
<Link to="/BoardNew">BoardNew 페이지로 가는 기능</Link>
⬇︎
import Link from "next/link";
<Link href="/boards/new">BoardNew 페이지로 가는 기능</Link>-
usestate를 사용하는 최상단에 "use client";를 적어줌으로 해결
-
usestate는 Next.js에서 사용하는 특별한 지시어로, 해당 파일이 클라이언트 컴포넌트로 실행되도록 명시한다.
-
기본적으로 서버 컴포넌트를 통해 처리되는 것이 일반적이지만 useState나 useEffect같은 훅을 사용해야 하는 경우 클라이언트 컴포넌트로 실행해줘야 한다.
-
결과적으로 usestate를 상단에 추가해서 명시적으로 선언해주면 usestate를 사용하고 에러를 막을 수 있다.
"use client";3. CSS-Module
3-1. 모듈 사용이유
- 규모가 커져서 class 이름이 많아지면 스타일이 충돌할 가능성이 높아지므로 css 파일별로 그룹화해서 충돌을 막는다.
3-2. CSS-모듈
사용방법
-
styles.module.css 파일을 만들어준다. 위치와 이름이 중요한데, 같이 작동하는 page.tsx와 같은 파일에 함께 있어야 하고, 이름은 styles.module.css여야 인식한다.
-
page.tsx에 import styles from "./styles.module.css"; 으로 연결해주고 태그에 클래스 값을 줄때는 className={styles.버튼스타일} 이런식으로 만들어 준다.
-
styles.module.css파일에 .을 붙이지 않고 태그자체를 가리키면 되지 않았다. 그런 부분은 해당태그 자체를 클래스로 바꿔서 . 을붙이고 해당 태그에 class값을 2개 주던가, 전체적으로 먹여도 문제 없으면 모든 페이지에서 전역으로 적용하는 globals.css에서 적용한다. globals.css에서는 .없이 태그자체를 선택해도 문제없다.
// page.tsx
"use client";
import styles from "./styles.module.css";
export default function CssPage() {
return (
<>
<button className={styles.버튼스타일}>버튼</button>
<div className={styles.네모상자스타일}>네모상자</div>
</>
);
}
-----------
.버튼스타일 {
background-color: yellow;
}
.네모상자스타일 {
width: 200px;
height: 200px;
background-color: red;
}
3-2. tailwind
1 ) 사용하기
1. Tailwind CSS를 프로젝트에 설치하고 설정한다. yarn install tailwindcss
2. tailwind.config.ts에서 설정한다.
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}content
- Tailwind CSS가 클래스를 추적할 HTML, JavaScript, TypeScript 파일을 지정한다. 여기에서 지정된 파일들만을 분석하여 실제로 사용되는 Tailwind CSS 클래스를 포함한 최종 CSS를 생성한다.
theme
- Tailwind CSS의 기본 테마를 커스터마이징할 수 있는 부분이다. Tailwind는 기본적으로 색상, 간격, 폰트 등 여러 스타일 변수를 제공한다.
- extend를 사용하면 기본 테마를 수정하거나 새로운 스타일을 추가할 수 있습니다.
plugins
- Tailwind CSS의 플러그인을 정의하는 곳
- 기본적으로는 빈 배열로 되어 있으며, 필요에 따라 추가적인 플러그인을 설치하고 사용할 수 있다. 플러그인을 사용하면 Tailwind CSS의 기능을 확장하거나 새로운 유틸리티 클래스를 추가할 수 있습니다.
3. 유틸리티 클래스 사용
- 유틸리티 클래스는 Tailwind CSS와 같은 유틸리티 퍼스트 CSS 프레임워크에서 사용하는 스타일 클래스로, 각각의 클래스가 특정한 CSS 속성을 적용
유틸리티 클래스 예시
- shadow-lg: 큰 그림자 효과를 추가한다.
- text-2xl: 텍스트 크기를 2배로 키운다.
- font-bold: 텍스트를 굵게 만든다.
- text-center: 텍스트를 가운데 정렬한다.
- mt-2: 위쪽 마진을 추가한다.
- bg-blue-500: 버튼의 배경색을 파란색으로 설정힌다.
- hover:bg-blue-600: 마우스를 올렸을 때 배경색이 더 진한 파란색으로 변경된다.
4. Tailwind 커스터마이징
- 기본 제공되는 스타일 이외로 필요에 따라 커스터마이징 할 수있다.
커스터마이징 하기
- tailwind.config.js 파일 수정
- 모든 커스터마이징은 tailwind.config.js 파일에서 이뤄진다.
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
철수가좋아하는색깔: "blue", // 나만의 부트스트랩 만들기
영희가좋아하는색깔: "green",
},
},
},