​​이번 포스트에서는 파이어 베이스의 파이어 스토어(firestore) 사용법에 대해 알아보도록 하자. 파이어 베이스에 대한 포스트를 아직 읽지 않았다면 한번 보고 오길 바란다. 2022.02.21 - [Firebase] - [Firebase] 파이어 베이스란? 주요 기능들과 유사 제품들 [Firebase] 파이어베이스란? 주요 기능들과 유사 제품들 파이어 베이스 기능들은 하나하나 알아가 보기 전에 Firebase(파이어 베이스)에 대해서 간단히 알아보는 시간을 가져보겠다. 필자도 Firebase를 사용하기 시작한지 얼마 되지는 않았지만, 회사 입사 mingeesuh.tistory.com 보통 앱을 만들때 데이터베이스에 수없이 많은 요청을 하듯이, 파이어 베이스를 통해 앱을 개발할 때도 가장 많이 쓰게 ..

이번 포스트에서는 파이어 베이스에서 새 프로젝트를 생성하는 방법에 대해 알아보겠다. 마침 관리자 페이지를 만들어야하기 때문에 앞으로 Firebase 관련 예제는 React로 작성을 해보겠다. 일단 프로젝트 생성을 위해 Firebase 콘솔에 들어가자. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인/회원가입 후 콘솔에서 프로젝트 추가를 해주자. 2022년 기준으로 작성된 포스트이기 때문에 UI는 스크린샷과 다를 수 있음을 주의. 프로젝트 추가 -> 프로젝트 이름 -> 애널리틱스 설정후, 잠시 기다리면 프로젝트가 생..

파이어 베이스 기능들은 하나하나 알아가 보기 전에 Firebase(파이어 베이스)에 대해서 간단히 알아보는 시간을 가져보겠다. 필자도 Firebase를 사용하기 시작한지 얼마 되지는 않았지만, 회사 입사이후 매번 함께 하면서 주요 기능들은 어느 정도 숙지했기 때문에 입문자들에게 조금이라도 도움이 되고자 관련글을 하나하나씩 써보려고 한다. Firebase란? 구글에서 운영하고 있는 웹, 모바일 개발 플랫폼이다. 손쉽게 앱을 만들고, 유지 보수하고 확장시킬 수 있도록 여러 가지 기능, 툴 셋을 제공한다 (Authentication, Analytics, Storage, Hosting 등등). 원래 서버 개발자가 특히 신경 써야 할 서버, 인증, DB 관련 기능들을 구글 자체적으로 제공하고 쉽게 scale up..

오늘은 Next JS에서 공통된 레이아웃 (Header, Footer 등 여러 페이지에서 반복적으로 사용되는 컴포넌트)를 정의하는 방법에 대해 설명해보려고 한다. 보통 React의 경우, import Navbar from '/Navbar' export default function Layout({ children }) { return ( {children} ) } 이런 식으로 Layout이라는 페이지 컴포넌트(이름은 상관없음)를 정의하고 그 안에 공통적으로 사용될 컴포넌트를 넣어주는 방식을 사용한다. 주로 Navbar, SideBar, Footer 이런 컴포넌트와 함께 공통적으로 들어갈 스타일링이 있다면 같이 해준다. // ...생략 // App.js export default const App = ()..

예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하는 프로젝트에 투입되어 SSR을 지원하는 넥스트 JS를 배우고 있다. React 자체적으로도 SSR (서버 사이드 렌더링)이 가능하긴 하지만 생각보다 복잡하기 때문에 이왕 배우는 거 넥스트 JS를 배우고 있다. 일단 CRA(Create React App)처럼 create-next-app으로 간단하게 넥스트앱 프로젝트를 생성할 수 있다 npx create-next-app # 또는 yarn create-next-app 폴더 구조 .next build/배포 시 필요한 파일들이 담겨있는 폴더 c..

필자는 새로운 React 프로젝트를 진행할 때 항상 이 절대 경로 설정을 해주는 편이다. 처음에는 그냥 상대 경로를 사용했지만 프로젝트를 진행하다 보면 항상 파일 구조가 깊어졌고 결국 상대 경로 지옥에 빠져, import 하기가 더 번거럽고 가독성이 나빠졌다. import Avatar from '../../../components/Avatar' // 상대 경로로 아바타 컴포넌트 불러오기 import Avatar from 'components/Avatar' // 절대 경로로 아바타 컴포넌트 불러오기 물론 상대 경로가 나쁘다는건 아니다. 이론상 속도도 빠르고 경로 수정도 용이하기 때문에 그냥 용도에 맞게 선택해서 사용하는 듯하다. 그러나 오늘은 절대 경로 설정하는 방법을 알아보기로 했으니 바로 시작해보자. ..