---------5일차---------
안녕하세요!
오늘은 라우팅의 개념과 통신중 발생하는 오류 헨들링에 대한 주제로 이야기 해보겠습니다!
주제
-페이지 이동법
-DB조회후 화면에 출력하는 법
1.페이지를 이동하자
첫번째 주제입니다!
페이지를 이동하려면 어떻게 해야할까요??
바로 라우터를 이용하면 됩니다
선언방식으로는
const router =useRouter()이런식으로 선언하는데...
사용전에 반드시 import를 해줘야겠죠??
import { useRouter } from "next/router";import이후 사용법은!
router.push("이동할 페이지") 이런식으로 사용합니다
이동할 페이지에는 /와 폴더내 위치가 들어가면 되겠죠?
router.push("/answer")이런식으로요
물론 push외에도 여러가지 사용방법이 있기때문에 이부분은 차후에 이야기 드릴수있도록 하겠습니다!
다음으로는 쿼리 사용법에 대해서 알아보겠습니다!
쿼리를 사용하는 이유!
바로!
여러개의 페이지를 제작할때 매 순간마다 폴더를 만들고 하는것은 비효율적이겠죠??
그럴때 사용하는것이 쿼리입니다!
사용방식은요 위와 비슷합니다!
단!
지원하는 라이브러리가 아폴로기에
import{useQuery} from "apollo/client"로 넣어주고요!
선언을
const{data}=useQuery("fetch_data")로 하시면 내부에서 사용할수 있게됩니다!
그럼 지난시간에 알아본 mutation과 query의 차이는 무엇일까요??
useMutation의 경우 선언후 실행 할 곳을 설정할수가 있지만
useQuery는 페이지가 열릴떄 바로 실행이 됩니다!
뿐만아니라 라우터는 다양한 기능들을 가지고 있는데요
어떤 기능들이 있을까요??
- 페이지이동
- 현재주소
- 주소 관련된 기능들
등등 주소에 관련된 기능들을 제공하고 있습니다
2.게시물을 가져오자
그럼 게시물은 어떻게 가져올까요??
backend컴퓨터에서 API를 설정해준다고 했었죠??
API에 맞게 설정을 해주면 됩니다!
어떻게 설정을 할까요??
렌더링을 통해서 가져올 수 있습니다
그런데 렌더링이 무엇일까요??
렌더링이란?
컴퓨터에게 화면에 그려달라고 요청하는것이라고 할 수 있겠습니다
랜더링방식의 종류
삼항연산자
{data ? data.fetchBoard.writer : "로딩중입니다..."}조건부 렌더링
{data && data.fetchBoard.title}optional chaining
{data?.fetchBoard.contents}이렇게 3가지가 존재합니다
라우팅은 정적라우팅과 동적라우팅으로 나뉘는데요!
어떤 기준으로 나뉘는 걸까요??
정적라우팅은
미리 폴더를 하나하나 생성해 놓고 그 안에 작성을 하여 하드코딩하는것을 말합니다
동적 라우팅은
폴더를 한개한개 생성하는것이 아니라 폴더생성시[]안에 변수를 입력하여 자동적으로
그 안에있는 파일을 불러올수 있도록 하는것 입니다!
이렇게 하면 폴더를 한개씩 만들지 않아도 되겠죠??
?Quiz
- 동적라우팅과 정적라우팅의 차이는 무엇일까요??
- 어떤게 더 효율적 일까요??
템플릿 리터럴
템플릿 리터럴이 무엇일까요?
기존의 c나 c++ 또는 Python의 경우에는 문자열 안에 변수를 입력하기 힘들었습니다
예를 들어
let myage= 100
"hello"+myage+"살이야"
//hello100살이야이렇게 입력을 해야할것입니다
하지만
빽틱 을 사용한다면 훨씬 편하게 사용할수가 있는데요 그 방법이 바로 템플릿 리터럴이라고 하는 방식입니다
let myage=100
`hello${myage}살이야`출력값은같은데 훨씬 보기 쉽고 이해하기 쉽죠??
이와같이 훨씬 눈에보이기 쉽게 지원되는것이 바로 템플릿 리터럴이라는 기술입니다
저희가 시멘틱하게 코딩을 할때 사용하면 유용하고 매 순간순간마다 +를 써주는것보다 훨씬 좋곘쬬??
3.API요청시 에러가 났어요(error handling)
이어서 error handling하는 방법에 대해서 이야기를 해보겠습니다
바로 try ~catch 문을 사용하는데요!
try ~catch문을 사용하게 되면
에러가 발생시 서비스가 중단이 되는것이 아니라 에러 발생시 응답을 지정할수 있게됩니다!
만약 이 구문 안에 error를 입력하게되면
어떤 부분에서 오류가 발생했는지 또한 알수 있겠죠??
그렇게 된다면 에러 발생지점을 알기에 해결책도 알기 쉬울것 입니다
오늘은 간단하게 몇가지 주제들의 개념에 대해서 이야기를 드렸는데요
부족한 부분들은 제가 조금더 공부해서 채워볼게요!
오늘도 봐주셔서 감사합니다!
