[bblog 3.5] 서버없이 포트폴리오 사이트를 작성해보자

사실 메인이라 부를 수 있는 아래의 도메인

https://gumyo.net/

HS ::

왜냐면.. 내가 이 도메인을 10년 결제해 놓았다

 

이유는 다양하긴 한데 일단 술 마실 때마다 1년씩 결제해서.. 어느덧 5년짜리가 되어버렸고

그냥 이러기보단 앗싸리 5년 더 결제해서 10년을 만들자는 생각을 가지게 되었더니만..... 10년이 흑흑..

 

그리고 이때 처음 안 사실로 도메이는 최대 10년까지

그리고 이후로는 다시 유예기간에 새로 10년을 연장하는 그런 방식이라 한다 

 

 

여하튼, 잡설 집어치우고 근 3일 만에 마무리 때려버린 포트폴리오 사이트를 작성해 보자 

 

먼저 전신은 bblogv3이다

https://hyns.dev 

HS :: Intro

 

v3를 만들면서 겪은 것이지만

 

chakra ui의 잘못된 사용법으로 작살이 나버린 컬러스키마, 중구난방의 디자인등

 

이런 것들이 너무나 아쉬웠다. 하지만 그 이후로 시간이 없어서 손도 못 대고 있었는데

마침 시간이 조금씩 나면서 주말에 불태울 의지도 생기면서..!!!! 시작하게 되었다

 

잘못된 사용법을 타파하기 위해  Chakra UI에서 제공하는 공식 도큐먼트를 정독하기 시작한다

 

사실 매번 installation 부분과 components만 보고 떼서 쓰는 형식으로도 엄청난 만족감이었는데 

이번에는 최대한 상속과 컬러스키마 등을 이용하기로 한다 

 

일단 아래의 문서가 사실상 본체다

https://chakra-ui.com/docs/styled-system/style-props

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

 

 

읽고 나서 유튜브 돌며 많은 사람들의 코드를 보고 대충 감이 잡히기 시작한다 

큰 틀에서는 벗어나지 않게끔 내 코드 스타일을 녹여서 코딩을 시작했다 

 

아참, 이번에 사용할 스택도 Nextjs이다 근데 13.4에 올라오면서 app라우팅이 정식으로 올라왔다니

쓰지 않을 수가 없다

 

바로 구조를 잡고 시작을 한다

 

src

ㄴ app

ㄴ components

ㄴ config

 

이렇게 깔끔하게 나누고 웬만한 건 다 컴포넌트에, 설정이 될만한 것들은 config에 넣고 

최종적으로 config에 들어간 Chakra UI의 config은 아래와 같다 

 

import { extendTheme } from '@chakra-ui/react'
import type { StyleFunctionProps } from '@chakra-ui/styled-system'

const hoverStyle = {
    _hover: {
        transform: 'scale(1.01)',
        opacity: 0.5,
        textDecoration: 'none',
    },
    _active: {
        opacity: 0.5,
    },
}

const fonts = {
    heading: '"M PLUS Rounded 1c", sans-serif',
    body: '"M PLUS Rounded 1c", sans-serif',
}

const components = {
    Link: {
        baseStyle: () => hoverStyle,
    },
    Button: {
        baseStyle: (props: StyleFunctionProps) => ({
            color: props.colorMode === 'dark' ? 'black' : 'white',
            ...hoverStyle,
        }),
    },
}
const styles = {
    global: (props: StyleFunctionProps) => ({
        body: {
            bg: props.colorMode === 'dark' ? 'black' : 'white',
        },
    }),
}

const config = {
    initialColorMode: 'dark',
    useSystemColorMode: false,
}

const theme = extendTheme({
    fonts,
    components,
    styles,
    config,
})

export default theme

(아니.. 몇 줄 없잖아..)

 

좀 짧은데 생각보다 별로 커스텀할 게 없었다 

항상 고집하던 borderRadius 또한 이번에는 시스템에 있는 상태 그대로 사용하기로 하였다

 

 

글이 길어지는듯하니 2편으로 넘어가자