#리액트 카카오톡 인증/채팅 기능 구현
강사님과 같이 만들었던 트위터의 파이어베이스 기능들을 사용해서 전에 만들었던 카카오톡에 같은 기능을 추가해야했다.
트위터와 동일하게 파이어베이스 프로젝트를 생성하고 인증-DB-스토리지 순서로 설정하고 인증기능부터 구현했다.
기존에 만들었던 카카오톡은 로그인 페이지가 없이 바로 친구목록으로 들어가게 되어 일단 로그인페이지 컴포넌트부터 생성했다.
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GoogleAuthProvider, onAuthStateChanged, signInWithPopup } from 'firebase/auth';
import { authService } from '../fbase';
import AuthForm from '../components/AuthForm';
import App from '../App';
import '../styles/auth.scss';
function Auth() {
const [init, setInit] = useState(false);
const [userObj, setUserObj] = useState(null); // 로그인한 사용자의 정보
const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
onAuthStateChanged(authService, (user) => {
if (user) {
// User is signed in
setIsLoggedIn(user);
setUserObj(user);
} else {
// User is signed out
setIsLoggedIn(false);
}
setInit(true);
});
}, []);
/* onSocialClick */
/* 소셜버튼 클릭 */
const onSocialClick = (e) => {
const {
target: { name },
} = e;
let provider;
if (name === 'google') {
provider = new GoogleAuthProvider();
}
const data = signInWithPopup(authService, provider);
};
return (
<div className='auth'>
<div className='header'>
<ul>
<li>
<FontAwesomeIcon icon='fa-solid fa-gear' size='2x'/>
</li>
<li>
<FontAwesomeIcon icon='fa-solid fa-xmark' size='2x'/>
</li>
</ul>
</div>
<div className='logo'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 191.94'>
<g>
<polygon
class='cls-1'
points='76.01 89.49 87.99 89.49 87.99 89.49 82 72.47 76.01 89.49'
/>
<path
class='cls-1'
d='M104,0C46.56,0,0,36.71,0,82c0,29.28,19.47,55,48.75,69.48-1.59,5.49-10.24,35.34-10.58,37.69,0,0-.21,1.76.93,2.43a3.14,3.14,0,0,0,2.48.15c3.28-.46,38-24.81,44-29A131.56,131.56,0,0,0,104,164c57.44,0,104-36.71,104-82S161.44,0,104,0ZM52.53,69.27c-.13,11.6.1,23.8-.09,35.22-.06,3.65-2.16,4.74-5,5.78a1.88,1.88,0,0,1-1,.07c-3.25-.64-5.84-1.8-5.92-5.84-.23-11.41.07-23.63-.09-35.23-2.75-.11-6.67.11-9.22,0-3.54-.23-6-2.48-5.85-5.83s1.94-5.76,5.91-5.82c9.38-.14,21-.14,30.38,0,4,.06,5.78,2.48,5.9,5.82s-2.3,5.6-5.83,5.83C59.2,69.38,55.29,69.16,52.53,69.27Zm50.4,40.45a9.24,9.24,0,0,1-3.82.83c-2.5,0-4.41-1-5-2.65l-3-7.78H72.85l-3,7.78c-.58,1.63-2.49,2.65-5,2.65a9.16,9.16,0,0,1-3.81-.83c-1.66-.76-3.25-2.86-1.43-8.52L74,63.42a9,9,0,0,1,8-5.92,9.07,9.07,0,0,1,8,5.93l14.34,37.76C106.17,106.86,104.58,109,102.93,109.72Zm30.32,0H114a5.64,5.64,0,0,1-5.75-5.5V63.5a6.13,6.13,0,0,1,12.25,0V98.75h12.75a5.51,5.51,0,1,1,0,11Zm47-4.52A6,6,0,0,1,169.49,108L155.42,89.37l-2.08,2.08v13.09a6,6,0,0,1-12,0v-41a6,6,0,0,1,12,0V76.4l16.74-16.74a4.64,4.64,0,0,1,3.33-1.34,6.08,6.08,0,0,1,5.9,5.58A4.7,4.7,0,0,1,178,67.55L164.3,81.22l14.77,19.57A6,6,0,0,1,180.22,105.23Z'
/>
</g>
</svg>
</div>
<AuthForm />
<div className='authContainer'>
<div className='authBtns'>
<button onClick={onSocialClick} name='google' className='authBtn'>
Continue with Google <FontAwesomeIcon icon='fa-brands fa-google' />
</button>
</div>
</div>
</div>
);
}
export default Auth;firebase의 auth서비스를 이용해서 이메일과 구글로 로그인 할 수 있도록 구현하고, 인증이 된 사용자라면 바로 친구목록으로 이동할 수 있게 했다.
트위터에서 DB와 스토리지를 이용해서 순차적으로 나타나게 한 것 처럼 채팅창 역시 동일한 방법으로 구현했다.
다만 다른 점은 최근에 보낸 채팅이 아래로 오게하고 채팅이 쌓일수록 스크롤 바가 생겨서 화면 밖으로 나갈 수 있게도 설정 했다.
마지막으로 오늘 구현 못한 프로필 이미지와 이름 변경하기.. 욕심을 내서 Edit버튼을 눌러 이미지를 선택하면 state의 변경과 스토리지에서 데이터 다운로드 받아 자동으로 적용되게 하려 했는데 실패했다. 자꾸 state가 초기화가 되버려서 내일 다시 도전해봐야한다..
차라리 이름변경이라도 먼저 구현해놓을껄..!
그래도 트위터에서 사용했던 기능들을 동일하게 적용하는 거라 크게 어려움은 없었다. 내일 마저 마무리 해야겠다.
#이력서 및 자기소개서 작성
최대한 나의 강점과 긍정적인 면을 많이 써봤고, 단점과 취약했던 점은 어떻게 극복했으며 극복하고나서 긍정적으로 발현됐던 내용들은 위주로 작성했다.
교육들으면서 공부하고 배웠던 내용들은 추가로 작성을 좀 해야될 것 같다.
#어느덧 과정의 마지막 단계
마지막으로 리액트의 고급단계로 내일부터 새로운 진도를 나간다. 넷플릭스를 클론코딩 한다. 넷플릭스까지 구현이 끝나면 교육 초기에 기획했던 내 앱을 직접 구현해야한다. 그리고 나서 내 포트폴리오도 만들고 점점 정리를 하고 취업전선에 뛰어 들어야겠지.. 화이팅!
오늘 끝, 내일 안녕
