메인 프로젝트(3)

메인프로젝트 3주차가 끝이났다. 화면 구성은 어느정도 완성이 된 것 같고(디자인은 아직이지만) 기능구현 같은 경우 백엔드와의 통신 부분 구현중인데 그래도 약간 순항중인 느낌이라서 다음주 초까지는 구현이 가능할 것 같다! 

 

그런데 다음주 목요일까지 코드스테이츠측에 프로젝트 발표자료와 영상을 제출해야 해서 빨리빨리 끝내고 발표자료 준비도 해야되서 매우 바쁠것으로 예상된다. 오늘,내일 주말동안 약간 어떻게 할지 구상이라도 해놓아야 할 거 같다.

 

Home 페이지

홈페이지에 관리자 채택글을 캐러셀 형태로 볼 수 있도록 캐러셀을 만들고, 작성자가 입력한 주소를 카카오맵으로 띄울 수 있도록 카카오맵 Api를 연결해보았다. 일단은 채택글이 백엔드쪽에서 구현이 안되어서 더미데이터로 구성해놓았는데, 화면에 잘띄워져서 백엔드가 완성되면 끝날 것 같다. 

 

Carousel 구현

 캐러셀 같은 경우 처음 만들어봤는데, 그냥 버튼으로 이전글이나 다음글을 보게 하는 기능은 페이지 상태를 만들어서 페이지에 따라 캐러셀 Container가 x축으로 이동하게 로직을 작성했다. 

 마지막글에서 다음 버튼을 누르면 처음글로 돌아가는 로직은 잘 떠오르지 않아서 구글링 해 본 결과 처음과 마지막에 글을 하나 더 만들고, 마지막 페이지에서 다음 페이지로 이동하면 처음 페이지와 똑같은 제일 끝 페이지로 이동하고, 이동이 끝나면 다시 처음 페이지로 상태를 변경하는 형식으로 약간의 트릭을 줘서 사용자가 첫페이지로 이동했다는 느낌을 받도록 로직을 작성했다.

 원래 캐러셀은 자동이동이 되도록 만들고, 멈출 수 있는 기능도있는데, 우리 사이트의 경우 긴글 형식의 캐러셀이라 자동이동을 하게되면 사용자가 글읽는데 방해가 될 수 있을거 같아서 넣지는 않았다.

 

카카오맵 API

사용자가 글을 작성할 때 주소를 입력하게 되면 그 주소가 어디인지 지도에 나타날 수 있도록 카카오맵 API를 사용하여 지도를 간단하게 띄워주도록 해봤다. 카카오맵 API 공식문서에 설명이 잘 되어있어서 구현하는데 큰 문제는 없었다.

 

홈화면은 채택 글에 서버에서 받은 데이터를 넣고, 디자인을 넣으면 끝날 거 같다!

 

 

회원가입 페이지

회원가입 페이지는 저번주에 거의 완성되어 있어서 이번주에는 그냥 버튼을 눌렀을 때 서버로 POST 요청이 되고, 성공하면 로그인 화면으로 이동, 실패하면 실패 메시지를 띄우는 코드만 추가되었다. 실패 메시지는 상태코드에 따라 닉네임 중복, 이메일 중복, 서버오류 등으로 분기해서 처리했다.

 원래 Oauth 회원가입 버튼이 있었는데, 백엔드분 말씀으로는 구글로 로그인하면 따로 회원가입없이 바로 회원가입이 되는 구조라고 하셔서 아이콘을 빼버렸다.

 

로그인 페이지

로그인 페이지에서 아이디 찾기와 비밀번호 찾기는 백엔드 구현이 완료되어서 테스트 후 끝을 낸 상태이고, 로그인은 되는데 서버쪽에서 토큰만 넘겨주고 memberId를 넘겨주지 않아서 아직은 로그인이 반만 구현된 상태이다. access 토큰과 memberId를 받으면 영속성 쿠키에 저장하고 웹사이트에 들어올 때 마다 memberId 쿠키가 있으면 전역상태에 저장해서 다른곳에서 사용하는 방식으로 코드를 작성할 예정이다. 

 

 Oauth 로그인은 구글로그인을 서버쪽에서 구현중인데 아직 Oauth를 프론트쪽에서 구현해본적이 없어서 이것저것 찾아봤는데, 백엔드 구현이 완료되면 직접 해봐야 좀 더 이해가 잘 될 것 같다. 

 

마이페이지 - 북마크

북마크 페이지는 백엔드쪽에서 아직 완성이되지 않아서 더미데이터를 백엔드에서 응답하는 데이터 형식으로 만들어서 구조를 잡았다. 북마크 개수가 많아질 수도 있기 때문에 페이지네이션 기능도 추가했다. 북마크쪽도 데이터만 받으면 미세조정 정도하고 끝낼 것 같다.(물론 디자인도..)

 

** 멘토링

이번주도 멘토링을 진행했는데, 이번에는 우리가 궁금 한 것 위주로 질문을 해서 멘토님께서 답변을 주시는 형태로 진행했다. 

항상 느끼는건데 우리가 질문할 때는 바로 앞에 보이는 것을 질문하는데, 멘토님께서는 좀 더 멀리보고 답변을 주시는 것 같다. 그래서 이해 못할 때도 있지만(현업의 길은 멀고도 험하다..), 그래도 좀 더 시야를 넓혀주시는 것 같아서 너무 도움이 많이 되는 것 같다. 

 이번 멘토링에서 기억나는 말씀이 '프론트엔드 개발자가 디자인이 퀄리티 부족한 것은 부끄러워 하지 않아도 되지만, 사용자 경험이나 접근성을 고려하지 않는것은 부끄러워해야 한다.' 라고 하신 것이다. 오... 뭔가 중요한 말씀이신거 같아서 기억에 오래 남을 것 같다. 앞으로 시멘틱 태그나 aria 속성같은것도 사용하는 연습을 많이 해봐야 할 거 같다.

 

 

 

 

작업하면서 느낀건데, 백엔드쪽에서 보내주는 데이터 없이 약간 상상으로만 코드를 작성하는게 쉽지 않은 것 같다. 백엔드 작업이 완성되는 동안 구조나 로직을 다 잡아놓고 백엔드가 완성되는 순간 쨔잔~ 하면서 코드가 작동할 수 있게 작업을 해보려고 했는데, 바로 시작은 커녕 어떤식으로 작업해야 할지도 잘 모르겠다..

 들어오는 데이터 보고, 그에 맞게 코드를 작성하고, 이상하게 보이는 부분 수정하고 하는 작업이 데이터가 들어와야만 눈에 보여서 그런거 같다. 이것도 약간 경험이 쌓이면 잘 하게 될지 모르겠다.

 

시작한지 얼마 되지도 않은 것 같은데 벌서 다음주가 끝이다.. 마지막주도 열심히 해서 잘 마무리했으면 좋겠다!