전체 글 (23) 썸네일형 리스트형 Gatsby 블로그: TOC(목차) 추가하기 기능 소개 Table of Contents(TOC)는 개별 포스트 페이지에서 PC 화면을 기준으로 우측에 있는 목차를 의미한다. 포스트의 소제목들을 나열해서 보여주는 기능으로 내용을 체계적으로 파악하는 데 도움이 되고, 클릭시 해당 부분으로 스크롤이 이동한다. gatsby-transformer-remark gatsby-transformer-remark는 마크다운으로 작성된 포스트를 html로 변환시켜주는 플러그인으로, gatsby-starter-blog에 기본적으로 포함되어 있다. 이 플러그인은 html 외에도 tableOfContents라는 필드를 마크다운 노드에 추가해준다. GraphiQL에서 다음과 같은 쿼리를 실행해보면 마크다운에서 hash(#)로 작성한 소제목들이 , , 태그로 변환되어 tabl.. Gatsby 블로그: Pagination 추가하기 Gatsby에서의 Pagination Gatsby에서는 빌드 타임에 페이지 번호별로 페이지를 만들어두고, 컴포넌트를 사용하면 매우 빠르게 화면이 전환되는 페이지네이션을 구현할 수 있다. 컴포넌트의 특징은 뒤에서 조금 더 자세히 설명할 예정. Material UI Pagination 컴포넌트 편의를 위해 Material UI를 사용했다. Material UI는 Pagination이라는 컴포넌트를 제공하기 때문에 상당히 편리하게 기능을 구현할 수 있다. Gatsby에서 Material UI를 사용하기 위해서는 gatsby-plugin-material-ui 플러그인을 설치해야 한다. 적용하는 방법이 조금 번거로운데, 새로운 플러그인(gatsby-plugin-top-layout)을 정의하고 그 플러그인이 gat.. Gatsby 블로그: 포스트에 카테고리 추가하기 gatsby-starter-blog 지난 포스트에서 설명한 gatsby-starter-blog를 기준으로 포스트에 카테고리를 추가하는 방법에 대해서 설명하려고 한다. 공식 문서에 Creating Tags Pages for Blog Posts라는 제목으로 비슷한 내용에 대한 설명이 있지만, 내 기준으로 처음 Gatsby를 접한 상태에서 보기에는 좀 어렵고 복잡했다. 그래서 카테고리 추가를 위한 최소한의 코드(?)를 소개하는 것을 목표로 포스트를 작성해보려고 한다. gatsby-transformer-remark gatsby-transformer-remark는 markdown 본문을 html코드로 변환하고, 해당 코드와 markdown에 포함된 여러 데이터를 우리가 사용하기 편리한 형태로 GraphQL에 추가.. Gatsby로 블로그 만들기 Gatsby? Gatsby는 React 기반의 Static Site Generation(SSG) 툴이다. SSG는 간단히 말해 빌드 타임에 각 페이지마다 필요한 리소스(주로 html과 json파일 형태)를 미리 생성하고, 요청이 있을 때 정적(static)으로 제공하는 방식이다. 그래서 개인 블로그처럼 동적인 API 호출이 굳이 필요하지 않고, 복잡한 상태관리가 요구되지 않는 사이트에 적합하다. 그리고 HTML을 만들어두기 때문에 SEO 친화적이라는 것도 장점이다. Gatsby Starter Blog Gatsby는 React의 create-react-app 같은 몇 가지 스타터 프로젝트를 제공하는데, gatsby-starter-blog도 그 중 하나다. 블로그를 만드는데 필요한 최소한(정말 최소다..)의.. HTTP 세션과 쿠키 HTTP HTTP는 stateless 하다. HTTP를 기반으로 통신하는 서버는 기본적으로 클라이언트에 대해 어떤 상태 정보도 유지하지 않는다는 뜻이다. 어떤 요청이 들어왔을 때 해당 클라이언트가 이전에 요청을 보냈던 클라이언트인지, 몇 번째로 요청을 보내고 있는 것인지 등을 알 수 없다. 그렇기 때문에 클라이언트의 인증 상태(로그인한 사용자인지 여부 등)를 판단하려면 추가적인 조치가 필요하다. 여기서 등장하는 것이 쿠키와 세션이다. 쿠키 아래는 IETF RFC와 MDN을 참고 및 요약, 정리한 내용이다. 보다 상세한 설명을 보려면 링크를 참고하면 될 것 같다. 개념 쿠키란 간단히 말해 '작은 데이터 조각'이다. 서버가 클라이언트에게 응답을 보낼 때 '쿠키를 설정하겠다'는 의미의 HTTP 헤더 필드와 값.. JavaScript 클로저 자바스크립트에서 Closure가 무엇인지 정리를 해보려고 한다. Closure가 워낙 다양한 방식으로 설명되다보니 필요 이상으로 어렵게 느껴지는 면이 있는 것 같아서 내가 이해한대로 설명을 적어보는게 도움이 될 것 같다. 정의 MDN의 설명에 따르면 클로저는 어떤 함수와 그 함수가 레퍼런스를 가진 lexical 환경의 합을 의미한다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 어떤 코드가 실행될 때 상위 스코프의 변수들이 사용될 수 있고 이와 관련된 개념으로 Lexical Scope, Scope Cha.. JavaScript 실행 컨텍스트와 관련 개념들 Execution Context는 자바스크립트 코드가 어떻게 실행되는지를 이해하는 데 가장 기본이 되는 개념이다. 그리고 Scope, Hoisting, this, Closure 등 자바스크립트의 중요한 특성으로 꼽히는 것들과 밀접한 관련이 있다. 이미 좋은 자료들이 많이 있지만 한번쯤 스스로 정리를 해야겠다는 생각이 들어 포스트를 작성하게 되었다. 정의 Execution Context(EC)는 자바스크립트 코드가 실행되는 환경을 의미하는 추상적인 개념이다. 여기서 환경은 실행되고 있는 코드가 사용할 수 있는 변수들, this의 값 등을 말한다. EC는 크게 전역(Global), 함수 호출(Function Call), eval 함수 내 이렇게 세 가지 경우에 생성된다. 보통 eval 함수를 사용할 일은 별.. 이전 1 2 3 다음
