1차 팀 프로젝트 / Firebase Authentication으로 회원 가입 하기

거두절미하고 오늘의 결과물입니다...!

 

저번에 이어서 멤버 포스트 css와 js를 추가 수정했습니다. 

 

기존에 userId와 userPw를 Firebase Database에 저장하던 방식을 Firebase Authentication을 이용하도록 수정했습니다.

 

import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

---
const userId = formData.get('userId');
const userPw = formData.get('userPw');
---    

// authentication 이용하기
createUserWithEmailAndPassword(auth, userId, userPw)
        .then(async (userCredential) => {
            const user = userCredential.user;

            const docs = {
                userId : user.uid,
                userName: userName,
                ---
            };
            console.log(docs);
            try {
                await addDoc(collection(db, 'user'), docs);
                alert('작성 완료!');
            } catch (error) {
                console.error('Firestore 저장 실패:', error);
                alert('작성 실패');
            }
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.error('회원가입 오류:', errorMessage);
            alert('회원가입 실패');
        });

Firebase Authentication에 사용자 정보가 저장되고, 해당 uid가 Firestore에 기록되는 것을 확인했습니다.

 

그리고 네이버 뉴스 API를 이용해 IT 관련 뉴스를 가져와 메인 페이지에 표시하려 했지만 CORS Error에 막혀버렸습니다...

const clientId = '-';
const clientSecret = '-';
const query = 'IT';
const display = '4';
const url = `https://openapi.naver.com/v1/search/news.json?query=${query}&display=${display}&start=1&sort=sim`;
fetch(url, {
    method: 'GET',
    headers: {
        'X-Naver-Client-Id': clientId,
        'X-Naver-Client-Secret': clientSecret
    }
})
    .then(response => response.json())
    .then(data => {
        const articles = data.items;
        const articlesList = document.getElementById('articles');
        articlesList.innerHTML = '';
        articles.forEach(article => {
            const articleElement = document.createElement('div');
            articleElement.innerHTML = `
        <h3><a href="${article.link}" target="_blank">${article.title}</a></h3>
        <p>${article.description}</p>
        <small>작성일: ${article.pubDate}</small>
        `;
            articlesList.appendChild(articleElement);
        });
    })
    .catch(error => {
        console.error('API 호출 오류:', error);
    });

 

네트워크창에서 에러를 보니 405에러로

 

METHOD가 분명 GET이긴 하지만 그래도 혹시나 하는 마음에 POST로도 바꿔봤지만 안됐습니다....

 

결국 튜터님에게 질문을 했는데 네이버 open API는 프론트엔드에서 처리가 불가능하다는....

 

분명 카카오 open API는 url만 허용해주면 됐었는데 왜 네이버는 안되는지.... 서버를 열면 되는 문제긴 하지만 저희는 백엔드가 아닌 프론트에서만 작업을 하므로...네이버 open api를 통해 뉴스 기사를 가져오는 것은 나중으로 미루기로 했습니다ㅜ

 

네이버 Open API의 프론트엔드 사용 제한으로 인해 작업이 중단되었지만, API를 다룰 때 CORS와 서버 역할의 중요성을 다시 한번 느꼈습니다. 😊