개인 포트폴리오 프로젝트 계획

하, Frontend 개발자형들!

팀 프로젝트를 4번을 경험했음에도 이력서에 올릴만한 프론트엔드 프로젝트가 그동안 없었는데 위의 블로그를 읽고 개인 프로젝트와 이력서에 적은 프로젝트의 배포를 결심했다

윗 블로그의 내용은 이력서를 검토하는 입장에서 Frontend 개발자 분들에게 말해주고 싶은 내용들인데 3가지로 요약할 수 있다

1. 이력서에 있는 프로젝트는 배포를 하자

2.README.md를 잘 꾸며라

3.개인 프로젝트를 해라

Frontend의 가장 큰 장점이 결과물을 보여줄 수 있다는 말이 와닿았는데 그 동안 코드를 보면 되지 굳이 배포 해야하나라는 생각에 빠졌던 것 같다. 생각해보면 나도 AI 프로젝트를 하신 어떤 분의 웹사이트를 접속해 보고 많은 걸 알 수 있었고 코드는 확인조차 하지 않았었다

이력서의 프로젝트들은 로컬 가나슈 기반의 블록체인 프로젝트이기 때문에 메인넷에 배포를 하는 과정이 어려워서 하지 않았었지만 어떻게 해서든 배포해볼 생각이다. 네트워크 이전이 정 힘들면 네트워크를 로컬DB로 대체하고 프론트엔드와 백엔드만이라도 구현할 것이다

---

포트폴리오 프로젝트

목적

이력서에만 사용될 개인 프로젝트로서, 다른 상업적인 용도로는 사용되지 않을 것이다(잡다한 기능은 전부 뺄 것이다)

면접관&채용 담당관에게 어필할 수 있으면서 수요가 많은 기술을 위주로 최대한 많이 선택한다.

(전역 상태관리의 경우 Redux, Redux-saga, Recoil, mobx, zustand, React-Query 등 선택지가 다양한데, Redux를 사용하고 필요하면 git branch 분기를 통해서 다른 것도 사용할 것이다)

앞으로의 프로젝트를 진행할 때의 기본 템플릿의 역할을 한다

기술 & 툴

나는 주로 Wanted라는 플랫폼에서 이력서를 지원했는데, 기업별 채용 공고문에 나와있는 요구사항마다 시트에 정리를 해놓았다.

카운트가 높게 된 기술을 우선적으로 사용할 것이다.

Frontend

React, Next.js, Redux, webGL, three.js, chart.js, TailwindCSS

Backend

Node.js, Express, Nest.js, erd, socket, MySQL

그 외

TDD, Figma, React Native, REST API, vercel

(단, websocket을 사용할 경우 vercel의 serverless functions에선 동작하지 않기 때문에, Railway를 사용할 수도 있다)

도면 설계와 비슷한 느낌이 든다

이유

Next.js: Next.js는 완전히 새로운 기술이 아닌 React 자체이고 더 쉽게 사용하기 위한 도구이다

또한, 이미 react 공식 문서에서 plain react를 사용하는 대신 framework를 사용을 권장하기 때문이다(특히 Next.js)

React엔 없는 개발 과정 단순화, 웹 최적화, 렌더링 옵션 선택의 유연성, SEO, 파일 기반 라우팅, serverless api, automatic code splitting 등을 지원한다

Redux: 코드량이 많아지고 사용법이 복잡한 단점이 존재하지만, 기존에 많은 프로젝트 들이 Redux를 사용했기 때문에 수요가 많고 기본이라 생각되기 때문이다.

TailwindCSS: Next.js에 Styled-Components와 함께 자주 쓰이기 때문에 선정했는데, 아직은 왜 자주 쓰이는지 학습이 부족하고 알아볼 예정이다

Express: javascript의 실력을 높이기 위한 풀스택이기 때문에 선정했다.

Nest.js: Next.js만큼의 입지는 아니라고 생각되지만, 채용 공고문에서 은근 보이기 때문에 선정했고, 프레임워크이기 때문에 Express와 함께 사용할 수 있다. 한 번도 사용해보지 않았기 때문에 경험하는 데 의미가 있고 더이상 사용할 의미가 없다고 판단되면 뺄 것이다

Socket.io: 채용 공고문에 WebGL과 함께 자주 보이는 기술이기 때문에 넣었다. 포트폴리오 사이트이기 때문에 채팅, 알림 등을 넣기 힘들기 때문에 도중에 사용이 힘들면 다른 프로젝트에 사용할 것이다

MySQL: 수요가 많고 기본이 되는 관계형 DB를 사용하기 위해 선정했다. 풀스택 개발자 면접에서 질문이 있었을 정도로 쿼리문 작성을 중요하게 보는 것 같다

TDD: 코드량이 늘어나는 단점이 있지만 테스트를 통한 코드 신뢰성이 증가하는 장점이 있다

React Native: 모바일 크로스플랫폼이 장점 중 하나이기 때문에 선정했고, 웹개발자에게는 Flutter보다 좋은 선택지라고 생각한다. 개인적으로 Python으로 외주 개발을 하면서 하나의 언어로 모든걸 할 수 있는게 장점이라고 생각했다. Javascript공부를 하다가 Python 프로그램을 개발했을 때 스코프 규칙이 다르다거나 GIL과 같은 개념 때문에 헷갈린 적이 많았다. 공부량이 2배가 되는것은 물론, 서로 헷갈리는 어려움 때문에 하나의 언어로 개발하는 걸 선호하게 되었다

Vercel: 대세라 할 수 있는 Next.js 개발팀에서 만든 호스팅 사이트이다. Github로 push를 통해 CI/CD를 구현할 수 있고 무료이다. 규모가 커지면 aws보다 비싸다고 한다.

Websocket을 사용하게 되면 vercel의 serverless functions에서 지원하지 않기 때문에 Railway로 갈아탈 것이다. 전혀 방법이 없는건 아니라고하니 이에 대해 좀더 알아볼 예정이다

Do Vercel Serverless Functions support WebSocket connections?

Vercel 공식 사이트 가이드에는 지원하지 않는다는 말이 아닌 Realtime Communication Providers를 사용하라는데, 지원하지 않는다는 말로 들린다