어제의 복습:
const 쿼리문 명 = gql `쿼리문작성`const [쿼리문을 담을 함수명] =useMutation(쿼리문 명) ==>쿼리문을 적용한다.
_app.js의 Component ==> 모든 페이지라는 의미. 모든 페이지에 apollo라는 설정을 적용해줘 그래프ql주소는 여기야 라고 알려줌.
페이지 컴포넌트가 불려와 app.js의 컴포넌트에서 실행되는 것.
= 변수(variables)
객체에서 키와 값이 같다면 값(value)생략가능.
오늘의 일지:
오늘은 어제했던 데이터를 받아와 화면에 보여주는 작업을 해 보았다.
당연히 정보를 받아오니 fetch문으로 똑같은 방식으로 받아오면 되지 않나 싶었지만 이것도 다 방법이 있었다.
이 방법을 다루어보며API요청시 오류가 날 경우 try~catch문을 사용하는 방법에대해 배웠다.
그전에 routing이라는 말에대해 알아볼 필요가 있다.
routing:페이지 이동,
router:라우팅을 할 때 사용하는 도구.
router는 페이지를 이동시켜주고, 현 주소를 확인 가능하게 해 주고, 주소관련 기능들도 제공한다.
페이지 이동==>
router.push("이동할 페이지 주소")==>"/폴더명"이렇게 적으면 그 안의 index.js가 실행됨.
페이지 새로고침==> router.reload(),router.replace()
현재주소조회 ==> router.pathname()또는 route둘이 요즘엔 같다고 본다.
이중 할것은 페이지 이동이다.
먼저 페이지를 이동하며 게시물을 조회하고 에러를 처리하는 방법순서이다.
라우팅의 종류:
1.정적라우팅(static routing):일일이 폴더를 만들어 주소를 다르게 적어야함. 매우 비효율적.따라서 동적 라우팅을 사용.
2.동적라우팅(Dynamic routing): 받아올 폴더 이름을 대괄호 를 사용하여 적고, 그 안에는 사용할 변수명을 그대로 적어준다. 폴더를 합쳐서 만드는 방법.
useQuery를 사용해 데이터를 받아오기.
const {data} = useQuery(쿼리문 이름) ==> data라는 이름으로 받아오는 저 쿼리문의 내용 이라는 의미.
useState문과는 달리 useQuery문에서는 중괄호를 사용한다.
useMutation과 useState는 대괄호[] 사용
다사 복습!
rest-API는 벡엔드에서 보내주는 것 전부 받아와야 하나,
graphql-API 필요한것만 받아서 받아올 수 있다.
useMutation과 useQuery문의 받아오는 방법의 차이
useMutation는 함수안에 담아 어디서든 사용이 가능하나,
useQuery는 페이지로 들어오자마자 이것이 보이면 벡엔드에 바로 요청이 들어간다. 그러면서 기본적으로 동기로 작동하게 되어있다.
동적으로 원하는 값을 변수에넣기위해서는 해 주어야 할 일이 있다.
const {data} = useQuery(쿼리문 이름,{
variables:{
}
}
)
Promise 를 이 안에서 처리하기에 기다리지 않고 내려가 undifined로 나온다.
await를 하는경우에는 기다리는 동안 아무것도 출력되지 않으므로, 비동기로 작동되어야 할 필요가 있다.
요청이 undifined로 나가 data있으면 다시 올라가 다시 실행시켜 그 아래내용도 나오게하는 방식이다조건문 사용이 필요하다.==>조건부 랜더링 이라고 한다.
1번 방법: {data && data.fetcheBoard.writer}
==>데이터가 있으면 undifined후에 실행된것을 실행해주고, 없으면 출력할 수 있는 것을 출력,
데이터가 있을때 해줘 라고 바꿔야 에러가 안난다.
2번 방법: {data ? data.fetchBoard.writer:"로딩중..."}
==> 삼항연산자 사용방법. data가 있으면 그 데이터가, 없으면 "로딩중..."이라는 말이 출력.
3번 방법: {data ?.fetchboard.writer} ==> 가장 많이 사용되는 ### 옵셔널 체인지` ### 라는 방법.
랜더링: 화면에 그려주라는 말
조건부 랜더링: 조건에 맞게 화면에 그려줘~
먼저 보여줄 수 있는 것 먼저 보여주고 그다음에 나중에 보여지는 것 보여줘!
동적라우팅 ==> [ aaa] 여기서 aaa는 변수로 주로 받아오는 것의 이름으로 설정해준다. 대괄호를 만나는 순간, 아무거나 입력해도 그 안의 변수에담겨 index.js로 이동해 그 안의 변수값을 꺼낼 수있다.
즉 , 파일을 하나만 만들어도 된다는 의미.
그곳에 들어가 router을 이용해 변수를 꺼낼 수 있다.
+연산자 빼고 변수와 문자열 합치기.
전체를 벡틱(``)으로 감싸고 변수는 ${}이 안에 넣어줌.
==> ## 명칭은 템플릿 리터럴 이라고한다.
항상 API불러오는 것 등이 실패 할 수도 있으니 try~catch 문을 사용하는데 catch 에는 try에 있는 내용을 실행하다가 에러가 발생 시 아랫줄을 모두 무시하고 실행할 오류 메세지가 실행?된다.
오늘 데이터 받아오기 실습중에 오류가 너무나서 질문을 드렸다. 옵셔널 체인지를 제대로 해주고 varibales의 변수 키를 잘못 입력해서 생긴 문제였다. 이번주 강의들을 다시 복습해 봐야 할 것같은 생각이 드는데 시간이 부족한것 같다. 지금도 뭔가가 막혀 오류가 발생하고 있는데 일단 ui부터짜봐야겠다....
그리고 int값을 parseInt?로 감싸주었었는데 Number감싸라는 페어분의 말씀을 듣고 둘이 뭐가 다른지에대해 질문을 해보았다.
parseInt는 정수로 양수 음수를 모두 받아오는 큰개념이고, Number는 양수만을 말한다.
흔히 가격 등에서 사용하는 경우들은 전부 양수 이므로 Number의 사용경우가 더 많다고 한다.
추가로 parse에대해 공부해 보라고 하셨다.
알아볼것은 많고 시간은 없고 피곤하다...
이만 내일을 위해....
