폴더 내 파일명 리스트 추출해서 변수로 쓰기(수백개)

후.... 정말 미친일이 벌어졌다. 이렇게 폴더안에 있는 파일이름들을 전부

 

배열, 혹은 json변수로만들어 사용해야 할 일이 생겼다.

 

이와같이 이미지 파일이 존재하면 해당 이미지파일을 보여주고 없으면 기본 이미지를 보여주는 과정인데

 

 ....
 const handleImage = (e)=>{
    e.target.src=default_img
    console.log(e.target.src)
  }
  
  return <>


<div className='explain'><img src={props.image} onError={handleImage} width={150} alt="제품이미지"></img></div>

....

이와같이 출력했는데 이와같이 해주면 정상적으로 작동은하지만

 

Next.js나 React의 public폴더안에 없는파일을 한번 연결해주는 과정이라 500에러가나게 된다.

(500 Internal Server Error)

 

휴... 그래서 결국 방법을 강구해 보았다.

 

500개의 데이터목록이 있는데 350개의 이미지 파일만 있다.

 

없는 녀석은 파일이름을 대조해 삼항연산자 조건문을 사용해 기본 이미지를 출력해주고

 

있는 녀석들만 원래의 파일로 출력하게 해주는것이다.

 

이와같이 수백개의 사진파일이 존재하는 폴더로가서 cmd를 실행시켜준다.

 

그리고 dir > a.txt (이름은 아무거나) 식으로하면

 

a.txt에 파일이름들이 전부 저장되게 된다.

그럼 이런식으로 나오는데 띄어쓰기에 원화표시가 되어있다. 해당 문자들은 엑셀로 처리해 주었다.

 

찾아바꾸기로 원화표시를 없애주고, png", 로 묶어서 컴마까지 만들어서 바로 배열로 쓸 수 있게 만들어주었다.

 

이와같이 변화가 됨, 그리고

 

이와같이 Vscode에서 Ctrl+Alt+L버튼으로 한번에 왼쪽에 "표시만 주어 바로 배열 변수로 만들어 사용해 주었다.

 

console창에서 나던 서버 500에러도 뜨지않고, onError로 이용해 대체 이미지를 띄워줄 필요도 없어졌다.

 

물론 혹시모를 이유를 대비해 onError alt속성은 넣어두긴 하지만 

 

{docc.includes(`${props.ramenName}`) ? (
          <Link href={`/ramen/${props.id}`}>
            <div className="explain">
              <img
                src={props.image}
                onError={handleImage}
                width={150}
                alt="제품이미지"
              ></img>
            </div>
          </Link>
        ) : (
          <Link href={`/ramen/${props.id}`}>
            <div className="explain">
              <img
                src="ramen/default.png"
                onError={handleImage}
                width={150}
                alt="제품이미지"
              ></img>
            </div>
          </Link>
        )}

이와같이 만들어 해당 배열에 존재하는 파일이면 출력되고, 아니면 기본이미지가 만들게 해주었다.