백엔드 개발자 포트폴리오

Gatsby로 만든 정적 사이트

2024.1.20. ~ 2024.3.14.

백엔드 개발자 포트폴리오 대표 이미지
Gatsby
typescript
0 번째 이미지
1 번째 이미지
2 번째 이미지
3 번째 이미지
4 번째 이미지
5 번째 이미지
6 번째 이미지
7 번째 이미지
8 번째 이미지
9 번째 이미지

개발해왔던 프로젝트들을 정리하기 위해 Gatsby를 사용하여 직접 포트폴리오 사이트를 만들었습니다. 웹 개발자로써 React로 직접 자신만의 웹페이지를 만들어 보고 싶다고 줄곧 생각해왔고, 학기가 끝난 틈을 사용해 저의 프로필과 프로젝트들을 소개할 수 있는 페이지를 만들어 보았습니다. 각 프로젝트의 세부적인 페이지는 .mdx 파일에서 마크다운으로 작성되고, 이를 읽어들여 각 페이지를 생성해냅니다.

별도의 서버없이 github.io로 사이트 배포를 하기 위해 React 기반 정적 사이트 생성기인 Gatsby를 선택했습니다. React 환경에는 이미 친숙한 만큼 Gatsby를 사용하는 데 큰 무리가 없었습니다. 사이트를 만들면서 GraphQL을 통해 파일을 읽고 데이터를 처리하였고, 이 과정을 통해 GraphQL의 기초적인 사용을 새롭게 익혔습니다.

🔧 사용 기술

Gatsby typescript mdx graphql ESLint Prettier TailwindCSS

Projects Page

3가지 분류는 아래의 기준을 따릅니다.

  • Main Project: 백엔드/웹 개발의 전문성을 보여 줄 수 있는 Signature works
  • Sub Project: 백엔드/웹을 넘어 다양한 기술에 대한 흥미를 보여주는 활동
  • Toy Project: 흥미 위주의 단순 재미를 위한 개발