회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각
웹개발_솔로프로젝트 데일리 후기
어제가 서버와 씨름을 해야해서 가장 어려웠을거라고 생각했는데 오늘 예상치 못한 복병을 만났다. Modal을 만드는것이였는데 3시간 잡았던 시간을 훌쩍 넘어 거의 하루종일 붙잡고있었다.
오래걸린 이유는 파일구조때문이라고 생각이 든다. 처음에 프로젝트를 시작할때 파일의 구성을 미리 짜고 어떻게 데이터를 내려줄것인지를 고려하고 시작했어야했는데 그부분을 간과하고 시작했다보니 호되게 당한거같다. ㅜ.ㅜ
사건의 전말은 이러하다... 어제까지 Products preveiw를 Card 컴포넌트에 만들었다. Modal은 보여지고 있는 상품을 클릭했을때 상품의 정보를 보여주는 모달이 나와야하며 북마크아이콘도 구현을 했어야했다.
Card 컴포넌트는 상위 파일인 Mainpage에서 서버로부터 받아온 data의 정보를 받아왔으며 북마크아이콘의 상태를 관리하고있는데
만약 선택된 상품과 관련된 정보를 modal에 띄우려면 main으로부터 data를 받는게 아닌 card를 거쳐서 modald에 와야하는것이였다.
우선 이부분 구현하는데 오전시간을 꼬박 사용했다. 하지만 문제는 북마크아이콘이였다.
북마크아이콘은 메인이 아닌 card에서 컴포넌트를 생성하고 상태를 관리하고 있다보니 북마크아이콘을 메인으로 옮겨서 카드와 모달에 내려주거나, 리덕스를 사용하여 상태를 관리하고 넘겨주는 방법이였다.
이렇게 될줄 미리 알았다면 구조를 다시한번 잡아보고 진행했을텐데... ㅜㅜ
작업이 너무 길어질거같아서 어제 만들었던 Card 컴포넌트의 자식으로 modal을 넣어서 북마크아이콘의 상태를 props로 전달받으려고 했다. 하지만 북마크아이콘의 위치가 다르다보니 styled components 다시 설정해줘야했기에 modal에서 자체적으로 북마크아이콘을 가져와서 새로운 컴포넌트를 만들어서 사용했다.
수정이 필요한 부분
기억해둘 코드
Modal 컴포넌트 요구사항 (3h)
Card 컴포넌트 모달 구현 요구사항
마주했던 에러(1)
card를 클릭했을때 보여지는 모달이 클릭한 card의 이미지와 관련 정보를 보여주는 부분에서 props가 잘 전달되지 않아서 이미지가 보여지지 않는 에러가 있었다.
의사코드 작성해보기
Modal의 상태를 관리하는 useState의 초기값은 false -> 이상태가 true가 되면 Modal이 보여짐
openModal 이벤트함수 생성 후 Card img에 적용-> card 클릭 했을때 이미지의 관련 정보를 openModal 이벤트함수의 인자로 전달해주기 -> 전달받은 인자가 이미지와, 이름 2개이기 때문에 openModal 이벤트함수안에 변수를 만들어서 객체형태로 저장 한후 상태를 관리하는 useState에 값을 넣어주기 -> Modal의 상태를 관리하는 useState값 바꿔주기 -> Modal 컴포넌트로 클릭한 상품의 정보를 담고있는 useState를 props로 전달하기 -> Modal 컴포넌트에서 props를 받아서 필요한 위치에 받아온 data를 사용하기
Card 컴포넌트에서 Modal을 닫는 이벤트함수 생성 -> Modal 컴포넌트에 props로 전달, Modal 컴포넌트에서 props 전달받기 -> Modal의 closebtn을 누르면 Modal을 닫는 이벤트함수가 실행될 수 있게 onClick설정
[Card.js]
import Modal from "../Components/Modal";
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);
const openModal = (img, name) => {
const item = {img, name}
setSelectedItem(item);
setIsModalOpen(true);
};
const closeModal = () => {
setSelectedItem(null);
setIsModalOpen(false);
};
return(
<>
<CardImg>
<Img src={image_url || brand_image_url} alt="card"
onClick={() => {openModal(image_url || brand_image_url, title || brand_name)}}>
</Img>
<Bookmarkicon onClick={BookmarkClick}>
{isOn ? (<img src={BookmarkOn} alt="bookmark_on" />) : (<img src={BookmarkOff} alt="bookmark_on" />)}
</Bookmarkicon>
<CardTitle>
{(() => {
if(type === "Category") {
return `#${title}`
} else {
return title || brand_name
};
})()}
(..중략..)
{isModalOpen && (<Modal selectedItem={selectedItem} closeModal={closeModal}/>
)}
</>
export default Card;
[Modal.js]
const Modal = ({ selectedItem, closeModal }) => {
return (
<ModalContainer>
<ModalContent>
<Image src={selectedItem.img} alt='item_img' />
<Title>{selectedItem.name}</Title>
<CloseBtn src="CloseBtn.png" alt="CloseBtn" onClick={closeModal}></CloseBtn>
</ModalContent>
</ModalContainer>
);
};
기록하고싶은 기능구현(1)
모달창이 나왔을때 모달 주변의 배경 그라데이션 설정
linear-gradient() 함수는 선형 그라데이션을 생성하는 CSS 함수로 linear-gradient([각도], [색상 정의 1], [색상 정의 2], ...)로 설정할 수 있다.
각도는 그라데이션의 방향을 지정하는데 0deg는 위에서 아래로, 90deg는 왼쪽에서 오른쪽으로, 360deg는 한 바퀴(전체 원)를 의미한다. 즉, 360도는 0도와 동일한 효과를 가진다
색상 정의는 그라데이션의 색상과 위치를 지정하는데 색상은 RGB, RGBA, HSL, HSLA, HEX 등의 형식으로 지정할 수 있고, 위치는 0%부터 100%까지의 값을 가지며 각 색상 정의는 쉼표로 구분한.
background: linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 100%);
코드는 요소의 배경에 360도 방향으로 선형 그라데이션을 적용하고 그라데이션의 색상은 흰색(rgba(255, 255, 255, 0.3))으로 설정되어 있으며, 시작 지점(0%)부터 중간 지점(50%)까지는 색상이 부드럽게 변화하고, 중간 지점에서 끝 지점(100%)까지도 색상의 정의가 동일하기 때문에 같은 색상이 유지되는것이다.
background: linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 100%);