해결 방법
상위 요소의
display: flex제거 또는 Modal 창 스타일링 확인
(이번 에러는 발생 과정부터 차근차근 따라오셔야 이해가 가능합니다.)
에러 발생
Next.js 에서 Modal 창을 제작하다가 이상한 문제가 발생했다.
처음 이미지들을 나열했을 때의 모습은 이렇다.
그런데 여기서 사진을 클릭한 뒤 Modal 창을 열면 정상적으로 열리지만 이상한 현상이 발생한다.
클릭된 이미지의 크기가 변경되는 것이었다.
도저히 이해가 가지 않았다.
그저 클릭을 했을 뿐인데 이런 현상이 발생한다고?
그래서 나는 원인을 분석해보기 시작했다.
운이 좋게도 금방 원인을 찾을 수 있었다.
해결 과정
현재 Image 태그 밖에, 그러니까 Image 태그를 감싸는 div 태그의 속성을 살펴보면 문제점을 확인할 수 있었다.
문제의 코드를 살펴보자.
<section className="shadow-md flex mx-auto">
<div onClick={onClick} className="w-[300px] h-[300px] relative">
<Image
src={`${postData.postImageUrl}`}
fill={true}
alt="Post Image"
style={{ objectFit: "cover" }}
/>
</div>
<>{isOpen && <Modal postData={postData} onClick={setIsOpen} />}</>
</section>참고로 Image 태그를 특정 박스 안에 꽉 채워넣고 싶을 경우에 fill 어트리뷰트를 사용하는데, 이때 상위 요소의 스타일이 position: relative 가 되어야 한다.
관련 문서 : Next.js 공식 문서 - Image
section 태그의 className 을 살펴보면 문제를 확인할 수 있다.
flex 를 지워보면 바로 해결이 된다.
이렇게 간단한 문제 따위를 감히 블로그에 포스팅한다고? 🤦♂️🤦♂️
미안하다.
그냥 flex로 인한 오류이겠거니 싶어 넘어갈 수 있다.
하지만 이대로 넘어갈 수 없지 않겠는가?
도대체 이 문제가 왜 발생했는지, 왜 flex만 제거했더니 우리 모달이가 정상이 되었는지 알아보자.
고찰 With Deep Dive
먼저, 내가 section 의 className 에 flex 를 추가한 이유는 위 코드로 구현하려고 했던 것이 그저 이미지만 보여주는 것이 아니라 이미지 아래에 이미지에 대한 정보를 추가해 인스타그램 게시글과 비슷한 형태의 PostCard로 만들 계획이었기 때문이다.
그러나 현재 만들고 있는 것은 PostCard가 아니라 그냥 이미지 만을 배열시키는 것이기 때문에 사실상 위 section 의 className 은 없어도 되는 것이나 마찬가지이다.
이 오류를 다룬지 2시간이 지나서야 깨달았다.
그런데 여기서 flex를 지우지 않고도 에러가 해결되는 현상을 발견했다.
이 문제의 근원은 사실 Modal 창에 있었던 것이다.
일단 Modal 창의 코드를 확인해보자.
export default function Modal({ postData, onClick }: Props ) {
return (
<section className="w-full h-full">
</section>
);
}Modal 창이 열리지 않았을 때, 즉 isOpen === false 인 경우에는 상관이 없다.
Modal 창이 열렸을 때, 즉 isOpen === true 인 경우에는 Modal 창의 section 부분에 w-full, h-full 스타일이 적용되어서 Modal 창의 공간이 생기기 때문에 당연하게 이런 일이 일어난 것이었다.
그러니까 쉽게 말해서 isOpen === false 인 경우
<div >
<Image/>
</div>isOpen === true 인 경우
<div >
<Image/>
<Modal/>
</div>이렇게 된다는 것이다.
굉장히 허무했다.
나는 relative와 flex를 사용할 때 특별한 무언가가 있는 줄 알고 계속해서 relatvie와 flex의 상관관계에 대해 조사했다.
물론 결과적으론 이번 에러와 상관이 없던 내용들이었지만 그 덕분에 relative에 대해서 조금 더 깊게 이해할 수 있었고 자칫하면 이와 비슷한 유형의 에러가 relative를 통해서도 만들어 질 수 있다는 것을 깨달았다.
우선 어떤 경우에 비슷한 유형의 에러가 만들어지는지 알아보자.
1. relative 는 위치를 이동하더라도 본인의 원래 자리는 그대로 유지한다.
이를 통해 section이 relative 였을 경우에도 이런 에러가 발생할 가능성이 있다는 것을 깨달았다.
예시를 통해 보면 쉽게 이해할 수 있다.
relative 포지셔닝을 통해 section을 top-10px, left-10px 이동시켰으나 빈칸은 그대로 남아있는 것을 확인할 수 있다.
아래 코드는 section 의 스타일링을 보여주는 것이다.
좀 더 직관적으로 확인할 수 있게 width-10px, height-10px, background-black 으로 설정하였다.
element {
position: relative;
background-color: black;
width: 10px;
height: 10px;
top: 10px;
left: 10px;
}아래 첫 번째 사진은 isOpen === false 상태이고, 나머지는 isOpen === true 상태이다.
2. flex layout 에서 html 요소의 크기가 너무 큰 경우 자동으로 요소의 크기를 축소시킨다.
크롬 개발자 도구를 사용하다보면 가끔 화살표가 뜨면서 설정 값보다 작은 크기의 사진을 보여주는 것을 발견할 수 있다.
이는 flex layout 에서 html 요소의 크기가 너무 큰 경우 자동으로 요소의 크기를 축소시켰다는 의미로 화살표를 보여주는 것이다.
참고 자료 모아보기
- Next.js Doc - Image
- stack overflow - relative occupying space
- stack overflow - relative size decrease 1
- stack overflow - relative size decrease 2
마치며
지난주부터 1주 1포스팅을 실천하고 있다.
1주일에 하루만이라도 해야한다고해서 반드시 하루만 해야겠다 다짐하고 딱 하나만
쓰려는 것은 아니다.
군 복무를 하면서 프로젝트 진행, 기술 공부, 블로그 포스팅, 독서 모두 하다보니 주어진 시간이 많지 않아 최선을 다해 모든 시간을 투자해도 모자라서 그런것이다.
『소프트 스킬』에서 '뽀모도로' 를 사용해보라고 해서 약 일주일째 사용중인데 굉장히 효과가 좋다.
집중력도 향상되고 내 공부 시간을 어림짐작해 파악하는 것이 아니라 확실하게 파악이 가능해서 계획을 세울 때도 더 수월했다.
이 포스팅을 읽었던 사람들 중에 '뽀모도로' 를 모르고 있었거나, 알고는 있었지만 아직 사용을 해보지 않았던 사람이라면 꼭 한번 사용해보길 추천한다.
매일은 못 해도 1주일에 하루만이라도 해야한다. 이것조차 안하는 사람이 99퍼센트에 가까우니까. 이것만 해도 남들을 훨씬 앞지를 수 있다. 역행자가 될 수 있다. - 『역행자』
