수업시간에 배운 내용

1. 정적라우팅과 동적라우팅
(1) 라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체를 말한다.
(2) 이 객체를 사용해서 A페이지에서 B페이지로 이동할 때, "B 페이지로 라우팅 한다"라고 말한다.
(3) 정적라우팅은 예를 들어 /login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다.
(4) 반면 게시판 상세보기와 같은 경우는 글 번호에 따라 주소가 변경된다. 하지만 이러한 경우에 게시글이 수백개, 수천개가 넘어가게 되면 각각의 글 번호에 따라 페이지를 만들어 정적라우팅을 해줘야한다. 이러한 문제를 효과적으로 처리하기 위해 동적라우팅을 사용한다.
(5) 사진과 같이 각각의 게시글 상세보기 페이지 주소가 부여된다.

(6) 우리가 배우는 Next.js에서는 동적 라우팅을 제공해주는데, 폴더 이름의 하위 폴더명을 대괄호로 감싸주고 만들어 준 후 이 안에 index.js 파일을 만들어주면 동적 라우팅이 사용 가능하다.
(이때 폴더명은 단순 변수명이기 때문에 어떻게 만들어도 상관은 없으나 실무에서는 boardid 이런식으로 만든다고 한다!)

2. 비동기 통신과 조건부렌더링
(1) 자바스크립트는 작성된 코드가 상단부터 순서대로 실행되기 때문에, 데이터 요청 후 응답 받기까지 화면에 그려질 내용이 undefined 이므로 에러가 발생한다. (사진참조)
(2) 이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 데이터를 그려주기 위해 조건부렌더링을 사용한다. 조건부 렌더링은 &&연산자, 삼항연산자, 옵셔널체이닝 등이 있다.
(3) 삼항 연산자

data ? data.fetchProfile : undefined

(4) && 연산자

data && data.fetchProfile

(5) 옵셔널 체이닝 (Optional-Chaining)

data?.fetchProfile

(6) 사진을 보면 어떤 것이 가독성이 좋은지 판단하면 좋을것 같다!

3. graphql mutation에 try ~ catch 적용
(1) mutation이 항상 성공하는것은 아니라고 한다. 백엔드 컴퓨터에 문제가 발생할 수도 있고, 내가 수정중인 게시물을 누가 삭제하게 되는 바람에 문제가 발생하는 등의 실패 가능성이 있다.
(2) 따라서 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야 한다.
(3) 이때 사용되는 방법은 try ~ catch 문법을 사용하면 스크립트가 죽는걸 방지하고, 에어를 잡아서(catch) 에어를 처리한다.
(4) 사진을 보면 이해하기가 좀 더 수월하다. (출처 : https://ko.javascript.info/try-catch)

(5) 주의 할점은 실행가능한 코드에서만 동작한다는 것이다. 예를 들어 중괄호 짝이 안 맞는것처럼 코드가 문법적으로 잘못된 경우는 작동하지 않는다.
(6) try ~ catch 문법에서 finally 라는 코드 절을 하나 더 가질수 있는데, 무언가를 실행하고, 실행 결과에 상관없이 실행을 완료하고 싶을때 사용하면 된다.