얕은 복사와 깊은 복사
객체나 배열은 일반 변수 선언할 때와는 다르게 일반적인 데이터 값이 아닌 주소값으로 저장이 된다.
만약 배열 안에 객체가 있고, 그 안에 또 객체가 들어가있는 경우를 예로 들어보자.
1. 얕은 복사
const child1 = {
name:{first:"김", last:"철수"},
age:13,
school:"다람쥐초등학교"
}
const child2 = {...child1}
child2
{name: {…}, age: 13, school: "다람쥐초등학교"}
age: 13
name: {first: "김", last: "철수"}
school: "다람쥐초등학교"
child1을 선언한 후 child2에 다시 child1을 할당했다.
child2의 name 의 성을 "김"에서 "남궁"으로 바꾸고 싶다. 그럼 child2의 성은 남궁으로 바뀌어있을 것이다.
child2.name.first = "남궁"
child2
{name: {…}, age: 13, school: "다람쥐초등학교"}
age: 13
name: {first: "남궁", last: "철수"}
school: "다람쥐초등학교"그런데 여기서, child1의 성을 다시 확인해보자.
child1
{name: {…}, age: 13, school: "다람쥐초등학교"}
age: 13
name: {first: "남궁", last: "철수"}
school: "다람쥐초등학교"나는 child2의 내용만 바꿨는데, child1 의 성까지 바뀌어있다. 이는 객체 안의 객체까지는 복사하지 못했기 때문인데, 결국 객체 안의 객체는 주소값으로 저장되어 있어 그대로 불러왔기 때문에 생기는 경우이다. 이 경우를 '얕은 복사'라고 한다.
2. 깊은 복사
그럼 객체 안에 객체까지 다른 주소값으로 만들어 복사하려면 어떻게 해야할까.
여기서 JSON.stringfy()와 JSON.parse()를 사용한다.
JSON.stringify()
JavaScript 값이나 객채를 JSON 문자열로 변환.
"{\"name\":{\"first\":\"최\",\"last\":\"철수\"},\"age\":13,\"school\":\"다람쥐초등학교\"}"JSON.parse()
문자열을 분석하고 결과에서 JS값이나 객체를 생성.
JSON.parse(JSON.stringify(child1))이걸 적용해서 위에서 했던 것 처럼 다시 복사해보자.
const child1 = {
name:{first:"김", last:"철수"},
age:13,
school:"다람쥐초등학교"
}
const child2 = JSON.parse(JSON.stringify(child1))
child2.name.first = "남궁"
child1
{name: {…}, age: 13, school: "다람쥐초등학교"}
age: 13
name: {first: "김", last: "철수"}
school: "다람쥐초등학교"
child2
{name: {…}, age: 13, school: "다람쥐초등학교"}
age: 13
name: {first: "남궁", last: "철수"}
school: "다람쥐초등학교"
객체 안의 모든 데이터를 문자열로 변경하여 데이터화 후 다시 객체로 변경했다. 이렇게 강제로 완전히 복사하는 경우를 '깊은 복사' 라고 한다.
2.Router 라우터
next의 기능인 것 같다.
라우터객체
페이지 이동과 관련된 기능을 가지고 있는 객체.
import Router from 'next/router'
export default function Routing() {
const handleClickPathname = () => {
const pathname = Router.pathname
alert(pathname)
}
const handleClickPush = () => {
Router.push('/')
}
<button onClick={handleClickPush}></button><br/>여기서 사용한 객체는 Router.push()이며, 클릭을 하면 현재 페이지에서 다른 페이지로 이동한다.
현재 위치 주소: Router.pathname
현재 위치 주소: Router.asPath
뒤로가기 버튼: Router.back()
현재 페이지에서, 다른 페이지로 이동: Router.push()
새로고침: Router.reload()
현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace()
https://nextjs.org/docs/api-reference/next/router
이 사이트에서 다른 객체도 확인 가능하다.
라우팅
라우팅에는 정적라우팅과 동적라우팅이 있다.
정적라우팅
Login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다-> "정적 라우팅한다"
동적라우팅
게시판 상세보기와 같은 경우, 글 번호에 따라 주소가 바뀐다.
/board/1 -> 1번글
/board/2 -> 2번글
/board/3 -> 3번글
.
.
이렇게 해당 페이지로 이동한다 -> 동적 라우팅한다
3.apollo-client 로 graphql 쿼리 실행
graphql 요청에 필요한 도구 불러오기.
import { useQuery, gql } from '@apollo/client'graphql 코드 생성하기
const FETCH_BOARD = gql`
query fetchBoard($name: String){
fetchBoard(name: $name)
(boardId:1
){
writer
title
contents
}
}
`graphql 코드 실행을 위한 query 생성 및 생성된 query 실행.
const{data} = useQuery(FETCH_BOARD)결과 보여주기
이름:<div>{data && data.fetchProfile.name}</div>
내일 할일
숙제 앞단계에서 막혀 시간이 당일 블로그 작성을 못했다.
이번주 배운 내용들을 처음부터 주말에 작업해봐야겠다.
