Thumbnail
개발 · 프로그래밍 풀스택

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

(4.9)
9개의 수강평 ∙ 158명의 수강생

33,000원

지식공유자: 제주코딩베이스캠프
총 24개 수업 (3시간 34분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[풀스택, 백엔드] 강의입니다.

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

✍️
이런 걸
배워요!
파이어베이스
리액트
커스텀 리액트 훅

리액트 + 파이어베이스만 있으면 
프론트엔드도 백엔드도 혼자서 뚝딱! 🔥

리액트와 파이어베이스의 힘으로
웹 개발 필수 기능을 구현해봅시다!

클라이언트 기능 구현(HTML, CSS, JS)은 가능하지만 
주변에 백엔드 개발자가 없어서 
발을 동동 굴러본 경험이 있는 분들을 위한 강의! 

파일:React-icon.svg

파이어베이스는 모바일 및 웹 애플리케이션 개발 플랫폼으로
고품질의 앱을 빠르게 개발할 수 있도록 도와주는 백엔드 서비스입니다.

"React + Firebase"

본 강의에서는 리액트로 간단한 애플리케이션을 만들고
파이어베이스를 이용해 백엔드에서 수행할 수 있는
유저 인증과 데이터 통신(저장하기, 불러오기, 삭제하기) 을 구현하여

하나의 완결성 있는 웹 애플리케이션을 만들어봅니다.


리액트+파이어베이스로 구현하는
<두근두근 비밀일기> 서비스

이런 걸 만들 수 있어요🧙‍♂️


<두근두근 비밀일기>서비스를 함께 만들어보면서
서비스 로그인, 게시글 저장, 삭제 기능 등을 구현해 보아요!

[1] 회원가입, 로그인 기능 구현

[2] 게시글 작성/저장 기능 구현

[3] 게시글 삭제 기능 구현

 

이 강의의 특징 ✨

2022년 최신
Web Version 9

얼마 전 파이어베이스가 메이저 업데이트되면서 기존에 사용하던 V8 기반의 코드는 거의 사용이 불가능하게 되었습니다. 이 강의는 2022년 기준으로 가장 최신 버전의 파이어베이스 Web Version 9을 기반으로 합니다.

리액트
Version 6

이 강의에서는 리액트의 react-router-dom 을 이용해 라우팅을 처리하고 있습니다. 얼마 전 메이저 업데이트된 가장 최신 버전의 Version 6를 기반으로 코드가 동작합니다.

직접 커스텀하는
리액트 Hooks

리액트 Hooks를 직접 커스텀해 여러분만의 훅을 만들어 볼 수 있습니다. 물론 기존에 존재하는 Hooks인 useState, useReducer 등도 사용합니다.

강의 내용이 담긴
교안 제공

강의 내용이 상세하게 정리되어 있는 교안을 같이 제공합니다. 영상 강의를 보지 않고도 교안만으로 기능을 구현하는게 가능할 정도로 모든 내용이 들어가 있습니다. 강의를 보면서 참고하기 좋고, 다시 내용을 환기하는데도 매우 유용합니다.

프론트엔드만 공부하다가 놓치기 쉬운 웹 애플리이케션의 전체적인 작동 흐름을 파악할 수 있습니다.

직접 리액트 훅을 커스텀하면서 훅에 좀 더 친숙해 질 수 있습니다.


이런 걸 배울 거예요! 📚

1. 파이어베이스 프로젝트 세팅


파이어베이스를 이용하기 위해 직접 프로젝트를 세팅해봅시다.

2. 페이지 라우팅


react-router-dom을 이용해 페이지 라우팅을 구현해봅니다.

3. 환경변수 관리하기

중요한 데이터를 환경변수로 안전하게 관리하는 방법을 배워봅니다.

4. 파이어베이스를 이용해 로그인, 로그아웃, 회원가입 구현하기

파이어베이스가 지원하는 로그인, 로그아웃, 회원가입 기능을 이용해 간단하게 해당 기능을 구현해 봅니다.

5. 파이어스토어를 이용한 데이터 저장, 호출, 삭제

파이어베이스가 제공하는 파이어스토어 서비스를 통해 나만의 DB를 만들어봅니다.

6. 프로젝트 빌드와 배포, 호스팅

프로젝트를 빌드하고 배포하는 과정을 통해 여러분이 만든 프로젝트를 호스팅해봅니다

 

강의를 수강하기에 앞서 Q&A 📝

Q. HTML, CSS, JS를 몰라도 괜찮나요?

A. 이 강의에서는 위 언어들에 대한 설명을 따로 제공하지 않습니다. 기초 수준의 지식이 있으셔야 강의를 이해하는데 무리가 없습니다.

Q. 리액트를 모르는데 괜찮을까요?

A. 리액트에 대해 기초적인 지식이 있으면 좋지만, 없어도 강의를 듣는데 크게 지장은 없습니다. 

Q. 강의에서 다루고 있는 버전은 몇 버전인가요?

A. 이미 시중에 출시된 파이어베이스 강의의 대부분은 V8 에 기반하여 제작되어 있습니다. 이번 강의에서는 2022년 기준으로 가장 최신의 V9 버전을 기반으로 작성되었습니다. 또한 react-router-dom 역시 가장최신의 V6 버전으로 작업하였습니다.

 

안녕하세요.
강사 한재현입니다. 🙂

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
파이어베이스가 처음이신 분들
파이어베이스를 이용해 로그인 기능과 호스팅을 하고싶으신 분들
리액트 프로젝트를 만들고 싶으신 분
📚
선수 지식,
필요한가요?
HTML
CSS
JavaScript

안녕하세요
제주코딩베이스캠프 입니다.
제주코딩베이스캠프의 썸네일

🧙‍♂ 안녕하세요. 제주코딩베이스캠프입니다.

제주코딩베이스캠프란?

제주에서 가장 핫한 개발자들이 모여 작당한 부트캠프! 열정있는 청년들에게 열정만큼 성장할 수 있는 기회를 제공합니다!

제주코딩베이스캠프는 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 지자체와 함께 진행하고 있습니다.


서비스 구축 성공
경험을 통해 이 취업난 시대에 자신감, 자존감, 성취감, 그리고 자립할 수 있는 능력을 배양해 보세요!

으라차차 청춘 화이팅입니다! 😀

공동 지식공유자: The Oreum의 썸네일 -J-의 썸네일 Hojun Lee의 썸네일
커리큘럼 총 24 개 ˙ 3시간 34분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. FireBase & React
파이어베이스란? 미리보기 12:33
리액트로 라우팅하기 14:51
네비게이션 만들기 07:09
로그인폼 만들기 12:04
파이어베이스 프로젝트 설정 07:20
환경변수 관리하기 04:53
회원가입 hook만들기 17:13
context로 유저정보 관리하기 17:35
로그아웃 구현하기 08:50
로그인 구현하기 07:26
상태에 맞는 화면 노출하기 19:29
홈 화면 폼 만들기 07:57
파이어스토어 설정 13:55
도큐먼트 저장하기 12:08
도큐먼트 불러오기 16:35
파이어스토어 쿼리 13:33
홈 화면 스타일링 09:10
빌드와 배포 09:59
강의 게시일 : 2022년 08월 30일 (마지막 업데이트일 : 2022년 09월 13일)
수강평 총 9개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
9개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Ucopy Theme thumbnail
잘 작동되는 개발 소스라서 좋습니다.
2022-09-22
skdyds thumbnail
파이어베이스 강의지만, 리액트로 진행하는 것이라 리액트 공부도 많이 할 수 있습니다. 빌드하고 호스팅하는 것도 알려주셔도 만든 결과물을 url 로 공유할 수 있고요. 백엔드 없이 간단한 토이프로젝트를 만들어 배포하고 싶은 프론트라면 유용한 강의입니다.
2022-10-23
어쩔티비~ thumbnail
장점 1. 최신형 파이어베이스를 배울 수 있습니다. 초보한테 정말 좋은 강의입니다. 2. 강의리스트 보시면 큰 규모가 아니라서 지루하기 전에 딱 알맞게 끝납니다. 2. 노션으로 준비하신 강의 자료가 다음 날 복습이나 복기를 하는데 도움이 됩니다. 3. 한글날 이벤트로 할인해서 샀지만, 애초에 본래 수강금액도 괜찮아용. 단점 설명이 부족합니다. 이게 이 자리에 왜있고 이렇게 하면 정확히 어떤 아웃풋이 나오는지에 대한 구체적이고 이해가 쏙 잘되는 설명 자체가 결여되어있습니다. 그냥... 이렇습니다~ 자 씁시다! 하고 넘어갑니다. 설명이 완벽하지 않다. 결국 똥싸다 만 느낌이라 혼자 구글링해서 찾아보고 그렇게 됩니다. (원래 개발공부란게 그렇지만) 결제 망설이시는 분 위해 : 리액트 모르면 안되구요. 잘 알아야 합니다. 자바스크립트도 복잡한 건 안쓰시지만 그래도 초중급 + 최신형 알아야 합니다. ( nullish / spread / async / ternary operator 등 ) 자주는 아닌데 암튼 나옵니다.
2022-10-15
FE7 thumbnail
프론트 작업을 하면서 항상 페이지만 만들어 왔었는데... 이렇게 백엔드에서 구현하는 로그인 기능과 데이터를 저장하고 관리할 수 있는 경험을 하게 해 주셔서 정말 감사합니다. ( _ _) 배운 내용을 잘 응용하면 좀 더 복잡한 기능을 구현할 수 있을 것 같아요! 추가로 작은 바람이 있다면 이메일 로그인과 더불어 구글이나 깃허브를 통한 로그인 방법도 알 수 있으면 정말 정말 감사할것 같습니다!!! 앞으로도 좋은 강의 계속 찍어주세요!! ㅋㅋ
2022-09-30
유순상 thumbnail
파이어베이스 너무 쉽게 배웠네요. 프론트엔드 개발자라면 꼭 들었으면 하는 강의!
2022-09-21