[ 스파르타 / TIL ] 내일배움캠프 #18

오늘 한 것

---

• 포스팅된 리뷰들의 사진 크기 수정
• 아이콘 간격 수정
• 이미지를 올렸을 때 "+ 사진 올리기" 버튼의 텍스트가 이미지 파일 이름으로 변경되게 설정
• 게시물 흐름 변경

 

 

오늘의 깨달음

---

이미지를 올렸을 때 "+ 사진 올리기" 버튼의 텍스트가 이미지 파일이름으로 변경되게 설정

 

처음에는 사진이 올려졌을때 버튼에 이미지 파일 이름을 어떻게 올려야 될지 조금 막막했다. 일단 버튼 event를 가져오기 때문에 가져온 내용물 중에 버튼 이름을 뽑아내야 했다. 하지만 아직 event.target.parentNode, children을 잘 사용할 줄 몰라 출력을 해보면서 원하는 값을 찾아 나갔다. 처음에는 "+ 사진 올리기"를 가져오게 아래와 같이 적어주었다. 

const btnName = event.target.parentNode.innerText;

 

그리고 이미지가 업로드가 되었을때 버튼의 문자가 변경되게 아래와 같이 적어주었다.

btnName.innerText = theFile.name;

 

하지만 버튼에는 이미지의 이름이 아닌 [Object]를 출력하였다. 생각해보니 innerText는 어떤 것의 text를 가져오는 건데 이미 text인 btnName에서 또다시 innerText를 해서 안되나 싶어서 아래와 같이 변경을 해주니 이미지 파일 이름이 정상적으로 출력이 되었다.

const btnName = event.target.parentNode;

 

 

회고

---

이번 프로젝트를 진행하면서 Firebase에서 데이터를 가져오고 또 올리고를 반복하다보니 코드들이 조금 익숙해졌나 보다. 팀원분이 에러를 마주할 때 프로젝트 시작할 때쯤에는 나도 한줄한줄 뜯어봐야 했는데 이제는 어떤 기능을 할 때 무엇이 필요하다는 것을 알겠어서 그리고 나도 거쳐온 에러들이라서 지금은 조금 더 빨리 에러들을 해결할 수 있게 되는 것 같다.