시작하면서...
기업연계 프로젝트를 시작하기 이전에 혼자서 처음부터 끝까지 기획하고 운영까지 해보는 프로젝트를 시도해보고자 펩픽(FE Pick)을 개발하게 되었다. 또한, 내가 문제를 제공한다 했을 때 스스로에게도 학습에 도움이 되고 문제를 푸는 사람에게도 여러가지 방면으로 도움을 줄 수 있다고 생각했다.
📍 FE Pick
이 기획대로 진행된 펩픽(FE Pick)은 프론트엔드 스택에 대해 공부하고 있는 주니어 개발자분들이 기초 개념에 대해 퀴즈를 풀고 스스로의 학습 진도를 체크하면서 실력을 쌓아갈 수 있는 유익한 시간을 제공한다. 각 퀴즈는 HTML, CSS, JavaScript, TypeScript, Next.js, React의 기초 개념을 기반으로 구성되어 있으며, 실전 감각을 키우고 학습한 내용을 복습하는 데 도움을 준다.
🔗 진행과정
정적사이트로 개발
처음엔 백엔드없이 정적 사이트로 기획하고 개발을 했다. 이후 작업물을 보니 프론트엔드 기술 스택에 대한 문제와 카테고리는 광범위하다보니 혼자서 데이터를 채우는 것이 어려울 것 같다는 생각을 했다. 그래서 방명록을 추가하여 펩픽(FEPick)을 사용한 사람들에게 퀴즈 카테고리를 추천을 받아야겠다 생각을 했다. 방명록을 구현하려면 서버와 데이터베이스가 필요하여 서버를 구축하고 MongoDB를 연동했다.
방명록, API 개발
2주동안 혼자 진행하는 프로젝트라 기존 결과물은 최대한 유지하고 추가된 API와 DB는 방명록페이지에서만 사용했다. 방명록 페이지에서는 MongoDB에 저장된 방명록 리스트를 읽어오는 API와 새 방명록을 추가하는 API만 개발하여 기능을 간소화했다.
배포
처음에는 Firebase, Github Pages, Netlify 같은 서비스들을 고려했지만, AWS를 사용해보고 싶었어서 이번 기회에 AWS를 선택하게 되었다. 서버는 AWS EC2에 배포했고, 프론트엔드는 Netlify에 배포하려고 시도했으나 HTTPS에서 HTTP로의 요청이 차단되는 문제가 발생했다. 이 문제를 해결하기 위해 서버도 HTTPS로 변경해야 했다. HTTPS로 변경하려면 SSL 인증서를 발급받아야 했고, 이를 위해서는 도메인이 필요했다. AWS Route 53에서 도메인을 생성한 후, Nginx를 통해 SSL 인증서를 발급받아 생성한 도메인에 연결하여 배포를 성공적으로 완료할 수 있었다.
🔗 결과물
페이지를 기준으로 크게 스택을 선택할 수 있는 메인페이지, 카테고리를 선택할 수 있는 페이지, 퀴즈를 풀 수 있는 페이지, 방명록을 남길 수 있는 페이지로 구성되어 있다.
약간의 재미요소로 페이지가 로드될때 실행되는 마우스 포인트 애니메이션과 플랫폼을 설명하는 모달, 카운트 30초 지날 때 나오는 애니메이션, 정답과 오답일 때 들리는 효과음까지 넣었다.
🔗 트러블슈팅
배포 후 브라우저마다 결과가 다르게 보였던 크로스브라우징 문제가 있었다.
헤딩(h1~h6), strong 태그
첫번째는 헤딩 태그(h1~h6)와 strong 태그였는데, 아래 사진은 크롬(왼쪽)과 사파리(오른쪽)에서의 h2 태그 렌더링 결과이다. 글로벌스타일로 CSS 초기화를 적용했음에도 불구하고 같은 태그지만 폰트의 질감이 너무 달라서 p태그로 통일하여 스타일 차이를 줄였다.
방명록 날짜 처리
두번째는 방명록에 들어가는 날짜 포맷이 브라우저마다 다르게 표시되는 것이었다. 사이드프로젝트 팀원 중 파이어폭스 브라우저를 사용하고 계신 분이 있었고 방명록을 남기셨는데 예상했던 YY.MM.DD 형태가 아닌 /MM/YY 형태로 표시되었다.
const today = new Date()
const createdAt = today.toLocaleDateString().slice(2, 12)문제의 코드는👆 브라우저마다 new Date() 생성자를 처리하는 방법이 달라서 날짜 형식이 다르게 나타났다. 이를 해결하기 위해 toLocaleDateString() 메서드에 한국 로케일(ko-KR)과 날짜를 두자리로 맞추는 옵션을 추가하여 브라우저 간 날짜 포맷 차이를 없앴다.
const today = new Date()
const createdAt = today
.toLocaleDateString("ko-KR", {
year: "2-digit",
month: "2-digit",
day: "2-digit",
})
.replace(/\.$/, "")🔗 회고
좋았던 점
- 처음부터 끝까지 혼자 프로젝트를 경험 해볼 수 있어서 좋았다.
- AWS로 배포를 처음 해보면서 삽질을 많이 했는데 많은 블로거들의 도움으로 해결할 수 있었고 삽질을 하다보니 기억에 더 뚜렷하게 남을 것 같아서 의외로 좋았다. (럭키비키ㅋㅋ)
- 회의도 없고 의견 충돌이 일어날 일이 없으니 하고싶은거 다 해보면서 시간을 쓸 수 있었다.
아쉬운 점
- 혼자 하다보니 타인의 피드백을 들으려면 따로 부탁을 해야 했고 PR을 통해 코드리뷰를 받을 수 없어서 아쉬웠다.
- 다양한 의견이 없다보니 한계가 있다 생각하여 지금도 추후에 추가할 것들을 계속 고민하고 있다.
배운 점
- 도메인을 생성하고 배포를 하면서 프로토콜과 브라우저 관련된 개념들을 다시 한번 찾아보고 공부 할 수 있었다.
- 크로스브라우징의 문제를 직접 경험하고 해결해 볼 수 있었다.
앞으로
- 방명록 리스트 로딩 애니메이션 추가하기 !
- 효과음 끄고 킬 수 있는 기능 추가하기 !
- 카테고리 문장으로 세분화하고 퀴즈 나누기 ! (지금은 기초1, 기초2 이렇게 되어있음..)
- 방문자 수 기록하기 ..?
