이제 하위 컴포넌트들을 관리하는 최상위 컴포넌트 Nav 를 정리해보자. 처음 Nav 를 설계할 때, 생각 이상으로 상위에서 props 로 전달해주어야 할 변수 및 함수가 많을 것이라 예상되었다. 그도 그럴 것이 실시간으로 조건에 맞는 Nav 를 랜더링 해야하며, 그 각각의 Nav에 대해 따른 모달 컴포넌트도 정상적으로 랜더링 되어야 하기 때문이며 또한 사용자가 편리하게 사용할 수 있도록 신경써야 하였기에 Nav 가 유기적으로 움직이기 위해 좀 더 체계적으로 설계했어야 했다. 이로 인해 Nav 의 코드는 직관적이지 않게 코드가 짜여졌다. import React, { useState, useRef, useEffect } from 'react'; import LoginModal from '../Modal/Lo..
갑작스럽게 일들이 많아져서 작성이 좀 늦어졌다. 조금만 시간이 지나도 다시 가물가물해지는게 내 기억력의 한계인가 싶기도 하고, 원래 다 이런건가 스스로에게 위안을 삼아본다. 검색바를 클릭함에 따라 2가지의 형태로 나뉘게 되는 Nav 이전 글에서 이미 확인을 하셨겠지만, 다시 사진을 참조하자면 아래와 같다. 원래 에어비엔비 사이트가 어떤식으로 Nav 가 형성되어있는지 까지는 모르겠다. 에어비엔비 사이트에서는 마치 검색창을 클릭할 시 가운데 검색바가 확대되면서 밑 Nav 처럼 변하는 식으로 되었는데, 시간도 부족하고 아직 방법을 잘 모르겠어서 나의 경우는 opacity 의 변화로 부드럽게 전환되도록 표현하였다. 파일은 2가지로 컴포넌트를 나누어 놨는데, 상위 Nav 컴포넌트에서 조건부 랜더링을 하지 않고, ..
학원에서 기업 협업을 통해 현업의 환경을 체험할 수 있도록 기회를 제공해주었다. 무엇인가를 배우러 가는 입장이기 때문에, 기대감도 들고 어떤 기술을 사용하고 있을지도 궁금하였는데, 처음으로 마주한 협업툴은 아틀라시안 사의 협업 툴 JIRA 였다. 지금도 '에자일' 하게 일을 한다는 것에 대해서 잘 체감은 못하고 있지만, 간략하게나마 trello 를 활용해보면서 주차 스프린트 단위로 칸반 보드를 활용하여서 각자가 해야할 업무에 관하여 능동적으로 관리하여, 각자가 하는 업무를 관리자가 쉽게 파악할 수 있었던 기억이 있다. 나는 현재 어떠한 업무를 어떻게 진행중이고, 다른 조원은 어떠한 업무를 현재 어떤 단계에 있는지 알 수 있어서 매번 미팅을 통해서 각자 진행사항이 어떻게 되는지 질문할 필요없이 효율적으로 ..
지난 시간에 이어서 상단 유저 프로필 모달창에 대해서 다루고자 한다. 전체 코드를 리뷰하여, 왜 이렇게 코드를 작성하였는지, 또한 유지관리 측면이라는 점에서 어떤 방식이 더 유리할지 생각해보고자 한다. 보기 편한게 더 좋은 코드가 아닐까? 로그인이 되기 전 모달창과 로그인 이후 모달창은 각각 구성되는 선택 옵션에서 차이가 있기에, 따로 컴포넌트로 관리하였다. 우선 로그인이 되기 전 모달창을 살펴보자면 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 어느 페이지를 담당해야 할지 고민이 생기는 찰나에 조원분께서 손을..
