서론
개발 블로그를 github io 로 옮기면서 고민을 해야할게 늘어났다. 우선 메뉴부분인데 어떻게하면 간단하게 .md 파일을 추가하면서 메뉴트리를 짤 수 있을까 고민해봤다.
root
└── posts
├── front
│ ├── next.js
│ │ └── 2022-11-12#next.js란_무엇인가.md
│ └── react
│ └── 2022-11-12#react_란_무엇인가.md
├── back
│ └── express
└── devops
└── aws
우선 최선은 이런식으로 앞에는 날짜, 뒤에는 제목의 형식으로 파일을 만들면 메뉴엔 자동으로 추가가 되는 형식으로 만드는거라고 생각이 든다.
본론
프로젝트 구조
위와같이 프로젝트 구조를 잡아 놓고 _app.js 로 devlog 페이지의 레이아웃을 잡아주자
// _app.js
import '../styles/globals.css'
import Layout from "../pageComponents/Layout";
import LayoutDevlog from "../pageComponents/LayoutDevlog";
import React from "react";
const getLayout = (asPath) => {
if (asPath === "/devlog") {
return LayoutDevlog;
}
return LayoutDevlog;
};
function MyApp({Component, pageProps, router}) {
const Layout = getLayout(router.asPath);
return (
<Layout>
<Component {...pageProps} key={router.route}/>
</Layout>
);
}
export default MyApp
여기서 중요한것은 먼저 MyApp function에서 getLayout에 router의 경로 정보를 보내서 주소 시작이 /devlog 로 되어있으면 <LayoutDevlog/>를 호출해준다.
// LayoutDevlog.js
import React from "react";
import styled from 'styled-components';
import Head from "next/head";
const Root = styled.div`
`;
const LayoutDevlog = ({children}) => {
return (
<Root>
<Head>
<title>Juhwannn`s Devlog</title>
</Head>
{children}
</Root>
);
};
export default LayoutDevlog;여기도 그렇게 중요한 코드는 없다. 그럼 이제 LayoutDevlog.js 에서 블로그 레이아웃을 잡아주면 적용이 잘 될것이다!
메인 네비게이션 바 디자인
기존에 만들어져있는 깃헙io의 디자인을 크게 바꾸고싶진 않아서 (아직 만족하기 때문에) 아래랑 비슷한 디자인으로 할 예정이다.
기존 레이아웃은 냅두고 개발블로그의 메인 네비게이션 바 부터 디자인을 해보자면 아래와 같이 기존 레이아웃과 비슷하게 꾸며봤다.
레이아웃 분기처리는 아래와같이 url 시작점이 /devlog 로 시작되면 Devlog 레이아웃으로 보여주게끔 변경해줬다.
import '../styles/globals.css'
import LayoutDevlog from "../pageComponents/LayoutDevlog";
import Layout from "../pageComponents/Layout"
import React from "react";
const getLayout = (asPath) => {
if (asPath === "/devlog") {
return LayoutDevlog;
}
return Layout;
};
function MyApp({Component, pageProps, router}) {
const MainLayout = getLayout(router.asPath);
return (
<MainLayout>
<Component {...pageProps} key={router.route}/>
</MainLayout>
);
}
export default MyApp;메인 포스트 화면과 메뉴
이제 DevlogLayout 에서 가운데 크게 보여지게 될 포스트와 오른쪽과 왼쪽에 각각 메뉴목록, 태그목록을 보여주게 할 예정이다.
우선 메뉴 부분부터 만들어보자
posts: {
back: {
express: {
},
node: {
}
},
devops: {
aws: {
},
docker: {
}
},
front: {
next: {
},
react: {
}
}
}위와같은 방식으로 메뉴트리를 읽어와서 object 에 추가 한 후 요청한곳으로 보내줄건데, 이렇게 하는 이유는 메뉴가 얼마나 추가가 되든, 포스트가 얼마나 추가가 되든 동적으로 메뉴트리에서 자동으로 추가가 되게끔 하려고 하기 때문이다.
//
const isDirectory = (dir) => {
if (fs.lstatSync(dir).isDirectory()) {
return true;
}
return false;
}
const pushFiles = (dir, file) => {
dir["files"] === undefined ? dir["files"] = [] : null;
dir["files"].push(file);
}
const test = (postsDirectory, folderStructure) => {
fs.readdirSync(postsDirectory).map((v,i) => {
const test1 = path.join(postsDirectory, v);
if (isDirectory(test1)) {
folderStructure["posts"][v] = {};
fs.readdirSync(test1).map((value, index) => {
const test2 = path.join(test1, value);
if (isDirectory(test2)) {
folderStructure["posts"][v][value] = {};
fs.readdirSync(test2).map((v2, i2) => {
const test3 = path.join(test2, v2);
if (isDirectory(test3)) {
folderStructure["posts"][v][value][v2] = {};
} else {
pushFiles(folderStructure["posts"][v][value], v2);
}
});
} else {
pushFiles(folderStructure["posts"][v], value);
}
});
} else {
pushFiles(folderStructure["posts"], v);
}
});
}// result
{"posts":{"back":{"express":{},"node":{}},"devops":{"aws":{},"docker":{}},"front":{"next":{},"react":{"files":["2022-09-22#[React]_React_Hook_이란?.md","test.md"]}},"temp":{"files":["nonblocking.md"]}}}
{
posts: {
back: { express: {}, node: {} },
devops: { aws: {}, docker: {} },
front: { next: {}, react: [Object] },
temp: { files: [Array] }
}
}
위 소스는 메뉴구조가 3dept 까지만 있다고 가정하고 짠 로직이다. 어떤가 결과물은 아름답지만 지저분한 로직과 가독성 떨어지는 코드로 빨리 리팩토링 해주고 싶어졌다.
조금 길어질것 같아 다음포스트로 넘기겠다.
