에러 확인

이미지 갤러리를 클론코딩하던 와중에 발생한 에러이다.

아래와 같이 사용자가 추가한 이미지가 row 형태로 나열되어야 하는데,

내가 작성한 프로젝트에서는 column 형태로 나열되어 출력되고 있다.

이미지가 추가되는 부분을 개발자도구를 열어 확인해 본다.

해당 코드를 열어 확인해보자.

이상한 부분이 있다. 이미지가 추가되었을 때 ‘row’ 라는 클래스를 생성해 주었는데,
개발자도구에서 확인해 보니 앞의 클래스와 합쳐보이게되어
‘row’ 클래스에 부여한 스타일이 적용되지 않는것 같다.

에러 해결

개발자도구에서 확인했던 className 에 공백을 추가하여
클래스 간의 구분을 짓고,
이미지가 추가된 경우 생성되는 className 인 ‘row’ 에 스타일을 적용시킴.



추가한 이미지에 flex-direction 속성이 정상적으로 적용되어 출력된다.