2023.3.17 TIL

Junghan Lee·2023년 3월 17일

TIL Diary

목록 보기

19/52


export default function Routing() {
    const handleClickPathname = () => {
        const pathname = Router.pathname
        alert(pathname)
    }

    const handleClickAsPath = () => {
        const asPath = Router.asPath
        alert(asPath)
    }

    const handleClickBack = () => {
        Router.back()
    }

    const handleClickPush = () => {
        Router.push('/')
    }

    const handleClickReload = () => {
        Router.reload()
    }

    const handleClickReplace = () => {
        Router.replace('/')
    }


    return (
      <>
        <button onClick={handleClickPathname}>현재 위치 주소: Router.pathname</button><br/>
        <button onClick={handleClickAsPath}>현재 위치 주소: Router.asPath</button><br/>
        <button onClick={handleClickBack}>뒤로가기 버튼: Router.back()</button><br/>
        <button onClick={handleClickPush}>현재 페이지에서, 다른 페이지로 이동: Router.push()</button><br/>
        <button onClick={handleClickReload}>새로고침: Router.reload()</button><br/>
        <button onClick={handleClickReplace}>현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace()</button><br/>
      </>
    )
  }

정적 라우팅

/login 페이지는 항상 로그인 페이지가 나옴
localhost3000/boards/1
이런 페이지로 이동 : 정적 라우팅

동적 라우팅

게시판 상세보기같은 경우, 글 번호에 따라 주소 변경
/board/1, /board/100 : 동적 라우팅

next.js에서 동적 라우팅 제공
보여주고자 하는 폴더의 하위 폴더로 [boardId]폴더 만들어준 후
이 안에 index.js 파일 만들어주면 동적 라우팅 사용 가능

대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 페이지 번호, 혹은 게시글 번호가 대괄호 안에 쓰여진 변수명에 담겨 그 변수 안에 있는 데이터를 꺼내 조회할 수 있다.(대괄호 안에 쓰여지는 폴더 이름은 단순한 변수명)
대괄호 - 주소로 보지 않겠다. 변수로 보겠다.
/boards/170 -> 170은 []안의 변수에 저장, []폴더의 index.js에 이동하게 됨 []폴더에 index.js를 한개만 만들어 놓고 1이면 1번 게시물 5면 5번 게시물 이렇게 넘어가게 된다.
=> 이 과정을 돕는 것 : 라우터 객체

router.query = {boardId: 1} 자동으로 게시글 번호 꺼내올 수 있다.

비동기 통신과 조건부 렌더링

js에서는 위에서부터 차례대로 실행 => 데이터 요청 & 응답 받을 동안 화면에 그려질 데이터의 내용 : undefined -> 첫 화면이 그려지는 시기에 데이터 불러오면서 에러 발생 -> 화면을 미리 그려놓고 데이터를 그려주기 위해 조건부렌더링

조건부렌더링의 종류

삼항 연산자 : 제일 처음에 쓴 것, data가 오기 전에 return 부분에서 이미 rendering 해주고 있음 -> 삼항 연산자 사용해 있을 때, 없을 때 모두 적어줘야 했다.

data ? data.fetchProfile : undefined
&& 연산자
삼항 이후 && 연산자 등장, 데이터 없을 경우 자동으로 undefined 반환, 데이터 없을 때 따로 div쓸 필요 없으면 else 쓸 필요 없다. &&은 앞의 값이 true일 경우에만 뒤의 값을 보여줌.

 data && data.fetchProfile

앞이 거짓일 때 뒤의 값을 보여주는 경우는?
Nullish coalescing 연산자(??,||)
?? : 앞의 값이 빈 값(null,undefined만, false,0등은 앞 반환)이면 뒤의 값 보여줌- 빈값인지 아닌지 명확히 구분하는 용도
, || : 앞이 거짓이면 뒤(디폴트 설정 - 값 없으면 기본값 보여줘)

data ?? data.fetchProfile //앞이 null, defined일 경우에만
 뒤를 반환한다.

data || data.fetchProfile // 앞이 falsy한 값일 때 뒤를 반환
 값이 없니? 없으면 data(기본값) 보여줘.

옵셔널 체이닝
기존의 && 연산자를 쓰면서 길어진 코드를 더욱 간결하게 사용
data?.fetchProfile
optional-Chaining은 ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined return (삼항, && 연산자와 동일한 기능)

?? optional chaining 이 데이터가 들어올 때까지 기다려 줄까?
기다려주는게 아님. 데이터가 없을 때는 undefined 리턴했다가 데이터가 들어오면 들어온 데이터를 가지고 화면을 다시 렌더링; 리렌더링
?? optional chaining 언제 사용할까?
데이터를 화면에 렌더링할 때 사용
백엔드와 통신해 받아오는 데이터 - 시간이 걸림 ; 옵셔널 체이닝 이용 필요

graphql mutation에 try~catch 사용

mutation이 항상 성공하진 않는다
백엔드 컴 문제, 내가 수정하려는 게시물이 갑자기 삭제되는 등 여러 실패 가능성 있다.
-> 성공에 대한 처리, 실패에 대한 처리 나누어 작업해야 함

try {
		await createBoard({
				variables: {
						aaa: "훈이",
						bbb: "1234",
						ccc: "안녕하세요 훈이에요",
						ddd: "반갑습니다"
				}
		})

} catch(error) {
		alert(error.message)     // 경고창(실패했습니다.)  ==>  백엔드 개발자가 보내주는 실패 메시지
} finally {
	// 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분
	// 필요없다면 생략 가능
}

위와 같이 catch뒤 에러 메시지, finally(필요없으면 생략) 뒤 무조건 실행

shorthand property
객체를 정의할 때 객체의 key 값과 value 값이 같으면 각각 표기하지 않고 한번만 표기하는 것

const result = await createUseditem({
        variables: {
          createUseditemInput: {
            name         // name: myName
            remarks      // remarks: myRemarks
            contents.    // contents: myContents
            },
          },
        },
      });