개인 블로그 회고 2- 코드 소개

TS 관련

제일 먼저 가볍게 TS를 먼저 새로 배운 것을 공유하고 싶어서 TS를 넣게 되었다.

이번에 TS로 코드를 작성하면서 최대한 any를 빼고 작성하기 위해 노력했지만 어쨌든 결국엔 데이터 통신, 라이브러리의 타입, 프론트 프롭들의 타입 정도만 정의하며 진행하게 되었다.

javascript
1export interface IPost {
2  title: string;
3  content: string;
4  views: number;
5  tags: Tag[];
6  description: string;
7  category: { category: string } | null;
8  createdAt: Date;
9  updatedAt: Date;
10}
11
12interface PostData extends Omit<IPost, "createdAt" | "updatedAt" | "category"> {
13  category?: string;
14  date: string;
15  ok: boolean;
16  message?: string;
17}

데이터가 이리저리 구르다 보면 타입이 바뀌는 일도 있을 텐데 여기서 Omit 을 사용한다. 원래 정의한 타입에서 다시 정의하고 싶은 타입은 상속받은 후 다시 작성하고 그냥 없애고 싶다면 속성만 나열해놓은 후 작성하지 않는다면 타입의 나머지 속성들은 그대로 물려받으면서 속성을 재정의할 수 있다.

SSR, SSG

처음이나 지금이나 SSR을 생각하면 막연히 서버사이드에서 작동해서 데이터를 받고 이 데이터로 페이지가 작성된 후에 클라이언트에 넘어가는 거라고만 생각했었는데 이번에 SSR을 작성하면서 클라이언트가 보는 코드 페이지에서 작성해도 결국에는 서버에서 작동이 되는 거라고 느끼게 되었다.

javascript
1index page
2
3export async function getServerSideProps() {
4  const tags = await Tags();
5
6  return { props: { tags } };
7}
8
9/api/blogs/index.ts
10
11export default async function AllPostId(): Promise<{ id: number }[]> {
12  const postsId = await prismaclient.post.findMany({
13    select: {
14      id: true,
15    },
16  });
17
18  return postsId;
19}

Next를 사용하면서 주의점은 서버에서 사용하는 함수를 절대 클라이언트 쪽에 노출하면 안된다는 것이었는데 이 생각 때문에 더 생각을 못 하고 무조건 클라이언트 페이지에는 서버 함수를 사용하면 안 된다고 생각했었지만 결국에 SSR이 하는 일은 절대로 클라이언트에 노출되지 않고 서버에서만 작동하는 걸 깨닫게 된 후에 작성된 코드이다.

Backend

프리즈마를 이용하면서 가장 머리가 아팠던 태그가 존재하면 그것을 이용하고 포스트에 연동하기다. 이 부분이 벡엔드에서 가장 어려웠었던 것 같다. 여기서 알고리즘의 중요성을 알게 되었고 여기서 더 보완이 가능해 보이지만 아직 머리에서 생각나는 것이 없다.

카테고리와는 다르게 태그는 여러 개를 입력받을 수 있고 그 안에서 존재하고 있던 태그, 없던 태그를 구분하고 연동 및 생성하고 연동하는데 프리즈마에 익숙하지 않고 경우의 수가 너무 많아서 어지러웠지만 필요한 기능들을 하나씩 나눠서 해결하니까 결국 해결되었다.

Frontend

오랜만에 리액트를 잡으면서 좀 두려웠고 바로 Redux를 이용해서 인피니티 스크롤을 이용해 만들려 하니까 처음에는 previousData가 null일때 함수가 아예 작동을 안하고 태그를 눌러도 안바뀌는 등 매우 어려웠고 헤맸지만 얻는 것도 많았다.

useRef의 Dom조작 의외의 역할도 알아냈고 그에 따라 그 값을 이용해 유용하게 사용할 수 있었다. 그리고 처음 사용해본 Redux 코드 태그 컴포넌트가 따로 있고 그걸 누르면 tagRef 값이 바뀌면서 받아오는 url의 값이 바뀌는 것이었는데 이때 처음으로 상태관리로 편안하게 기능을 구현해서 필요성을 확 느낄 수 있었던 것 같다.

개인 블로그 회고 2- 코드 소개

Table of Contents

TS 관련

SSR, SSG

Backend

Frontend