메가테라 14주차 회고

14주 차 회고

---

메가 테라 14주 차를 진행하면서 있었던 일을 종합해서 회고하였습니다.

 

마카오 뱅크(최종_최종_진짜최종..)

이번 주는 마카오뱅크를 만난 첫 주부터 바래왔던 마카오뱅크의 최종본을 맛보는 한 주였다.

이번 주는 강의를 보고 학습을 하는 마지막 주였다. 그래서 이번 주의 과제가 이때까지 배운 모든 것을 활용하여 회원가입, 로그인, 잔액조회, 송금, 거래 내역 확인 등등 여러 가지 기능을 하는 마카오뱅크 웹 서비스를 만드는 과제가 주어졌다.

 

마카오뱅크의 최종 모습을 보고 처음 들었던 생각은 금요일 안에 다 완성할 수 있을까..? 였다.

그만큼 만들어야 하는 사이즈가 컸었는데 사실 어느 정도는 강의만 제대로 보고해도 커버가 가능한 수준이었고, 회원가입과 로그인 부분만 조금 신경 쓰면 만들 수 있는 수준이었다. (물론 강의가 없었다면 혼자서 만들 수 있었을지는 의문...)

 

다음 주는 레벨테스트 주간이기 때문에 이번 주 과제를 무조건 금요일까지 끝낸다는 생각으로 목요일까지 쉬지 않고 달렸다.

그 결과 원래 계획했던 것보다 일찍 과제가 완성이 되었다. 덕분에 강의를 보면서 놓쳤던 개념들을 다시 정리하는 시간도 가질 수 있었다.

 

마카오 뱅크 최종 완성본 url인데 궁금하면 한번씩 눌러주세요 (모바일 버전은 시간이 없어 만들지 못했습니다...)

https://seungjjun.github.io/makaobank/

 

 

 

마카오 뱅크 + 다크 모드

이번 주 배운 것 중 하나가 다크 모드인데 사실 이 다크 모드를 이전에 멋사 동아리 할 때 구현해본 적이 있다.

이전에 동아리에서 html + css만으로 자기소개 웹페이지 만드는 게 과제였는데 다크 모드 있으면 좋을 것 같아서 다크 모드 구현하는 방법을 구글링 해봤는데 거의 자바스크립트로 구현하는 글이 많아서 어떻게 할까 고민하다가 그냥 다크 버전 html을 하나 더 만들어서 다크 모드 버튼 클릭 시 현재 페이지의 다크 버전 html로 이동하게 하는 했었다.

 

기존 소개 페이지가 총 4개가 존재해서 모든 페이지에 다크 모드를 적용하기 위해 4개의 html 파일이 더 추가가 되고 각각의 파일에 대해 css의 색을 반대로 적용해줘야 하는 완전 노가다 작업을 해준 적이 있었다.

 

이번 강의에서 다크 모드를 구현하는 것을 보고 이전에 노가다 작업을 했던 것들이 생각이 나서 헛웃음이 나왔다.

ThemeProvider을 이용해서 theme의 상태가 dark이면 미리 설정해둔 검은색을 사용하게 하고 아니면 기본색을 사용하게 하는 방식으로 구현을 했다.

 

역시 기술이 있어야 몸이 편하다는 것을 뼈저리게 깨달았다..

 

마카오 뱅크의 최종 결과물이다. 디자인은 이전 html / css 배울때 만들었던 것과 비슷하기는 하지만 이제는 디자인만 비슷한게 아닌 송금도 되고 거래내역, 잔액확인도 가능한 진짜 앱다운 앱을 만들었다. 게다가 요즘 빠지면 섭한 다크모드기능 까지 곁들인 마카오 뱅크 서비스이다.

 

아무튼 이번주도 힘들었지만 완성된 결과물을 보면 너무 뿌듯하다 ㅎㅎㅎ

이번주에 배운것을 기반으로 다음주 레벨테스트 한번 잘 해보자!