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

오늘 한 것

---

• board.js에서 Firebase 연결
• board.js파일에 사진 올리기 버튼 클릭 시 Firebase에 올라가게 하기

 

오늘의 깨달음

---

404 not found 

---

board.js에서 Firebase를 연결하는 순간 페이지가 동작을 하지 않고 "404 page not found"라는 에러만 떴다. board.js 연결하기 전에는 잘 동작하던 웹이 board.js만 연결하면 안 되는 게 board.js에 문제가 있는 것 같아서 거의 두 시간가량을 board.js만 보고 있다가 깨달았다...

 

해결

firebase.js 파일과 board.js는 같은 위치에 있었다. 하지만 나는 아래와 같이 파일을 하나 더 나가서 엉뚱한 곳에서 firebase.js 파일을 불러왔던 것이다.

 

import { dbService } from '../firebase.js';

 

아래와 같이 코드를 수정해 주었다.

 

import { dbService } from './firebase.js';

 

 

버튼 클릭 시 사진 업로드하는 방법

---

버튼 클릭 시 사진 업로드하는 방법을 몰랐는데 생각보다 간단했다. 그저 input 태그에 type 속성을 file로 설정을 해주면 된다. 그리고 accept 속성에서 이미지 파일만 받게끔 "image/*"를 설정해주면 된다.

 

<input type="file" id="imgInput" accept="image/*" name="imgInput" onchange="imgFileUpload(event)"/>

 

 

<label>과 <input>

---

<label> 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있다. 이때 <label> 요소의 for 속성 값은 결합하고자 하는 요소의 id 속성 값과 같아야 한다. 

 

input 태그는 label 태그와 주로 같이 사용이 되는데 label의 for=""와 input의 id 값이 label 태그와 input 태그를 연결시켜준다.

 

예제 코드

<form method="post">
    <div class="button">
        <label for="imgInput">
           + 사진 올리기
        </label>
    </div>
    <input type="file" id="imgInput" name="imgInput" accept="image/*" onchange="imgFileUpload(event)">
</form>

 

이때, 중요한 점!

input을 그대로 사용하게 되면 디자인이 너무 예쁘지 않다. 따라서 label을 div로 감싸서 원하는 모양을 만들어주고 input 태그는 숨겨줄 수 있다.

 

 

target is not defiend

---

팀원분의 firebase import의 경로를 해결하고 나니 target이 없다는 에러 문구가 떴다. 하루 종일 나의 코드를 들여다봐서 그런지 전체 적인 코드의 흐름이 잡혀 바로 의심이 되는 코드라인을 찾았다. 바로 img 태그에 있는 onclick 속성이다. 일단 내용을 보내야 하기 때문에 onsubmit으로 수정한 뒤에도 되지 않아 혹시나 싶어 img 태그에 onsubmit을 input 태그로 옮겨 주었다. 그러니까 바로 작동이 되었다. 

 

알아본 바로는 img태그는 onclick은 가능하지만 submit 기능이 없다고 한다. 그래서 onsubmit, onchange 등은 input 태그에서 사용해야 한다고 한다.

 

 

회고

---

팀원분 중 한 분이 담당 한 페이지에 프로필 사진 변경 기능을 구현하는데 사진 파일 업로드가 되지 않는다 하셨다.
"404 not found"가 뜨신다고 하셨다. 나의 페이지에도 리뷰 사진을 올려야 해서 내가 해보겠다고 했다... 그러고 나도 같은 에러를 마주했고 해가 다 지고 나서야 해결이 됐다. import 할 때 firebase.js파일의 위치를 잘못 설정했던 것이다. import 부분을 본다고 봤는데 firebase랑 연결하는데 문제가 있겠어라는 생각에... 너무 쉽게 넘겨버렸던 부분이었다. 앞으로는 정말 한 줄 한 줄 항상 의심하면서 돌아봐야겠다. 오늘 하루는 에러를 고치다가 끝나버린 것 같다. 하지만 끝내 마주한 문제를 해결해서 좋았고 팀원 분의 에러를 함께 해결함으로써 한 가지 더 배우는 알찬 하루가 된 것 같다.