본문 바로가기

전체 글126

[블로그 프로젝트] 3. 카테고리 분류 + 페이지네이션 구현 지난 글에서 설정한 front matter를 통해, 게시물에 다양한 정보를 넣을 수 있다. 이것을 이용해서 각 게시물마다 카테고리를 부여하고, 카테고리 별 게시물 분류 및 간단한 페이지네이션 적용기에 대해 정리한다. 카테고리 분류 Front matter를 통해 카테고리 부여하기 내 블로그 게시물의 front matter는 다음과 같이 작성하고 있다. --- title: Random post createdAt: '2023.10.31' category: 'javascript' draft: false thumbnail: '/images/dummy_thumbnail.jpeg' --- // 이 외에도 상황에 따라 다른 데이터가 들어간다 위 front matter를 통해 알 수 있듯, 게시물의 공개 여부/썸네일 지.. 2024. 2. 16.
[블로그 프로젝트] 2. mdx 마크다운으로 게시물 페이지 만들기 이전 기획글에서도 언급했듯, 마크다운을 활용하여 블로그 게시물을 작성하기로 결정했었다. 저번 글에 이어, 마크다운을 통한 게시물 작성을 구현하기 위해 무엇을 하였는지 소개한다. 마크다운(mdx/md) 띄우기 next-mdx-remote + gray-matter 활용하기 마크다운을 Next.js에서 사용하는 방법으로, 공식 문서에도 안내되어 있는 @next/mdx 가 있다. 이 패키지는 로컬 폴더 내의 mdx 파일을 pages/app 디렉터리 내에서 바로 사용할 수 있게 한다고 설명하고 있다. 공식문서를 살펴보면 소개하는 또 다른 마크다운 패키지가 있는데, 이것이 바로 내가 사용한 next-mdx-remote 이다. 앞서 언급한 @next/mdx와의 차이점이라면 굳이 로컬에 있는 마크다운이 아니어도 사용.. 2024. 2. 11.
[블로그 프로젝트] 1. TailwindCSS + α 로 디자인 구현하기 개인 블로그를 개발하며 개발일지를 작성 중이다. 그 중 몇 가지를 하나의 주제로 모아 티스토리에 남기고자 한다. 특히 이번 글에서는 블로그의 외관에 관련된 주제로 작성하고자 한다. 반응형 디자인 with TailwindCSS 모바일과 웹 모두를 만족시키자 테일윈드는 오픈소스 CSS 프레임워크로, Utility-First라는 컨셉을 내세우고 있다. 일반적으로 CSS처럼 클래스 이름을 정의하고, 해당 클래스를 스타일링하는 방법이 아닌, 유틸리티 클래스를 작성하여 이를 HTML에 바로 적용하는 방식을 취하는 것이다. 테일윈드에 대한 것은 나중에 조금 더 자세히 다뤄보겠다. 블로그 계획 당시부터 반응형 디자인을 하려 마음먹던 내가 테일윈드를 사용한 이유는 반응형 디자인의 적용이 간편하기 때문이다. 테일윈드는 모.. 2024. 2. 7.
[Javascript] 프로토타입 알아보기 - 2 지난 글에 이어서, 코어 자바스크립트를 읽고 프로토타입에 대해 공부한 내용을 정리한다. 메서드 오버라이드(Method Override) : 부모 역할을 하는 객체에 정의된 메서드를 재정의하는 것. var Foo = function (bar) { this.bar = bar; }; Foo.prototype.getBar = function () { return this.bar; }; var foo = new Foo('hello'); foo.getBar = function () { console.log(this.bar + ', World!'); }; foo.getBar(); // hello, World! 가 출력된다 생성자 Foo의 프로토타입에 getBar라는 메서드를 정의한다. 따라서 생성자 Foo 로 만들어.. 2024. 2. 2.
[피그마] 피그마 기능들 정리하기 지난 블로그 글에서, 피그마에서 개인적으로 유용하게 쓰는 기능들을 정리해보겠다고 언급했었다. 피그마를 많이 다뤄보진 않았지만, 다른 사람의 참고가 되었음 하는 마음에 몇 가지를 정리해본다. 컴포넌트(Component) 기능 다양한 곳에서 여러 번 사용되는 컴포넌트를 만들 때 사용된다. 하나의 컴포넌트로 묶으려는 요소들을 모두 선택한 후, 마우스 오른쪽 클릭하여 나오는 메뉴를 통해 컴포넌트를 만드는 것이 가능하다(혹은 맥 기준 Option + Command + K). '중복되는 요소는 그냥 복사 + 붙여넣기로 사용하면 되지 않나?' 라고 생각할 수 있지만, 그럴 경우 컴포넌트의 디자인을 수정해야 할 때 골치아플 수 있다. 복붙한 모든 컴포넌트의 디자인을 수정하던가, 하나를 수정하고 다른 자리의 컴포넌트들 .. 2024. 1. 28.
[Javascript] 프로토타입 알아보기 - 1 코어 자바스크립트를 읽고, 프로토타입에 대해 공부한 내용을 정리한다. 프로토타입(Prototype) : 자바스크립트의 모든 객체와 연결된, 부모 역할을 담당하는 객체. JS에는 클래스 기반이 아닌, 프로토타입 기반 객체 지향 언어이다. 프로토타입을 통해 객체 지향의 상속 개념을 구현한다. 프로토타입의 개념 다음과 같은 코드가 있을 때, 이 코드를 실행한 결과를 도식화 하면 아래와 같은 그림을 그릴 수 있다. const instance = new Foo(); Foo 생성자 함수를 통해 Foo의 인스턴스인 instance를 생성하고 있다. 이 때, instance의 __proto__([[prototype]]) 프로퍼티가 자동으로 부여되고, 이 프로퍼티는 해당 인스턴스의 부모의 프로퍼티(여기서는 Foo의 pr.. 2024. 1. 24.

티스토리툴바