2022_01_14

⚙︎ Try ~ catch

우리가 mutation이나 query를 보낼때 항상 성공하라는 보장은 없다. 백엔드 컴퓨터에 정전과같은 예상치 못한 일이 발생할 수도 있고 수정이나 조회를 할때 게시물이 삭제가 되는 바람에 문제가생길수도 있다. 이러한 경우를 대비해 우리는 오류발생시 Client에게 이를 알려줄 처리를 해야한다. 이떄 적용할 수 있는 것이 Try와 catch이다.

	try{
   	    const onClickSubmit = async () => {
            const result = await createProduct({
                 variables: {
                     seller: seller,
                     createProductInput: {
                         name: name,
                         detail: contents,
                         price: price
                    }
                }
            })
     	}
    	} catch(error) {
       	 	alert(`${error.message}의 이유로 실패하였습니다.`)
    	} finally {
         ...
     	}

Try ~catch를 적용하면 먼저 try이 안에있는 코드를 실행하게된다. 이때 block 안에서 예외가 발생하면 catch로 넘어가 실행하게된다. 마지막으로 final-block은 위의 결과에 상관없이 항상 실행하게 된다.

⚙︎ Router Object & Routing

Router객체는 페이지 이동과 같은 기능을 갖고있는 객체이다. 예를들어 우리가 A라는 naver 홈화면에서 관련기사를 누르면 B라는 관련기사 페이지로 화면이 변한다. 이와같이 페이지를 이동할 수 있는 기능을 해주는 것이 Router이며 A에서 B로 Routing한다 라고 표현한다.

⚙︎ Static Routing & Dynamic Routing

유저가 게시판에 게시글을 작성하려고 게시글 작성이라는 버튼을 클릭했다 가정하자. 이떄 게시글 작성과 같은 화면은 DB에서 데이터를 꺼내올 필요없이 바로 Client에게 보이게 할 수 있다. 이러한 페이지에 라우팅을 할 경우 우리는 '정적 라우팅'을 했다고 한다. 이와 반대로 유저가 게시글 조회를 한다면 우리는 요청사항에 맞는 데이터를 DB에서 받아와 그 정보를 유저에게 보여주어야한다. 이러한 페이지로 이동하는 것을 '동적 라우팅'이라 한다.
이러한 동적 라우팅을 구현할 때 우리는 폴더명을 [ ] 로 감싸야한다. (ex) [ folder_name]). 이때 [ ] 안에는 우리가 동적 라우팅을 하기위해 사용했던 data가 변수로 담기게된다.

⚙︎ Optional Chaining

우리가 Backend에게 어떠한 정보를 요청하였을 떄 우리가 요청한 데이터 중 특정 정보가 (삭제와 같은 이유로) 없을 수 있다. 이러한 경우 에러를 발생시키게 되는데 우리는 이를 방지하기 위해 && 연산자를 사용한다.

<div> {data && data.fetchBoard.contents} </div>

&& 연산자 같은 경우 위와같이 data를 한번 더 써야하는 번거로움이 있다. 이를 위해 '?'를 사용하는 방법이 나왔는데 이를 optional chaining이라 한다.

 <div> {data?.fetchBoard.contents} </div>