<div id="readability-page-1" class="page">





<del id="measuring" aria-hidden="true">
<span><span></span></span>
</del>
<del id="gpu-support" aria-hidden="true">
<span></span>
<span></span>
</del>
<nav id="global-navigation">


</nav>
<main id="wrap" aria-hidden="false">



<div>






<header id="global-header">



<div>
<h2 aria-level="1" aria-live="polite">[노마드 코더] 트위터 클론 코딩 강의 노트</h2>
<ul>
<li aria-level="2" role="text" aria-label="2021년 09월 08일 02시 03분에 작성된 글.">2021.09.08 02:03</li>
<li><a href="/category/Dev%20%26%20I" aria-label="Dev &amp; I">Dev &amp; I</a></li>
</ul>
</div>

<del aria-hidden="true"></del>
</header>
<article id="article" aria-level="3" aria-live="polite">



<div>            <figure data-origin-width="512" data-origin-height="512" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/LwFKo/btreoUZ6SzW/wK4QFKF2F3ijqKbKLb0xJ1/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/LwFKo/btreoUZ6SzW/wK4QFKF2F3ijqKbKLb0xJ1/img.png" data-origin-width="512" data-origin-height="512" data-ke-mobilestyle="widthOrigin"></span></figure>
<h2>0.0 Welcome!</h2>
<h2 data-ke-size="size26">강의에서 구현할 Firebase를 이용하여 가능한 기능</h2>
<ul data-ke-list-type="disc">
<li>이메일, 비밀번호을 이용한 인증</li>
<li>회원가입</li>
<li>로그인</li>
<li>구글 소셜 로그인</li>
<li>깃헙 소셜 로그인</li>
<li>실시간 처리</li>
<li>트윗 보내기</li>
<li>파일 업로드</li>
<li>프로필 수정</li>
<li>트윗 수정하기</li>
<li>트윗 삭제하기</li>
</ul>
<p data-ke-size="size16">심지어 모든 기능을 백엔드 코드 작성없이 할 수 있다. 사이트를 만드는 데 가장 많이 드는 시간이 CSS 작업일 정도 ㅎㅎ</p>
<h2>0.1 Requirements</h2>
<h2 data-ke-size="size26">해당 강의를 듣기 전에 들어야 할 강의</h2>
<ul data-ke-list-type="disc">
<li><a href="https://nomadcoders.co/kokoa-clone/lobby" target="_blank" rel="noopener">코코아톡 클론 코딩</a> - <code>HTML</code>, <code>CSS</code>, <code>Github</code></li>
<li><a href="https://nomadcoders.co/react-fundamentals" target="_blank" rel="noopener">ReactJS로 영화 웹 서비스 만들기</a> - <code>ReactJS</code> Fundamantals</li>
<li><a href="https://nomadcoders.co/react-for-beginners/lobby" target="_blank" rel="noopener">초보를 위한 React JS</a> - <code>React Router</code>, <code>React Hooks</code>, <code>TypeScript</code></li>
<li><a href="https://nomadcoders.co/react-hooks-introduction" target="_blank" rel="noopener">실전형 리액트 Hooks 10개</a> - <code>React Hooks</code></li>
</ul>
<h2 data-ke-size="size26">해당 강의에서 배우게 될 것</h2>
<ul data-ke-list-type="disc">
<li>React 컴포넌트를 만들고, 상태를 관리하는 새로운 방법 with React Hooks</li>
</ul>
<h2>0.2 What is Firebase</h2>
<h2 data-ke-size="size26">Firebase란?</h2>
<figure id="og_1631034288705" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Firebase" data-og-description="Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다." data-og-host="firebase.google.com" data-og-source-url="https://firebase.google.com" data-og-url="https://firebase.google.com/?hl=ko" data-og-image="https://scrap.kakaocdn.net/dn/XLKc7/hyLxyPz67p/Vn352hCJ8Bt5LKIzGZbquk/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800,https://scrap.kakaocdn.net/dn/ezqpc/hyLwnvlKy2/30j0eKiBUvwqXCnuqhejf1/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800"><a href="https://firebase.google.com/" target="_blank" rel="noopener" data-source-url="https://firebase.google.com">

<div>
<p data-ke-size="size16">Firebase</p>
<p data-ke-size="size16">Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.</p>
<p data-ke-size="size16">firebase.google.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/XLKc7/hyLxyPz67p/Vn352hCJ8Bt5LKIzGZbquk/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800,https://scrap.kakaocdn.net/dn/ezqpc/hyLwnvlKy2/30j0eKiBUvwqXCnuqhejf1/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800"></figure>
<ul data-ke-list-type="disc">
<li><a href="https://firebase.google.com/">https://firebase.google.com</a></li>
<li>웹사이트를 통해 제공해주는 백엔드 서비스</li>
<li>경쟁 서비스는 AWS의 <a href="https://aws.amazon.com/ko/amplify/" target="_blank" rel="noopener">Amplify</a></li>
<li>Amplify에서 GraphQL API등 Firebase에는 없는 새로운 기능들을 제공해주지만, Firebase의 서비스가 오래되었기 때문에 관련 커뮤니티가 크고 질문/답변, 튜토리얼 등이 많기 때문에 Firebase를 사용하는 것을 추천</li>
</ul>
<h2 data-ke-size="size26">Firebase의 초기 모델</h2>
<ul data-ke-list-type="disc">
<li>구글에 소속이되지 않은 채로 데이터베이스로 시작, 이후에 구글에 인수되고 기능이 확장됨</li>
</ul>
<h2 data-ke-size="size26">Firebase의 기능</h2>
<h3 data-ke-size="size23">Build better apps / 더 나은 앱 만들기</h3>
<p data-ke-size="size16">코드를 작성하지 않고도 애플리케이션을 더 좋게 만들 수 있는 기능을 만들 수 있음</p>
<ul data-ke-list-type="disc">
<li><b>Cloude FireStore</b> - 데이터베이스로는 SQL같은 데이터베이스 관련 코드 없이 데이터베이스를 사용하게 해줌</li>
<li>Firebase ML - 머신러닝을 통한 작업을 할 수 있게 해줌</li>
<li>Cloud Functions - AWS lambda와 비슷한 Serverless function</li>
<li><b>Cloud Storage</b> - AWS S3와 비슷한 파일 업로드 저장소, 강의에서는 사진을 업로드하는 데에 사용할 예정</li>
<li><b>Hosting(호스팅)</b> - Asset을 배포나 React 애플리케이션 배포에 사용</li>
<li><b>Authentication(인증)</b> - 가장 중요한 기능으로 이미 구현된 인증을 통해서 애플리케이션에 10분도 안돼서 인증을 구현할 수 있음</li>
<li>Realtime Database - Firebase의 원조 데이터베이스인 Realtime Database</li>
<li>Analytics</li>
</ul>
<h3 data-ke-size="size23">Improve app quality / 앱 퀄리티 높이기</h3>
<p data-ke-size="size16">구글의 전문분야인 Analytics를 통해 앱의 퀄리티를 높일 수 있음</p>
<ul data-ke-list-type="disc">
<li>Performance Monitoring - 앱의 성능을 측정할 수 있음</li>
<li>Test Lab - 각종 기기별로 앱을 테스트 할 수 있음</li>
</ul>
<h3 data-ke-size="size23">Grow your business / 사업 성장시키기</h3>
<p data-ke-size="size16">비즈니스 영역으로 확장된 형태의 Analytics</p>
<ul data-ke-list-type="disc">
<li>Google Analytics - 우리가 아는 그 구글 애널리틱스</li>
<li>Cloud Messaging - 푸쉬 알림을 사용하고자 하는 경우 사용</li>
</ul>            </div>
</article>



<hr>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>






















</div>

</main>

<nav id="pagination">

</nav>











	            
            
            
                        
                                
        
</div>

빠리의 택시 운전사

0.0 Welcome!
강의에서 구현할 Firebase를 이용하여 가능한 기능
이메일, 비밀번호을 이용한 인증
회원가입
로그인
구글 소셜 로그인
깃헙 소셜 로그인
실시간 처리
트윗 보내기
파일 업로드
프로필 수정
트윗 수정하기
트윗 삭제하기
심지어 모든 기능을 백엔드 코드 작성없이 할 수 있다. 사이트를 만드는 데 가장 많이 드는 시간이 CSS 작업일 정도 ㅎㅎ
0.1 Requirements
해당 강의를 듣기 전에 들어야 할 강의
코코아톡 클론 코딩 - HTML, CSS, Github
ReactJS로 영화 웹 서비스 만들기 - ReactJS Fundamantals
초보를 위한 React JS - React Router, React Hooks, TypeScript
실전형 리액트 Hooks 10개 - React Hooks
해당 강의에서 배우게 될 것
React 컴포넌트를 만들고, 상태를 관리하는 새로운 방법 with React Hooks
0.2 What is Firebase
Firebase란?
https://firebase.google.com
웹사이트를 통해 제공해주는 백엔드 서비스
경쟁 서비스는 AWS의 Amplify
Amplify에서 GraphQL API등 Firebase에는 없는 새로운 기능들을 제공해주지만, Firebase의 서비스가 오래되었기 때문에 관련 커뮤니티가 크고 질문/답변, 튜토리얼 등이 많기 때문에 Firebase를 사용하는 것을 추천
Firebase의 초기 모델
구글에 소속이되지 않은 채로 데이터베이스로 시작, 이후에 구글에 인수되고 기능이 확장됨
Firebase의 기능
Build better apps / 더 나은 앱 만들기
코드를 작성하지 않고도 애플리케이션을 더 좋게 만들 수 있는 기능을 만들 수 있음
Cloude FireStore - 데이터베이스로는 SQL같은 데이터베이스 관련 코드 없이 데이터베이스를 사용하게 해줌
Firebase ML - 머신러닝을 통한 작업을 할 수 있게 해줌
Cloud Functions - AWS lambda와 비슷한 Serverless function
Cloud Storage - AWS S3와 비슷한 파일 업로드 저장소, 강의에서는 사진을 업로드하는 데에 사용할 예정
Hosting(호스팅) - Asset을 배포나 React 애플리케이션 배포에 사용
Authentication(인증) - 가장 중요한 기능으로 이미 구현된 인증을 통해서 애플리케이션에 10분도 안돼서 인증을 구현할 수 있음
Realtime Database - Firebase의 원조 데이터베이스인 Realtime Database
Analytics
Improve app quality / 앱 퀄리티 높이기
구글의 전문분야인 Analytics를 통해 앱의 퀄리티를 높일 수 있음
Performance Monitoring - 앱의 성능을 측정할 수 있음
Test Lab - 각종 기기별로 앱을 테스트 할 수 있음
Grow your business / 사업 성장시키기
비즈니스 영역으로 확장된 형태의 Analytics
Google Analytics - 우리가 아는 그 구글 애널리틱스
Cloud Messaging - 푸쉬 알림을 사용하고자 하는 경우 사용

[노마드 코더] 트위터 클론 코딩 강의 노트

댓글