패스트캠퍼스 FE 부트캠프 HTML/CSS 과제 수행 회고 - 오버워치 홈페이지 클론 코딩

클론 코딩할 사이트 선정

첫 번째 개인 프로젝트로 HTML/CSS로 사이트를 클론 코딩 해 보았다.

내가 선정한 사이트는 오버워치 홈페이지이다.

https://overwatch.blizzard.com/ko-kr/

오버워치 2

평소에 즐겨하던 게임이어서 생각난 김에 사이트를 들어가 봤는데, 내가 구현할 수 있겠다 싶은 기능들과 배워보고 싶은 기능이 눈에 보여서 바로 이 사이트를 클론해보기로 결정했다. 

 

첫 화면에 배경이 동영상으로 패캠 스타벅스 클론코딩 강의에서 배웠던 내용을 써볼 수 있을 것 같았다.

메인 페이지 이외에도 flex와 position을 연습하기 좋을 것 같았다.

---

실제 배포 링크와 깃허브 사이트

실제 배포 링크: 

https://tourmaline-horse-3cf1e4.netlify.app

오버워치 2

깃허브: https://github.com/seacrab808/overwatch

GitHub - seacrab808/overwatch: 오버워치 홈페이지 혼자서 클론 코딩하기!

---

배운 것

1. html 구조를 짜는 방법과 css 사용에 많이 익숙해졌다.
2. JS도 사용하면서 역시 다른 코드를 막 가져오는 것보다 코드를 가져오더라도 확실하게 이해하고 복붙이 아닌 타자로 쳐서 쓰는게 나은 것 같다(왜냐면 초보니까 막 복붙보다 손으로 코드를 치면서 이해하는게 낫다)
3. 앞으로 JS를 배워가면서 API를 적극 활용해서 개인 미니 프로젝트를 많이 시도해봐야겠다고 생각했다. 여태 강의를 무작정 듣기만 했는데, 배우는 것이 분명히 있겠지만 역시 내 것으로 만들려면 직접 뭔가를 만들고 부딪혀야 하는구나를 다시금 깨닫게 되었다.
4. 클론 코딩을 할 때 이미지를 가져오는 기본적인 것들을 알게 되었다.
5. 드롭다운 !!!!!  상단바 메뉴 드롭다운을 8번 이상 새로 갈아 엎었었다. 정말 가장 많은 시간을 들인 부분이다. 결국 원하던 대로 기능 구현을 성공했다..ㅎㅎㅎ
6. 리드미를 작성하며 어떤 형식으로 작성해야 하는지 감을 잡았다. 부족한 부분이 눈에 보인다. (gif 크기,화질 정상적으로 추가, 기술 스택 추가, 개발하면서 중요했던 부분, 어려웠던 부분 기술)

---

프로젝트에서 아쉬웠던 점

1. 반응형 X
2. 영웅 섹션 스와이프 부분 전체가 아닌 사진만 넘어가게 변경해야 한다.
3. 전장 섹션 스와이프 부분 전체가 아닌 사진만 넘어가게 변경해야 한다.
4. 유튜브 배경 영상 플레이 제어 버튼
5. 버튼 hover시 기능 통일
6. css 겹치는 common 부분 적극 활용을 못 한 것 같다.

---

앞으로 할 것

1. 보충강의 - 애플 클론코딩 강의 듣기 (반응형을 어떻게 만드는지 공부)
2. JS 코테 보충강의 듣기
3. JS 모딥다로 개념 정리
4. 유데미 클린 코드 강의 듣기
5. 프로그래머스 코테 연습
6. 파이썬 추가 강의 조금씩 듣기
7. 블로그 간간히 적기 ...하핳(요즘 포스팅 잘 안 하고 개인 노션에다가 열심히 정리하고 있다)

---

멘토님 코드리뷰

그룹 멘토님께서 전체적으로 내가 짠 코드에 피드백을 달아주셨는데... 그 양이 정말 많고 자세하고 도움이 되었다..!! (감동)

18개의 피드백을 달아주셨는데, 내가 생각할 수 없었던 부분을 찝어서 어떻게 고치면 좋았을거라고 해주셔서 그 내용을 반영해서 코드를 리팩토링 할 수 있었다.

상단 메뉴바 전체에 opacity 값을 줘서 로고, 드롭다운도 원치 않게 투명도 속성이 적용되었는데 background에만 rgba로 투명도를 줘서 쉽게 해결할 수 있었다.