회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각
웹개발_솔로프로젝트 데일리 후기
Modal과의 치열한 전투를 치르고 밤에는 조금 가볍게 보수작업을 해보려고 한다.
기능을 구현하는 과정중 빼먹고 merge시킨 기능도 있으며 만들고 보니 적용이 안된 코드들이 있어서 머리를 조금 식힐겸 가볍게 보수작업을 한 후 넘어가보려고 한다.
내일이 마지막 솔로프로젝트날인데 아직 다른 페이지 구현을 하지 못한게 너무 아쉽다.. 오늘 작업이라도 조금 들어갔었다면 조금은 상황이 좋았을거같다는 생각이든다 ㅜㅜ
이미 지나간 시간들은 어쩔 수 없으니 할 수 있는 최선을 다해서 해봐야겠다.
이 모든 과정들이야말로 아주 큰 배움이라고 생각이든다.
수정이 필요한 부분
- Header 햄버거버튼에 아이콘 넣기
- Mainpage 화면 비율 맞추기
- price.toLocaleString() 적용안되는 버그
- 햄버거버튼, Modal 다른곳에 눌렀을때 사라지게 하기
- 서버에서 받아온 데이터 전부를 localStorege가 아닌 대안을 찾기
기억해둘 코드
- Dropdown의 메뉴리스트들이 DropdownBackground보다 아래에 있어서 cursur pointer가 생기지 않는 부분을 z-index로 해결(에러1 참고)
- 배경 클릭으로 Dropdown 닫는 기능구현(기록하고싶은 기능구현1 참고)
- 조건문으로 &&, ||를 사용하는 코드문법 (기록하고싶은 기능구현1 참고)
- onClick={(event) =>event.stopPropagation() (기록하고싶은 기능구현2 참고)
추가 기능구현
위에 적어둔 '수정이 필요한 부분' 항목중에서 오늘 자기전까지 마무리할 수 있는 부분을 해보려고 한다.
[Header] 햄버거버튼
- 리스트 앞에 아이콘 넣기
- 다른곳을 클릭했을때 리스트가 사라지게하기
[Modal] Close버튼
- 다른곳에 클릭했을때 Modal 사라지게 하기
[Card] price 수정
- price.toLocaleString() 적용안되는 버그
마주했던 에러(1)
Card 컴포넌트에서 정보의 data를 가져와서 보여주고 있다. 그런데 그중 숫자로 price와 follower가 있다. 한국의 단위표현식처럼 보여주기 위해서 .toLocaleString()를 했을때 follower는 적용되었지만 price는 적용되지 않았다.
어떤 부분이 문제일지 한참 고민을 하다가 data를 까봐야겠다는 생각이 들어서 까보니 price는 type이 string type인것을 발견했다...!
그래서 Number(price).toLocaleString() 이렇게 pirce를 Number type으로 변환시켜주니 바뀌는것을 알 수 있었다
마주했던 에러(2)
햄버거아이콘의 Dropdown에 DropdownBackground를 통하여 배경을 클릭해도 Dropdown이 닫힐 수 있게 해주었는데 메뉴리스트에 cursur pointer가 사라지는 버그가 발생했다.
아무래도 Dropdown이 열렸을때 DropdownBackground가 브라우저를 덮게되어 메뉴리스트가 DropdownBackground보다 뒤에 있기때문에 그런거같았다.
그래서 메뉴리스트에 z-index를 주어서 가장 상위에 올라올 수 있도록 했다.
기록하고싶은 기능구현(1)
Header에 있는 Dropdown기능이 구현되어있으며 Dropdown 아이콘을 눌러야만 열고 닫을 수 있어는 상태이다. 여기서 Dropdown 아이콘이 아닌 배경을 클릭해도 닫힐 수 있는 기능을 구현해보았다.
먼저는 Dropdown의 상태가 열려있을때 랜더가 될 DropdownBackground styled component를 만들고 클릭했을때 Dropdown의 상태가 false로 될 수 있도록 했다.
이것도 기록하고 싶은 코드였지만 더욱 기록하고싶었던 코드의 문법이 있다.
이전에 코드를 작성하면서 사용하기도 했지만 알게된지 얼마되지 않아서 꼭 기록을 남기고싶었다.
조건문을 &&, ||를 사용하는 방법
&&를 사용하므로 isOpen이면 && 뒤에가 실행되는 코드문법이다.
{isOpen && }
||를 사용하므로 image_url가 아니라면 brand_image_url가 실행되는 코드문법이다.
<Img src={image_url || brand_image_url} alt="card" />
이렇게 사용하므로 코드가 훨신 짧아지는 신세계를 느낄 수 있었다.
const DropdownBackground = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
`;
function Dropdown() {
const [isOpen, setIsOpen] = useState(false);
const openDropdown = () => {
setIsOpen(!isOpen);
};
const closeDropdown = () => {
setIsOpen(false);
};
return(
<>
<Icon src="icon.jpg" alt="아이콘" onClick={toggleDropdown}></Icon>
<DropdownMenu isOpen={isOpen}>
<DropdownMenuItem disabled>OOO님, 안녕하세요!</DropdownMenuItem>
<DropdownMenuItem> 상품리스트 페이지</DropdownMenuItem>
<DropdownMenuItem none>북마크 페이지</DropdownMenuItem>
</DropdownMenu>
{isOpen && <DropdownBackground onClick={closeDropdown}/>}
</>
);
}
export default Dropdown;기록하고싶은 기능구현(2)
Modal이 나타났을때 CloseBtn을 눌러서 사라지는 기능에 배경을 눌러도 Modal이 사라질 수 있도록 기능을 추가 구현
ModalContainer는 Modald을 감싸고있는 컴포넌트로서 CloseBtn처럼 눌렀을때 Modal이 사라질 수 있게 onClick으로 이벤트 함수를 추가해주면된다.
하지만 이렇게 했을때는 Modal의 배경뿐아니라 이미지나 북마크 이름을 눌러도 닫히는것을 확인할 수 있다.
따라서 이벤트 버블링을 막아주는 onClick={(event) =>event.stopPropagation()를 사용할 수 있다.
이벤트버블링이란
이벤트가 연속하여 발생하는 버블 현상을 의미한다.
클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상이다.
이미지와 이름 북마크를 감싸고있는 부모요소인 ModalContent에 적어주므로 ModalContainer에서 발생한 클릭 이벤트의 전파를 중단시킬 수 있습니다.
return (
<ModalContainer onClick={closeModal}>
<ModalContent onClick={(event) =>event.stopPropagation()}>
<Image src={selectedItem.img} alt='item_img'/>
<ModalBookmarkicon onClick={ModalBookmarkClick}>
{isOn ? (<img src={BookmarkOn} alt="bookmark_on" />) : (<img src={BookmarkOff} alt="bookmark_on" />)}
</ModalBookmarkicon>
<Title>{selectedItem.name}</Title>
<CloseBtn src="CloseBtn.png" alt="CloseBtn" onClick={closeModal}></CloseBtn>
</ModalContent>
</ModalContainer>
);코드리뷰받았던 부분과 미비했던 기능구현을 보수하는 시간도 보람찬시간이였고 역시나 많은것을 알게되고 또 복습하는 시간이였다. 내일이 마지막 솔로프로젝트기때문에 집중해서 구현하지 못한부분을 빠르게 구현봐야겠다 말처럼 쉽지 않지만 내일도 화이팅~!
