강생강의 하루

[GraphQL] 쿼리 실행 과정과 리졸버

생강강 — Thu, 16 Sep 2021 00:13:25 +0900

쿼리 실행 과정

모든 GraphQL 쿼리는 parsed, validated, executed 과정을 통해 실행이 된다.

먼저 GraphQL 쿼리의 기본적인 형태는 다음과 같다.

query GetUser($userId: ID!) {
  user(id: $userId) {
    id,
    name,
    isViewerFriend,
  }
}

이 쿼리를 실행시키기 전에 파싱하여 AST(Abstract Syntax Tree)로 만드는 작업을 거친다. ~~Babel이나 EsLint도 해당 작업을 거친다.~~ 파싱된 AST는 다음과 같다.

그 이후에는 해당 쿼리가 유효한지 validation 과정을 거친다. 스키마에서 정의된 필드가 없거나 잘못 됐을 경우 등을 검증하는 과정이다. 그리고 AST를 기반으로 트리의 루트부터 리졸버를 실행시킨다. 그리고 리졸버에서 리턴하는 결과물을 통해 JSON 형태로 만든다.

리졸버

리졸버는 스키마에 작성한 타입의 필드 값들을 정의한다. 즉, 특정 필드의 데이터를 반환하는 함수이다.

스키마는 객체를 리턴할 수도 있고, String, Int, Boolean 등과 같이 scalar 값들도 리턴할 수 있다. 객체가 리턴 될 경우에는 자식 필드(child field)로 체이닝 되면서 리졸버가 실행되고, scalar가 리턴 될 경우 실행이 완료된 것으로 간주한다. 또한 null이 리턴 되어도 종료된다.

또한 리졸버는 비동기적으로 실행이 되며, DB 등 여러 데이터 소스에 접근이 가능하다.

type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  age: Int
  name: String
}

위와 같이 스키마가 정의되어 있다고 하자. 그리고 리졸버를 다음과 같이 작성할 수 있다.

const resolvers = {
  Query: {
    user(parent, args, context, info) {
      return users.find(user => user.id === args.id)
    }
  }
}

가장 기본적인 리졸버의 형태이다. 리졸버 함수를 살펴보면 네 개의 인자를 받고 있는 것을 볼 수 있다.

이처럼 모든 리졸버는 parent, args, context, info 네 개의 인자를 받는다. parent는 이전/부모 필드의 결과 값이 담겨 있고 이를 통해 체이닝이 일어난다. args는 필드로 넘겨진 인자 값들이 담겨 있으며 주로 비구조화 할당을 통해 사용한다. context는 모든 리졸버 함수에 제공되는 mutable한 객체가 담겨있다. 마지막으로 info는 쿼리와 관련된 특정 필드에 대한 정보가 담겨있다.

Default Resolver

const users = [
  {
    id: '1',
    age: 21,
    name: 'mori nana',
  },
  {
    id: '2',
    age: 23,
    name: 'hirose suzu',
  }
];

const resolver = {
  Query: {
    user(parent, args, context, info) {
      return users.find(user => user.id === args.id)
    }
  },
  User: {
    age(parent, args, context, info) {
      return parent.age
    },
    name(parent, args, context, info) {
      return parent.name
    },
  }
}

GraphQL 서버는 모든 필드에 대해 default resolver를 만들어 둔다. default resolver는 parent객체에서 필드와 같은 이름을 가진 프로퍼티를 찾아 리턴한다.

리졸버 체인

공식 문서에 있는 예시를 보면서 이해를 해보자.

const libraries = [
  {
    branch: 'downtown'
  },
  {
    branch: 'riverside'
  },
];

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
    branch: 'riverside'
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
    branch: 'downtown'
  },
];

const typeDefs = gql`
  type Library {
    branch: String!
    books: [Book!]
  }

  type Book {
    title: String!
    author: Author!
  }

  type Author {
    name: String!
  }

  type Query {
    libraries: [Library]
  }
`;

const resolvers = {
  Query: {
    libraries() {
      return libraries;
    }
  },
  Library: {
    books(parent) {
      return books.filter(book => book.branch === parent.branch);
    }
  },
  Book: {
    author(parent) {
      return {
        name: parent.author
      };
    }
  }
};

libraries, books와 같이 필요한 데이터들은 하드코딩 했다. 스키마와 리졸버 위와 같은 상태에서 아래와 같은 쿼리를 실행시켜본다고 하자.

query GetBooksByLibrary {
  libraries {
    books {
      author {
        name
      }
    }
  }
}

쿼리가 실행이 되면 루트 쿼리에 대한 리졸버가 실행이 될 것이고, 위에서 libraries가 리턴이 될 것이다. 리턴된 libraries객체는 Library타입 리졸버의 parent에 담기게 되고, books필드에서 참조할 수 있다. 똑같은 방식으로 books에서 리턴한 객체는 Book의 author필드에서 parent로 참조가 가능하다. 마지막으로 author필드에서 name프로퍼티를 가진 객체를 리턴하는 것을 볼 수 있는데, 이렇게 되면 위에서 설명한 Author타입의 name필드의 default resolver가 parent객체의 name프로퍼티 값을 리턴하게 된다. 그리고 String 형태인 Scalar 값이 리턴되었으므로 리졸버 체인이 종료된다.

참고

[JavaScript] 드래그 앤 드롭 구현하기

생강강 — Wed, 15 Sep 2021 19:35:39 +0900

이번 포스팅에서는 JavaScript를 사용해 아래와 같은 드래그 앤 드롭을 구현해 볼 것이다.

드래그 앤 드롭을 구현할 때는 draggable 속성과 dragstart, dragend 이벤트를 사용한다. draggable 속성은 Boolean 값이며 true일 경우 요소를 드래그 할 수 있다.

먼저 기본 html과 css이다.

<body>
  <div class="container">
    <button class="draggable" draggable="true"> </button>
    <button class="draggable" draggable="true"> </button>
  </div>
  <div class="container">
    <button class="draggable" draggable="true"> </button>
    <button class="draggable" draggable="true"> </button>
  </div>
  <script src="main.js"></script>
</body>

body {
  margin: 0;
  padding: 0;
  background-color: #3d4e56fa;
  display: flex;
}

button {
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 8px;
  margin: 12px;
  cursor: move;
  font-size: 30px;
  background: #eaeaea4f;
}

.container {
  margin: 10px;
  padding: 10px;
  background-color: #b5c1dc57;
  border-radius: 8px;
}

.draggable.dragging {
  opacity: 0.5;
}

처음에는 두 개의 container에 버튼이 각각 두 개씩 있다. 버튼의 개수는 물론, container의 개수는 상관이 없다. 드래그 할 요소인 버튼이 어떤 container에 들어가는지 계속해서 확인해 줄 것이기 때문에 container는 1개로 해도 되고 10개로 해도 괜찮다.

그리고 기본적인 스타일을 해준다. cursor에 move라는 값을 주면 해당 요소가 드래그 될 수 있다고 표시를 해준다. 그리고 현재 드래그 하고 있는 요소를 나타내기 위해 opacity 설정을 해주자.

다음은 이제 각 요소와 컨테이너에 이벤트 리스너를 달아줄 차례이다.

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");

draggables.forEach(draggable => {
  draggable.addEventListener("dragstart", () => {
    draggable.classList.add("dragging");
  });

  draggable.addEventListener("dragend", () => {
    draggable.classList.remove("dragging");
  });
});

containers.forEach(container => {
  container.addEventListener("dragover", e => {
    e.preventDefault();
    const draggable = document.querySelector(".dragging");
    container.appendChild(draggable);
  });
});

각 버튼에는 dragstart와 dragend를 달아주고, 드래그가 시작되면 해당 요소에 dragging이라는 클래스명을 추가시키고 끝나면 삭제한다. 컨테이너에는 dragover이벤트를 달아주고, 드래그하고 있는 요소가 해당 컨테이너 위에 있을 경우 자식으로 이어 붙인다.

여기까지 했으면 다음과 같이 동작할 것이다.

이제 구현해야 할 것이 드래그하는 요소가 다른 요소 사이에 들어가는 것이다. getDragAfterElement라는 함수를 만들 것이다.

function getDragAfterElement(container, x) {
  const draggableElements = [
    ...container.querySelectorAll(".draggable:not(.dragging)"),
  ];

  return draggableElements.reduce(
    (closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = x - box.left - box.width / 2;
      // console.log(offset);
      if (offset < 0 && offset > closest.offset) {
        return { offset: offset, element: child };
      } else {
        return closest;
      }
    },
    { offset: Number.NEGATIVE_INFINITY },
  ).element;
}

다른 요소 사이에 들어가기 위해서는 다른 요소들과 현재 드래그 하고 있는 요소의 상대적 위치를 알아야 한다. 그게 바로 위에서 offset이다. draggableElements에 컨테이너에서 드래그 하고 있지 않은 요소들을 담는다. 그리고 그 요소들의 offset를 통해 드래그 하고 있는 요소가 어떤 요소 앞에 들어가야 하는지 알려줄 것이다.

box에는 getBoundingClientRect값으로 각 요소의 위치 값이나, height, width 값들이 들어가있다.

이 box의 left와 width, 드래그 하고 있는 요소의 X값을 비교하여 offset값을 도출해낼 수 있다. 실제로 offset값을 찍어보면 드래그를 하고 있는 요소가 box의 가운데를 기준으로 왼쪽에 있으면 음수 값, 오른쪽에 있으면 양수 값을 가지게 된다.

우리는 드래그를 통해 놓을 위치의 오른쪽 요소만 알아내면 된다. 즉, offset 값이 음수를 갖게 되면 된다. 그리고 closest를 통해 어디에 더 가까운지 알아낼 수 있게 된다.

그리고 getDragAfterElement에서 반환된 element는 컨테이너의 이벤트 리스너에서 받아와 남은 작업들을 처리한다.

containers.forEach(container => {
  container.addEventListener("dragover", e => {
    e.preventDefault();
    const afterElement = getDragAfterElement(container, e.clientX);
    console.log(afterElement)
    const draggable = document.querySelector(".dragging");
    container.appendChild(draggable);
  });
});

요소들을 드래그하면서 afterElement를 보면 현재 위치에서 가장 가까운 오른쪽 요소를 나타내는 것을 알 수 있다. 드래그 하고 있는 요소가 가장 오른쪽에 있을 경우(오른쪽에 다른 요소가 없을 경우)에는 element 프로퍼티가 없기 때문에 undefined일 것이다. 따라서 다음과 같이 해줄 수 있다.

containers.forEach(container => {
  container.addEventListener("dragover", e => {
    e.preventDefault();
    const afterElement = getDragAfterElement(container, e.clientX);
    const draggable = document.querySelector(".dragging");
    if (afterElement === undefined) {
      container.appendChild(draggable);
    } else {
      container.insertBefore(draggable, afterElement);
    }
  });
});

가장 오른쪽에 있을 경우(마지막 순서일 경우) appendChild로 마지막에 이어 붙이고, 아닐 경우 afterElement가 가리키는 요소 앞에 삽입한다.

참고

https://www.youtube.com/watch?v=jfYWwQrtzzY

자바스크립트 코드를 더 깔끔하고 보기 좋게 작성하는 팁

생강강 — Tue, 10 Aug 2021 17:43:14 +0900

유튜브를 보다가 엘리님이 자바스크립트를 프로처럼 쓰는 팁에 관한 영상을 올리신걸 봤다. 마침 최근에 비슷한 주제의 블로그 글을 본 적이 있어서 이참에 같이 정리를 하려고 한다.

이 글에서 소개하는 팁들

1. 배열 비우기

2. 한 번만 실행시키는 이벤트 리스너

3. 'defer' 속성을 사용하자

4. 간결한 조건 체크(&&)

5. 범위 내의 랜덤 숫자

6. 빈 객체 검사하기

7. 배열 내 중복 원소 제거

8. 객체 복사하기

9. 삼항 연산자

10. Nullish coalescing 연산자(??)

11. Default Parameter

12. Logical OR 연산자(||)

13. Spread 연산자(...)

14. Optional Chaining(?)

1. 배열 비우기

원소가 있는 배열을 빈 배열로 만들고자 할 때는 length에 0을 주기만 하면 된다.

let foo = ['morinana', 'gintoki', 'kagura', 'hina']
foo.length = 0

console.log(foo) // []

2. 한 번만 실행시키는 이벤트 리스너

이벤트 리스너는 바닐라 JS 뿐만 아니라 React, Angular와 같은 프레임워크에서도 많이 사용된다. 버튼 클릭을 예로 들자. 보통은 버튼을 누를 때마다 특정 로직을 실행되게 이벤트 리스너를 단다. 근데 만약 딱 한 번만 실행되게 하고 싶다면, 가능할까? 옵션 하나로 가능하다.

const button = document.querySelector('button');

button.addEventListener('click', () => {
    console.log('한 번만 실행');
},{ once: true })

3. 'defer' 속성을 사용하자

자바스크립트 코드는 HTML 파일에서 script태그를 통해 다운로드되고 실행된다. 만약 head 태그 안에 script가 삽입되었다고 한다면, 어떻게 될까. 자바스크립트 파일이 간단하고 용량이 작으면 큰 차이를 못느끼겠지만 길고 엄청나게 클 경우에는 애플리케이션의 속도가 현저히 저하될 것이다. HTML 파일을 파싱할 때 script태그를 만나면 HTML 파싱하는 것을 멈추고 script를 실행시키기 때문이다. 그래서 보통 body 태그 맨 밑에 script 태그를 두곤한다.

하지만 defer속성을 사용하면 이럴 필요가 없다. 결론부터 말하자면 defer속성을 통해 script태그를 선언하면 head태그 안에 작성하든, body안에 작성하든, HTML를 파싱하면서 동시에 script태그를 통해 자바스크립트 파일을 다운로드 시킬 수 있다. 그리고 HTML 파싱이 끝나면 다운로드된 자바스크립트를 실행시킨다. 즉 script때문에 HTML 파싱이 멈추지 않게 되어 더이상 사용자가 빈 화면을 보지 않게 할 수 있다.

<script src="main.js" defer></script>

4. 간결한 조건 체크(&&)

어떠한 조건을 체크할 때는 if 대신 &&연산자를 통해 좀 더 깔끔하게 작성할 수 있다.

let condition = true

//  
if (condition) {
  foo()
}

//  
condition && foo()

5. 범위 내의 랜덤 숫자

특정 범위 내에서 랜덤한 숫자를 간단하게 얻을 수 있다.

function randomNumber(num1, num2) {
    return Math.random() * (num2 - num1) + num1
}

console.log(randomNumber(50, 100))

6. 빈 객체 검사하기

객체가 비어있는지 아닌지 검사할 때는 Object.entries() 메서드를 통해 쉽게 확인이 가능하다.

let foo = {
  name: 'morinana',
  occupation: 'actor'
}
let bar = {}

console.log(Object.entries(foo).length === 0) // false
console.log(Object.entries(bar).length === 0) // true

7. 배열 내 중복된 원소 필터링

중복 원소를 제거할 때는 Set을 사용하자.

let foo = ['morinana', 'gintoki', 'kagura', 'hina', 'gintoki', 'morinana']

console.log([...new Set(foo)]) // ['morinana', 'gintoki', 'kagura', 'hina']

8. 객체 복사하기

자바스크립트에서 객체는 참조 타입이기 때문에 =로 객체를 복사할 경우 원하지 않은 결과를 보게될 것이다. 올바르게 객체를 복사하기 위해서는 아래와 같은 3가지 방법 중 하나를 사용한다.

let foo = {
  name: 'morinana',
  occupation: 'actress'
}

// Object.assign() 메서드
const cloneFoo1 = Object.assign({}, foo)

// JSON
const cloneFoo2 = JSON.parse(JSON.stringify(foo))

// Spread 연산자
const cloneFoo3 = { ...foo }

9. 삼항 연산자

어떤 로직에서 두 가지 조건에 의해 결과가 나눠진다면 삼항 연산자를 사용하자.

//  
function getResult(n) {
  let result
  if (n > 5) {
    result = ' '
  } else {
    result = ' '
  }
  
  return result
}

//  
function getResult(n) {
  return n > 5 ? ' ' : ' '
}

10. Nullish coalescing 연산자(??)

null이거나 undefined일 경우를 체크할 때는 ??연산자를 사용하자. ??연산자 기준 왼쪽 값이 null이거나 undefined일 경우 오른쪽 값을 채택한다.

//  
function printMsg(text) {
  let msg = text
  if (text === null || text === undefined) {
    msg = '❌'
  }
  console.log(msg)
}

//  
function printMsg(text) {
  const msg = text ?? '❌'
  console.log(msg)
}

11. Default Parameter

함수 파라미터의 기본 값을 설정할 수 있다. 이때 이 Default Parameter는 undefined일 때만 적용이 된다.

function printMsg(text = '❌') {
  console.log(text)
}

12. Logical OR 연산자(||)

||연산자 기준 왼쪽 값이 falsy일 경우 오른쪽 값을 채택한다. falsy에는 null, undefined 뿐만 아니라 0, -0, '', false 등도 포함된다.

function printMsg(text) {
  const msg = text || '❌'
  console.log(msg)
}

13. Spread 연산자(...)

객체의 프로퍼티를 업데이트 하거나 기존 객체를 그대로 사용하면서 새로운 객체를 만들때는 Spread 연산자를 사용하자. 여러 개의 객체를 한 객체로 묶는 것도 가능하다.

const movie = { name: 'lastletter', year: '2020' }
const detail = { actress: 'morinana', genre: 'drama', director: 'iwaishunji' }

//  
movie['genre'] = detail.genre

//  
const newMovie = {
  name: movie.name,
  year: movie.year,
  actress: detail.actress,
  genre: detail.genre,
  director: detail.director
}

//  
const newMovie2 = Object.assign(movie, detail)
console.log(newMovie2)  // { name: 'lastletter', year: '2020', actress: 'morinana', genre: 'drama', director: 'iwaishunji' }

//  
const newMovie3 = { ...movie, ...detail, actress: 'hirosesuzu' }
console.log(newMovie2)  // { name: 'lastletter', year: '2020', actress: 'hirosesuzu', genre: 'drama', director: 'iwaishunji' }

14. Optional chaining(?)

특정 값이나 조건들의 값이 유효한지 여러개 나열해서 검사할 때는 Optional Chaining을 사용하자.

const nana = {
  age: 19
}

const suzu = {
  age: 23,
  job: {
    title: 'actress'
  }
}

//  
function displayJobTitle(person) {
  if (person.job && person.job.title) {
    console.log(person.job.title)
  }
}

//  
function displayJobTitle(person) {
  if (person.job?.title) {
    console.log(person.job.title)
  }
}

displayJobTitle(nana) // undefined
displayJobTitle(suzu) // actress

참고

[프로그래머스] 표 편집 / Python / 2021 카카오 채용연계형 인턴십

생강강 — Wed, 21 Jul 2021 01:33:18 +0900

https://programmers.co.kr/learn/courses/30/lessons/81303

코딩테스트 연습 - 표 편집

8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z"] "OOOOXOOO" 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z","U 1","C"] "OOXOXOOO"

programmers.co.kr

Solution

def solution(n, k, cmds):
    nodes = {0: [n-1, 1]}
    for i in range(1, n):
        if i == n-1:
            nodes[i] = [i-1, 0]
        else:
            nodes[i] = [i-1, i+1]
            
    stack = []
    for cmd in cmds:
        if len(cmd) > 1:
            c, x = cmd.split(' ')
            cnt = 0
            # "D X"
            if c == 'D':
                while cnt < int(x):
                    k = nodes[k][1]
                    cnt += 1
            # "U X"
            else:
                while cnt < int(x):
                    k = nodes[k][0]
                    cnt += 1
        else:
            # "C"
            if cmd == 'C':
                nodes[nodes[k][0]][1] = nodes[k][1]
                nodes[nodes[k][1]][0] = nodes[k][0]
                stack.append([k, nodes[k]])
                tmp = nodes[k]
                del nodes[k]
                
                if tmp[1] == 0:
                    k = tmp[0]
                else:
                    k = tmp[1]
            # "Z"
            else:
                curr_node, val = stack.pop()
                prev_node, next_node = val
                nodes[curr_node] = [prev_node, next_node]
                nodes[prev_node][1] = curr_node
                nodes[next_node][0] = curr_node
    
    result = ''
    for i in range(n):
        if nodes.get(i) is None:
            result += 'X'
        else:
            result += 'O'
    
    return result

이 문제는 n이 1,000,000에 cmd가 200,000이므로 효율성까지 통과하려면 배열로는 어림도 없다. 그래서 처음 봤을 때 링크드리스트로 풀어야겠다는 생각을 했다.

그렇게 처음에는 노드 클래스를 만들고 링크드리스트를 구현해가며 풀었다. 근데 이렇게 풀면 고려해야할게 한 두개가 아니였다. 각 행을 삭제하거나 삽입할 때 해당 노드와 이전 노드, 다음 노드를 다 기억해야하고 현재 가리키고 있는 노드와 k값을 관리하기도 해야했다. 점점 코드가 길어지고 100줄이 넘어갔다. 뭐..맞기만하면 괜찮다고 생각했기때문에 제출했는데 아주 혼쭐이 났다. 여러 테스트케이스 만들어서 추가해봤는데 다 통과하기도 하고 문제를 못 찾겠어서 접근방식을 바꿔야겠다고 생각했다.

바꾼게 위의 풀이이다. 링크드리스트를 dict로 표현했다. 코드도 훨씬 간결하고 무엇보다 쉽게 구현할 수 있다. dict에서 한 원소가 노드를 가리키고 key는 행 번호를, value는 이전 노드의 번호와 다음 노드의 번호를 배열 형태로 담았다.

nodes = {0: [n-1, 1]}
for i in range(1, n):
    if i == n-1:
        nodes[i] = [i-1, 0]
    else:
        nodes[i] = [i-1, i+1]

이때, 첫 번째 노드의 이전 노드는 마지막 노드를 가리키고 마지막 노드의 다음 노드는 첫 번째 노드를 가리키는 원형 구조를 갖는 것에 주의한다. 아래와 같은 형태이다.

출처: https://aerocode.net/181

그리고 각 커맨드 별로 코드를 구현해보자. 먼저 D와 U이다. 이 둘은 현재 가리키고 있는 노드를 조작한다. 단순하게 k값을 가지고 숫자만 더해줬는데 이렇게 하면 dict에서 없는 노드를 참조할 수 있기 때문에 잘못된 방법이다.

dict로 구현한 링크드리스트에서는 이전 노드와 다음 노드의 번호를 알고 있기 때문에 그 번호를 타고타고 올라가거나 내려가면 된다.

if len(cmd) > 1:
    c, x = cmd.split(' ')
    cnt = 0
    if c == 'D':
        while cnt < int(x):
            k = nodes[k][1]
            cnt += 1
    else:
        while cnt < int(x):
            k = nodes[k][0]
            cnt += 1

위처럼 cnt변수를 하나 생성해서 현재 노드에서 x번 만큼 이동하면 된다. D일 경우 다음 노드로 이동하면 되고 U일 경우 이전 노드로 이동하면 된다.

예를 들어 예제에서 처음 k가 2이므로 두 번째 노드를 가리키고 있을 것이다. 다음 커맨드가 "D 2"일 경우 두 번째 노드에서부터 2번만 다음 노드로 가면된다.

다음 커맨드는 C이다. 해당 커맨드에서 핵심은 삭제이다. 링크드리스트에서 삭제 연산은 그렇게 어렵지 않다. 이전 노드의 next가 삭제될 노드의 다음 노드를 가리키게 하고, 다음 노드의 prev가 삭제될 노드의 이전 노드를 가리키게 하면 된다.

if cmd == 'C':
    nodes[nodes[k][0]][1] = nodes[k][1]
    nodes[nodes[k][1]][0] = nodes[k][0]
    stack.append([k, nodes[k]])
    tmp = nodes[k]
    del nodes[k]
    
    # 마지막 노드일 경우
    if tmp[1] == 0:
        k = tmp[0]
    else:
        k = tmp[1]

보기에는 좀 헷갈릴 수 있는데, nodes[k][0]은 해당 노드의 이전 노드를 가리킨다. 즉 nodes[nodes[k][0]][1]은 이전노드의 next라고 생각하면 된다. 여기에 nodes[k][1] 즉, 삭제되는 노드가 가리키던 다음 노드를 가리키게 한다.

반대로 nodes[nodes[k][1]][0] = nodes[k][0]은 다음 노드의 prev에 삭제되는 노드가 가리키던 이전 노드를 넣어주는 코드이다. 한번 이해하면 굉장히 쉬운 코드이다.

그렇게 삭제되는 노드의 행 번호 값과 이전 노드와 다음 노드 정보를 배열 형태로 stack에 넣어주고 del 연산자를 통해 링크드리스트에서 삭제해준다. tmp변수에 삭제되는 노드를 담는 것을 볼 수 있는데, 현재 가리키는 노드인 k를 관리해주기 위해서다. 마지막 노드가 삭제될 경우 삭제되는 노드의 이전 노드를 가리켜야 하므로 k에 tmp[0]을 담아주고 마지막 노드가 아닐 경우 삭제되는 노드의 다음 노드를 가리키게 한다.

마지막 커맨드는 Z이다.

stack에 있는 노드를 꺼내 원래 있던 자리에 넣어주기만 하면 된다.

curr_node, val = stack.pop()
prev_node, next_node = val
nodes[curr_node] = [prev_node, next_node]
nodes[prev_node][1] = curr_node
nodes[next_node][0] = curr_node

삽입할 때는 간단하다. 이전 노드의 next가 삽입되는 노드를 가리키게하고 다음 노드의 prev가 삽입되는 노드를 가리키게 하면 된다.

[프로그래머스] 거리두기 확인하기 / Python / 2021 카카오 채용연계형 인턴십

생강강 — Wed, 21 Jul 2021 00:50:33 +0900

https://programmers.co.kr/learn/courses/30/lessons/81302

코딩테스트 연습 - 거리두기 확인하기

[["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1]

programmers.co.kr

Solution

from collections import deque

dx = [-1, 1, 0, 0]
dy = [0, 0, 1, -1]

def bfs(place, person):
    visited = [[False] * 5 for _ in range(5)]
    count = 0
    q = deque()
    q.append(person)
    while q:
        for _ in range(len(q)):
            y, x = q.popleft()
            visited[y][x] = True
            for i in range(4):
                nx = x + dx[i]
                ny = y + dy[i]
                if nx < 0 or ny < 0 or nx >= 5 or ny >= 5 or visited[ny][nx]:
                    continue
                if place[ny][nx] == 'P':
                    return False
                elif place[ny][nx] == 'X':
                    continue
                else:
                    q.append((ny, nx))
                    
        count += 1
        if count == 2 or not q:
            return True

def solution(places):
    ans = []
    for place in places:
        people = deque()
        for i in range(5):
            for j in range(5):
                if place[i][j] == 'P':
                    people.append((i, j))
                    
        if len(people) == 0:
            ans.append(1)
            continue
        
        flag = True
        for person in people:
            if not bfs(place, person):
                flag = False
                break
        
        if not flag:
            ans.append(0)
        else:
            ans.append(1)
        
    return ans

대기실은 5개이며, 각 대기실은 5x5 크기입니다.
거리두기를 위하여 응시자들 끼리는 맨해튼 거리가 2 이하로 앉지 말아 주세요.
단 응시자가 앉아있는 자리 사이가 파티션으로 막혀 있을 경우에는 허용합니다.

2, 3번이 거리두기 규칙이다. 맨해튼 거리가 2 이하로 앉아야 하지만 파티션으로 막혀 있을 경우는 가능하다.

즉, P O P는 규칙을 어긴 것이고, P X P는 규칙을 준수한 것이다. 그럼 이 규칙을 어떻게 확인할까.

bfs를 통해 간단하게 확인할 수 있다. 나는 먼저 한 시험장에 있는 사람들을 people에 담고 각각의 사람이 거리두기를 지키고 있는지 검사했다.

한 사람을 검사할 때 해당 위치로 부터 맨해튼 거리 2 이하인 곳을 확인한다. 처음 위치에서 상하좌우로 한번씩 검사하고, 파티션이 있을 경우를 제외하고 빈 자리이면 큐에 넣어준다. 당연히 응시자가 있을 경우 즉시 False를 리턴한다.

그렇게 처음 상하좌우를 돌면 큐에 검사를 더 진행할 방향의 좌표들이 담겨있을 것이다. 여기서 이제 각 좌표마다 한번만 더 확인해주면 된다. 즉 두 번을 검사하면 되므로 count라는 변수를 생성해 관리한다.

count가 2가 되거나 큐에 좌표들이 담기지 않았으면 해당 사람 주위의 맨해튼 거리 2 이하로는 다 거리두기를 지키고 있다는 말이므로 True를 리턴한다.

while q:
  for _ in range(len(q)):
      y, x = q.popleft()
      visited[y][x] = True
      for i in range(4):
          nx = x + dx[i]
          ny = y + dy[i]
          if nx < 0 or ny < 0 or nx >= 5 or ny >= 5 or visited[ny][nx]:
              continue
          if place[ny][nx] == 'P':
              return False
          elif place[ny][nx] == 'X':
              continue
          else:
              q.append((ny, nx))
                    
  count += 1
  if count == 2 or not q:
      return True

[React Query] Next.js + React Query로 무한 스크롤과 SSR 구현하기

생강강 — Tue, 22 Jun 2021 21:03:06 +0900

React Query?

React Query란 간단하게 말하자면 데이터 패칭 라이브러리이다. 하지만 데이터를 패칭하는 기능만 지원하는게 아니라 Devtools, 캐싱, 서버 상태 동기화 및 업데이트 등 많은 기능을 지원한다. 사용은 Apollo와 비슷하다. 똑같이 데이터가 필요한 곳에서 useQuery를 사용하며 아까 언급했듯이 서버 데이터를 캐싱한다. 또한 A 라는 데이터를 사용하는 컴포넌트가 여러개일 경우 각 컴포넌트들에서 같은 쿼리 키를 가진 useQuery를 사용함으로써 한 번의 데이터 패칭으로 모두 A 데이터를 사용할 수 있게 된다. 패칭하여 데이터를 스토어에 저장한 후 전역에서 해당 데이터를 사용할 수 있게 해주는 redux와 비슷한 것을 알 수 있으며 redux의 액션, 리듀서 등의 보일러플레이트를 작성하지 않고 서버 데이터를 관리할 수 있는 또 다른 대안이 될 것이다.
Github 스타도 오늘 기준 20.8k로 많은 인기를 끌고 있으며 개발이 활발하게 이루어지고 있다. 공식 문서도 정리가 정말 잘 되어 있으니 관심이 있다면 한번 사용해보는 걸 추천한다.

SSR(Server Side Rendering)

React Query는 SSR을 두 가지 방식으로 구현할 수 있다. initialData를 주는 방법과 Hydration을 하는 방법이다. 여기서는 Hydration을 통해 SSR을 구현한다. initialData를 통한 방법이 데이터를 명시해주기만 하면 되기 때문에 훨씬 간단하긴 하지만 문제가 있다. 만약 여러 컴포넌트에서 해당 데이터를 SSR을 통해 사용자에게 보여준다고 한다면, 모든 컴포넌트에 initialData를 넘겨줘야 하기 때문에 넘겨줘야 하는 대상 컴포넌트가 컴포넌트 트리 상에서 depth가 깊이 있는 컴포넌트일 때는 관리도 그렇고 비효율적이다. 반면 Hydration을 통한 방법은 SSR을 할 때 원하는 쿼리를 prefetch하고 해당 쿼리를 사용하는 컴포넌트에서는 동일한 키로 useQuery 훅을 호출하기만 하면 된다.

이 프로젝트에서는 PokeApi를 사용해서 간단하게 포켓몬들의 이름을 나열해보도록 하겠다.

먼저, Next.js 프로젝트의 _app에서 queryClient를 내려준다.

// _app/index.tsx

import React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { NextComponentType } from "next"
import { AppContext, AppInitialProps, AppProps } from "next/app"
import { Hydrate } from 'react-query/hydration'
import { ReactQueryDevtools } from 'react-query/devtools'

const MyApp: NextComponentType<AppContext, AppInitialProps, AppProps> = ({ Component, pageProps }) => {
  const queryClientRef = React.useRef<QueryClient>()
  if (!queryClientRef.current) {
    queryClientRef.current = new QueryClient()
  }

  return <>
    <QueryClientProvider client={queryClientRef.current}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
      <ReactQueryDevtools />
    </QueryClientProvider>
  </>
}

MyApp.getInitialProps = async ({ Component, ctx }: AppContext): Promise<AppInitialProps> => {
  let pageProps = {}

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx)
  }

  return { pageProps }
}

export default MyApp

dehydratedState는 /poke 경로의 getServerSideProps에서 반환해준 값을 사용할 것이다. pages폴더에 poke파일을 만들어주자. 여기서 무한스크롤에 사용되는 쿼리를 prefetch하고, 그것을 dehydrate하여 넘겨줄 것이다.

// pages/poke.tsx

import Pokemon from '../components/Pokemon'
import { getPoke } from '../api'
import { QueryClient } from 'react-query'
import { dehydrate } from 'react-query/hydration'

const Poke = () => {
  return (
    <Pokemon />
  )
}

export async function getServerSideProps() {
  const queryClient = new QueryClient()

  await queryClient.prefetchInfiniteQuery('poke', () => getPoke(), { staleTime: 1000 })

  return {
    props: {
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
    }
  }
}

export default Poke

dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient)))

위와 같이 dehydrate한 것을 stringify했다가 다시 parse하는 것은 InfiniteQuery를 사용할 때 발생하는 이슈이다. 그냥 dehydrate한 상태로 넘겨주면 다음과 같은 오류가 난다.

InfiniteQuery에서 맨 처음 페이지에 해당하는 데이터의 pageParam이 undefined로 설정되기 때문에 hydration과정에서 직렬화가 되지 않아서 저렇게 해주었다. 더 궁금하다면 이슈를 참고해보면 좋을 것 같다.

여기까지 했다면 getServerSideProps에서 props로 넘겨준 dehydratedState를 _app에서 받아 Hydration로 내려줄 것이다. 이제 컴포넌트에서 prefetch에서 사용된 쿼리와 같은 키인 'poke' 사용하여 useInfiniteQuery 훅을 호출하면 된다.

먼저 api를 통해 포켓몬 데이터를 받아오는 함수를 만들어주자. 루트 디렉토리에서 api폴더를 하나 만들고 그 안에 index.ts파일을 만든다.

// api/index.ts

import axios from 'axios'

export const getPoke = async (offset: number = 0) => {
  const { data } = await axios.get(
    `https://pokeapi.co/api/v2/pokemon?limit=20&offset=${offset}`
  );
  return data;
}

무한 스크롤

components폴더에 Pokemon.tsx파일을 만들어주자. 위에서도 언급했지만 React Query에서 무한 스크롤을 구현할 때는 주로 useInfiniteQuery를 사용한다. 첫 번째 인자로 쿼리 키를 주고, 두 번째는 쿼리 함수, 마지막으로 쿼리에 적용할 옵션들을 넘겨준다. 여기서는 쿼리 키는 'poke'이고 쿼리 함수는 위에서 만든 getPoke함수가 되겠다. 그리고 getNextPageParam라는 옵션에서 이전 페이지의 데이터를 통해 무한 스크롤을 언제 끝낼지 결정할 수 있다. 어떠한 값을 리턴할 경우 useInfiniteQuery가 리턴하는 result 객체의 hasNextPage가 true값이 되고, undefined를 리턴할 경우 false가 된다.

// components/Pokemon.tsx

import React, { useEffect, useState } from 'react'
import { useInfiniteQuery, useQuery } from 'react-query'
import { getPoke } from '../api'

const Pokemon = () => {
  const { data, fetchNextPage } = useInfiniteQuery('poke', 
    ({ pageParam = '' }) => getPoke(pageParam), 
    {
      getNextPageParam: (lastPage) => {
        const lastOffset = lastPage.results[lastPage.results.length - 1].url.split('/')[6]
        if (lastOffset > 1118) {
          return undefined
        }
        return lastOffset
      },
      staleTime: 1000,
    }
  )

  return (
    <>
      <ul>
        {data.pages.map((page) => (
          page.results.map((poke) => (
            <li key={poke.name} style={{ padding: '20px', fontWeight: 'bold'}}>{poke.name}</li>
          ))
        ))}
      </ul>
      <button onClick={() => fetchNextPage()}>Load More</button>
    </>
  )
}

위와 같이 getNextPageParam에서 lastPage를 인자로 받아와 다음 페이지를 로드할지 결정한다. staleTime은 React Query가 관리하는 캐시에서 해당 쿼리를 어느 시점에 fresh상태에서 stale상태로 바꿀지 결정하는 옵션이다. 이에 대한 개념은 공식 문서에 자세히 나와있다.

여기까지만 해도 잘 동작한다. 하지만 Load More 버튼을 눌러야 fetchNextPage 함수가 실행되어 다음 페이지를 불러온다. fetchNextPage에 대한 내용은 이따가 좀 더 자세히 다루겠다. 어쨋든 이건 무한 스크롤이라고 볼 수 없다. 이제 IntersectionObserver를 통해 무한 스크롤을 구현해보자.

여기서는 공식 문서대로 useIntersectionObserver 훅을 만들어 사용할 것이다. hooks폴더를 하나 만들고 useIntersectionObserver.ts파일을 만들어주자.

// hooks/useIntersectionObserver.ts

import React from 'react'

export default function useIntersectionObserver({
  root,
  target,
  onIntersect,
  threshold = 1.0,
  rootMargin = '0px',
  enabled = true,
}) {
  React.useEffect(() => {
    if (!enabled) {
      return
    }

    const observer = new IntersectionObserver(
      entries =>
        entries.forEach(entry => entry.isIntersecting && onIntersect()),
      {
        root: root && root.current,
        rootMargin,
        threshold,
      }
    )

    const el = target && target.current

    if (!el) {
      return
    }

    observer.observe(el)

    return () => {
      observer.unobserve(el)
    }
  }, [target, enabled, root, threshold, rootMargin, onIntersect])
}

그리고 Pokemon 컴포넌트에서 해당 훅을 사용한다.

// components/Pokemon.tsx

import React, { useEffect, useState } from 'react'
import { useInfiniteQuery, useQuery } from 'react-query'
import { getPoke } from '../api'
import useIntersectionObserver from '../hooks/useIntersectionObserver'

const Pokemon = () => {
  const { data, hasNextPage, fetchNextPage } = useInfiniteQuery('poke', 
    ({ pageParam = '' }) => getPoke(pageParam), 
    {
      getNextPageParam: (lastPage) => {
        const lastOffset = lastPage.results[lastPage.results.length - 1].url.split('/')[6]
        if (lastOffset > 1118) {
          return undefined
        }
        return lastOffset
      },
      staleTime: 3000,
    }
  )

  const loadMoreButtonRef = React.useRef()

  useIntersectionObserver({
    root: null,
    target: loadMoreButtonRef,
    onIntersect: fetchNextPage,
    enabled: hasNextPage,
  })

  return (
    <>
      <ul>
        {data.pages.map((page) => (
          page.results.map((poke) => (
            <li key={poke.name} style={{ padding: '20px', fontWeight: 'bold'}}>{poke.name}</li>
          ))
        ))}
      </ul>
      <button onClick={() => fetchNextPage()}>Load More</button>
      <div ref={loadMoreButtonRef}/>
    </>
  )
}

이렇게 하면 SSR과 무한 스크롤까지 잘 동작할 것이다.

옆의 개발자 도구에서 네트워크 창을 보면 데이터 요청없이 SSR로 포켓몬 이름을 잘 출력하는 것을 볼 수 있다.

그리고 스크롤을 좀 내리면 다음과 같은 결과가 될 것이다.

네트워크 요청과 함께 다음 페이지의 데이터를 가져온다. useInfiniteQuery 훅을 사용하여 간단하게 무한 스크롤을 구현했다. fetchNextPage를 실행시키면 getNextPageParam에서 다음 pageParam을 받아서 쿼리 함수에 넘겨주게 된다. 여기서는 SSR을 하고, 첫 스크롤일 경우 pageParam은 20이 되고 getPoke 함수에 20이 넘어가게 된다. 그렇게 받아온 데이터는 useInfiniteQuery 훅이 리턴하는 result 객체의 data에 차곡차곡 쌓이게 된다. 이 데이터는 위 사진에서 왼쪽 하단에 보이는 Devtools를 통해서도 확인이 가능하다.

참고

[Next.js] Dynamic Routes

생강강 — Sat, 10 Apr 2021 21:44:46 +0900

이 글은Next.js의 공식 튜토리얼 문서를 참고하여 작성한 글입니다.

인덱스 페이지를 만들었지만 아직 블로그의 개인 포스트 페이지는 만들지 않았다. 이제 dynamic routes를 통해 각 포스트 페이지마다 고유의 URL을 갖게 해보자.

외부 데이터에 의존하는 페이지 경로

이전 글에서 getStaticProps를 사용하여 인덱스 페이지를 만들면서 블로그 콘텐츠가 외부 데이터에 의존하는 경우를 다루었다.

이 글에서는 각 페이지 경로가 외부 데이터에 의존하는 경우에 대해 다룰 것이다. Next.js는 외부 데이터에 의존하는 페이지를 경로와 함께 정적으로 생성하게 해준다. 이를 가능하게 하는 것이 dynamic URLs이다.

그렇다면 어떻게 페이지를 Dynamic Routes를 사용하여 정적 생성할까?

블로그에서 각 포스트의 경로가 /posts/<id>로 지정되길 원한다고 하면, <id>는 posts디렉토리 안에 있는 마크다운 파일명이 될 것이다.

예를 들어 이전 글에서 ssg-ssr.md와 pre-rendering.md를 만들어 놨으므로, 해당 글의 경로는 각각 /posts/ssg-ssr.md와 /posts/pre-rendering이 될 것이다.

getStaticPaths

먼저 pages/posts안에 [id].js파일을 만든다. Next.js에서 dynamic routes를 사용하는 페이지는 []로 감싸져있어야 한다.

first-post.js파일은 더이상 사용하지 않기 때문에 삭제해주자.

pages/posts/[id].js파일을 열어 일단 다음과 같이 작성해주자.

import Layout from "../../components/layout";

export default function Post() {
  return <Layout>...</Layout>;
}

다음으로 lib/posts.js에서 getAllPostIds함수를 밑에 추가 해준다. 이 함수는 posts디렉토리 안에 있는 파일명 리스트를 리턴할 것이다.

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);

  // 아래와 같은 형태로 파일명 리스트를 리턴한다.
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map(fileName => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ""),
      },
    };
  });
}

위 코드에서 볼 수 있듯이 리턴되는 리스트는 문자열 형태가 아니라 객체 형태여야 한다. 각 객체는 params라는 키와 id키를 포함하고 있다. 그렇지 않으면 getStaticPaths함수는 정상적으로 동작하지 않을 것이다.

마지막으로 getAllPostIds함수를 import하고 getStaticPaths함수 내부에서 사용한다. pages/posts/[id].js에서 Post컴포넌트 위에 다음과 같이 작성한다.

import { getAllPostIds } from "../../lib/posts";

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

이렇게 하면 paths에는 pages/posts/[id].js에서 정의한 params를 포함하는 getAllPostIds에서 리턴한 배열이 담겨 있을 것이다.

getStaticProps

이제 id를 통해 포스트에 필요한 데이터를 가져올 필요가 있다.

이를 위해서 lib/posts.js에 getPostData함수를 추가해주자. 이 함수는 id에 맞는 포스트 데이터를 리턴할 것이다.

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  // 포스트의 메타데이터를 파싱하기 위해 gray-matter 사용
  const matterResult = matter(fileContents);

  // 데이터를 id 와 병합시킨다.
  return {
    id,
    ...matterResult.data,
  };
}

그리고 pages/posts/[id].js를 다음과 같이 수정한다.

import { getAllPostIds, getPostData } from "../../lib/posts";

export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

이제 포스트 페이지는 getStaticProps안에 있는 getPostData를 통해 데이터를 받아올 수 있고 props로 리턴할 수도 있다.

// [id].js

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

이제 서버를 실행시켜 확인해보자.

http://localhost:3000/posts/ssg-ssr

http://localhost:3000/posts/pre-rendering

다음은 지금까지의 과정을 요약한 것이다.

Markdown 사용

마크다운 문법을 사용하기 위해 remark라이브러리를 설치한다.

npm install remark remark-html

lib/posts.js에서 다음과 같이 import시킨 후, getPostData함수를 수정해준다.

import remark from "remark";
import html from "remark-html";

...

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8");

  // 포스트의 메타데이터를 파싱하기 위해 gray-matter 사용
  const matterResult = matter(fileContents);

  // remark 를 사용하여 마크다운을 HTML로 변환
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()

  // 데이터를 id 와 병합시킨다.
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

remark를 사용하기 위해 getPostData함수에서 async await을 사용했다. 따라서 pages/posts/[id].js의 getStaticProps에서 getPostData를 호출할 때 await를 붙여 호출한다.

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

마지막으로 pages/posts/[id].js의 Post컴포넌트에서 contentHtml을 렌더링하기 위해 dangerouslySetInnerHTML를 사용한다.

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

그럼 결과를 확인 해보자.

다음으로는 포스트 페이지에 스타일도 추가하고 title도 추가하면서 더 다듬어 보자.

[id].js에 title을 추가하기 위해 next/head에서 Head컴포넌트를 추가하고 다음과 같이 Post컴포넌트를 수정한다.

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

포스트 날짜를 나타내기 위해 date-fns라이브러리를 설치해준다.

npm install date-fns

그리고 components/date.js파일을 만들어 Date컴포넌트를 생성한다.

import { parseISO, format } from "date-fns";

export default function Date({ dateString }) {
  const date = parseISO(dateString);
  return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>;
}

pages/posts/[id].js에서 Date컴포넌트를 import한 후, 다음과 같이 사용한다.

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <br />
      {postData.id}
      <br />
      <Date dateString={postData.date} />
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

마지막으로 이전에 했던 것처럼 styles/utils.module.css파일을 사용하여 CSS를 추가해보자.

[id].js에서 CSS파일을 import시킨 후, Post컴포넌트를 다음과 같이 수정한다.

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  );
}

http://localhost:3000/posts/pre-rendering

포스트 페이지를 다듬었으니 홈에 있는 다음은 인덱스 페이지를 다듬을 차례이다.

먼저, 각 포스트 페이지에 Link컴포넌트를 통해 링크를 걸어주자.

pages/index.js에서 Link와 Date를 가져온다.

import Link from "next/link";
import Date from "../components/date";

그리고 Home컴포넌트에서 li태그에 있는 내용을 다음과 같이 바꿔준다.

<li className={utilStyles.listItem} key={id}>
  <Link href={`/posts/${id}`}>
    <a>{title}</a>
  </Link>
  <br />
  <small className={utilStyles.lightText}>
    <Date dateString={date} />
  </small>
</li>

http://localhost:3000/

[Next.js] Pre-rendering과 Data Fetching

생강강 — Fri, 9 Apr 2021 19:27:22 +0900

이 글은 Next.js의 공식 튜토리얼 문서를 참고하여 작성한 글입니다.

예시와 같은 블로그를 만들고 싶지만, 아직까지는 블로그 내용을 추가하지 않았다. 이제 블로그에 필요한 외부 데이터를 애플리케이션에 가져오는 방법을 알아보자. 여기서는 블로그 내용이 파일 시스템에 저장되지만, 배포를 위해선 콘텐츠가 다른 곳(예: 데이터베이스, Headless CMS)에 저장되어 있는 경우 동작한다.

아래는 우리가 이 글에서 배울 것들이다.

Next.js의 pre-rendering
pre-rendering의 두가지 형식: Static Generation과 Server-side Rendering
데이터가 있을 때 Static Generation, 데이터가 없을 때의 Static Generation
getStaticProps와 사용법

해당 글을 읽고 따라오기 위해선 이전글과 공식 튜토리얼을 참고하여 공식 문서의 polishing layout챕터까지 끝낸 상태여야 한다.

그리고 서버를 실행시키면 다음과 같은 결과가 나올 것이다.

Pre-rendering

data fetching에 대해 얘기하기 전에, Next.js의 가장 중요한 컨셉 중 하나인 Pre-rendering에 대해 얘기하고자 한다.

기본적으로, Next.js는 모든 페이지를 pre-render한다. 이 말은 즉슨, client-side 자바스크립트와는 다르게 Next.js는 각 페이지에 대해 미리 HTML을 만들어 놓는다. 이러한 Pre-rendering로 인해 좋은 성능과 SEO를 얻을 수 있다.

생성된 HTML에는 최소한으로 필요한 자바스크립트 코드가 있다. 페이지가 브라우저에 의해 로드될 때, 그 자바스크립트 코드가 실행되고 페이지를 동적이게 만들어준다(이 과정을 hydration이라고 부른다.)

이는 Server-side Rendering의 특징이기도 하다. 이전에 클라이언트 사이드 렌더링과 서버 사이드 렌더링에 대해 다룬 포스트가 있으니 참고하면 더 이해가 잘 될 것이다.

Pre-rendering의 형식

Next.js는 pre-rendering을 Static Generation과 Server-side Rendering, 이 두 가지 형식으로 제공한다. 이 둘의 차이점은 언제 HTML이 생성되는지 이다.

Static Generation은 빌드 타임에 HTML을 생성하는 pre-rendering 방법이다. pre-rendered된 HTML은 각 요청마다 재사용이 가능하다.

Server-side Rendering은 각 요청마다 HTML을 생성하는 pre-rendering 방법이다.

npm run dev나 yarn dev를 통해 개발을 하는 동안에는 Static Generation 방식을 사용하고 있다해도 모든 페이지가 각 요청마다 pre-rendering 된다.

여기서 중요한 점은, Next.js는 각 페이지마다 우리에게 어떠한 pre-rendering 방식을 사용할지 선택할 수 있게 해주는 것이다. 따라서 특정 페이지에는 Static Genration 방식을, 나머지 페이지에는 Server-side Rendering 방식을 사용할 수 있는 "hybrid"앱을 만들 수 있다.

Static Generation v.s. Server-side Rendering

Next.js 공식 문서에서는 가능하면 Static Generation 방식을 사용하기를 권장하고 있다. 왜냐하면 페이지가 한번 빌드되어 CDN에 의해 제공이 될 수 있으며 매번 페이지 요청을 하는 것보다 렌더링하는 속도가 빠르기 때문이다.

이러한 Static Generation은 다음과 같은 상황에서 사용할 수 있다.

마케팅 페이지
블로그 포스트
E-commerce 상품 리스트
각종 문서 페이지

페이지를 제작할 때 "사용자의 요청보다 먼저 페이지가 렌더링되어도 되는가?" 에 대한 질문을 자신에게 던져보고, 대답이 "응" 이라면 Static Generation을 선택하는게 좋을 것이다.

반대로, 데이터의 업데이트가 많거나 사용자의 요청마다 매번 바뀌는 페이지라면 별로 좋은 선택이 아닐 것이다.

마지막에 설명한 상황에서는 Server-side Rendering 을 사용할 수 있다. 조금 느릴 순 있지만 페이지는 항상 최신의 상태를 유지한다. 아니면 pre-rendering을 생략하고 client-side JavaScript를 통해 보여줄 수도 있다.

Static Generation

Static Generation은 데이터를 포함해도 되고, 포함하지 않아도 수행이 된다.

지금까지는 아직 외부의 데이터를 fetching에서 사용하지 않았다. 이러한 페이지들은 앱이 빌드될 때 자동적으로 정적 생성될 것이다.

그러나 몇몇의 페이지들에서 외부에서 데이터를 fetching 해오지 않으면, 렌더링이 안되는 경우가 있다. 예를 들어 파일 시스템에 접근하거나, 외부 API를 사용하거나, 데이터베이스에 쿼리를 날릴 때이다. Next.js는 이러한 경우(데이터를 사용한 정적 생성)도 지원하고 있다.

getStaticProps

위의 과정을 가능하게 하는 것이 getStaticProps이다. Next.js 프로젝트에서 한 페이지 컴포넌트를 export할 때, getStaticProps함수를 async형태로 만들어 같이 export해준다. getStaticProps는 빌드 타임에 동작하며 함수 내에서 외부 데이터를 가져와 페이지 컴포넌트에 넘겨줄 수 있다. 기본적인 사용 형태는 다음과 같다.

export default function Home(props) { ... }

export async function getStaticProps() {
  // 파일 시스템, API, DB 데이터와 같은 외부 데이터를 가져온다.
  const data = ...

  // props 의 'key' 값은
  // Home 컴포넌트에 전달될 것이다.
  return {
    props: ...
  }
}

getStaticProps을 작성하면, Next.js에 이렇게 말할 수 있다. "야, 이 페이지는 어떠한 데이터들에 의존성을 갖고 있으니까 pre-render하기 전에 이것 먼저 해결하고 해!"

그럼 이제 getStaticProps를 사용하여 만들어둔 블로그에 포스팅을 해보자.

프로젝트 최상위에 posts폴더를 만든다(이는 pages/posts와는 다른 폴더이다).

다음으로 posts폴더 안에 pre-rendering.md파일과 ssg-ssr.md파일을 만들어주자.

// pre-rendering.md

---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

// ssg-ssr.md

---
title: 'When to Use Static Generation v.s. Server-side Rendering'
date: '2020-01-02'
---

We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages, including:

- Marketing pages
- Blog posts
- E-commerce product listings
- Help and documentation

You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.

On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.

두 마크다운 파일 상단에는 title과 date라는 메타데이터 섹션이 있는 것을 볼 수 있다. 이것은 YAML Front Matter라고 불리우며, gray-matter라는 라이브러리를 사용하여 파싱될 것이다.

그리고 이제 index.js페이지를 수정해야한다.

각 마크다운 파일에서 title, date와 파일 명을 가져온다.

해당 데이터들을 index.js페이지에서 date를 기준으로 정렬시킨다.

getStaticProps 구현

먼저, 마크다운 파일의 메타데이터를 파싱하기 위해 gray-matter를 설치해주자.

npm install gray-matter

다음으로 파일 시스템에서 데이터를 가져오기 위해 간단한 라이브러리를 만들어보자.

프로젝트 최상위에 lib폴더를 만든다. lib안에 posts.js파일을 만들어 다음과 같이 작성한다.

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'posts')

export function getSortedPostsData() {
  // posts 폴더 안에 있는 파일 명들을 가져온다. 
  const fileNames = fs.readdirSync(postsDirectory)
  const allPostsData = fileNames.map(fileName => {
    // 파일 명에서 ".md" 확장자를 제거한다.
    const id = fileName.replace(/\.md$/, '')

    // 마크다운 파일을 읽는다.
    const fullPath = path.join(postsDirectory, fileName)
    const fileContents = fs.readFileSync(fullPath, 'utf8')

    // 메타데이터를 파싱하기 위해 gray-matter를 사용한다.
    const matterResult = matter(fileContents)

    // id와 데이터를 한 객체로 묶는다.
    return {
      id,
      ...matterResult.data
    }
  })
  // date 순으로 포스트를 정렬한다.
  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1
    } else {
      return -1
    }
  })
}

이제 index.js에서 getStaticProps를 작성하고 그 안에서 getSortedPostsData를 import해주어야 한다.

index.js에서 다음 코드를 Home컴포넌트 위에 작성해주자.

import { getSortedPostsData } from '../lib/posts'

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

getStaticProps에서 리턴하는 props객체의 allPostsData는 Home컴포넌트에 prop으로 전달될 것이다. Home에서는 다음과 같이 allPostsData에 접근할 수 있다.

export default function Home ({ allPostsData }) { ... }

블로그 포스트를 화면에 나타내기 위해, Home컴포넌트를 조금 수정해주자.

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* 기존의 코드는 그대로. */}

      {/* 아래 <section> 태그로 감싸진 부분을 추가해준다. */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  )
}

여기까지 했다면 다음과 같은 결과를 볼 수 있다.

아래는 우리가 코드로 작성한 과정을 정리한 그림이다. 파일 시스템에서 데이터(포스트)를 가져와 인덱스 페이지 리스트를 렌더링 했다.

[Next.js] Assets, Metadata와 CSS

생강강 — Wed, 7 Apr 2021 20:41:39 +0900

이 글은 Next.js의 공식 튜토리얼 문서를 참고하여 작성한 글입니다.

이전글에서 만든 페이지는 아직 스타일링이 되어있지 않다. 이제 이 페이지에 CSS를 통해 스타일을 해보자.

Next.js는 기본적으로 CSS와 Sass를 지원한다. 그리고 여기서는 CSS를 사용하겠다.

이 글에서는 Next.js가 어떻게 이미지와 같은 asset들을 관리하고 <title>태그와 같은 metadata들을 관리하는지 알아볼 것이다.

Assets

Next.js는 이미지와 같은 정적 자산을 최상위인 public디렉토리에서 제공이 가능하다. public안에 있는 파일들은 pages와 유사하게 애플리케이션 루트에서 접근이 가능하다.

또한 이 public디렉토리는 robots.txt, Google Site Verification과 다른 정적 자산에도 유용하다.

먼저, 프로필 사진을 다운로드 해보자.

public디렉토리에 images디렉토리를 만들고 .jpg포맷의 프로필 사진을 그 안에 저장한다. public디렉토리 안에 있는 사용하지 않는 SVG로고 파일은 삭제해도 된다.

그리고 기존의 방식대로, 프로필 사진을 다음과 같이 불러올 수 있다.

<img src="/images/profile.jpg" alt="ginger" />

하지만 이 방법은 다음과 같이 따로 처리해주어야할 것이 있다.

달라지는 화면 사이즈에 따라 반응형 처리
써드파티 툴이나 라이브러리를 이용한 이미지 최적화
사용자가 viewport에 들어왔을 때에만 이미지를 로딩

이 밖에도 더 있을 것이다. 하지만 Next.js는 이러한 문제들을 해결해줄 수 있는 Image컴포넌트를 제공하고 있다.

Image 컴포넌트와 이미지 최적화

next/image는 모던 웹을 위해 좀 더 발전된 HTML <img>요소의 확장이다.

또한 Next.js는 이미지 최적화를 기본적으로 제공한다. 이를 통해 브라우저가 지원하는 경우 WebP와 같은 최신 포맷으로 이미지 사이즈를 조정하고 최적화할 수 있다. 사이즈가 큰 이미지를 작은 화면의 기기에 그대로 사용하는 경우를 피할 수 있으며, 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공 할 수 있습니다.

자동 이미지 최적화는 어떠한 이미지 소스여도 동작이 되며, 심지어 이미지가 CMS와 같은 외부 데이터에서 제공되더라도 가능하다.

Image 컴포넌트

Next.js는 빌드할 때 이미지를 최적화하는 대신에, 사용자가 요청한 것에 대해서 최적화를 진행한다. 정적 사이트 생성기 및 정적 전용 솔루션과 달리 빌드 시간은 이미지 10개를 전송하든 1,000만 개를 전송하든 증가하지 않게 된다.

이미지는 기본적으로 lazy loading된다. 이 말은 페이지 로드 속도가 viewport 외부의 이미지에 의해 느려지지 않는다는 것이다. 즉 이미지는 viewport안에 있는 스크롤에 따라 로드된다.

예를 들어서 next/image를 통해 아까 저장한 프로필 사진을 보여주는 페이지를 만들어보자.

원하는 height와 width값을 주는데, 이때 기존 이미지의 비율과 일치해야 한다.

import Image from "next/image";

const Profile = () => (
  <Image
    src="/images/profile.jpg" // 프로필 사진 경로
    height={200}
    width={300}
    alt="ginger"
  />
);

export default Profile;

Metadata

만약 <title>태그와 같은 페이지의 메타데이터를 바꾸고 싶을 땐 어떻게 할까?

<title>은 <head>태그에 있기 때문에 Next.js에서 <head>태그를 어떻게 수정하는지 알아야한다.

pages/index.js을 보면 다음과 같은 코드가 작성되어 있다.

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

위의 코드를 보면 <head>태그 대신에 <Head>로 작성된 React 컴포넌트가 있는 것을 볼 수 있다. 이는 Next.js에서 기본적으로 제공하는 컴포넌트로, 페이지의 <head>태그를 수정할 수 있게 해준다.

Head컴포넌트는 next/head모듈에서 import하여 사용이 가능하다.

/posts/first-post에 <title>이 아직 없기 때문에 추가해보자.

pages/posts/first-post.js파일을 열고 Head를 import시킨다.

// first-post.js

import Head from "next/head";

그리고 FirstPost컴포넌트에 Head를 넣어 다음과 같이 수정한다.

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>첫 번째 포스트</title>
      </Head>
      <h1>첫 포스트!</h1>
      <h2>
        <Link href="/">
          <a>홈으로 돌아가기</a>
        </Link>
      </h2>
    </>
  )
}

그리고 이제 서버를 실행시켜 확인해보면 다음과 같이 브라우저 탭에서 첫 번째 포스트라고 나오는 것을 볼 수 있다.

CSS 스타일

이제 CSS얘기를 해보자.

index.js를 보면 알 수 있듯이 이미 어느정도의 스타일이 되어 있다. 스타일 코드는 다음과 같이 생겼을 것이다.

<style jsx>{`
  ...
`}</style>

이 페이지는 styled-jsx라는 라이브러리를 사용하고 있다. 이는 "CSS-in-JS"라이브러리로, 리액트 컴포넌트에서 CSS를 작성할 수 있으며 각 CSS 스타일은 컴포넌트에 대해 스코프를 가지므로 다른 컴포넌트에 독립적이다.

Next.js는 기본적으로 styled-jsx를 지원하지만 styled-components나 emotion과 같은 다른 유명한 CSS-in-JS라이브러리를 사용하는 것도 물론 가능하다.

Layout 컴포넌트

먼저, 모든 페이지에서 공유가 가능한 Layout컴포넌트를 만들어보자.

프로젝트 최상위 경로에 components라는 디렉토리를 만들고 layout.js파일을 만들어주자.

export default function Layout({ children }) {
  return <div>{children}</div>
}

그리고 pages/posts/first-post.js를 열고 방금 만든 Layout컴포넌트를 import해준다. 이때 Layout컴포넌트는 다른 컴포넌트를 감싸는 형태로 해준다.

import Link from "next/link";
import Head from "next/head";
import Layout from "../../components/layout";

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>첫 번째 포스트</title>
      </Head>
      <h1>첫 포스트!</h1>
      <h2>
        <Link href="/">
          <a>홈으로 돌아가기</a>
        </Link>
      </h2>
    </Layout>
  );
}

이제 Layout컴포넌트에 스타일을 더해보자. 이를 위해서 React컴포넌트에서 CSS파일을 import하게 해주는 CSS Modules를 사용할 것이다. 그리고 CSS Modules를 사용하기 위해선 CSS파일의 이름은 .module.css로 끝나야 한다.

components/layout.module.css파일을 만들고 다음과 같이 작성한다.

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
  background-color: yellowgreen;
}

container클래스를 layout.js에서 사용하기 위해선 몇 가지 해주어야 할 것이 있다.

CSS파일을 styles라고 이름을 할당하여 import해온다. 그리고 className를 styles.container로 설정하여 사용한다.

layout.js를 열어 다음과 같이 코드를 수정해보자.

import styles from "./layout.module.css";

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

그리고 확인해보면 다음과 같이 스타일이 적용된 것을 볼 수 있다.

또한 개발자 도구를 통해 Layout컴포넌트를 보면 클래스 명이 다음과 같이 나오는 것을 볼 수 있다. layout_container_...

이는 CSS Modules가 자동적으로 고유의 클래스 명을 생성해준 것이다. 이처럼 CSS Modules를 사용하면 고유의 클래스 명을 생각하는데에 힘을 쏟지 않아도 된다.

게다가 Next.js의 코드 스플릿팅은 CSS Modules에서도 동작한다. 각 페이지마다 최소한의 CSS가 로드되는 것을 보장하고 이는 번들 사이즈를 줄여준다.

Global Styles

CSS Modules은 컴포넌트별로 스타일링을 할 때 유용하다. 하지만 모든 페이지에 적용되는 스타일을 원할 때에는 어떻게 할까? Next.js는 이또한 제공해주고 있다.

global CSS를 로드하기 위해 pages/_app.js파일을 만들고 다음과 같이 작성한다.

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

이 App컴포넌트는 모든 다른 페이지에서 공통되는 최상위 구성 요소이다. 이 App를 통해 페이지 간 이동을 할 때 상태를 유지할 수도 있다.

App컴포넌트를 추가했으면 서버를 재실행 할 필요가 있다. Ctrl + C를 누르고 다시 서버를 실행시키자.

npm run dev

Global CSS 추가

Next.js에서는 pages/_app.js에서 global CSS를 import해줌으로써 사용할 수 있다. global CSS는 페이지의 모든 요소에 영향을 끼치기 때문에 _app.js 이외의 경로에서는 global CSS를 import 할 수 없으니 주의한다.

만약 홈에서 /posts/first-post로 이동하게끔 했다면, 홈의 global 스타일은 /posts/first-post에 영향을 끼칠 것이다.

global CSS파일은 어디에나 위치할 수 있으며, 아무런 이름이나 가질 수 있다. 그럼 이제 만들어보자.

프로젝트 최상위에 styles디렉토리를 만들고 그 안에 global.css파일을 만들어준다. 그리고 다음과 같이 작성한다. 이는 몇몇 스타일을 초기화 시키고 a태그의 색상을 변경할 것이다.

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #cc4137;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

마지막으로 pages/_app.js에서 CSS파일을 import해준다.

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

이제 잘 적용이 되었는지 확인해보자.

혹시 적용이 안된다면 서버를 재실행 했는지 확인하고 다시 서버를 실행시킨다.

[Next.js] 페이지 간 이동하기

생강강 — Tue, 6 Apr 2021 21:04:06 +0900

이 글은 Next.js의 공식 튜토리얼 문서를 참고하여 작성한 글입니다.

이전 글에서 Next.js프로젝트를 만들고 실행을 시켰다면 다음과 같은 화면을 볼 수 있다.

이제 이 페이지를 조금 바꿔보자.

pages/index.js에서 <h1>태그 안에 있는 "Welcome to"를 "Learn"으로 바꾸고 저장한다.

페이지간 이동하기

현재 우리가 만든 애플리케이션에는 한 개의 페이지 밖에 없지만 웹 애플리케이션에는 보통 많은 페이지들이 존재한다.

이제부터 어떻게 더 많은 페이지들을 해당 애플리케이션에 추가시키는지 알아보자.

해당 글에서 배울 것들

파일 시스템 라우팅을 이용한 새로운 페이지 생성
페이지 간에 클라이언트 사이드 네비게이션을 가능하게 할 Link컴포넌트의 사용법
코드 스플릿팅과 프리페칭의 사용법

Next.js에서의 페이지

Next.js에서의 페이지는, pages디렉토리 안에 있는 파일에서 export한 React 컴포넌트이다.

각 페이지들은 기본적으로 그들의 파일명과 연관된다. 예를 들어 pages/index.js는 /라우트이다. pages/posts/first-post.js는 /posts/first-post와 연결된다.

우리 애플리케이션에는 이미 pages/index.js파일이 있다. 이제 pages/posts/first-post.js파일을 만들어보자.

페이지는 pages디렉토리 안에 만들어야 한다. pages디렉토리 안에 posts디렉토리를 하나 만들어주자.

그리고 posts디렉토리 안에 first-post.js파일을 만든다. first-post.js의 내용은 다음과 같다.

export default function FirstPost() {
  return <h1>첫 포스트!</h1>
}

컴포넌트명은 아무것이나 될 수 있으나 export할 때 default를 붙여주어야 한다.

이제 서버를 실행시키고 localhost:3000/posts/first-post를 방문해보자. 그러면 다음과 같은 화면을 보게 될 것이다.

여기까지가 Next.js에서 다른 페이지를 생성하는 방법이다. 간단하게 pages디렉토리안에 URL경로가 될 파일을 생성해주기만 하면 된다. 이는 HTML과 PHP를 사용하여 개발하는 것과 비슷한 방법이다. 대신에 HTML을 React 컴포넌트에서 JSX를 사용하여 작성하는 것이 다르다.

이제는 새로운 페이지로의 링크를 추가하고 이동해보자.

Link 컴포넌트

웹사이트에서 페이지를 연결하고 이동할 때는 <a>태그를 사용한다.

Next.js에서는 Link컴포넌트가 <a>태그를 래핑하여 사용된다. next/link의 <Link>컴포넌트는 애플리케이션에서 페이지 간에 클라이언트 사이드 네비게이션이 가능하게 해준다.

먼저, pages/index.js를 열고 next/link에서 Link컴포넌트를 import해주자.

import Link from "next/link";

그리고 h1태그를 다음과 같이 바꿔준다.

<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

{' '}는 공백 문자를 추가해준다.

다음으로 pages/posts/first-posts.js를 열어 다음과 같이 코드를 변경해주자.

import Link from "next/link";

export default function FirstPost() {
  return (
    <>
      <h1>첫 포스트!</h1>
      <h2>
        <Link href="/">
          <a>홈으로 돌아가기</a>
        </Link>
      </h2>
    </>
  )
}

코드에서 보이는대로, Link컴포넌트는 <a>태그와 사용법이 비슷하다. <a href="...">대신에 <Link href="...">로 사용하고, Link컴포넌트 안에 <a>태그를 넣어주는 것이 다른 점이다.

또한 주의해야할 점이 있다.

Next.js 앱 외부의 페이지로 링크를 걸 때는, Link없이 a태그만을 사용한다.
className과 같은 속성을 추가할 때는 Link태그에 추가하지 않고 a태그에 추가해야 한다.

그럼 애플리케이션에서 확인해보자.

this page가 first-post로의 링크가 되었고, 이를 클릭하면 first-post로 페이지가 넘어간다.

Client-Side Navigation

Link컴포넌트는 Next.js 앱에서 두 페이지 간 클라이언트 사이드 네비게이션을 가능하게 해준다.

클라이언트 사이드 네비게이션이 의미하는 것은 기존의 브라우저가 사용하는 기본 네비게이션 기능보다 빠른 자바스크립트를 사용하여 페이지를 변경하는 것을 말한다.

이게 무슨 말인지는 간단하게 확인이 가능하다.

개발자 도구를 열고 html의 background속성을 hotpink로 바꾼다.
두 페이지에서 만든 링크를 클릭해본다.
hotpink로 설정한 배경 색상이 페이지가 이동해도 지속되는 것을 볼 수 있다.

이것은 브라우저가 전체 페이지를 로딩하지 않고 클라이언트 사이드 네비게이션이 동작하고 있다는 말이다.

만약 Link컴포넌트를 사용하지 않고 기존의 방식대로 a태그를 사용했다면 페이지를 이동할 때 브라우저가 전체를 새로고침하기 때문에 배경화면이 흰색으로 초기화 될 것이다.

Code splitting and prefetching

Next.js는 자동으로 코드 스플릿팅을 해준다. 따라서 각 페이지는 정말 필요한 자원들만 로드하게 된다. 이것은 홈페이지가 렌더링될 때, 다른 페이지의 코드들은 로드되지 않는 것을 말한다.

이러한 특징은 만일 페이지가 수백개가 있다고 해도 홈페이지의 빠른 로딩 속도를 보장한다.

내가 요청한 페이지의 코드만 로딩이 된다는 것은 각 페이지가 독립적이라는 말도 된다. 만약 한 페이지에서 에러가 발생했다고 해도, 애플리케이션의 다른 페이지들은 계속 동작할 수 있다.

게다가, Next.js는 자동으로 백그라운드에서 링크된 페이지의 코드를 프리페치하기 때문에 Link컴포넌트를 사용할 때마다 브라우저의 viewport에 나타나게 된다. 링크를 클릭하면 링크된 페이지에 대한 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 바로 이루어지게 되는 것이다.

요약

Next.js는 코드 스플릿팅, 클라이언트 사이드 네비게이션, 프리페칭을 통해 우리의 애플리케이션을 자동으로 최적화 해준다.

pages폴더 안에 파일을 만드는 것으로 라우트 시스템을 편하게 구현할 수 있고, Link컴포넌트를 사용하여 간단하게 페이지 전환을 할 수 있다.