포트폴리오를 만드는 이유?

올해로 벌써 개발자 생활 10년차를 맞아 내가 지금까지 무엇을 해왔나 되돌아보게 되었습니다.

지금까지 회사 일은 정말 열심히 해왔고, 큰 조직의 일부분으로서 부분적인 기능만 개발해왔지 완결성이 있는 서비스 개발은 해본 적이 없다는 생각을 하게 되었습니다. 여기서 말 하는 완결성이 있는 서비스 개발이란 최초 스켈레톤 코드에서부터 사용자에게 가치를 주는 단계까지의 전 과정에 참여하여 본인이 주도적으로 서비스를 만드는 것을 의미합니다.

길게 말할 것 없이 한 문장으로 요약하자면 아래와 같습니다.

나만의 서비스, 내가 만든 웹 사이트를 갖고 싶다

그렇다면, 왜 굳이 포트폴리오인가? 🧐

• 일단 가장 손쉽게 만들 수 있는 기능을 먼저 시작하고 싶었습니다.
• 그리고 제 링크드인이나 페이스북의 프로필 페이지에 걸어둬서 간단하지만 하나의 홍보수단으로서 삼고 싶다는 생각도 들었습니다.
• 마지막으로 무수히 많은 포트폴리오 제작 강의 영상이 있습니다. YouTube에 portfolio website 라고 검색해보면 수백 수천개의 영상이 나옵니다. 이러한 영상들을 보다보면서 자연스럽게 포트폴리오를 제작하게 되었습니다.

포트폴리오, 그 이후엔? ✍️

• 포트폴리오 제작은 그리 어렵지 않았습니다. 문제는 그 이후에 무엇을 하느냐였습니다.
• 포트폴리오 이후에 거의 대부분의 개발자들이 자연스럽게 구현하는 것이 블로그인 것 같습니다. 개인 웹 페이지의 성격에 잘 맞기도 하고 또 구현하는 게 너무 쉽지도 않고 또 너무 어렵지도 않기 때문입니다.
• 그래서 저도 블로그를 만들기로 결정했습니다. '블로그'는 사실 아직도 기능 구현 중입니다. 대략적인 얼개는 맞춰놨고 내가 쓴 글을 하나라도 걸어놔야겠다 싶어서 이 글을 작성하는 것입니다.

개인 블로그의 시작을 여는겸 그리고 이번에 개인 웹 서비스를 개발하면서 배운 것들을 정리할겸 개발자 포트폴리오 제작기 시리즈 글을 작성할 예정입니다. 본 글에서는 백엔드 개발자로서 제가 사용한 FE 기술 스택과 그것들을 어떻게 공부했는지 그 과정을 소개하겠습니다.

---

어떤 기술 스택을 사용했는지, 그 이유는?

저는 백엔드 개발자로 10년 정도 경험을 쌓았습니다. 거의 대부분 서버 API를 만들고 인프라와 DevOps 분야에 종사했고 FE 경험은 그리 많지 않은 상태입니다. 더더욱 Production level의 FE 경험은 사실상 전무하다고 볼 수 있습니다.

백엔드 개발자로서 제가 기존에 사용해봤던 웹 FE 기술 스택은 다음과 같습니다.

• JavaScript (TypeScript)
  • 간단한 문법만 알고 있는 상태.
• React(Next.js), AngularJS
  • 아주 간단한 백 오피스(어드민) 기능을 위해 사용한 경험이 있습니다. 이 중에서 최근에는 회사 내부 개인 프로젝트 진행을 위해 Next.js로 아주 간단한 웹 페이지 제작은 했었지만 뭔가 깊게 사용해본 느낌은 아니었습니다.
• AWS, GCP
  • 회사 서비스 운영을 위해 AWS를 주로 사용했었고 최근 GCP의 일부 인프라 기능을 사용한 경험이 있습니다. 다만 주로 Back-end engineering 관점에서만 사용해봤고 FE와 연관된 부분은 극히 일부분입니다.

최종 선정 기술 스택

TypeScript

• TypeScript에 대해 좀 더 공부해보고 싶어서 선택하게 되었습니다. 과연 Java의 Type과 어떤 차이가 있을지도 궁금했습니다.
• 또한 추후 주기적으로 유지보수 할 때 더 도움이 될 것으로 판단했습니다.

React(Next.js)

• React가 웹 개발 기술 중에는 제일 대중적이고 Next.js가 React framework 중에서 역시 제일 대중적이기 때문에 이 기술 스택을 선정했습니다. 또한 아주 간단하지만 이전에 사용해본 경험이 있다는 것도 선정한 주요 이유 중의 하나입니다.
• 기존에 사용해봤던 AngularJS의 경우 워낙 예전에 사용해봤었고 또 제대로 사용하기 위한 학습에 필요한 절대량이 많을 것으로 판단했습니다.
• 상태 관리를 위해 Zustand와 TanStack Query를 선정. 예전에 Redux를 사용해봤었는데 매우 안좋은 개발자 경험이었고 최근에는 경량화된 라이브러리들이 많이 있어서 여러가지 중에 고민하다가 이 2가지를 선정했습니다.

Vercel

• 마지막으로 이 포트폴리오 웹 페이지를 어떤 서비스 환경에 배포하고 운영할지를 결정해야 했습니다.
• Vercel은 Next.js를 선정하고 나서 저절로 머릿속에 떠오른 클라우드 플랫폼 서비스였습니다. Netlify도 고려 대상이었습니다. 하지만 Next.js 학습을 위해서 시청했던 많은 유튜브 강의 영상에서 Vercel을 마지막 배포 단계에서 많이 사용했던터라 저절로 친숙해졌기 때문에 자연스럽게 Vercel을 선택하게 되었습니다.

---

FE 기술 스택 학습 방법

1. 강의 영상 시청 (YouTube)

• 유튜브에 무료로 올라온 정말 많은 프로그래밍 관련 강의 영상들이 있기 때문에 개발 공부 하기가 예전보다 훨씬 쉬워졌습니다.
• 학습 시작을 하고 나서 유튜브에 관련 키워드 검색을 하고 나니 알고리즘이 바뀌었는지 추천 영상 목록에 제가 원하는 영상들이 노출되기 시작했습니다. 그 중에서 괜찮아 보이는 영상들을 따로 '포트폴리오 제작' 이라는 목록에 추가하고 이 영상들을 집중적으로 보기 시작했습니다.

2. Clone coding (YouTube)

• 유튜브에는 2~3시간 혹은 10시간이 넘는 클론코딩 영상들이 있습니다. 이 영상들은 강의자가 특정한 주제에 대해서 강의하는 것이 아니라 만들고자 하는 기능에 대해서 설명한 후에(또는 데모를 시연하고 나서) 그 기능을 아예 백지부터 완성본까지 어떻게 만드는지 코딩하는 영상을 보여줍니다. 저는 이러한 클론코딩 영상을 보면서 실시간으로 코딩하는 방식으로 공부했습니다. 모니터 화면을 반으로 나눠서 왼쪽 절반은 유튜브 영상을 놓고 오른쪽 나머지는 VS Code를 두고 코드를 따라서 치는 방식입니다.
• 짧게는 2시간 분량의 영상부터 길게는 50시간에 달하는 클론 코딩 영상을 보면서 감을 익혔습니다. 클론 코딩을 시작하기 전에 React에 관한 강의 영상을 봤었고 또 예전에 그래도 React를 했었던 기억이 있기 때문에 진도를 따라가는게 그렇게 어렵지는 않았습니다.
• 다만 무작정 따라서 코드를 치는 것은 아니고 중간중간 영상을 멈추고 다른 방식으로 구현해 보거나 아니면 방금 구현한 기능의 코드를 삭제한 다음 영상을 안 보고 다시 구현 해보는 방식으로 연습했습니다. 이 부분이 정말 중요한 게, 어차피 나중에 내가 서비스를 만드는 경우 내가 스스로 코드를 전개해 나가야 하는데, 클론 코딩 몇 시간짜리 영상을 보면서 아무 생각도 안 하고 따라서 치기만 하면 정작 내 코드를 짤 때 헤매게 됩니다.

3. AI coding assistant

• 이번에 처음으로 VS Code에 Github Copilot 플러그인을 설치하여 사용해봤습니다. 강의 영상을 보면서 이해가 가지 않는 부분이 있을 때, 코드를 첨부하고 내가 궁금한 것을 자연어로 질문하면 아주 잘 대답을 하기 때문에 학습 용도로 사용하기에 아주 제격입니다.
• 개념에 대한 설명 뿐만 아니라 예제 코드까지 작성해주기 때문에 무언가를 새롭게 배워야 하는 입장에서는 손쉽게 이해도를 높일 수 있는 방법이라고 생각합니다.
• 다만 Github Copilot의 다른 주요 기능 중에 하나인 코드 자동 완성 기능은 꺼놓고 학습을 진행했습니다. 저는 이것이 공부할 때는 매우 중요하다고 생각하는데요. 학습할 때 사용되는 코드는 어느정도 정형화되어 있습니다. 그런데 자동완성을 켜놓게 되면 내가 생각을 해서 코드를 완성시키고 싶은데 이미 편집기에는 완성된 코드가 전개되어 있는 상황을 마주하게 됩니다. 이것은 학습의 목적에 배치되는 것이기 때문에 저는 이 기능을 꺼놓은 채로 학습을 진행했습니다.

---

이상으로 본 글을 마치겠습니다.

다음 글에서는 본격적으로 개발자 포트폴리오 제작을 어떤 과정을 거쳐서 했는지에 대해 소개하겠습니다