2023_10_24 TIL

프로젝트 진행상황

 

오늘부터 팀 프로젝트를 시작했다.

기존의 개인 프로젝트에서 추가적으로 기능을 구현해야 하는 과제를 받았다.

필수적으로 해야할 것으로는 다음과 같다.

 

① TMDB 또는 영화진흥위원회 오픈 API 이용

② 영화정보 상세 페이지 구현

③ 상세 페이지 영화 리뷰 작성 기능 구현

④ github PR(=Pull Request) 사용한 협업

⑤ UX를 고려한 validation check (영화 검색시, 댓글 작성시, 추가 기능 구현시 반드시 삽입)

⑥ 하기 기재된 Javascript 문법 요소를 이용하여 구현

 

일단 우리 조는 첫 날 상세페이지를 만들기로 했다. 상세 페이지 안에 영화 리뷰 작성 기능을 넣고 validation check만 하게되면 과제는 거의 끝난다고 생각했기 때문이다.

 

우선, 상세 페이지 내용을 가져오는 것은 영진님, 예원님이 하기로 했고 리뷰 작성 기능은 내가, 추가적으로 넣은 기능인 영화 미리보기 기능은 상엽님이 넣어주기로 했다.

 

리뷰 작성은 첫 팀 프로젝트에서도 기능을 넣었었는데 그때는 아예 할 줄 몰랐기 때문에 이번 기회에 만들어보고 싶었다.

리뷰 기능에 대한 내 실력은 전 프로젝트에서 팀원들이 만든 코드를 분석해봤다는 정도...? 였다.

 

코드를 짜기에 앞서 어떤 식으로 동작할지 생각해 봤다.

아무래도 조건을 모두 넣으면서 만들어 보기보단 기능을 구현해 놓고 조건을 다는 쪽이 나아보였다.

그래서 클릭을 하면 firebase로 데이터가 넘어가고 그 넘어간 데이터들이 웹으로 구현되는 쪽으로 먼저 만들었다.

 

그 후 댓글뿐만 아니라, id값, pw 를 localstorage와 firebase에 동시에 데이터가 들어가게 만들어주었고 local storage에 id값이 없다면 id값을 입력하는 prompt 창을 띄우고 입력된 값을 localstorage에 들어가게 했다.

 

 

 

 

firebase 간단 정리

 

firebase 쓰는 것을 몇 번 해본 적 있지만 아직은 익숙하지 않다. 하지만 오늘로서 확실히 firebase를 쓸 수 있게 된 것 같다.(데이터를 불러오는데 얼마 걸리지 않았다. 지금 실력으로는 데이터 불러오는 게 제일 어려운 것 같다. 데이터를 불러오기만 하면 쓰는 것은 별 문제가 안되는 것 같은데....!!)

 

firebase 쓰는 방법을 간단하게 정리해 보려고 한다.

 

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js";
import {getDocs, getDoc, deleteDoc, addDoc, collection, doc, updateDoc} from "https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js";
import { query, orderBy, where } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js";

// firebase 구성 정보 설정
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: "",
};

 

기본적으로 firebase SDK를 가져오고 firebase의 각 메서드들을 import 해와야 한다. (프로젝트 설정 - 일반 아래에 있다)

동시에 연결할 html 폴더에 스크립트를 불러와야 한다.

 

    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>

 

이렇게 기본적인 구성들을 마쳤다면 다음과 같은 코드로 시작하는 것 같다.

몇 번을 봐왔지만 많이들 이 방법으로 쓰는 것 같다. import한 firebase 함수 두 개를 쓴 것이다.

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

firebase를 쓰며 새로 알게 된 내용 두 가지가 있는데 그건 아래 '새로 배운 내용'에 적어보려고 한다.

 

 

 

 

해결한 내용

 

firebase 모듈을 import해오는 과정에서

Uncaught SyntaxError: Cannot use import statement outside a module

이라는 에러가 떴다. 이 에러를 해결하기 위해 찾아보니 js파일을 모듈화 시키라는 것이었다.

js 파일을 모듈화 시키니 문제가 해결되었다.

<script type = "module" src="commentList.js"></script>

 

 

 

새로 배운 내용

 

①

localName = prompt("성함을 입력해주세요")

위 코드는 prompt를 실행시킴과 동시에 prompt에 작성한 내용을 localName이라는 변수에 할당할 수 있다는 것을 알게 되었다.

 

 

② addDoc, getDoc

완전히 모르고 있었던 것은 아니지만 어떻게 쓰는지를 좀 더 확실하게 알 수 있었다.

addDoc(collection(db,"comment"),doc); 와 같은 형태로 많이 쓰는데, 

코드의 위쪽에서 정의한 db(=getFirestore(app))에 "comment"라는 이름으로 doc(우리가 만들어준 객체 이름, 이 안에 데이터가 객체 형태로 담겨있음.)을 넣겠다는 의미이다.

async function addComment() {
    // localstorage에 데이터 넣기
    let localName = localStorage.getItem('userName')
    if(localName == undefined){
        localName = prompt("성함을 입력해주세요")
        localStorage.setItem("userName", localName)
    }

    localStorage.setItem("comment",$comment.value);

    let password = prompt("비밀번호를 입력해주세요")
    if(password){
        let doc = {
            "id" : localName,
            "password" : password,
            "comment" : $comment.value,
        }
        await addDoc(collection(db,"comment"),doc);
        localStorage.setItem("password",password);
        alert('저장되었습니다');
    }
    
    getComment();
};

 

getDoc으로 꺼낼 때는 addDoc과 같은 형식으로 사용하지만, 데이터를 가져오는 것이기 때문에 앞에 변수로 받아준다는 점이 다르다. 또한 가져온 데이터를 forEach로 돌려 그 element들을 element.data()해서 변수로 담아 그 변수를 사용한다.

async function getComment() {
    const docs = await getDocs(collection(db,"comment"));
    
    docs.forEach((doc)=>{
        const data = doc.data();
        const $commentBox = document.createElement("div");
        $commentBox.innerHTML = `
        <li>작성자: ${data["id"]}</li>
        <li>댓글 : ${data["comment"]}</li>`

    });
}

 

 

③ localstorage.getItem /   localstorage.setItem 

 

 

// local storage에 데이터 넣기
localStorage.setItem("key","value");

// local storage에서 데이터 꺼내기
localStorgae.getItem("key");

// local storage에서 데이터 삭제하기
localStorage.removeItem("key");

 

 

④ async / await

 

간단하게 동기/ 비동기를 배우며 봤던 친구들이다. 사실 완전하게 이해는 못하지만 이번에 쓰면서 느꼈던 것은 데이터를 외부에서 가져오면서 많이 사용하는 친구인 것 같다. 이와 관련된 강의를 조금 깊이 있게 공부할 필요가 있다고 느낀다.

 

⑤ 단축키들

 

 html 폴더에서 div#test 라고 쓰면 id값이 test인 div가 생성된다.

마찬가지로 html 폴더에서 div.test 라고 쓰면 class 값이 test 인 div가 생성된다.

 

shift + alt + '아래방향키' : 윗 줄이 한 줄 복사된다.

 

 

 

내일 해야할 것

 

오늘 댓글 기능을 끝낼 수 있었지만 과제를 충분히 읽지 않고 코드를 짠 탓에 새로 다시 짜느라 시간을 많이 썼던 것 같다.

그래서 오늘 하려고 했던 부분을 내일 마무리 지어야 한다.

 

① click으로 실행되는 부분 submit으로 바꾸기

② local storage id값에 따른 수정, 삭제 버튼 추가하기

③ 댓글 역순으로 띄우기

④ 제일 생각 없었던 부분인데, 영화별로 댓글 창을 만들어 놓은 것이 아니기 때문에 영화별로 댓글 기능이 달리도록 구분       해주기

⑤ 댓글 부분 작성자/ 댓글/ 시간 으로 나누기