내가 만든 페이지를 보기위해 이동하고 조회해서 보여주는
쿼리와 페이지 이동에 관해 공부
파일을 clone할 때 깃 변경사항을 잠시 임시저장 하는 방법은 git stash가 있으며 git stash이후 git stash list로 확인하고clone이 끝나면 git pull origin master 와 git stash pop stash@{0} 를 입력해주면 끝!
비습엔특징은 인쪽과 오른쪽이 가탇 키와 벨류가 같다. 같으면 값을 생략 가능하다. 다 지워서 한줄로 만들어도 동일하다
Shorthand - property라고 한다.
페이지 이동부분 보자
페이지이동
라우터 객체와 라우팅
**라우터(router) 객체**란 페이지 이동과 관련된 기능을 가지고 있는 객체입니다.
이 객체를 사용해서 A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다"고 말합니다.
Routing
페이지 이동은 useRouter() 를 사용한다.
const router = useRouter()
router.push("이동할 페이지")
이동할 페이지를 푸시 해주면 이동한다.
router.reload(), router.replace(), router.pathname 등등... 주소이동 기능이다. 그래서 주소나 이동 나오면 라우터인가? 하면 된다.
라우팅 실습
동적인 라우팅 다이나믹 라우팅
정적인 라우팅 static routing
두개의 페이지를 넣고 버튼을 넣으면 눌렀을 때 다른 페이지로 넘어가게끔 한다.
게시물 조회
const [나의함수] = useMutation()
const {data} = useQuery()
뮤테이션, 스테이트는 대괄호 쿼리는 중괄호
뮤테이션의 함수는 이름을 내 마음대로 할 수 있었습니다.
쿼리는 고정값입니다.
<실습>
data.fetchboard.writer 를 하면 데이터를 볼 수 있다는 말
TypeError: router.push is not a function 오류
const router = useRouter();계속 치면서 오류가 나서 왜 그렇지? 찾아보다보니 useRouter 설정할때 ()를 빼먹어서 생긴 오류였다...
Dynamic-Routing
라우팅 종류
정적 라우팅(static)과 동적 라우팅(dynamic) 2가지가 있습니다.
폴더 양옆에 []를 해주면 next.js에서 이름이 바뀔 수 있는 폴더라고 인식합니다.
모든 이름(값)이 다 들어갈 수 있습니다.
라우터 안에 pathname이나 route에 폴더 이름을 확인할 수 있고, query에 게시글 숫자가 들어가있고, aspath에는 내가 들어간 주소값이 들어있습니다.
이걸 읽고 이동을 하는 것
console.log(router.query.qqq)하면 query에 qqq를 찾아 반환해준다. (몇 페이지인지 )
그래서 완성된 qqq 폴더의 index.js를 보면
graphql 뮤테이션에 try ~ catch 적용
mutation이 항상 성공하는 것은 아닙니다.
Backend 컴퓨터에 문제가 발생할 수도 있고, 내가 수정하려는 게시물이 갑자기 삭제가 되는 바람에 수정에 문제가 발생하는 등 여러가지 실패 가능성이 있습니다.
따라서, 우리는 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야 합니다.
try { await createBoard({ variables: { aaa: "훈이", bbb: "1234", ccc: "안녕하세요 훈이에요", ddd: "반갑습니다" } }) } catch(error) { alert(error.message) // 경고창(실패했습니다.) ==> 백엔드 개발자가 보내주는 실패 메시지 } finally { // 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분 // 필요없다면 생략 가능 }
비동기 통신과 조건부렌더링
javascript는 작성된 코드가 상단에서부터 순서대로 실행되기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터의 내용이 undefined 이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생합니다.
이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부렌더링을 사용합니다.
조건부 렌더링에는 &&연산자, 삼항연산자, 옵셔널체이닝이 있습니다.
그렇다면 사용 방법은 어떻게 될까요?
삼항 연산자
제일 처음에는 삼항 연산자를 썼습니다.
data는 동기적으로 받아와야하는 데이터입니다. 하지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어줘야 했습니다.data ? data.fetchProfile : undefined
&& 연산자
data && data.fetchProfile&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해줍니다. 데이터가 없을 때 따로 div를 쓸 필요가 없으면 else 부분을 쓸 필요가 없죠. 하지만 이 코드조차 길다고 느껴집니다.
&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데, 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있습니다, Nullish coalescing 연산자라 불립니다.
??연산자는 앞의 값이 빈 값이면 뒤의 값을 보여주며 ||연산자는 앞의 값이 거짓(false)일 경우 뒤의 값을 보여줍니다.data ?? data.fetchProfile data || data.fetchProfile
옵셔널 체이닝 (Optional-Chaining)
optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자 입니다.
data?.fetchProfileoptional-Chaining은 ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴해줍니다.
위에 있는 삼항연산자, && 연산자와 똑같은 기능을 하는 것이죠.
fetchboard 비동기 방식으로 움직이기때문에
데이터가 보여줄 수 있는 것 먼저 보여주고 데이터가 추가가 되면 한번 더 그려진다.
방식은 data && data.fetchBoard.writer
데이터가 있다면 데이터 보여줄래?
조건에 따라 데이터를 보여주는 조건부 렌터링이라고 합니다.
{0 && "성공"}
이러면 0은 false로 인식해 0이 나오고
{1 && "성공"}
이러면 1은 true로 인식해 "성공" 이라 뜹니다.
