#1 컨텐츠 구상

1인 개발로 하며 생소한 ts와 next js를 사용하다보니 설계를 꼼꼼하게 하기보단

먼저 박아보고 조금씩 디테일을 추가하기로 하였다.

 

초기 컨텐츠로는

나에 대한 소개,

나의 기술 스택,

이력서,

경험한 프로젝트

 

총 4가지 컨텐츠로 결정이 났고 route 만 간단하게 연결해보자

 

이전 버전을 사용해본적이 없어 모르지만 13버전부턴 파일명이 아닌 디렉토리 명으로 라우트가 된다고 한다.

app 하위로 일단 디렉토리를 잡아두었다.

근데 글을 쓰다보니 컨텐츠들은 contents 디렉토리로 옮겨 합쳐야 보기도 이쁘고 관리도하기도 편할거 같다.

구조를 변경한 후 기존에 잡아두었던 라우팅 경로도 수정해준다.

import React from 'react'

export default function Home() {
    return (
        <h1>어바웃입니다.</h1>
    )
}

app/contents/about/page.tsx

 

아직은 ts만의 문법을 사용하지 않아 jsx 코딩만 한 느낌이다.

 

작성하면서 이것저것 건드려 봤는데 굳이 Home() 으로 받지 않아도 되어 About()로 변경하기로 했다.

import React from 'react'

export default function About() {
    return (
        <h1>어바웃입니다.</h1>
    )
}

 

그런데 나는 export default function ~~ 보단

const 로 선언 후 말미에 export default ~~ 를 적는걸 선호하여 변경해보기로 하였다.

 

import React from 'react'

const About = () => {
    return (
        <h1>어바웃입니다.</h1>
    )
}

export default About

http://localhost:3000/

http://localhost:3000/contents/about

오늘은 여기까지 하고 내일은 피그마를 이용해 UI를 만들어보도록 해야겠다.

 

아마 무료 에셋을 찾아 적용할듯 싶다.