Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 프로그래머스 K_Digital Training
- vue mixin
- 프로그래머스 데브코스
- SCSS use
- 리액트
- intersection opserver
- KDT 프로그래머스 데브코스 프론트엔드
- KDT 프로그래머스
- 쌓임맥락
- netlify redirect
- 다른컴퓨터에서 git사용
- 이벤트 수식어
- 프로그래머스 프론트엔드 데브코스
- vuex map
- 고양이 사진 검색기
- vue 지역 컴포넌트
- flex
- postcss
- Spacer
- SCSS extend
- git 같은계정 다른 컴퓨터
- 폼 입력 바인딩
- vue 이벤트 수신
- SCSS forward
- 리스트 렌더링
- SCSS import
- 프로그래머스 데브코스 프론트엔드
- nextjs사용법
- Vue
- react next
Archives
- Today
- Total
혼자 적어보는 노트
프로그래머스 데브코스 TIL - Day 75 본문
✅ 오늘의 학습
📌 React 심화(7)
- Strapi + Apollo + GraphQL+ Next.js
NextLinkComposed Component
Next의 Link는 스타일이없는 바닐라 태그를 렌더링하기 때문에
a태그로 구성된 Link컴포넌트를 새로 만들어주어 사용할 수 있다.
import Link, { LinkProps } from "next/link";
interface NextLinkComposedProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">,
Omit<LinkProps, "href" | "as" | "onClick" | "onMouseEnter"> {
href: LinkProps["href"];
as?: LinkProps["as"];
}
const NextLinkComposed = ({
as,
href,
replace,
scroll,
shallow,
prefetch,
locale,
...props
}: NextLinkComposedProps) => {
return (
<Link
href={href}
as={as}
replace={replace}
scroll={scroll}
shallow={shallow}
prefetch={prefetch}
locale={locale}
passHref
>
<a />
</Link>
);
};
Matarial 에서도 권장하는 방식이라고 한다.
router.query.id 타입지정
comments 컴포넌트에 postId를 전달하기 위해 router.query.id를 넣어주었는데 type에러가 생겼다.
Comments컴포넌트에서 postId는 string으로 받도록 props 타입을 지정해두었는데
router.query.id값이 string | string[] | undefined으로 추론이 되었다.
=> as를 사용하여 해결했다.
<PostComments postId={router.query.id as string} />
Form Input Elements Type 정의
Form 내부에 작성된 input의 타입을 미리 정의해 둘 수 있다.
interface FormElements extends HTMLFormElement {
email: HTMLInputElement;
password: HTMLInputElement;
}
/* 생략 */
const handleSubmit = useCallback(
async (e: FormEvent<FormElements>) => {
e.preventDefault();
const elements: FormElements = e.currentTarget;
const email = elements.email.value;
const password = elements.password.value;
const result = await login({ variables: { email: email, password } });
nookies.set(null, "token", result.data.login.jwt, { path: "/" });
setIsLoading(false);
router.push("/");
},
[router, login]
);
특정 post의 comments 불러오기
filters를 사용하여 포스트의 comments들을 불러올 수 있다.
query GetComments($postId: ID!) {
comments(filters: { post: { id: { eq: $postId } } }, sort: ["createdAt:desc"]) {
data {
id
attributes {
body
user {
data {
id
attributes {
username
}
}
}
}
}
}
}
eq옵션을 사용하면 주어진 데이터와 정확하게 일치하는 데이터만 가지고 올 수 있다.
✍ 느낀 점
오늘은 새롭게 무언가를 학습하기보다는 직접 혼자 해보면서 익혔던 것 같다.
강의에선 휙 만들던 것들이 직접 만드려니 에러를 맞이해서 시간이 꽤 걸렸다..
그 과정에서 기본적인 query와 mutation을 계속 작성하다보니 기본 패턴이 손에 익게 되었다..
하지만 능숙하게 사용하려면 조금 더 깊게 배워야 할 듯 하다.
이것 저것 작성해보면서 예기치 못한 Type 에러들이 발생해서 검색을 통해 어찌저찌 해결했지만
지식이 부족하다보니 맞게 해결했는지는 잘 모르겠다😅
'스터디' 카테고리의 다른 글
타입스크립트 프로그래밍 - 1~3장 (0) | 2022.07.08 |
---|---|
프로그래머스 데브코스 TIL - Day 76 (0) | 2022.07.06 |
프로그래머스 데브코스 TIL - Day 74 (0) | 2022.07.02 |
프로그래머스 데브코스 TIL - Day 73 (0) | 2022.06.30 |
프로그래머스 데브코스 TIL - Day 71 (0) | 2022.06.29 |
Comments