[TIL] 12.30

글 목록 에서 이미지를 출력하기 위해 어떻게 해야 하나 고민을 하였다. 

 

1. 제목에 글의 카테고리를 달아서 해당 부분을 읽어 디폴트 이미지를 출역한다. 

   ex) react_how use to react 제일 앞 부분 react를 읽어와 저장되 있던 react 디폴트이미지를 출력

 

2. fs을 사용하여 json 파일을 만들때 파일 내용의 제일 첫 이미지를 json 파일에 추가하여 출력하기

 

간단하게 첫번째 방법을 사용하려고 하였지만 같은 이미지들이 반복적으로 나열되는 것이 보기가 좋지 않아서 두번째 방법을 사용하였다. 

fs.readFile(`./Assets/${name}/${filename}`, "utf8", function(
                err,
                data
              ) {
                try {
                  if (err) throw err;
                  const result = {};
                  const content = data.split("\n");
                  let title = content[0].replace("# ", "");
                  let image;

                  for (let i = 0; i < content.length; i++) {
                    if (content[i].includes("jpg") || 
                        content[i].includes("png") || 
                        content[i].includes("jpeg") || 
                        content[i].includes(".gif") || 
                        content[i].includes("img")) {
                      image = content[i].split("(")[1].split(")")[0];
                      break;
                    }
                  }
....

fs.read를 사용하여 내용을 띄어쓰기로 잘라내어 배열로 만든다음 for문을 돌면서 이미지 태그를 찾아내는 방식으로 만들었다.