본문 바로가기

비공개/강의 간단 정리(추후 복습하면서 수정)

비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 17. [Section05-05] dynamic routing board mutation, try catch문을 사용한 에러 잡기 게시글 등록 후 해당 게시글 페이지로 이동하기 글 작성시 API 에서 게시글의 number를 받아오기 때문에, 이 number를 사용해서 페이지 이동하도록 작업한다. router.push() 를 사용하고 그 안에 `이동할 페이지 주소 / ${이동할 번호} `를 넘겨준다. 예시: router.push(`/test/${result.data.createBoard.number}`) 그런데 외부에 요청하는 로직들은 문제가 생길이 어떨지 확신을 할 수가 없다. (백엔드 쪽에서 문제가 있을 경우 등) 이런 경우를 대비하기 위해서 항상 시도를 한다. (try catch문 사용) try에 있는 내용을 시도하다가 실패하면, 다음에 있는 모든 줄들을 모두 무시하고 catch에 있는 내용이 실행된다. try { 성공일 경우 ..
[Section 05-04] dynamic-routing-board-query
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 9. [Section 05-04] dynamic-routing-board-query 동적 라우팅 next.js 에선 동적 라우팅을 할 수 있도록 하는 기능을 제공하고 있다. 동적으로 들어올 부분을 폴더를 대괄호에 이름을 지어주고 사용한다. import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; // 조회 // number 부분을 변수에 담아 사용 const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; export default function StaticRoutingMovedPage() { // next.js의 라우터 사..
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 7. [Section 05-03] static-routing-board-query useQuery를 사용한 조회 해보기 import { useQuery, gql } from "@apollo/client"; // 조회 const FETCH_BOARD = gql` query { # 1번 게시글 조회 fetchBoard(number: 1) { number writer title contents } } `; export default function StaticRoutingMovedPage() { // API 요청 후 받아온 데이터를 data 에 넣어준다. const { data } = useQuery(FETCH_BOARD); console.log(data); return ( 게시글 이동이 완료되었습니다. 제목: {data.fetchBoard.title} ) } 그런데 이렇게 하면 Serve..
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 5. [Section05-02] static-routing-board 게시글 상세페이지로 라우팅 실습해보기 import { useRouter } from "next/router"; export default function StaticRoutingPage() { const router = useRouter(); const onClickMove1 = () => { router.push("/폴더/폴더1"); }; const onClickMove2 = () => { router.push("/폴더/폴더2"); }; const onClickMove3 = () => { router.push("/폴더/폴더3"); }; return ( 1번 게시글로 이동하기 2번 게시글로 이동하기 3번 게시글로 이동하기 ); }
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 5. [Section05-01] static-routing 라우팅이란? 페이지 이동을 의미 next 에서 hook을 제공한다. const router = useRouter() useRouter의 기능은 여러가지가 있는데, 그 중 하나인 router.push() 는 페이지를 이동시킨다. const router = useRouter() router.push("이동할 페이지") 예시 import { useRouter } from "next/router"; export default function StaticRoutingPage() { const router = useRouter(); const onClickMove = () => { // router.push : 페이지 이동 router.push("/이동할 페이지"); }; // 이동하기 버튼 클릭시 router..
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 5. [Section04-05] graphql-mutation-product 좀 더 복잡한 자료인 createProduct 로 graphql 심화 실습 해보기 import { useMutation, gql } from "@apollo/client"; // 세팅 const CREATE_PRODUCT = gql` # 변수의 타입 적는 곳 mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { #실제 우리가 전달할 변수 적는 곳 createProduct(seller: $seller, createProductInput: $createProductInput) { _id number message } } `; export default function GraphqlMutationPage() { ..
[Section04-04] graphql-mutation-input
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 5. [Section04-04] graphql-mutation-input 그래프큐엘 입력창 연동 실습 입력창에 입력을 하면 그걸 최종 mutation 에 보내는 것 export default function GraphqlMutationPage() { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [나의함수] = useMutation(나의그래프큐엘세팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { writer: writer, // writer state 를 넣음 title: title, // t..
비공개/강의 간단 정리(추후 복습하면서 수정) 2023. 5. 5. [Section04-03] graphql-mutation-args argu에 state값 넣어주기 mutation 의 createBoard에 바로 값을 입력하면 항상 같은 값으로 등록이 된다는 문제점이 있다. 하지만 이 값은 항상 변하므로, 이 부분을 변수에 담아서 사용하면 여러가지 데이터를 담을 수 있다. // createBoard의 괄호() 안에 변수의 타입을 꼭 입력해주어야 한다. // grayql 에서 변수는 $ 이다. (앞에 $ 를 표시) mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } const onClickSubm..

티스토리툴바