[코드캠프]10일차_TIL_왐마..🙄

윤성해·2023년 3월 24일

프론트엔드_TIL

목록 보기

10/27

🏷️ 수업목표

타입스크립트

과제 리뷰(어제는 수정하기 과제를 했다.)
과제 내용은,

등록한 내용을 이동된 수정페이지에서 인풋값 나타내주기 (defaultValue사용)

수정페이지에서 값 수정해주고 수정버튼 누르면

상세페이지로 이동되서 수정된 값 나타내주기 (이 과정에서 수정된 값만 백엔드데이터로 mutation 해주었다.)

제목, 내용중 하나라도 입력이 되어있을
원래의 코드로직 (밑에 더 김...)이럴때는 반대케이스를 적는다.
early-exit 패턴 (먼저 종료시켜서 조건문이랑 ? 나뉸다)
이프리턴 구문

if return 구문

여기서 리턴은 333을 돌려주고 함수를 종료한다. qqq를 찍어보면 333이 나오고 콘솔에 안녕하세요가 찍히는 것을 볼 수 있다.

CURD
에서 수정하기가 가장 까다로웠다. 가장 민감하고 조건이 많이 붙는다.
그러니까 수정하기를 더 집중적으로 , 꼼꼼이 보자! 귀찮아하지 말고 마무리 잘하기

1. 타입스크립트로 파일 변경해주기

1) 엄격한 타입스크립트 strict

strict를 true로 두게되면 props쪽에서 빨간줄이 그이는 것을 볼 수 있습니다.
따라서 interface로 props의 타입을 지정해주어야 합니다.
props에서는 주는 입장과 받는 입장이 있습니다. 타입스크립트는 받는 입장에서 타입을 지정해주셔야합니다.

❗️ 함수의 타입 지정해주기
→ 파라미터의 타입또한 지정해주셔야 합니다.

/* props를 주는 쪽 컴포넌트 */
// 파라미터의 타입을 지정해주셔야 합니다.
const add = (a: number, b: number) => {
  return a + b;
};
return (
    // 컴포넌트의 JSX부분
    <Component add={add} />
  );

------------------------------------------------------------------------

/* props를 받는 쪽 컴포넌트 */
// 함수의 타입 지정해주기
// 리턴되는 값의 타입을 적용해주면 됩니다. 만일 리턴되는 값이 없다면 void를 적어주시면 됩니다.
interface IProps {
  add: (a: number, b: number) => number;
}

const Component2 = (props: IProps) => {
  props.add(1, 2);
  return (
    //컴포넌트의 JSX부분
  );
};

2) 타입으로 뭘 받아오는 지 잘 모를 때

외부와 통신해서 받아오는 api같은 데이터는 뭘 받아오는지 잘 모를 수 있습니다. 그럴 때는 일단 타입에 any를 주고 넘어가시면 됩니다.

타입스크립트에서의 any는 모든 타입을 말합니다. 자바스크립트의 any와 같습니다.

❗️주의❗️
타입스크립트를 처음 배울 때에는 api를 통해 받아오는 데이터의 타입을 직접 지정해주는 것이 어려울 수 있습니다. 그래서 임시로 any를 지정하고 넘어가는 것입니다. 이후 타입에 대해 조금 더 공부한 뒤에는 하나하나 지정하고 넘어가주셔야 합니다.

💡 이벤트 핸들러 함수의 파라미터(event) 타입 지정하기
→ 우리 프로젝트에서 onChange함수의 파라미터 타입을 지정해 줄 때 ChangeEvent를 사용해주었습니다. 아래에서 자세히 확인 해주세요
// HTML 태그는 이벤트 핸들러 함수가 적용되 함수가 뭔지에 따라 다르게 적힙니다.
const onChangeMyWriter = (event: ChangeEvent<HTML inputelement>)=>{
			setMywriter(event.target.value)
	}
ChangeEvent는 리액트에서 제공해주는 타입입니다. 따라서 import를 해서 사용해주셔야 합니다.
onclick 이벤트의 타입은 ChangeEvent아닌 다른 이벤트 이므로 이후에 한번 더 다루겠습니다.

💡 타입스크립트는 항상 받는 쪽이 중심 입니다! 따라서 보내주는 쪽에서는 받겠다고 한 타입 그대로를 보내주셔야 합니다.

3) 유틸리티 타입

유틸리티 타입이란 내가 원하는 타입을 조작해서
필요한 타입만 따로 빼두거나, 필요없는 타입만 제거하는 타입을 의미합니다.
아래와 같은 객체 타입이 있다고 가정해봅시다.

const profile = {
  name : "철수",
	age : 12,
	school: {
		name : "다람쥐 초등학교",
		location : "서울시 구로구"
	}
}

interface IMyProfile = {
	name : string;
	age : age;
	school?: {
		name : string;
		location : string;
	}
}

우리는 타입스크립트를 배웠으므로 위의 객체에 직접적으로 타입을 지정해줄 수 있습니다.
유틸리티 타입을 사용하면
profile 객체의 전체 데이터를 필수 타입으로 설정하거나, 전체를 옵션 타입으로 설정하거나
또는 name과 age 타입만 사용하거나, school 타입을 제거하는 등의 작업들이 필요할 수 있습니다.

이때 대표적으로 사용되는 유틸리티 타입의 기능들이 있습니다.

1. Partial

전체 타입을 optional 한 타입으로 변경합니다.

type partial = Partial<IMyProfile>

2. Required

전체 타입을 required 한 타입으로 변경합니다.

type requireds = Required<IMyProfile>

3. Pick

전체 타입에서 원하는 타입만 지정합니다.

type picked = Pick<IMyProfile, "name", "age">
// name과 age 타입만 지정

4. Omit

전체 타입에서 원하는 타입만 제거합니다.

type omits = Omit<IMyProfile, "school">
// school 타입만 제거 = name과 age 타입만 지정

5. Union Type

원하는 타입을 직접 지정할 수 있습니다.

type union = "school" | "name"
// school과 name 타입만 지정

6. Record

Union으로 지정된 타입을 순회하여 타입을 지정합니다.

type union = "school" | "name"
type RecordType = Record<union, IMyProfile>
// school과 name의 각각의 타입에는 IMyProfile가 지정

2. API 응답 데이터의 타입은 어떻게 할까?

rest-api는 타입스크립트를 적용하게 되면 어느정도 일일이 손으로 만들어 주셔야 하는 부분이 많습니다.
하지만 graphql 같은 경우는 graphql-codegen을 이용해 명령어 하나로 만들어줍니다. 따라서 굉장히 간편하게 만들 수 있습니다.

graphql-codegen 설치 후, 해당 파일에 codegen.yml 혹은 ymal 만들어서 아래 코드를 넣어줍니다.
//codegen.yaml 파일 (yml, yaml 둘 다 상관 없습니다.)
schema: http://backend-example.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I
여기서 schema 주소는 백엔드 주소!

이후에 명령어로 codegen을 실행시키시면 스키마의 주소로 들어가 api들의 타입을 쭉 다운받아오는데, 다운받은 타입을 generated의 types.ts로 들어가게 됩니다.

package.json 파일에 아래 코드를 추가 후 저장해주세요.

설치가 완료되었다면, yarn generate 명령을 실행하면, Backend 컴퓨터에 접속해서 Graphql-API로
받아오는 모든 데이터의 타입을 빠르게 조사하고, 이와 일치하는 타입스크립트 파일을
./src/commons/types/generated/types.ts 위치에 자동으로 만들어 줍니다.

codegen 적용해보기!

1. mutation에 타입스크립트를 적용해봅시다.

우리는 처음에 variables로 무엇을 보내줄지, 응답으로 무엇을 받아올 지 잘 모릅니다.
그래서 지난번에 data를 받아올 때는 타입에 any를 적어줬습니다.

codegen을 사용하면서 graphql의 타입을 모두 다운 받아 왔습니다. 이제는 다운 받아온 타입중에 맞는 것을 뽑아 적어주시면 됩니다. ➡️ Pick!!

// 결과타입과 변수타입은 types.ts 파일에서 import해서 데리고 오시면 됩니다.
const [함수] = useMutation<결과타입,변수타입>(쿼리);

/* 실제 코드에 적용해보기 */

// 다운로드된 타입들 중 맞는 타입을 데리고 올때는 Pick을 이용하며 해당 타입을 import해와야 합니다.
// 강의에서는 타입파일에서 Mutation과 IMutationCreateBoardArgs를 import해왔습니다.
// 우리는 IMutation 중에서 createBoard를 픽해올 것 입니다.
const [createBoard] = useMutation<Pick<IMutation, "createBoard">, IMutationCreateBoardArgs>(CREATE_BOARD);

const onClickUpload = async () => {
		const result = await createBoard(CREARTE_BOARD);
		console.log(result.data?.createBoard?.message);
	}

useState와 useMutation같은 부분들은 위와 같이 <>를 이용해서 타입을 지정해주시면 됩니다.

2. query에 타입스크립트를 적용해봅시다.

쿼리를 적용하는 것은 뮤테이션과 크게 다르지 않습니다.

// 결과타입과 변수타입은 types.ts 파일에서 import해서 데리고 오시면 됩니다.
const { data } = useQuery<Pick<IQuery,"fetchBoard">,IQueryFetchBoardArgs>(FETCH_BOARD,{
		variables: {number: Number(router.query.mynumber)}
	})

💡 input tag의 readOnly 속성에 data?.fetchBoard.writer(string)를 넣어주었는데 타입스크립트 오류가 납니다.
기본적으로 input tag의 readOnly 속성은 boolean 타입입니다. 때문에 이 타입이 string 타입이 되도록 만들어주어야합니다. 이 문제를 해결하기위해 이중부정연산자를 사용할 수 있습니다.
data?.fetchBoard.writer은 string 타입이지만 boolean 타입으로 보면 string이 있기 때문에 true 입니다. 여기에 !data?.fetchBoard.writer 해주시면 false가 되고, 그럼 우리가 할당해준 데이터를 그대로 가져오고싶은 경우에는 !!data?.fetchBoard.writer 처럼 이중부정연산자를 사용하시면 true인 상태 그대로 데이터를 가져올 수 있겠죠

추가 수업내용들 (나만알아볼 수 있음)

섹션 09-04 -> 10-로 변경했음 / scr 도 10-write 로 바꿨고 / new, edit 주소 바꿨고
컨테이너에서 등록, 수정할 곳 라우터 푸쉬 주소 섹션10 -10-02 타입스크립트로 바꿨다.

typescript 변경 과정

tsx, ts 차이 보기!! 리턴 안에 있다없다!
바뀐 페이지 들어가보면 에러메세지가 많음 변경해주자
인자- 아규먼트 / 매개변수 - 파라미터

위 이미지 해결방법은 아래 이미지 참고

위 이미지는 variables 타입 만들어주기

요고 이벤트 타입이 뭐려나? 해결방법은 아래

체인이벤트 (리액트 개발자님께서 만들어주심! 임포트 해야함
체인지 이벤트 옆에 <> 안에 어디서 체인지된건지 적어주기
체인지이벤트 말고 마우스이벤트도 있다. 눌리면 뭐어쩌고 되는거
컨테이너에서 프리젠터로 옮겨줄 때
import, 아이프롭스 만들기

interface iprops 만든거 한번에 모아서
임포트, 익스포트 해주기

유ㅣ틸리티ㅏ타입이란 조작에 관한거

백엔드에 접속해서 api ..?무라노

훅은 타입명시가

리절트가 크리에이트 보드고 인다(베리어블스가 콤마뒤에 나오는 애들

타입이 없었을 때는, 잘못써도 에러가 안났지만 지금은 잘못쓰면 에러가 난다.

반드시 숙지해야할 단축키!!!

더블클릭, 커맨트 + 시프트 + l 한 상태에서 바꾸기
원하는 곳에 옵션누르고 클릭하면 전택되는데, 코맨드 누르고 화살표키로 와따가따하기 그상태에서 시프트 커맨드 방향키 하면 전체선택
위처럼 끝에서 끝 말고 블럭 단위로 끊어서 가고싶으면
옵션누르고 방향키 누르기
줄 자체를 삭제 (ex 온 들엉간거 다 지우고싶으면 이렇게 해서 지워도 온 들어간거 다 삭제된다. 대충 ㄷ래그 해도
코맨드 시프트 케이
옵션 커맨드 방향키 아래

🤷🏻‍♀️ 궁금한 것

❗️알게된 것

✨ 느낀점

이 블로그도.. 임시저장해놓고 몰아쓰는중이라 회고때 정리하도록 하겠다..ㅇㅏ하하
바쁘다바빠 🙄
css는.. 아직 건들지 못했지만 일단 프리보드 만들기는 요로코롬..
1. 목록으로 가서 게시판리스트 불러오고(map 사용)
2. 수정하기 (defaultValue, 조건문으로 수정된 값만 mutation해주기)
3. 삭제하기

사실 이 과제 모두 완성할때까지 페어분들 없었으면.. 나혼자 하기 너무 어려웠겠다 라는 생각이 든다.ㅠㅠ
에러메세지도 본거 또보는데 또까먹고.. 지금은 에러메세지를 코드 수정할때마다 만나기때문에 ^^ㅎ
너무많기도하고 과제진행하는데 급급해서 정리를 못했다. 그래도 기억에 남는것들은
페이지 404 에러뜨면 내가 주소자체를 잘못들어간거고, 보통 나는 query, mutation 쪽 에러가 많이 뜨는데 값을 전달 못받을때는 500으로 뜨더라