[TIL] 유데미X사람인 취업 부트캠프 1기 9주차
[2월 5일]
1. 타입스크립트
- 자바스크립트의 모든 기능을 포함하는 상위 집합
- 코드에 명시적으로 타입을 지정할 수 있게 해줌
- 정적 타입 검사 : 타입스크립트는 컴파일 시점에 타입 검사를 받아 실행 전에 오류를 발견하고 수정 가능
- 객체 지향 프로그래밍과 인터페이스 제공
- 예시코드
function greet(name: string): string {
return `hello, ${name}!`;
}
const name = "World";
console.log(greet(name));
2. 타이스크립트 예시 코드
(1) Counter
- 배열은 타입[]으로 설정할 수 있고 Array<타입>으로 설정할 수 있다
- useState를 사용할 때 value의 값을 0으로 설정하나, undefined일 수 있음을 명시한다
import { useState } from "react";
type NumberArray = Array<number>;
string[]
Array<string>
function Counter() {
const [value, setValue] = useState<number|undefined>(0);
return (
<div>
<div>{value}</div>
<div>
<button>+</button>
<button>-</button>
</div>
</div>
)
}
export default Counter;
(2) Display
- interface를 통해 size의 종류를 지정한다
- PropsWithChildren을 사용해서 prop을 받아온다
import { PropsWithChildren } from "react";
interface DisplayProps {
size: "sm" | "md" | "lg";
}
function Display({ size: children }: PropsWithChildren<DisplayProps>) {
return <div>{children}</div>
}
export default Display;
(3) Post
- Post객체 안에 title과 content를 넣고 타입을 미리 지정한다
- PostProps에 Post를 post로 정의한다
type Post = { title: string; content: string };
interface PostProps {
post: Post;
}
function Post({ post }: PostProps) {
return (
<div>
<h6>{post.title}</h6>
<p>{post.content}</p>
</div>
)
}
export default Post;
[2월 6일]
1. NEXT 기초
- react기반의 츠레임워크로 서버사이드 렌더링, 정적 사이트 생성, 클라이언트 사이드 렌더링 등을 지원
2. NEXT 프로젝트 시작
(1) 터미널에 입력
npx create-next-app@latest
(2) 선택사항
3. 폴더구조
- 폴더명 자체가 경로가 된다!
- 폴더명을 소괄호 안에 적으면 그 경로는 무시됨
- 폴더명을 대괄호 안에 적으면 파람이 됨
- 예시) src/app/(root)/posts/[postId]/page.js => localhost:3000/posts/1
4. import Link from next-Link
- next에서는 링크 간 이동을 위해서 Link href를 사용
import Link from "next/Link"
export default function HomePage() {
return (
<main>
<Link href="/posts">포스트 목록 페이지로 이동하기</Link>
</main>
);
}
5. 동적 라우팅 구현
export default function Page(props) {
const params = props.params;
const postId = params.postId;
return (
<div>포스트 상세 페이지</div>
<div>현재 포스트는 {postId}번입니다.</div>
);
}
6. 서버에서 데이터 가져오기
- 포스츠 리스츠 페이지
async function getPosts() {
const response = await fetch("링크");
const data = await response.json();
return data;
}
export default async function PostListPage() {
const posts = await getPosts();
return (
<div>
<nav>
<ul>
{post.map((post)=>{
<li key={post.id}>
<Link href={`/posts/${post.id}`}>{post.title}<Link>
</li>
})}
</ul>
</nav>
</div>
)
}
- 포스트 상세 페이지
async getPost(postId) {
const response = await fetch("링크/${[pstId}");
cosnt data = await response.json();
return data;
}
export default function PostDetailPage(props){
const params = props.params;
const data = paras.postId;
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
)
}
[2월 7일 ~ 8일]
1. TILTIL만들기
(1) TIL 생성 및 가져오기 함수
import { Til } from "@/types/Til.type";
export async function getTils() {
const url = "https://port-0-ballang-server-qrd2als49b8m4.sel5.cloudtype.app/til";
const options = { method: "GET" };
const response = await fetch(url, options);
const data = await response.json();
return data as Til[];
}
export async function getTil(id: string) {
const url = `https://port-0-ballang-server-qrd2als49b8m4.sel5.cloudtype.app/til/${id}`;
const options = { method: "GET" };
const response = await fetch(url, options);
const data = await response.json();
return data as Til;
}
export async function createTil(til: { title: string; content: string }) {
const url = `${window.location.origin}/api/til`;
const options = { method: "POST", body: JSON.stringify(til) };
const response = await fetch(url, options);
const data = await response.json();
return data as Til;
}
const tils = {
getTils,
getTil,
createTil,
};
export default tils;
(2) 쿼리 사용하기
"use client";
import API from "@/api";
import TilCard from "@/components/TilCard";
import { Til } from "@/types/Til.type";
import { useQuery } from "@tanstack/react-query";
function PopularTils() {
const returnValueOfUseQuery = useQuery({
queryKey: ["tils", { isList: true, type: "popular" }],
queryFn: API.tils.getTils,
refetchOnWindowFocus: true,
});
const { data: tils, isLoading } = returnValueOfUseQuery;
return (
<div>
{isLoading ? (
"로딩중..."
) : (
<ol className="flex flex-col gap-y-4">
{tils.map((til: Til) => (
<li key={til.id}>
<TilCard key={til.id} til={til} />
</li>
))}
</ol>
)}
</div>
);
}
export default PopularTils;
import Link from "next/link";
import { PropsWithChildren } from "react";
type Til = {
id: string;
title: string;
content: string;
};
interface TilCardProps {
til: Til;
}
function TilCard({ til }: PropsWithChildren<TilCardProps>) {
return (
<Link href={`/tils/${til.id}`} className="block">
<div className="border p-5 rounded-md flex flex-col gap-y-4">
<h6 className="text-lg font-bold">{til.title}</h6>
<p className="text-sm">{til.content.slice(0, 20)}...</p>
</div>
</Link>
);
}
export default TilCard;
[회고]
한 주에 너무 많은 것을 뇌에 쑤셔넣으려고 했다,,
외장하드가 필요하다,,,,,,,,,,,,,,,,,,,,,,,,,,,
그리고 자바스크립트 능력도,,