강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

풀스택

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

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

(4.9) 수강평 27개

수강생 644명

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 파이어베이스

  • 리액트

  • 커스텀 리액트 훅

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

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

클라이언트 기능 구현(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

안녕하세요
입니다.

103,914

수강생

2,647

수강평

163

답변

4.8

강의 평점

80

강의

소개 이미지.png.webp

 

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

제주코딩베이스캠프란?

 

 

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

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


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

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

 


 

︎ 제주코딩베이스캠프 로드맵

제코베 로드맵.png.webp

 

︎ 제주코딩베이스캠프 수료증 제도

 

- 1.png.webp

 

커리큘럼

전체

24개 ∙ (3시간 34분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

27개

4.9

27개의 수강평

  • rayong님의 프로필 이미지
    rayong

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    Although it is a Firebase lecture, it is conducted with React, so you can study React a lot. It also teaches you how to build and host, and you can share the results you created with a URL. This is a useful lecture for front-end developers who want to create and distribute a simple toy project without a back-end.

    • 93ots3445님의 프로필 이미지
      93ots3445

      수강평 2

      평균 평점 4.5

      4

      100% 수강 후 작성

      Pros 1. You can learn the latest Firebase. It's a really good lecture for beginners. 2. If you look at the lecture list, it's not that big, so it ends just right before you get bored. 2. The lecture materials prepared with Notion are helpful for reviewing or reviewing the next day. 3. I bought it at a discount for the Hangul Day event, but the original tuition fee was okay. Cons The explanation is insufficient. There is no specific and easy-to-understand explanation of why this is here and what kind of output is generated by doing this. I just... say... This is it~ Let's write it! and move on. The explanation is not perfect. In the end, I feel like I'm just taking a dump, so I Google it and look it up myself. (That's how development studies are.) For those who are hesitant to pay: You can't not know React. You have to know it well. You don't have to use complicated JavaScript, but you still have to know beginner-intermediate + the latest. (nullish / spread / async / ternary operator, etc.) It doesn't come up often, but it comes up anyway.

      • ucopy님의 프로필 이미지
        ucopy

        수강평 5

        평균 평점 5.0

        5

        100% 수강 후 작성

        It's good because it's a well-functioning development source.

        • 7552님의 프로필 이미지
          7552

          수강평 9

          평균 평점 5.0

          5

          8% 수강 후 작성

          I've always only made pages while working on the front end... Thank you so much for giving me the experience of implementing a login function in the back end and saving and managing data. ( _ _) I think I'll be able to implement more complex functions if I apply what I've learned well! If I have another small wish, I'd really appreciate it if you could tell me how to log in through Google or GitHub in addition to email login!!! Please continue to make great lectures in the future!! ㅋㅋ

          • yooss2006님의 프로필 이미지
            yooss2006

            수강평 16

            평균 평점 5.0

            5

            100% 수강 후 작성

            I learned Firebase so easily. This is a must-take lecture for front-end developers!

            ₩33,000

            제주코딩베이스캠프님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!