[React] NextJs로 앱 만들기(1)

노유성·2023년 5월 25일

☀️앱 소개

nextjs 공식 사이트 문서에서 nextjs를 배우기 위해서 만드는 앱이다. 블로그 포스트의 내용은 md파일로 작성한다.

⭐메인 페이지

🪐메인 페이지 UI

<div>
  <Head>
    <title>Create Next App</title>
    <meta name="description" content="Generated by create next app" />
    <link rel="icon" href="/favicon.ico" />
  </Head>

  <section className={homeStyles.headingMd}>
    <p>[Your Self Introduction]</p>
    <p>
      (This is a website)
    </p>
  </section>
  <section className={`${homeStyles.headingMd} ${homeStyles.padding1px}`} >
    <h2 className={homeStyles.headingLg}>Blog</h2>
    <ul className={homeStyles.list}>

    </ul>
  </section>
</div>

🪐Home 컴포넌트 css

기존의 css는 다 지워주고 css 스타일을 작성한다.

.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}

.padding1px {
  padding-top: 1px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

⭐md 파일 생성하기

🪐md파일이란?

MD 파일은 "Markdown" 파일의 확장자입니다. Markdown은 텍스트 기반의 가벼운 마크업 언어로, 문서를 작성하고 서식을 지정하는 데 사용됩니다. Markdown을 사용하면 일반 텍스트 문서를 HTML, PDF 등 다른 형식으로 변환할 수 있습니다.
-chatGPT

원래는 DB에서 post내용을 가져와서 보여주나 서버가 없으므로 md파일로 post를 저장해놓은 다음에 post내용을 읽어올 예정이다.

🪐md파일 데이터 읽어오기

먼저 md파일을 읽어오는 TypeScript 함수를 저장할 lib 폴더를 만든 후 그 안에 post를 읽어오는 post.ts 함수를 만든다.

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

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

export function getSortedPostData() {
    // 파일 이름 잡아주기
    const fileNames = fs.readdirSync(postsDirectory);
    // fileNames에는 ['pre-rendering.md', 등]이 파일명이 배열로 있다.

    const allPostsData = fileNames.map(fileName => {
        const id = fileName.replace(/\.md$/ ,'');

        const fullPath = path.join(postsDirectory, fileName);

        const fileContents = fs.readFileSync(fullPath, 'utf-8');

        const matterResult = matter(fileContents);

        return {
            id,
            ...allPostsData(matterResult.data as {date: string; title: string});
        }
    })

    return allPostsData.sort((a,b) => a-b);
}

해당 함수는 경로에 있는 md파일을 전부 읽어온 후에 데이터를 추출하고 해 당 데이터를 정렬해서 보여준다.

먼저 path 모듈의 join 함수를 사용해서 md파일이 있는 경로를 만든다. process 객체의 cwd() 메소드를 사용하면 현재 작업 디렉토리를 경로를 받을 수 있다.

fs 모듈의 readdirSync() 메소드를 통해서 경로에 존재하는 파일명들을 받아온다. id값은 정규표현식을 통해 확장자를 없앤 파일명을 할당하고 파일명까지 합친 fullPath를 통해 content를 가져온다. fs 모듈의 readFileSync()를 통해서 경로의 파일을 가져올 수 있고 인코딩 타입도 지정할 수 있다다.

그 다음 마크 다운 언어를 해석해주는 matter() 함수를 이용해서 해석받은 결과를 저장한 후 id와 matterResult를 object로 묶어서 반환한다.

그리고 map 메소드를 돌면서 반환받은 allPostsData를 sort함수로 정렬해서 반환한다.

☄️fs module

JavaScript의 fs 모듈은 파일 시스템에 접근하고 파일과 폴더를 다룰 수 있는 기능을 제공하는 내장 모듈입니다. fs 모듈은 Node.js 환경에서 사용되며, 브라우저에서는 사용할 수 없습니다.
-chatGPT

☄️path module

JavaScript의 path 모듈은 파일 경로와 관련된 유틸리티 기능을 제공하는 내장 모듈입니다. path 모듈은 파일 경로를 조작하고 파싱하는 데 사용됩니다. Node.js 환경에서 사용되며, 브라우저에서는 사용할 수 없습니다.
-chatGPT

자세한 사용법은 구글에 찾아보면 다 나온다. 찾아서 사용해보자.

☄️gray-matter

Gray-matter는 JavaScript 기반의 라이브러리로, Markdown 파일과 YAML, TOML, JSON 등의 프론트매터(front matter)를 파싱하는 기능을 제공합니다. 프론트매터는 문서의 메타데이터를 포함하는 머리말 부분으로, 일반적으로 YAML, TOML 또는 JSON 형식으로 작성됩니다.
-chatGPT

gray-matter 사용법도 찾아보면 다 나온다.

⭐TypeScript의 Type

Type이란 value가 갖고 있는 property나 함수를 추론할 수 있는 방법을 말한다.

TypeScript에서는 JavaScript에서 기본적으로 제공하는 기본 제공 유형을 상속한다.

추가적으로 TypeScript에서만 제공하는 Type도 존재한다.

☄️Any

Any 타입은 잘 알지 못하는 타입을 표현하기 위해서 사용된다. 사용자들로부터 받는 data 같은 동적인 content가 도착하더라도 Type 검사를 하지 않고 넘어가기 위해 Any 타입을 사용한다.

let arr: any[] = ["John", 21, true];

위와 같이 배열안에 여러가지 data type들이 들어갈 경우에도 any 키워드를 사용할 수 있다.

☄️Union

TypeScript를 사용하면 둘 이상의 데이터 유형을 사용할 수도 있다. 이것을 두고 Union 타입이라고 한다.

☄️Tuple

배열 타입을 보다 특수하게 사용하기 위해서 사용한다. tuple 타입은 명시적으로 지정된 형식에 따라서 아이템 순서를 설정해야하고, 추가되는 아이템 또한 tuple에 명시된 타입만 사용이 가능하다.

☄️Enum

값들의 집합을 명명하고 이를 사용하도록 만든다. 예를 하나 들자면,

위와 같이 PrintMedia를 정의한다면 0이라는 숫자는 PrintMedia.Newspaper로 사용할 수 있다.

let mediaType: number = PrintMedia.Book // 3

위 예제에서는 할당을 하지 않았으므로 0부터 시작해서 값들이 알아서 할당되게 된다. 반대로 값을 할당할 수도 있다. 값을 할당하지 않으면 마지막으로 할당된 값에 1을 더한 값으로 값이 할당된다.

언어의 집합을 보여주기 위한 용도로도 사용할 수 있다.

나중에 DB의 특정 table의 특정 column에 접근하기 위해서도 enum을 사용할 수 있을 것 같다.

Object와 비슷해보이는 enum은 선언할 때 이후에는 변경할 수 없다는 점이 Object와 다르다.

☄️void

정적 타입 언어에서 사용하는 void와 같은 맥락의 키워드이다. return이 없을 때 사용한다.

하지만 함수는 undefined를 반환한다는 점을 유의하자.

void는 null과 undefined를 반환할 수 있다. 하지만 바로 뒤에 배울 never은 어떠한 값도 반환하지 않는다. null, undefined도 반환하지 않는다.

☄️Never

에러를 던지는 함수이거나 절대 끝나지 않는 함수일 때 never 키워드를 사용한다.
혹시나 null, undefined를 포함한 값들을 반환한다면 에러가 발생한다.

⭐Type assertion

타입 어설션(type assertion)은 프로그래밍에서 동적으로 타입을 지정하는 언어나 정적으로 타입을 변환하는 언어에서 값을 명시적으로 특정 타입으로 지정하는 메커니즘을 말합니다. 이를 통해 프로그래머는 값의 의도된 타입에 대해 컴파일러나 인터프리터에 알릴 수 있으며, 특정 작업을 수행하거나 해당 타입과 관련된 메소드나 속성에 접근하는 데 유용합니다.
-chatGPT

type assertion을 사용하면 값의 type을 설정하고 compiler에게 유추하지 않도록 지시할 수 있다.

위와 같이 컴파일러는 foo를 속성이 없는 object라고 생각하기 때문에 컴파일러 오류가 발생한다.

하지만 위와 같이 type assertion을 이용하면 컴파일러 오류를 막을 수 있다.