[포트폴리오 웹페이지]프로젝트 메타인지하기, 마이그레이션 준비

벌써 1년

 

취업 준비 기간동안 작성한 포트폴리오 웹페이지가 있다.

 

이때는 다른 프로젝트들을 이미 React로 진행했기 때문에 기본기를 다지고, 갖추고 있음을 어필하기 위해 Vanilla JS를 사용하여 웹 페이지를 만들었다.

 

사실은 이후에 취업하면 마이그레이션 작업을 하려고 했다.

 

그러나 일로 바쁘다는 핑계로 마이그레이션 작업이 많이 늦춰졌다.

 

어느새 경력이 1년이 되어가는 시기인지라, 언제까지 Vanilla JS로 웹페이지를 둘 수도 없으니 늦게라도 마이그레이션을 진행하기로 결심했다.

---

프로젝트 메타인지 하기

 

먼저 프로젝트를 진행하기 앞서 나, 그리고 나아가 프로젝트에 대한 메타인지를 명확히 하기 위해 몇 가지 질문에 대해 스스로 대답을 작성했다. 

 

1. 왜 하는가?

 

이제 정식으로 개발자가 되어 경력을 쌓아가고 있으니, Vanilla JS는 너무 밋밋하다는 생각이 들었다. 특히나 FE 개발자인데 Vanilla JS라니, 해당 프로젝트가 노후화되어 보이고 나 자신도 트랜드를 따라가지 못한다는 인식으로 보일 수 있어 이제는 진짜 웹페이지를 바꿔야할 때라고 생각했다.

 

2. 무엇을 만들고 싶은가?

 

프로젝트의 성격은 여전히 같다. 나 자신에 대한 PR이 주요 내용이며 나는 어떤 개발자인지, 또 무엇이 강점인지 등을 명확히 쓰고, 사용자 상호작용 (User Interaction)

 

3. 어떻게 만들 것인가?

 

먼저 프로젝트에서 사용될 주요 기능과 관련된 기술 스택을 정리해보았다. 

 

• Next.js 를 사용하여 기존의 Vanilla JS를 대체하고, SEO를 챙긴다. *서버는 없다. Serverless가 아니라 그냥 진짜 없다.

What is your project named? my-app 
Would you like to use TypeScript? No / Yes -> Yes
Would you like to use ESLint? No / Yes -> Yes
Would you like to use Tailwind CSS? No / Yes -> Yes
Would you like your code inside a `src/` directory? No / Yes -> Yes
Would you like to use App Router? (recommended) No / Yes -> Yes
Would you like to use Turbopack for `next dev`?  No / Yes -> Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes -> Yes
What import alias would you like configured? @/*

• 공식문서에서 일괄적으로 사용가능한 TypeScript, ESLint, Tailwind CSS를 사용한다. (prettier는 덤)
• 흥미로운 웹 페이지를 만들기 위해 적당한 인터렉션을 추가하고 싶다. 주로 CSS animation을 활용한 스크롤 이벤트로 해결이 될 수 있지만, 이 외에도 react-slick을 상정한 캐러셀 활용할 예정이다.
• 이메일 연락을 받기 위해 EmailJS를 그대로 사용할 예정이다. 이 외에 React Hook Form 도 사용할 예정이다.
• 아직은 경력이 많지 않기 때문에 진행했던 프로젝트들 위주로 설명하기 위한 페이지가 필요하다. 개인 프로젝트와 이력을 분리하기 위한 페이지가 필요할 것으로 전망된다. 이때, 관련된 프로젝트들을 사용자가 재밌게 살펴보기 위한 간단한 게임을 만들어볼 예정이다.

 

4. 개발 기간은?

 

기간은 보수적으로 잡고 싶지만, 그렇다고 너무 늘어지게 만들고 싶지는 않다. 현재 일이 많기 때문에 투자가 가능한 시간을 계산해 보수적으로 2달을 생각하고 있다. (평일 평균 1시간 / 주말 2시간 + )

 

2달이란 기간이 꽤 길기 때문에 좀 더 세분화된 계획도 잡아보았다.

 

• 1주차: 프로젝트 기본 설정 및 Github Repo 생성, 연동 / ESLint, prettier 룰 설정 / 프로젝트 기본 아키택쳐 구현
• 2주차: 메인 랜딩 페이지 작업
• 3주차: About Me 페이지 작업
• 4주차: 프로젝트 페이지 작업 / 포트폴리오 정리
• 5주차: 프로젝트 페이지 작업 (추석 연휴 시즌)
• 6주차: 프로젝트 페이지 작업
• 7주차: 페이지 정리 및 애니메이션 작업 보수 / 1차 QA
• 8주차: 배포 수정 및 최종 QA

기본적으로 필요한 기술은 조금씩 배워가면서 적용하는 시간도 개발기간에 포함했다.

 

1시간 이상 포함하고 싶지만, 일 스케쥴 상 그 이상은 힘들지 않을까 싶어 우선은 보수적으로 잡을 수밖에 없는 것 같다.

---

 

불량 스파이더맨이 되지 않도록 앞으로 꾸준히 노력하길...