해야할 일을 정리하자면
1. api 서버에 요청하기
2. markdown 보이게하기
3. styled-components 적용하기
등이 있겠다.
├── src
| ├── components
| | ├── PageName
| | | ├── index.tsx
| | | ├── types.ts
| | | ├── styles.ts
| ├── contexts
| | ├── Locale
| | | ├── index.ts
| | ├── Page
| | | ├── index.ts
| ├── pages
| | ├── _app.tsx
| | ├── _document.tsx
| | ├── about.tsx
| | ├── index.tsx
| ├── providers
| | ├── Locale
| | | ├── index.ts
| | ├── Page
| | | ├── index.ts
| ├── shared
| | ├── constants.ts
| | ├── camelCase
├── public
.eslintignore
.eslintrc
.env
babel.config.js
next.config.js
package.json
README.md폴더 구조는 medium에 올린 오피니언과 nextjs에 styled-comnponets 적용하는 블로그를 참조했다. nestjs에서는 page를 따로 만들지 않고 한 파일안에 만들어 라우팅하는 듯 하다. 그래서 components 안에 각 페이지 별 폴더를 만들어 import하도록 했다. 또, next에 styled보다는 tailwind를 쓰는게 일반적인 거 같지만 css 까지 배워가면서 개발 진행하면 너무 오래 걸리고 또 tailwind로는 동적인 움직임을 구현하기 어려워 styled를 이용하기로 햇다. styled-components는 위에 블로그 그대로 따라했다.
일단 1번부터 해야 된다. 웹 개발할 때 가장 짜증나는 두 가지는 css class 이름 짓기랑 CORS다. 그 다음 버블링이지 않을까 싶은데 어쨋든.
일단 nextjs로 routing을 해야 되는데 익숙해지고 나니까 사람들이 왜 nextjs 빠는지 확실히 느꼈다.
├── pages
| ├── posts
| | ├── [slug].tsx
| | ├── index.tsx
| | ├── types.ts그냥 이렇게 폴더 구조 만들면 routing이 끝난다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 nextjs 사랑해요
import { API_BASE_PATH, PATH } from "@/shared/constants";
import axios from "axios";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
import { PostResponse } from "./types";
export default function Post() {
const router = useRouter<"/posts/[slug]">();
const { query } = router;
const slug = query.slug;
const [post, setPost] = useState<PostResponse>();
const getPost = async (slug: string) => {
try {
const response = await axios.get<PostResponse>(
API_BASE_PATH + PATH.posts + `/${slug}`
);
setPost(response.data);
} catch (error) {
if (axios.isAxiosError(error)) {
router.push("/posts");
}
}
};
useEffect(() => {
if (slug) {
getPost(slug);
}
});
return <div>{post && <ReactMarkdown>{post.body}</ReactMarkdown>}</div>;
}
1을 하고 글을 썼어야 햇는데 귀찮아서 1,2 한 번에 하고 쓰고 잇다. 여기서 주목하면 좋은건 useRouter다. 나는 typescript에서 any를 쓰는 건 좀 별로라고 생각한다. 그래서 그냥 안 쓴다. 문제는 next router에서 query를 받아올 때 type이 string | string [] | undefined로 들어오기 때문에 type을 as 로 강제 형변환하거나 if-else를 쭉 늘렸어야 됐다. 그런데 next router는 제대로 routing을 해주기 때문에 slug에는 string만 들어온다. if문을 만들기에는 굉장히 난감한 상황이었는데 찾아보니 nextjs-routes라는 좋은 패키지가 있어서 위와 같이 타입을 맞춰줄 수 있었다. 되게 typescript답게 잘 만든 패키지 같아서 굉장히 맘에 든다.
마크다운 component는 react-markdown 썼다.
axios는 비동기로 요청/응답할때 너무나도 유용한 패키지다. await문을 쓰는 get 메소드 외에 post, delete, update할 때 그 빛을 발한다고 생각한다. 암튼 api 요청을 하다보면 CORS 때문에 개발환경에서 짜증이 날 때가 많다. django의 경우 cors-headers가 이 문제를 잘 해결해주는데 chrome에서 안 될 때가 있다. 이 이유는 찾아봐도 잘 모르겠는데 이럴 땐 그냥 다른 브라우저 쓰는 게 편하다.
잘 요청을 먹고 보여준 것을 확인했다.
다음으로는 post 페이지 꾸미고 화면 흐름도를 정리할 필요가 있다. posts페이지 처럼 여러 posts를 받아오면 꾸미는 페이지, 홈페이지에 dashboard 정도만 만들면 될 거 같다. 이후에는 post 기능 추가하면서 authentication만 따지면 얼추 원하는 건 다 만들어진다. 좀 어려운 건 검색 기능 정도?
일단 post 페이지는 styled-components말고 tailwind도 쓸까 심하게 고민된다. 하나로 통일하는 장점이 두 개를 다 쓰는 장점보다 크다고 생각되지 않지만 좀 더 조사해보려고 한다. chakraUI도 추가하려 한다. 외부 패키지는 적게 쓸수록 좋은 게 맞지만 굳이 내가 디자인까지 해야 되나라는 생각이 든다.
