안녕하세요~!!!
개발꿈나무 무럭무럭 나무입니다!! ㅎㅎ
홀로 비전공 이직준비를 하려는데 무엇을 해야 할지...
어디서부터 뭘 시작해야 할지... 막막하네요!!
학원에서 떠먹여 줘서 어찌어찌 취업이 잘 되었지만...
비전공 개발자 여러분 모두..... 포트폴리오 준비를
미리미리미리미리 잘 준비해 놓으시길..... 젭라 ㅜㅜ
일단 개인적으로 공부할만한 거 뭐가 있을까?? 하며
유튜브를 뒤적뒤적하는 중에 '코딩애플'님이 강의하신
'firebase로 당근마켓 만들기'가 매우 흥미로워 보이더군요.
이렇게 유튜브로 처음 6강 정도는 무료로 맛보기가 가능하답니다!!!
Course Directory - 코딩애플 온라인 강좌
codingapple.com
전체 강좌는 코딩애플님 강좌 사이트에 들어가서 확인할 수 있었습니다.
이 외에도 정말 다양한 강좌가 많더라고요!!!
제가 지금 개인적으로 공부하려 하는
vue.js기초강의도 있었는데!! 인스타그램을 만들어보면서
배우는 거던데..!!! 제목이 너무너무 제 흥미를 자극해서
나중에 한번 봐볼까 해요! (광고 아님;;)ㅋㅋ
일단 무료강의까지 들으면 구현할 수 있는 부분은
1.firebase 설치 및 연동
2. 메인 화면(내비게이션바/상품리스트 노출)
3. 상품 등록하기(제목, 내용, 가격, 이미지 저장)
4. 회원가입하기(이메일, 패스워드 저장) - 중간에 끊기는.. 까지
이렇게입니다!!!
무료강의까지 진행한 과정을 간략하게 정리하겠습니다!
일단 firebase가 뭔지 먼저 설명드리자면
구글에서 웹서버단을 대신 만들어줘서 제공해 주는 서비스라고 합니다.
즉!! 프론트 단만 개발하면 되는 것이죠!!!
1. firebase
firebase console로 들어가 어떻게 제공해 주나 보여드리겠습니다.
일단 firebase에 저의 당근프로젝트가 하나 보이네요 ㅎㅎㅎㅎ
눌러보겠습니다 ㅎㅎ
제가 진행하고 있는 프로젝트인데요,
좌측에 Authentication , Firestore Database , Storage 등
회원정보, 데이터베이스 등 서버단을 제공해주고 있습니다.
여기에 우리가 필요한 데이터를 저장하여 필요에 의해 사용할 수 있는 것입니다.
2. 당근마켓 상품등록 화면
이런 화면 form은 html로 작성하며 강의가 진행되는데
이런 사소한 부분은 코딩애플님이 제공해 주어
진행됩니다 ㅎㅎ
이렇게 '올리기' 버튼을 누르면
title, content, price, 이미지가 저장되는
기능을 js로 구현해 주면 firebase에서 저장된 데이터를
확인할 수 있습니다!!
firebase database로 들어가면
이렇게 컬렉션에 'product'라는 파일 아래에,
문서(상품 1)와 같은 파일 아래에,
필드(가격, 날짜, 내용, 제목 등)를 오브젝트로 생성할 수 있도록
구성되어 있습니다.
저 안의 내용을 직접 추가할 수 있습니다!!
그리고 화면에서 데이터 저장 기능을 구현하여
올리기 버튼을 클릭하면
firebase에서 제공하는 db로 저장되어 firebase console 화면에서도
확인할 수 있답니다!!!!
(문서 부분에 상품 1, 상품 2 외에 이상한 이름으로 저장된 것들이
제가 직접 상품 update를 하여 올린 데이터 들입니다 ㅎㅎ)
2. 메인화면
데이터베이스에 저장된 값을 가지고 메인화면에는
상품을 뿌려주었습니다.
이렇게 database의 필드를 가지고
이미지, 제목, 날짜(아직 제대로 포맷 안되어있음 ㅎ), 가격을
화면에 뿌려주었습니다 ㅎㅎㅎ
보통 이미지는 database에 저장하지 않고,
storage로 따로 저장시켜 줍니다!!!!
데이터베이스에서는 보통 글자/숫자만 저장하고
firebase는 document당 1MB 데이터 제한이 있다고 하네요!!
그래서 이미지 같은 건 storage에 올리고
이미지의 url을 사용하여 database에 업로드하면 됩니다!!
storage 화면도 보여드리도록 하겠습니다 ㅎㅎ
한 개의 test이미지가 저장되어 있는 것이 보이네요!!!
그래서 메인 화면에 이미지(검정화면에 test)가 하나 등록되어 있고
나머지는 이미지 등록 기능을 구현하기 전이라 이미지가 비어있습니다 ㅎㅎ
storage도 물론 필요한 데이터를 직접 등록하실 수 있습니다 ㅎㅎㅎㅎ
그리고 메인 상단을 보시면 내비게이터가 추가되어 있는데요!!!
상단에 내비게이터를 추가하는 부분은
bootstrap에서 가져다 사용한 것입니다!!
bootstrap에서 'navbar'라고 검색하시면
다양하게 많으니 예쁘고 맘에 드는 것을 사용하시길...!!
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
3. 회원가입 화면
웹페이지의 기본 중 기본 회원가입과 로그인 기능입니다 ㅎㅎ
아무나 들어와서 상품을 등록하면 안 되니까
회원가입과 로그인할 수 있는 폼도 만들어 보았는데요!!!
일단 로그인이 되려면 회원가입을 해야 하기 때문에!!!
이름, 이메일, 패스워드 입력칸을 만들고
가입하기 버튼을 누르면
firebase console의 Authentication에 저장되어
회원들을 관리할 수 있습니다!! ㅎㅎㅎㅎ
이렇게 화면에서 값들만 보내주면
firebase가 서버단은 알아서 다 해주는 거예요!!!
어떻게 저장되어 있는지 확인해 보겠습니다!
회원가입 등록하기 기능을 구현하여
회원들을 검증하고 관리할 수 있습니다.
Authentication 도 물론 필요한 데이터를 직접
등록하실 수 있습니다 ㅎㅎㅎㅎ
이렇게 무료로 제공해 주는 부분을 따라 하면서
firebase 연동과 버전 문제로 오류가 참 다양하게 떴었는데요!!!
그건 제가 따로 정리해 보도록 하겠습니다 ㅎㅎㅎㅎ
당근마켓을 완성하는 그날까지
저는 끝까지 한번 만들어보려 합니다.!! 총총..
오늘의 공부기록 끝!!!!
