Today

1. 아웃소싱 프로젝트

웹사이트 개발 프로세스, 서비스 아키텍처

개발 프로세스를 정리하다가 우리 프로젝트에 맞는 서비스 아키텍처를 그려보았다.

---

Learn

코드의 재사용

• 문제사항
  프로젝트 진행 간 메인 페이지에서 사이드바에도 이미지를 넣고 사용하기 위해 여러 고민을 하다가 만들어 둔 캐러셀을 다시 재사용 해서 넣어 보았다.

• 원인
  기존에 모달창에 사용하던 이미지 크기와 서로 다름

• 해결
  이미지 크기를 각 프레임에 맞게 바뀌도록 유연하게 바뀌도록 스타일링
  width : 프레임에 맞는 % 단위 부여
  height : 스타일드 컴포넌트를 활용 한 동적 스타일링 (다른 prop)

• 코드

// 사이드 바 Item 캐러셀
<DetailCarousel shop={shop} $inModal={false} />

// 모달 창 내 캐러셀
<DetailCarousel shop={shop} $inModal={true} />

// 캐러셀 내 쓰인 스타일링
export const ImgWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: ${({ $inModal }) => ($inModal ? '250px' : '100px')};
`;

---

주절주절

벌써 장마기간이라는데 시간이 언제 이렇게 흐른 건지 모르겠다.