이화여자대학교 오픈 SW 플랫폼 13조 커몽
ℹ️ 프로젝트 개요
이화여자대학교 캠퍼스 맛집 소개 웹어플리케이션으로 인증된 사용자들이 직접 맛집 정보를 등록할 수 있고, 맛집 리스트를 통해 맛집의 상세정보를 제공하는 프로젝트이다.
타 웹어플리케이션들은 보통 맛집을 구역별로 세분화하지 않고 '이대 부근'의 가게들을 전체적으로 보여주는 반면, 커몽의 프로젝트는 '이화여자대학교 캠퍼스 맛집 소개'의 목적에 맞게 gps 기능을 사용하지 않고도 이대 정문, 이대 후문, 신촌 지역의 맛집을 구분하여 보여준다.
이를 통해 주 타켓층인 이화여대 학생들에게 편리함을 제공한다.
🎨 디자인
🕹 주요 기능
- 회원가입 및 로그인
- 맛집 등록 및 리뷰 작성
- 맛집 상세 조회
- 대표 메뉴 조회
- 맛집 리뷰 조회
👩🏻💻 나의 역할
React 를 이용한 프론트엔드 개발 및 Firebase 를 이용한 백엔드 개발, 디자인에 모두 참여했다. 메인 페이지, 맛집 리스트 화면, 로그인 및 회원가입 기능을 개발했다.
이어지는 블로그 글에서는 내가 개발한 부분들에 대해서만 작성하고자 한다.
🛠️ 개발환경
프론트엔드 개발에는 React, 백엔드 개발에는 Firebase, 개발 툴은 VSCode 를 사용했다.
1️⃣ 리액트란?
UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI를 생성하는데 집중한 라이브러리이다. 리액트는 자바스크립트에 HTML을 포함하는 JSX이라는 간단한 문법과 단방향 데이터 바인딩을 사용하고 있다.
- JSX
const App = () => {
const hello = 'Hello world!';
return <div>{hello}</div>;
};위와 같이 리액트는 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있다.
- 컴포넌트 기반
리액트로 웹 서비스를 개발할 때, 컴포넌트라고 부르는 작고 고립된 코드를 사용하여 UI를 구성하게 된다.
const Title = () => {
return <h1>Hello world</h1>;
};
const Button = () => {
return <button>This is a Button</button>;
};
const App = () => {
return (
<div>
<Title />
<Button />
</div>
);
};2️⃣ 파이어베이스란?
웹어플리케이션의 서버를 개발하기 위해서는 인증, 데이터베이스, API 등 모든 것을 개발해야 한다. 하지만 매번 데이터베이스를 설치하고, 서버를 올리고, 도메인을 구입하는 등의 작업을 수행하는 것은 효율성이 떨어진다.
FireBase는 이 모든 작업을 프로젝트 구축 시 자동적으로 만들어 주기 때문에 적은 비용으로도 매우 좋은 서비스를 만들 수 있도록 도와준다.
