✨[Next+Ts] review-english - (1)

RoRA·2023년 8월 15일

next.js typescript

[Study] Next.js + TS

목록 보기

1/1

🪂 2023. 08. 15. Tuesday_ 손목 나감...ㅜㅜㅜ 🪂

* 오늘은 'Study-Day01'에서 공부한 '영단어 복습노트 만들기-(1)' 내용 정리입니다.

✅ Setting

👉 node 설치 여부 확인하기

node --version

👉 Create Next App

✔️ setting 완료된 폴더 github에 올려두고 clone해서 사용하기 ✨

✔️생성하기

npx create-nex-app@latest [폴더명 적어주기]

✔️ global.css 수정하기

@tailwind base;
@tailwind components;
@tailwind utilities;

✔️ page.tsx 기본세팅하기

import { NextPage } from "next";

const Home: NextPage = () => {
		return <main>Home</main>;
};
        
export default Home;

✔️실행하기

  npm run dev

✅ Code-Review

👉 모든 페이지에 스타일 적용

✔️ layout.tsx 파일 수정하기 ~!

#템플릿 리터럴 사용 : 변수가 있는 곳에 속성값을 동적으로 변경하기 위해 사용함.
return (
        <html lang="en">
            <body className={`${inter.className} max-w-screen-sm mx-auto`}>
                {children}
            </body>
        </html>
    );

👉 component 생성 + props 사용

✔️ components/DayCard.tsx 생성하기

✔️ FC (Function Component) type import 해주기

import { FC } from "react";

✔️DayCardProps 정의

type DayCardProps = {
    index: number;
};

✔️DayCard 컴포넌트 선언 + props로 DayCardProps 받기

✔️{ index + 1 } 동적으로 렌더링

const DayCard: FC<DayCardProps> = ({ index }) => {
    return (
        <li className="text-center border-black border-2 font-medium rounded-lg shadow-md shadow-gray-300">
            <button>Day {index + 1}</button>
        </li>
    );
};
export default DayCard;

👉 map() 사용

✔️ Array 개체의 메서드이며 모든 배열 변수에서 호출할 수 있습니다.

✔️ data.json 파일 생성하기~!!!!

# v 값은 사용하지 않을 예정이브로 '_'로 대체해준다.
 {data.map((_, i) => (
                    <DayCard key={i} index={i} />
                ))}

✅깃헙 정리 👇👇👇

STUDY- DAY_01- review-english-(1)

⠀⠀⠀

📌 23. 08. 15

수정할 부분이 있다면, 알려주세요~!~ 😊

RoRA

✨[Next+Ts] review-english - (1)

[Study] Next.js + TS

✅ Setting

👉 node 설치 여부 확인하기

👉 Create Next App

✔️ setting 완료된 폴더 github에 올려두고 clone해서 사용하기 ✨

✔️생성하기

✔️ global.css 수정하기

✔️ page.tsx 기본세팅하기

✔️실행하기

✅ Code-Review

👉 모든 페이지에 스타일 적용

✔️ layout.tsx 파일 수정하기 ~!

👉 component 생성 + props 사용

✔️ components/DayCard.tsx 생성하기

✔️ FC (Function Component) type import 해주기

✔️DayCardProps 정의

✔️DayCard 컴포넌트 선언 + props로 DayCardProps 받기

✔️{ index + 1 } 동적으로 렌더링

👉 map() 사용

✔️ Array 개체의 메서드이며 모든 배열 변수에서 호출할 수 있습니다.

✔️ data.json 파일 생성하기~!!!!

✅깃헙 정리 👇👇👇

STUDY- DAY_01- review-english-(1)

📌 23. 08. 15

0개의 댓글