24/08/08 - 팀프로젝트 일일 회고 4

오늘은 프로젝트 마무리 작업을 하고, 발표 자료를 만들었습니다.

 

프로젝트는 기존 DB에 적재되어 있는 데이터를 사용자가 삭제할 수 있는 작업을 진행했습니다. 지난 회고에서 데이터 읽는 방식을 수정했는데, 삭제할 데이터의 ID를 얻기 위해 해당 코드를 한번 더 수정했습니다.

 

아래는 해당 코드입니다. 데이터의 정보와 그 ID 값을 얻어야 하기 때문에 return 부분을 수정했습니다.

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

    // 특정 정보를 가져오는 함수
    async function getCelebrityInfo(logValue) {
        if (!logValue) // 찾는 값이 없을 경우
            return;

        const q = query(collection(db, "albums"), where("name", "==", logValue), limit(1));
        const querySnapshot = await getDocs(q); // 쿼리 실행

        if (!querySnapshot.empty) { // 일치하는 데이터가 있는지 확인하고,
            const doc = querySnapshot.docs[0];  // 첫 번째 데이터를 반환
            const row = doc.data();
            const docId = doc.id; // 문서의 ID를 가져옴
            return { id: docId, data: row };
            // 1. 데이터를 반환하는 구조가 바뀌었다.
        }
        return null;
    }

 

하지만 이렇게 되면 then 부분에서 row를 직접 사용할 시, 문제가 생깁니다. 왜냐하면 데이터 구조가 바뀌었기 때문에 기존의 방식으로는 데이터에 접근할 수 없기 때문입니다.

 

따라서 데이터에 접근하는 방식에도 변화가 있어야 합니다. 아래는 변형된 데이터 접근 방식과 그렇게 얻은 것들을 바탕으로 DB에서 삭제하는 코드입니다.

    // 함수 호출
    getCelebrityInfo(logValue).then(row => {
        if (row) {
            // 2. 따라서 아래처럼 기존의 방법으로는 데이터에 접근할 수 없다.
            // let birth = row['birth'];
            // 3. 기존의 방법과 유사하게 하려면 다음처럼 해야한다.
            // let birth = row.data['birth'];
            // 하지만 이렇게 하면 길어지니, 다음 줄과 마찬가지로 간소화시켰다.
            const { birth, blog, etc, git, img, mbti, name, pros } = row.data;
        }
    });
    
    $("#deletebtr").click(async function () {
        const result = await getCelebrityInfo(logValue);
        if(result) {
            console.log("문서 ID:", result.id);
            await deleteDoc(doc(db, "albums", result.id)); // 문서 삭제
        }
        alert('데이터를 삭제합니다.');
        window.location.href = "index.html";
    })

 

 

 

 

날씨API

다음은 날씨 API입니다. 해당 부분은 제가 진행하지 않았지만, 오류가 중요해 보여 덧붙이게 되었습니다.

날씨API 배포 전, 배포 후

 

날씨API를 사용할 때, 배포하기 전에는 제대로 동작이 됐으나 배포 후에는 동작되지 않았습니다.

 

콘솔창을 확인해보니 배포한 페이지는 https인데 사용된 API는 http이라 발생한 문제입니다.

날씨API가 http라 문제 발생

 

 

그렇다면 기존 API를 https로 바꾸면 되지 않느냐?

네. 저도 그 생각을 했습니다. 하지만...... 날씨API를 가져온 곳은 https를 제공하지 않았습니다.

 

그래서 사용한 방법은 새로운 API를 사용하는 것.

해당 이미지는 API를 수정한 팀원의 블로그에서 퍼옴

 

그랬더니 이제는 잘 동작됩니다!

 

 

 

검색 결과 서버 측에서 프록시 서버를 설정하여 https 요청을 대신 처리하고, 클라이언트 측에서는 http 요청을 프록시 서버로 보내면 문제가 해결된다고 하는데, 유감스럽게도 거기까지 해보지는 못했습니다.

무엇보다 배포를 깃허브(정적 호스팅 서비스)를 통해 하고 있었기 때문에, Node.js 서버를 설정하거나 다른 프록시 서버 서비스로 변경하는 작업은 팀플 기간이 끝나가는 지금 도전하기엔 시일이 많이 걸릴 것 같았습니다.