포트폴리오 제작기 (1)

나의 소박한 꿈 하나.. 나만의 포트폴리오 웹사이트 만들기.

이를 위해 React와 Next.js를 열심히 복습했다. 또한 백엔드 구축에 쓰일 Strapi라는 좋은 툴도 알게 되었다 😎

이제는 때가 왔다. 이 때를 얼마나 기다려 왔던가

제작기를 어떻게 적을까 생각을 많이 해봤다. 우선 목차는 이러하다.

1. 기획 & 디자인
2. 백엔드 개발
3. 프론트 개발
4. 배포 및 리팩토링

간단하게 기획 먼저 작성해보려 한다.

기획 & 디자인

기획 및 디자인에서도 생각할 사항이 아주 많았다.

1. 어떤 기능(페이지)로 구성될 것인지
2. 어떤 기술을 사용할 것인지
3. 디자인
4. Convention & Git 전략
5. API 기획

일단 혼자 진행하는 프로젝트이므로, 4번은 내가 적용하던 Airbnb eslint, prettier 포맷팅 사용 및 브랜치는 dev 브랜치만 생성해서 진행하는 것이 좋을 것 같았다.

따라서 1, 2, 3, 5번에 대해 홀로 고민을 시작했다.

1. 어떤 기능(페이지)로 구성될 것인지

말 그대로 포트폴리오는 내 이력, 프로젝트들을 보여주는 웹 사이트지 사실상 특별한 기능을 탑재하지 않아도 괜찮다.

나중에 여유가 된다면 방명록 기능을 추가하기로 마음먹고, 페이지만 간단히 나눴다.

1. Main Page - 메인페이지
2. ProjectList Page - 프로젝트 리스트
3. ProjectDetail Page - 프로젝트 리스트에서 특정 프로젝트 선택 시 이동되는 디테일 페이지
4. AboutMe Page - 내 소개, 이력, 기술 스택이 담긴 페이지

2. 어떤 기술을 사용할 것인지

이건 너무나도 명확했다.

Vue도 여러 장점이 있지만, 나는 컴포넌트 로직, UI, 스타일이 전부 한 파일에 모여있는 SFC(Single File Component) 구조가 지극히 개인적으로 맘에 들지 않는다.

리엑트에서 jsx, tsx 파일 형식을 사용할 때도 가독성 & 유지보수를 위해 Style 파일을 분리하는 것을 좋아하는 나에게, 분리도 못하는 저 뷰 파일의 구조란 정말 고구마와도 같았다.

그래서 내 입맛대로 만드는 포트폴리오 그냥 리엑트 쓰기로 했다. 홍홍

따라서 고민 끝에 사용하기로 한 기술들은 이러하다.

Frontend : React / Next.js / Typescript

Backend: Strapi

Deployment: Vercel or github.io

Next.js는 이번에 공부하면서 정말 큰 장점 몇가지를 몸소 체험해본 뒤 반하게 되었고,

Typescript는 내 자잘한 실수들을 줄여줄 마법의 언어이기 때문에 사용하기로 마음먹었다.

또한 API 명세서 작성 시, 미리 데이터 형식을 정해놓으면 back과 front 간 충돌이나 오류가 없을 것 같아 사용하기로 했다.

3. 디자인

저번 팀 프로젝트와 동일하게 Figma를 사용하여 디자인했다.

사실 변덕왕이어서 디자인 계속 수정할지도 모른다.. 완벽하게 맘에 들지 않거든요..

데탑으로 보면 대충 요론 모양새이다.

나는 디자인 전공이 아니기 때문에 figma 컴포넌트 단위는 아직까지 좀 어렵다.

그래도 그 동안 독학해놓은 덕분에 디자인은 뚝딱 완성할 수 있었다.

뭣보다 내가 제일 좋아하는 색들 쓸 수 있어서 행복한 디자인이었다.. 😚

4. Convention & Git 전략

위에서 언급했듯, Airbnb eslint, prettier 포맷터를 적용하고,

dev 브랜치에서 개발 진행 -> main에서 배포를 진행할 예정이다.

커밋 메세지는 지금까지 계속 사용하던 유다시티의 커밋 메세지 Convention을 사용할 예정이다.

5. API 기획

api를 구성하기 전에 어떤 정보들을 api에 넣을 것인가 부터 고민해야 한다.

우선 서버에 넣고자 하는 데이터는 projectList, projectDetail 페이지의 데이터이다.

(1) ProjectList (GET)

👉🏻 /projects

{
  projects: [
    {
      id: Number,
      channel: String,        // One of ['personal', 'team']
      title: String,
      description: String,
      titleLogo: String,
    },
    // ...
  ]
}

(2) ProjectDetail (GET)

👉🏻 /projects/{projectId}

{
  project: {
    id: Number,
    title: String,
    description: String,
    titleLogo: String,
    technologiesUsed: Object,   // {Languages: ..., Libraries: ... , ects: ...}
    Develop: Array,
    images: Array
  }
}

마무리

이제부터 시작이다. 오늘 create-strapi-app과 create-next-app을 각각 만들었다.

backend와 frontend를 각각 따로 진행한 적은 많았지만, 한 프로젝트 내에서 둘 다 해보는 것은 처음이다. 나..잘 할 수 있겠지..? (아련..)

그리고 아무도 내 포트폴리오를 대신 만들어주진 않지. 화이팅이다!