내일배움단 프로젝트 챌린지 마지막 개발일지
#코딩 개발일지 시작의 한마디
처음 시작했을 때만 해도 한번해봤으니 이번엔 수월하게 해낼 수 있겠지 하는 마음이었다. 하지만 이전 프로젝트때보다 훨씬 커진 프로젝트로 인해 어려움을 많이 겪었지만, 열정적인 팀원들의 도움으로 모든걸 해낼 수 있으리란 믿음으로 하루하루를 보냈다.
# 개발 업무내용
총 네 페이지의 웹사이트가 만들어졌다.
사이트의 첫 레이아웃은 이렇게 시작했으나 웹페이지라는 특성상 가로로 길다보니 요소들을 옆으로 배치하고 싶어서 포지션변경을 통해 첫 메인페이지의 완성본은 다르게되었다.
# 업무 중 이슈/고민 .. 그리고 해결한 내용
프로젝트 중 필터링이 안되는 부분과 div로 나눴을때 창을 줄이면 요소들이 겹치는 문제에 많이 애먹었다. 처음 레이아웃을 짤때 배경색을 넣어 구역을 정해두고 시작하는것이 얼마나 중요한 지를 깨닫는 부분이었다. 중간에 바꾸려고 하니 어떻게 해야할 지 몰랐는데 팀원분의 도움으로 해결했다.
필터링또한 range가 먹지 않아서 고민했는데, 앞서 넣었던 다른 range의 css가 겹쳐서 나중에 생성된 range의 값을 지정할 수 없게 했던 것이다. 이 부분을 주석처리하니 잘 해결되었다.
현재 마지막 페이지에서 백엔드분들이 필터링기능을 하나하나 경우의 수를 따져가며 코드를 짜주셔서 잘 해결되는데, 이부분을 어떻게해야 깔끔하게 짤 수 있을 지도 고민이다. 찾아봤던걸로는 then을 써볼까도 생각했는데 시도해봐야겠다.
# To-do List
프로젝트는 끝났지만 사이트를 aws에 연결하는게 마지막 과제로 남았다.버튼의 문제라고는 하는데 버튼들이 많아서 구글링을 해가면서 어떻게 해결해야할 지 한번 찾아봐야겠다.
총 완성페이지는 이렇게 멋있게 완성되었다.
결과페이지 결과값이 없을때 다시 추천받기로 돌아가는 버튼
저 이미지를 클릭하면 모달창이 나오도록 구현하고, 다른 추천게임을 누르면 두번째페이지에서 값에 맞는 다른 게임이 추천되도록 만들었다.
모달창은 이런식으로 구현된다.
필터링을 넣는부분에서 많이 애먹었다. 필터링때문에 +버튼에 접었다폈다 하는 기능을 넣는 시간이 없을 것 같아 다른팀원분께 도움을 요청했는데, 너무 잘해주셔서 무사히 시간내에 끝낼 수 있었다.