Node & React basic3 #3

Jay·2023년 6월 2일

Node & React basic 3

목록 보기

3/3

TypeScript

출현배경(?)

JS가 클라이언트 측 언어로 도입되었으나 Node.js를 통해 JS를 클라이언트 측 뿐 아니라 서버 측 기술로도 활용할수 있게 되었다. 그러나 JS코드가 커질수록 소스코드가 복잡해져 코드 유지관리가 어려워졌고, Type검사나 컴파일 시 오류검사의 기능 수용 불가로 인해 TS가 제안됨.

TypeScript는 자바스크립트에 타입을 부여하여 확장시킨 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행을 위해서는 컴파일 과정을 거쳐야 한다.

Type system

에러 잡게 도와줌
type annotations - 코드 분석가능
개발환경에서만 활성화
성능환경과는 관계없음

본격적으로

NextJS페이지에 있는 간단한 블로그앱을 만들어 볼 것이다.

처음에 만든 NextJS파일을 실행시켜 보자.
난 전에 루트폴더속에 다른 폴더를 하나 더 만들어 버렸는데 (create-next-app [폴더이름] 이런 식으로) 실수로 루트폴더에서 npm run dev했다가 구동이 안돼서 잠깐 식은땀 흘렸다..
구동을 해보면 3000번 서버에서 구동되고 있고 확인해보면

이렇게 페이지가 뜨는걸 확인할 수 있다. 완전신기해.

메인페이지 UI를 만들자.

특이하게 느껴진 점은 다 그런 건지 아님 이 강의에서만 그런 건지 모르겠지만 엘리먼트의 className을 줄 때 import한 module css를 통해 주기 때문에 중괄호를 사용한다는 점이다.
<section className={homeStyles.headingMd}>이런 식으로.
homeStyles는 import homeStyles from "../styles/Home.module.css";로 import되어있음.

MD파일 (Markdown 파일)

원래대로라면 완성된 블로그에서는 서버에 저장된 포스트 내용을 읽어올 수 있어야 하는데 우리는 아직 서버가 없으니까 임의의 md파일을 생성해줄 것이다.

pages폴더 안에 posts폴더를 만들어준다.
루트폴더에도 posts라는 폴더를 만들어주고 이 안에 md파일을 만들어줄 것임.

두 개의 md파일을 만들어주었다.

그런 다음 루트폴더에 lib폴더를 만들어주고 post들에 관련된 함수를 넣어줄 post.ts파일을 생성
이 파일안에 넣을 함수를 통해서 md파일을 데이터로 만들 수 있게 할 것이다.

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

export function getSortedPostsData() {
	const fileNames = fs.readdirSync(postsDirectory)
    
    const allPostsData = fileNames.map(fileName => {
    	const id = fileName.replace(/\.md$/, '')
        const fullPath = path.join(postsDirectory, fileName)
        const fileContents = fs.readFileSync(fullPath, 'utf8')
        const matterResult = matter(fileContents)
        
        return {
        	id,
          	...(matterResult.data as { date: string, title: string })
        }
    })
    
    return allPostsData.sort((a, b) => {
    	if (a.date < b.date) {
        	return 1
        } else {
        	return -1
        }
    })
}

process.cwd()라는 게 있는데 이걸 통해서 폴더의 경로를 나타낼 수 있음

따라서 const postsDirectory = path.join(process.cwd(), 'posts')라는 코드는 md파일이 들어있는 경로와 posts를 join한다는 것이다.

그 다음에는 fs(fileSystem)이라는 모듈을 이용해서 이를 읽고 있음.
fileNames에는 md파일 이름이 그 개수만큼의 요소를 가진 배열로 만들어져있을 것이다. 이 배열로 map을 한 다음 md파일의 .md확장자만을 제외한 이름이 id가 되게 해 준다. .md가 있으면 ''로 없애줘라라는 정규식이라고 하는데 아 어려워

그리고 위에서 만들어줬던 변수인 postsDirectory랑 fileName을 join해주면 각 fileName까지의 경로가 될 것이다(fullPath).

마지막 sort에서는 각 md파일에 포함된 date를 기반으로 이들을 정렬하고 있다.
예시파일 안에 date가 있기 때문에 가능

mdn에서 예시를 볼 수 있는데
아니 실험해보려고하니까 안랩 세이프 트랜잭션이 개발자 도구를 못 열게 한다 ㅡㅡ

이런 예시가 있는데 이건 나이를 내림차순으로 정렬하는 거지만 우리는 숫자가 클수록(최신 포스트일수록) 위로 올려야 하니까 로직을 반대로 짠 것임