포트폴리오
- 댓글기능 만들기 - 등록, 댓글 목록조회 (+ 별, 댓글수정, 댓글삭제)
-> 게시글 변형해서 만들기
-
댓글 등록 비밀번호 필요
-
삭제 시 비밀번호 입력해야 삭제 가능하게
-> const mypassword = prompt("비밀번호를 입력해 주세요") -
폴더 구조
게시글 상세페이지안에
상세페이지 컴포넌트 + 댓글 컴포넌트 분리해서 넣어주기
-> boardId안에 댓글 폴더 만들어주기
한 페이지에 useQuery를 사용하여 data가 두 개일때 data이름을 바꾸어주어야함
const {data: dataBoardComments} = useQuery
- 포트폴리오 주제 정하기
디자인부터~
포트폴리오 수정
리팩토링 (코드 효율적으로 변경하기)
const onClickUpdate = () => {
if (!title && !contents) {
alert("수정한 내용이 없습니다.");
return; // return으로 함수를 종료해줌
}
if (!password) {
alert("비밀번호를 입력해주세요.");
return;
}
}-> early-exit 패턴
if문에서 조건이 거짓일때 return으로 함수를 종료하여 효율적으로 만들어준다.
readOnly={true} 해주면 input 입력 불가
defaultValue={props.data?.fetchBoard.writer ?? ""} //
readOnly={!!props.data?.fetchBoard.writer} // !! -> 이중부정연산자 - 명확한 true- ?? : 앞이 없으면(null / undefined -> nullish) 뒤에를 보여줌
-> nullish coalescing - && : 앞이 참이면 뒤에 보여줌.
- || : 앞이 거짓이면 뒤에 보여줌
_app.tsx 파일에 데이터 타입 적용하기
{Component, pageProps }: AppProps
이벤트 핸들러 함수의 파라미터(event) 타입 지정하기
const onChangeMyWriter = (event: ChangeEvent<HTMLInputelement>)=>{
setMywriter(event.target.value)
}
ChangeEvent는 리액트에서 제공해주는 타입이므로 import 를 해서 사용해주어야 한다.
graphql-API 데이터 타입
graphql-codegen
graphql-API로 받아온 data 타입은 graphql-codegen을 통해서 받아올 수 있다.
1. graphql-codegen 설치
yarn add -D @graphql-codegen/cli
yarn add -D @graphql-codegen/typescript
2. codegen.yaml 파일 생성
-> yaml파일 사용 시 들여쓰기가 중요하니 유의!
-> package.json 파일에서 scripts부분에 "generate": "graphql-codegen" 추가
-> 터미널에서 yarn generate
-> generates 폴더에 있는 types.ts 파일에 API 데이터 타입이 저장된다.
📌 Component 오류
"@material-ui/core": "^4.12.4"
-> react 버전 충돌때문에 발생한다.
package.json에 아래를 추가해준다."resolutions": { "@types/react": "^17.0.2" }그 후 node_modules, yarn.lock 삭제 후 다시 yarn install 해주면 해결된다.
mutation에 typescript 적용하기
codegen을 사용하여 graphql의 타입을 모두 다운 받아왔으므로, 다운 받아온 타입중에 일치하는 부분을 선택하여 데이터 타입을 적용시켜줄 수 있다.
import { IMutation, IMutationCreateBoardArgs,} from "파일경로/types";
const [qqq] = useMutation<응답 타입,variables 타입>()
const [qqq] = useMutation<Pick<IMutation,"createBoard">, IMutationCreateBoardArgs>(CREATE_BOARD)
const zzz = async () => {
const result = await qqq(CREARTE_BOARD)
console.log(result.data?.createBoard?.message)
}응답 타입과 variables타입은 타입파일에 다운로드 되어있기 때문에 맞는걸로 import해온다.
다운로드된 타입들 중 맞는 타입을 가져오고 싶을 경우 Pick 을 이용하며 해당 타입을 선택할 수 있다.
위의 예시처럼 createBoard일 경우, Mutation과 MutationCreateBoardArgs를 import하고,
Mutation 중에서 createBoard를 Pick해준다.
📌 실무에서 보통 interface로 객체 타입을 지정할 때 타입명은
대문자 I로 시작한다.
위의 사진처럼 yaml파일을 세팅해준 후, 다시 yarn generate 해주면 인터페이스의 이름이 Iprofile 처럼 I로 시작하게 된다.
query에 typescript 적용하기
같은 방식으로 query도 일치하는 타입을 import 해온다.
import { IQuery, IMutationCreateBoardArgs,} from "파일경로/types";
const { data } = useQuery<Pick<IQuery,"fetchBoard">, IQueryFetchBoardArgs>(FETCH_BOARD,{
variables: {number:Number(router.query.mynumber)}
})Utility-Type
TypeScript에서는 유형 변환에 도움을 주는 전역으로 사용 가능한 유틸리티 타입을 제공한다.
interface IProfile {
name: string;
age: number;
school: string;
hobby?: string;
}
// 1. Partial 타입 -> 모두 ? 가 붙음
type aaa = Partial<IProfile>;
// 2. Required 타입 -> 모두 필수
type bbb = Required<IProfile>;
// 3. Pick 타입 -> 가져오고 싶은 것만 선택가능
type ccc = Pick<IProfile, "name" | "age">;
// 4. Omit 타입 -> 제외 가능
type ddd = Omit<IProfile, "school">;
// 5. Record 타입 -> 각각 적용
type eee = "철수" | "영희" | "훈이"; // Union 타입
let child: eee;
child = "철수";
child = "짱구"; // 안됨
type fff = Record<eee, IProfile>; // Record 타입
type ggg = keyof IProfile; // keyof -> 객체의 key값만 가져와 union타입으로 만든다.
let myprofile: ggg;
myprofile = "hobby";
// ============ (type vs interface) 차이 : 선언병합 ============
// interface: 선언병합 가능
interface IProfile {
candy: number; // 선언 병합으로 추가됨
}
let profile: Partial<IProfile> = {
candy: 10,
};
// type : 선언병합 불가능
type classmates = {
name: string;
age: number;
};
type classmates = {
school: string;
};
