클론코딩

Programing/React

2차 프로젝트 - 에어비엔비 2개의 Nav로 구성하기(6)

갑작스럽게 일들이 많아져서 작성이 좀 늦어졌다. 조금만 시간이 지나도 다시 가물가물해지는게 내 기억력의 한계인가 싶기도 하고, 원래 다 이런건가 스스로에게 위안을 삼아본다. 검색바를 클릭함에 따라 2가지의 형태로 나뉘게 되는 Nav 이전 글에서 이미 확인을 하셨겠지만, 다시 사진을 참조하자면 아래와 같다. 원래 에어비엔비 사이트가 어떤식으로 Nav 가 형성되어있는지 까지는 모르겠다. 에어비엔비 사이트에서는 마치 검색창을 클릭할 시 가운데 검색바가 확대되면서 밑 Nav 처럼 변하는 식으로 되었는데, 시간도 부족하고 아직 방법을 잘 모르겠어서 나의 경우는 opacity 의 변화로 부드럽게 전환되도록 표현하였다. 파일은 2가지로 컴포넌트를 나누어 놨는데, 상위 Nav 컴포넌트에서 조건부 랜더링을 하지 않고, ..

Programing/React

2차 프로젝트 - 에어비엔비 ProfileContainer(5)

지난 시간에 이어서 상단 유저 프로필 모달창에 대해서 다루고자 한다. 전체 코드를 리뷰하여, 왜 이렇게 코드를 작성하였는지, 또한 유지관리 측면이라는 점에서 어떤 방식이 더 유리할지 생각해보고자 한다. 보기 편한게 더 좋은 코드가 아닐까? 로그인이 되기 전 모달창과 로그인 이후 모달창은 각각 구성되는 선택 옵션에서 차이가 있기에, 따로 컴포넌트로 관리하였다. 우선 로그인이 되기 전 모달창을 살펴보자면 const ProfileContainer = ({ setProfileModal, switchModal, }) => { return ( setProfileModal(false)} /> e.stopPropagation()}> 로그인 회원가입 숙소 호스트되기 체험 호스팅하기 도움말 ); }; export defa..

Programing/React

테라로사 사이트 클론 프로젝트 - Planning Meeting

학원에서 첫 1차 프로젝트가 시작되고, 우리조는 테라로사 사이트를 클론하기로 결정되었다. 카페를 평소에 자주 가는편이라 테라로사는 잘 알고 있었는데, 사이트를 클론하게 될줄은 몰랐다. (사실 테라로사 사이트를 그닥 선호하진 않는다) 프로젝트를 처음 하는것이라 어색하긴 했다만, 금방 조원들과 익숙해질 테니 크게 걱정은 하지 않았다. 에자일 방법론(agile-methodology) "에자일 스럽게" 라는 말을 얼핏 들어본적이 있었다. 그 의미를 잘 모르고 있었는데, 이번 프로젝트 때 다시 언급되어서 살펴보기로 했었다. 알아야지 말그대로 에자일 하게 작업을 하지 않을까? 에자일은 신속한 반복 작업을 통해 실제 작동 가능한 소프트웨어를 개발하는 방식이다. 처음부터 완벽하게 소프트웨어를 개발하는것이 아니라 테스트..

Yelihi
'클론코딩' 태그의 글 목록