[1人 프로젝트] 트위터 클론코딩 4회차

🎉 성과

완성한 부분

파일 업로드하여 데이터베이스에 추가 및 삭제, 트윗삭제시 파일도 연쇄적으로 삭제

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

Firebase를 이용하여 Storage에 파일 생성 완료

 

업로드한 파일 미리보기

const [File, setFile] = useState('');

const onFileChange = event = > {
	const {file} = event.target;
    const myfile = file[0];
    const reader = new FileReader();
    reader.readAsDataURL(myfile);
    reader.onloadend = (finished) => {
    	const {result} = finished.current.Target;
        setFile(result)
    }
}
.
.
.
<input type="file" accept="image/*" onChange={onFileChange}/>
<img src={File} width='50px' height='50px' />
.
.
.

input태그에 업로드할 파일을 받고, 파일을 받게되면 onFileChange함수가 실행된다. onFileChange함수는 업로드된 파일을 myfile이라는 변수로 받고, new FileReader()를 reader함수로 재 정의한다. 그리고 reader.readAsDataURL(myfile)으로 파일의 URL을 생성하고, URL생성이 끝나면 reader.onloadend 함수가 실행된다. URL의 result를 result변수로 받고 setFile함수로 File이라는 변수에 파일의 URL값을 넣는다. 이를 img태그의 src속성값으로 넣게되면 파일의 이미지값이 화면에 출력된다.

 

업로드한 파일 취소하기

import {useRef} from 'react';

const FileInput = useRef();
const onFileClear = () => {
	setFile('');
    FileInput.current.value = null;
}
.
.
.
<input ref={FileInput} type='file' onChange={onFileChange} />

업로드할 파일을 취소하기 위해서는 파일을 업로드하는 input태그의 value값을 비워줘야한다. 그리고 따로 미리보기파일도 만들었으므로, 미리보기 파일도 빈문자열도 바꿔야한다. input태그에 useRef()를 이용해 value값을 null로 바꾸어주고, setFile함수로 파일의 URL을 빈문자열로 바꿔주면 된다.

 

업로드 파일을 firebase의 데이터베이스(Storage)에 추가하기

//fbase.js
import {getStorage} from 'firebase/storage';
.
.
.
export const storageService = getStorage();

//Home.js
import {storageService} from 'fbase';
import {ref, uploadString} from 'firebase/storage';
import {v4} from 'uuid';

const onSubmit = async(event) => {
	event.preventDefault();
    const fileRef = ref(storageService, `${user.uid}/${v4()}`);
    const response = await uploadString(fileRef, File, 'data_url');
}

firebase에 파일을 업로드 하기위해 fbase.js에서 storage관련 코드를 가져온다. 그리고 Home.js파일에서 storage를 사용할 코드, 파일이름을 랜덤으로 만들 v4함수를 불러온다. v4함수는 터미널에서 해당 모듈을 설치해야한다.

npm install uuid

fileRef는 파일의 정보를 담는 변수로 user.uid는 어떤 사용자가 올렸는지, v4()는 파일이름을 랜덤으로 생성한다. uploadString은 파일의 정보인 fileRef, 파일의 URL인 File, 그리고 'data_url'을 적어주면 실제로 firebase에 올라가게 된다.

 

트윗과 함께 사진 화면에 표시하기

//Home.js
import {getDownloadURL} from 'firebase/storage';
.
.
.
const onSubmit...
    const FileURL = await getDownloadURL(response.ref);
    const content = {
    	text: tweet,
        created: Date.now(),
        creatorID: userObj.uid,
        FileURL,
    }
    await addDoc(collection(dbService, 'tweets'), content);
    .
    .
    .

getDownloadURL은 파일의 다운로드 주소를 생성해준다. getDownloadURL으로 얻은 파일의 다운로드 주소를 FIleURL이라는 변수에 담고 트윗할때 같이 FileURL도 데이터베이스에 추가한다.

 

사진이 없는 경우도 계산하기

//Home.js
.
.
.
onSubmit = async(event) => {
    event.preventDefault();
    let FileURL = '';
    if (File != '') {
        const fileRef = ...
        const response= ...
       	FileURL = ...
    }
    const content = {...}
}

사진이 없는 경우에 트윗을 올릴경우 에러가 발생한다. 그래서 조건문을 넣어 input으로 받은 file이 없는경우에는 let FileURL에 정의한 빈문자열이 데이터베이스안에 들어가게 된다.

 

트윗삭제시 사진도 함께 삭제

//Tweet.js
import {deleteObject, ref} from 'firebase/storage';
import {storageService} from 'fbase';
.
.
.
onDelet = ...
    const TweetFile = ref(storageService, tweetObj.FileURL);
    if (message) {
    	...
        await deleteObject(TweetFile);
    }

firebase에서 삭제기능을 하는 코드를 불러온다. 그리고 ref함수를 통해 데이터베이스에 추가한 FileURL을 TweetFile이라는 변수에 참조시킨다. 만약 사용자가 확인창에서 확인을 눌렀다면 TweetFile에 참조되어진 FileURL을 삭제한다.