Inflearn brand logo image
Inflearn brand logo image
채널톡 아이콘
개발 · 프로그래밍

/

웹 개발

React + Firebase 풀스택 개발 - 파이어베이스 파이어스토어 Data Modeling

이 강의를 통해 파이어베이스로 DB의 관계를 구현하는 방법을 배우시게 됩니다. 빠르게 리액트 풀스택 개발자가 될 수 있습니다. 고용이 불안정한 지금 이 시대에는 새로운 기술을 배워 자신의 가치를 올려야 합니다. 그리고 무언가를 만들어야 합니다. 그 사이드 프로젝트와 아이디어를 구현 할 때 데이터의 "관계"를 구현할 수 있어야 합니다. 이 강의는 파이어베이스 "파이어스토어"로 "관계"를 구현할 수 있도록 도와 드립니다.

(4.7) 수강평 3개

수강생 18명

FirebaseReactfirestoredatabase-modelingreact-fullstack
Thumbnail

초급자를 위해 준비한
[웹 개발, Firebase] 강의입니다.

이런 걸 배울 수 있어요

  • Firebase Firestore 데이터 모델링 기초 배우기

  • Firebase Firestore 특성을 배워 응용 까지

  • Firestore로 One To One, One To Many, Many To Many 구현하기

  • 간단 서비스 : VanillaJS + Firebase 로 비정규화(Denormalization) 구현

  • SNS 서비스 : React + Firebase 로 정규화(Normalization) 구현

  • React 기초 + 필요시 부분적 JS 학습

  • Firebase Authentication, Storage

  • Vite(+Vanilla +React) / React Router

  • 비교적 빠른 시간 내에 Full-Stack 개발자 되기

지금 다니고 있는 회사...
만족 하시나요?

50세가 넘어서 까지...
안정적인 직장 생활이 가능할까요?

회사가 당신의 삶의
안정적인 버팀목이 되지 못합니다.


경기침체로 인해서 많은 스타트업이 망했고,
개발자들이 시장에 많이 나왔습니다.
기업은 권고사직, 정리해고, 희망퇴직,
구조조정을 하기 시작했습니다.
회사는 정년을 보장하지도 않고,
당신을 책임 지지도 않습니다.
앞으로 점점 더 늘어 날 것이며,
상황을 계속 악화 될 것이라 보입니다.

...지금은

자신의 미래는 자신 스스로가 준비 해야 합니다.

유일은 해결책은 무엇일까요?

버티면서 새로운 기술을 배우고 준비하는 것입니다!

  • 무언가를 만들고, 자신의 아이디어를 구현할 수 있어야함

  • 자신만의 사이드 프로젝트를 진행하며, 포트폴리오를 준비 해야함

  • 자신만의 새로운 가치를 구현할 수 있어야함

자신의 아이디어를 실제로 구현하려면?
사이드 프로젝트를 진행하려면?
직접 서비스를 만드려면?
소프트웨어 도메인 관점에서 >> 비즈니즈 도메인 관점으로 가려면?


데이터의 관계가 필요합니다.

One To One, One To Many, Many To Many


이 강좌는 파이어스토어 database-modeling 기초를 배우고 > 관계를 구현하게 되고
react-fullstack 개발자가 될 수 있습니다.

이런 분들께 추천해요

풀스택 개발자가 되고 싶은 분

VanillaJS + Firebase 조합, React + Firebase 조합을
배우시게 됩니다.

데이터 관계를 다루고 싶은 분

파이어베이스 파이어스토어 데이터 모델링 기초를 배워, 관계를 구현하게 됩니다.

파이어베이스를 배우고 싶은 분

리액트 / 뷰 / 플러터에 붙여서 나온 파이어베이스 보다, 더 기초를 다지게 됩니다.

리액트 + 파이어베이스 수강 후에는

  • 리액트(js 지식)과 파이어베이스 데이터 모델링 기초를 배우게 됩니다.

  • No-SQL인 파이어스토어 특성에 대해서 배우게 됩니다. ( 기초에서 응용까지 )


  • One To One, One To Many, Many To Many의 관계를 구현할 수 있게 됩니다.

  • 간단한 SNS 서비스를 만들 수 있게 됩니다.

파이어베이스 파이어스토어(Firestore)는
NoSQL이라 관계를 구현 할 수 없다고 생각 하시는 분이 많습니다.

그러나 Firestore 특성을 활용하여 Firestore 만의 관계를 쉽게 구현이 가능합니다.

이 강의의 특징

1. 강의 수강 시 CSS 프레임워크를 배운다고 힘드셨죠?

매번 새로운 강좌를 들을 때 마다 CSS 프레임워크를 배우는 것이 번거로우시죠? 이 강좌는 CSS 프레임워크를 사용하지 않고, CSS module을 사용합니다. 그리고 본 강좌는 html, css 강좌가 아니므로 번거로운 html, css는 복사 / 붙여 넣기를 하도록 하겠습니다.

필요시 영상 하단에 링크를 드립니다. 바로 복사 / 붙여 넣기 가능합니다.

스크린샷 2025-02-11 075832

2. 강의 마다 이론을 설명하는 슬라이드 드립니다.

강좌에서 배우게 되는 React 문법, Javascript 이론, Firebase 지식은 말로만 설명 드리지 않습니다. 모두 친절하게 슬라이드 정리해서 드립니다. 매 영상마다 자료는 하단에 있으니 바로 들어가서 보실 수 있습니다.

복사 붙여넣기

3. 이론은 슬라이드를 통해 최대한 자세하게 설명 드립니다

최대한 이해하기 쉽게 전달하려고 노력 했습니다. 그림, 도표, 시각화 자료를 최대한 활용하여 설명을 드립니다. 이론과 실습을 분리해서 균형적으로 전달 해드립니다.

1
2
3
4
5
6
7

Firebase 인증과 스토리지는 기초적인 것들만 학습하지만

Firebase 파이어스토어(Firestore)는 기초에서 응용까지 갈 수 있도록 도와드립니다.

Firestore를 배우게 되어서, 손해 볼 것은 없습니다.

이런 내용을 배워요

커리큘럼

강좌에서 사용하는 기술

firebase 2

Firebase @11

vite

Vite(Vanilla, React@13)

router

React Router@7

궁금한 점이 있나요?

Q. 다른 언어 개발자인데 수강해도 되나요?

  • html / css는 복사 붙여넣기 하기 때문에, html / css는 약간이라도 아셔야 합니다.

  • 데이터타입, IF문, 객체, 배열, 함수에 대한 이해는 있으셔야 합니다.
    그러나 강좌에서 진행하는 반복분(forEach/map), DOM조작, 삼항연산자, 옵셔널체이닝, 비동기처리는 모두 슬라이드 이론을 설명해 드립니다. 그리고 실습에 들어갑니다.

  • 당연히 리액트 기초 이론 / 문법도 자세하게 설명 드립니다.

Q. 라이브러리, 프레임워크가 최신 버전으로 올라가면 동작하지 않는 문제가 있나요?

  • 라이브러리나 프레임워크가 업데이트 되면, 강좌를 체크하고 직접 테스트 해서 잘 돌아가는지 확인하고 계속해서 업데이트 하도록 하겠습니다.

Q. Node.js 생태계가 익숙하지 않은데, 수강 해도 되나요?

  • node.js를 설치하고 > npm을 통해 라이브러리/프레임워크 설치 하고 > 실행하는 지식은 있으셔야 합니다. 만약 모르겠다면 다른 입문 강좌를 들으시기 바랍니다.

  • 슬라이드, 복사/붙여 넣기 코드를 드리지만... 혹시나 몰라서 node_modules가 포함된 전체 코드를 통으로 드립니다.

Q. 질문 답변은 잘 해주시나요?

  • 네, 질문에 대한 답변은 모두 해드리겠습니다.

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS) : Windows 11

  • 사용 도구: node.js/ npm / vscode

학습 자료 - 간편한 활용 가능

  • 동영상 강의 하단에 링크로 드립니다.

  • 동영상 강의 하단에 복사/붙여 넣기 코드 링크로 드립니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 새로운 기술을 가져서 경쟁력을 가지고 싶은 개발자

  • 빠르게 풀스택 개발자가 되고 싶은 경우

  • 프론트 개발자가 데이터베이스를 급하게 다뤄야 할 경우

  • 백엔드 개발자 이지만 리액트(js)와 파이어베이스 지식을 빠르게 습득하고 싶을 때

  • 플러터, 코틀린, 스위프트 개발자인데 파이어베이스 지식을 빠르게 습득하고자 하는 분

선수 지식,
필요할까요?

  • HTML, CSS 기초 지식 (코드를 보고 이해할 수 있으면 됨)

  • HTML, CSS 는 복사 / 붙여넣기 진행합니다.

  • JavaScript 기초 지식 (if문, 객체, 배열, 함수는 아셔야 합니다.)

  • React를 배우며 필요한 JS 지식은 부분적으로 설명 드립니다.

안녕하세요
브라이트코딩입니다.

18

명

수강생

3

개

수강평

4.7

점

강의 평점

1

개

강의

반갑습니다.

회사에서 소프트웨어 기술을 활용하여, 즐겁게 개발하는 사람입니다.

이제 ai 발전과 더불어, Solopreneur 가 대세가 되는 시대가 곧 오리라 확신합니다.

그 헤게모니가 이동하는 흐름을 따라 좋은 강의를 출시하여, 큰 도움을 드리고자 합니다.

커리큘럼

전체

62개 ∙ (9시간 59분)

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!