Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 백준
- axios
- 혼자공부하는머신러닝딥러닝
- 딥러닝
- 혼공머신
- 머신러닝
- 백준 #코딩테스트
- TS
- 에러해결방안
- 혼공단
- typeScript
- 혼자공부하는머신러닝
- styledcomonents
- 유니티 #게임개발
- error맛집
- 타입스크립트
- CSS
- REACT
- 혼공챌린지
- useEffect
- 백준 #코딩테스트 #코테 #알고리즘
- clipboardapi
- 코딩테스트
- 리액트
- reactmemo
- Redux
- js
- 구조분해할당
- 알고리즘
- 초기값 설정하기
Archives
- Today
- Total
좌충우돌 개발자의 길
[토이프로젝트] 백엔드 서버 없이 DB 연결하기 본문
# 문제 상황
이번 프로젝트는 프론트만 개발하여 진행된다.
하지만 db를 사용하기 위해선 백엔드 서버로 접근을 해야 안전하게 db에 접속하게 된다.
그래서 백엔드를 공부해야하나 고민했지만 주변 사람들의 조언으로 백엔드 서버 코드를 짜지 않아도 db에 접근할 수 있는 도구들이 있다는 사실을 알게 되었다
# 백엔드 없이 DB 접속하는 방법
1. Firebase
- firebase에서는 실시간 db를 무료로 제공해준다.
- 심지어 간단하게 api 주소만 axios/fetch에 입력하면 db에 데이터를 보내거나 받아오거나 삭제하거나 수정할 수 있다
- 관련 주소
2. json-server
- npm install만 하면 간단히 사용할 수 있다.
- json-server를 실행하는 즉시, db.json이라는 파일이 src 밖에 생기고 그 파일에 모든 데이터가 생성된다.
- 역시 axios/fetch에 api주소 (localhost:3000/db이름)을 입력하면 GET, POST, DELETE, PUT 모두 접근이 가능하다.
- 관련 주소
https://www.npmjs.com/package/json-server
# 내가 선택한 방법
- 기존에 json파일에 data를 넣어두었기 때문에 json-server로 진행하는 것이 이 프로젝트에서는 더 편리하다고 생각해 json-server를 선택했다.
- 정말 간단하게 이용할 수 있어 백엔드 서버를 구축할 시간을 아낄 수 있었다.
- 나중엔 직접 백엔드 서버를 구축해보고 싶은 예비 프론트엔드 개발자가 되었다.
'PROJECTS > Simple Wallet : 심플한 가계부' 카테고리의 다른 글
[토이프로젝트] 리액트에서 onClick이 자동으로 동작하는 에러 해결 (0) | 2022.11.23 |
---|---|
[토이프로젝트] Styled-Component에서 구글 폰트 사용하기 (0) | 2022.11.17 |
[토이프로젝트] 리렌더링 왜 안되는거야? (0) | 2022.11.16 |
[토이프로젝트] jsx에서 else if문 사용하는 방법 (0) | 2022.11.15 |
[토이프로젝트] useState를 이용해 기존 배열에 값 추가하기 (0) | 2022.11.14 |