갑작스럽게 일들이 많아져서 작성이 좀 늦어졌다. 조금만 시간이 지나도 다시 가물가물해지는게 내 기억력의 한계인가 싶기도 하고, 원래 다 이런건가 스스로에게 위안을 삼아본다. 검색바를 클릭함에 따라 2가지의 형태로 나뉘게 되는 Nav 이전 글에서 이미 확인을 하셨겠지만, 다시 사진을 참조하자면 아래와 같다. 원래 에어비엔비 사이트가 어떤식으로 Nav 가 형성되어있는지 까지는 모르겠다. 에어비엔비 사이트에서는 마치 검색창을 클릭할 시 가운데 검색바가 확대되면서 밑 Nav 처럼 변하는 식으로 되었는데, 시간도 부족하고 아직 방법을 잘 모르겠어서 나의 경우는 opacity 의 변화로 부드럽게 전환되도록 표현하였다. 파일은 2가지로 컴포넌트를 나누어 놨는데, 상위 Nav 컴포넌트에서 조건부 랜더링을 하지 않고, ..
지난 시간에 이어서 상단 유저 프로필 모달창에 대해서 다루고자 한다. 전체 코드를 리뷰하여, 왜 이렇게 코드를 작성하였는지, 또한 유지관리 측면이라는 점에서 어떤 방식이 더 유리할지 생각해보고자 한다. 보기 편한게 더 좋은 코드가 아닐까? 로그인이 되기 전 모달창과 로그인 이후 모달창은 각각 구성되는 선택 옵션에서 차이가 있기에, 따로 컴포넌트로 관리하였다. 우선 로그인이 되기 전 모달창을 살펴보자면 const ProfileContainer = ({ setProfileModal, switchModal, }) => { return ( setProfileModal(false)} /> e.stopPropagation()}> 로그인 회원가입 숙소 호스트되기 체험 호스팅하기 도움말 ); }; export defa..
추후에 두가지로 상태가 변하는 Nav 에 대해서 다루겠지만, 그 전에 어떠한 상태에서든지 우측 상단에는 프로필 버튼이 있다. 추후 로그인을 할때나 로그아웃, 마이페이지, 혹은 예약상태 등등 추가기능이 구현될 경우 navigate 를 걸어줘야 하기 때문에 당연히 만들었어야 했고, 로그인 상태와 비 로그인 상태에 따라 생성되는 모달창 역시 컴포넌트로 나누어서 구성하였다. 고려해야 할 점은 모달창이 열리고 닫히는 것과, 2가지 다른 모달창이 구별되어 나와야 하는 점이다. 더 좋은 방법이 있을 것 같지만, 당시에 생각했을 때는 2가지의 nav 형태에서 모두 버튼에 모달창이 연결되어있어야 하고, 같은 state 변화로 관리를 하는게 효율적이라 판단했다. 그래서 크게 나눠보면 profileModal : 네이밍을 좀..
저번에 다 다루지 못하였던 search 부분의 각각의 컴포넌트 들을 다룰 시간이다. 쉬운 부분도 있었지만 Date Picker 같은 경우 상당히 애를 먹었는데, 무엇보다 CSS 수정하는데 있어서 진짜 애를 먹었다... 남이 만든거 쓰는게 쉬울 줄 알았냐?~ 라이브러리를 처음 제대로 사용해보는 것 같은데, 처음에는 쉬울 줄 알았는데 이럴거면 뭔가 차라리 내가 만드는 방법을 연구해보는게 더 좋지 않을까 싶었다. (물론 달력만들 생각해보니 그냥 라이브러리를 잘 익혀보자 ㅎㅎ) Location 최대한 에어비엔비와 비슷하게 만드려고 노력한것 같다. 여행지 버튼을 클릭할 시, (배경화면이 하얀색으로 변하고 그림자가 생기고) 모달창이 뜬다. 모달창을 생성하기만 하면 되는것이라서 코드는 그렇게 복잡하지는 않다. con..
왜인지 모르겠지만, 코드를 짜다보면 어느순간 아무것도 진행이 되지 않은 시기가 온다. 이번 프로젝트에서 가장 당황하였던 것은 그 시기가 프로젝트 시작부터 찾아와버렸다는 점이다. 지친거였을까.. 시간은 흘러가는데 무엇인가 하고 싶진 않은 마음을 진정시키려 하는데, 에어비엔비 검색창을 보니 조급함만이 살아나버렸다.. 적어도 지금까지 만들어온 nav 와는 사뭇 다른 느낌이었다. 동적이면서도 절제된듯한 UI 에 놀랍기도, 욕심도 나기 시작했다. (근데 왜 의욕이 안생기는거지). 사라진 의욕만 돌아와 준다면 좀 더 재미있게 작업할 수 있을 것 같은데! 왠지 비슷하게라도 구현하지 못할거 같은 느낌때문에 시작을 못하는게 아닐까 생각이 들어서, 동기들도 열심히 하는데 이리저리 생각만 하지말고 일단 시작하자라고 굳건히 ..
1차에 이어 2차 프로젝트도 되돌아 보면 첫 planning meeting 때 부터 의욕이 너무 앞서 나간편이었다. 이제 라이브러리를 활용할 수 있다는 생각에 들뜬 나머지 1주차 스프린트 계획을 좀 타이트하게 잡아버렸다. (아, 이번에도 PM 으로 선정되었다..) 그래도 Nav 컴포넌트 정도는 그렇게 어렵지 않겠지..? 역할 분담 첫 역할 분담을 나누기 위해 회의를 가지면서, 스스로한테 다짐했던 것은 이번에는 '기존 프로젝트때 많이 해보지 않은 기능'을 구현해보는 것이었다. 그렇게 1차 프로젝트 때를 떠올려보니, 크게 두가지 기능을 가진 컴포넌트 혹은 페이지가 나왔던 것 같다. 상단 Nav bar list page 와 detail page 어느 페이지를 담당해야 할지 고민이 생기는 찰나에 조원분께서 손을..
주말도 없이 달려왔더니 어느새 2주차를 맞이하게 되었다. 정신없이 준비하느라 정리는 안됬어도 목표한 기능 구현은 거진 끝나가고 있었지만, 사이트의 상품 목록 리스트 페이지와, 상세페이지가 아직 완성이 되지 않고 있었다는 것을 조금 뒤늦게 파악하게 되었다. 사실 이런점이 PM 으로서 반성해야 할 부분이라 생각한다. 잦은 회의를 했지만 정작 중요한 걸 빼먹은 느낌 뒤늦게라도 알았으니 추가적으로 구현할 부분과 현재 완성되지 않은 부분들에 대해서 다시 팀원들과 이야기를 하면서 조정해봤다. 결론적으로 추가구현은 거진 하지 않는쪽으로 방향을 잡고, 지금까지 작업한 부분들에 대해 좀 더 리펙토링 할 부분이 있다면 리펙토링을 하는 방향으로 가기로 했다. 근데 신기하게도 이게 너무 자연스럽게 결정되어서 제안한 나도 놀랐..
두가지 페이지를 만들어서(main, login) 좀 여유있게 하나 싶었는데, 팀원들의 작업진행이 생각보다 늦어져서, 2차 스프린트 때 작업하려 했던 장바구니 페이지를 지금 만들기로 했다. 일이 줄지를 않는다.. 그래도 하나하나 만드는 재미가 있으니.. 우선 만들어진 것부터.. 장바구니 페이지의 레이아웃은 아래처럼 되어있다. 아직 상단 nav 를 변경하지 못해서 테라로사로 되어있지만 나머지는 얼추 구현이 끝났다. 메인페이지와 다르게 만드는데 꽤나 고생을 했던 페이지라서 1차 스프린트 작업 중 가장 기억에 남는것 같다. 쉬울줄 알았는데... 일단 돌아가게라도 만들어야지! 처음에 로직을 구성하기 전 레이아웃 부터 어느정도 틀을 잡아놓았어야 했다. 장바구니 상품 목록창이 늘어나는 부분은 하나의 컴포넌트로 구성해..
