REST : URI를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE,PATCH 등)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것
구현 규칙
리소스는 명사를 사용
복수 형태를 사용
만약, REST만으로 해결하기 어려운 경우라면 동사를 허용
자원의 계층 관계를 슬래시(/)로 표현
마지막 문자에는 슬래시(/)가 있으면 안된다.
하이픈(-)을 사용
소문자
URI에 파일 확장자를 포함하면 안된다.
CRUD 함수명은 사용하지 않고, HTTP Method를 활용
정렬, 필터링, 페이징은 신규 API를 만드는것이 아닌 Query Parameter를 사용
GET /users/123 // 특정 사용자 조회
POST /users // 사용자 생성
{
"name": "sparta",
"password": "codingclub"
}
PUT /users/123 // 사용자 정보 수정
{
"name": "java",
"password": "spring"
}
DELETE /users/123 // 사용자 삭제
id값을 다른 문서에 새로 만들어서 그 아이디값을 불러와서 회원 문서에 해당 필드를 따로 추가하여 붙이는 방법을 사용했는데 수정을 할 때 계속 내가 생성하여 만든 시퀀스 id로 조회를 해보니 존재하지 않는다는 문제가 발생했다
해결방법
찾아보니 파이어베이스는 데이터를 추가할 때 고유한 id값을 자동으로 만들어준다는 사실을 알게 되었다. 나의 생각으로는 id값 필드명의 중복으로 인해서 계속 문제가 생겼던게 아닐까 싶다.
이재민
고민했던 점
웹을 만들면서 무조건 내가 외우고 알고 있는 코드들을 활용해서 웹페이지를 만들어야한다는 강박같은 생각에 겁을 먹은 상태라서 뭐든 소극적으로 하나씩 입력하고 있는 나를 발견하였음
팀장님과 팀원들의 배려로 간단한 페이지를 맡게 되었음에도 어떻게 해야하는지 감을 못잡음
함수를 사용했는데 파이어베이스 데이터를 사용하고싶어 script type=module로 코드를 변경하자 기존의 함수가 작동을 안함
모르는 부분이 있어도 용어들이 낯설어 어떤 것들을 모르고 있는지 모르는 답답함
해결방법
강의를 처음부터 3번정도 돌려서 따라하며 복습함
복습하면서 일단 만들면서 부트스트랩과 인터넷 검색 마지막으로 챗지피티의 도움을 받음
튜터님에게 질문을 드렸음 역시나 모든 내용을 이해하지는 못했으나 대충 튜터님께서 하고자하는 의도파악이 되면서 흥미가 생김
정의용
고민했던 점
비밀번호를 통한 기존에 작성 했던 방명록의 수정/삭제를 구현하던 도중, DB에 기록된 비밀번호를 다시 불러오고, 새롭게 input된 비밀번호와 일치 여부를 대조하는 과정에서 숫자로만 이루어진 비밀번호일 경우, 불일치가 뜨는 문제가 있었습니다.
해결방법
console.log를 통해 <입력된 비빌번호>, <저장된 비밀번호>, <각 비밀번호의 타입>을 확인하여 영어를 섞을 경우 string으로 반환되지만, 숫자로만 이루어질 경우 불러오는 과정에서 number로 반환되는 현상을 발견하였고, passwordInput === String(storedPassword)를 통해 데이터 타입을 확정적으로 변환하여 대조하게 했습니다.
유정현
고민했던 점 :메인 페이지 버튼 눌렀을 때 다음 페이지로 넘어갔다가 메인 페이지로 돌아오기 눌렀을 때 제대로 돌아오는 지 안 오는지 고민했다
해결방법 : 파일 경로에 대해서 알게되어 해결
Try : 다음 프로젝트를 위해 해야 할 노력
공식 문서를 열심히 보고 미리 사용할 기술에 대해서 충분히 연습하고 공부하는 것
역할 분배를 좀 더 확실하게 해서 모두들 다양하게 협업할 수 있게 할 것
공지를 잘 숙지 할 것
Feel : 이번 프로젝트를 통해 느낀 점
예나 : 무엇인가를 구현해보기 전에 충분한 자료조사를 한 후에 구현하는 것이 맞다는 생각이 들었다.
재민 : 미니팀프로젝트라지만 접근이 너무 어려웠으나 반복해서 내용을 접하다보니 거부감이 사라진 것 같고 모르는 것 생겼을 때 튜터님들 찾아뵙게 질문하고 난 후에 완벽히는 아니지만 어떤식으로 접근하면 될 것 같다는 생각이 들면서 약간의 흥미를 찾음
의용 : 코드가 돌아가는 전체적인 알고리즘은 파악했지만, 기초 지식이 부족해서 각 키워드가 해당 알고리즘에서 구체적으로 어떤 기능을 하는지 모르는 점이 너무 많았고, 코드를 작성하는 문법 측면에서도 새롭게 보는 문법이 많아 코드를 파악하는데 어려움이 있었습니다.
정현 : 웹페이지 하나를 봐도 구성되어 있는 코드가 다양하고 많다는 걸 느꼈고 조금 더 많이 노력을 해야겠다고 생각하였다.
<script type="module">
// Firebase SDK 라이브러리
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-storage.js";
// Firebase 구성 정보
const firebaseConfig = {
apiKey: ,
authDomain: ,
projectId: ,
storageBucket: ,
messagingSenderId: ,
appId:
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const storage = getStorage(app);
$("#addBtn").click(async function () {
// FireStorage에 저장할 이미지
let file = document.querySelector('#image').files[0];
let storageRef = ref(storage, 'image/' + file.name);
try {
// 1. 이미지 저장
await uploadBytes(storageRef, file);
// Firestore에 저장할 내용
let imageUrl = await getDownloadURL(storageRef);
let name = $('#name').val();
let introduction = $('#introduction').val();
let comment = $('#comment').val();
let region = $('#region').val();
let doc = {
'image': imageUrl,
'name': name,
'introduction': introduction,
'comment': comment,
'region' : region
};
// 2. 데이터베이스 저장
await addDoc(collection(db, "members"), doc);
alert("회원 추가가 완료되었습니다!");
location.href = 'main.html';
} catch (e) {
console.error("Error adding document: ", e);
}
})
Firebase에서 이미지를 저장하기 위해서는 Storage에 이미지 자체를 저장한다
그 후에, Storage에 저장된 이미지의 url을 getDownloadURL(storageRef);을 사용하여 추출한 후, FireStore데이터베이스에 저장하면 끝!
고민했던 점
처음에 팀원 추가 로직을 짤 때 먼저 1. 저장할 데이터를 추출한 후 2. 이미지 저장 3. 데이터베이스에 저장 순으로 짜 봤는데, 생각을 해보니 이미지를 먼저 Storage에 저장한 다음에 그게 성공했을 경우, 데이터베이스에 저장할 데이터를 추출하는게 훨씬 효율적인 로직이라는 생각(만약 사진 저장이 실패한 경우라면, 데이터베이스에 저장할 값들을 추출할 필요가 없기 때문에)이 들어서 수정하게 됐다!
참고로 Cloud Storage를 이용하기 위해서는 결제용 아이디를 만들고 등록해야 한다 ㅠㅠ !!
관계형 DB(sql) : 정리된 정보를 다룰 때 사용하는 데이터베이스, (A라는 엔티티는 사람정보만 저장)
비관계형 DB(nosql) : 복잡하거나 유연한 정보를 다룰 때 사용하는 데이터베이스, (A라는 엔티티에 사람, 동물, 식물 정보 모두 저장)
firebase?
구글이 개발한 개발 플랫폼
friestore database?
구글 클라우드를 기반으로 한, nosql 데이터베이스
firebase 연동 코드
<script type="module"> //type="module" 로 바꾸는 순간 script파일은 가장 마지막에 호출됨, 태그 안에 onclick같은 태그를 넣어도 실행 안됨
// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// Firebase 구성 정보 설정
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCUiCQL_bvaGqMfdlVekWlwmBjtzAzLAb4",
authDomain: "sparta-afff6.firebaseapp.com",
projectId: "sparta-afff6",
storageBucket: "sparta-afff6.firebasestorage.app",
messagingSenderId: "483366130794",
appId: "1:483366130794:web:7285911733b1357631e613",
measurementId: "G-0DTXP9FSHR"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
</script>
firebase를 이용하여 create
$("#postingbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let doc = {
'image': image,
'title': title,
'content': content,
'date': date
};
await addDoc(collection(db, "albums"), doc);
alert('저장 완료!');
window.location.reload();
})
firebase를 이용하여 read
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let title = row['title'];
let content = row['content'];
let date = row['date'];
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html)
});
type="module" 로 바꾸는 순간 script파일은 가장 마지막에 호출됨
그렇기에 태그 안에 onclick같은 태그를 넣어도 실행 안되기 때문에 jquery로 직접 이벤트를 넣어줘야 함
또한 결국 마지막에 script파일이 호출되기 때문에 $(document).ready는 호출할 필요가 없음, 그냥 파일안에 실행할 함수를 넣어주면 됨
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
$('#msg').text(mise)
})
})
-> 이렇게 할 필요 x
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
$('#msg').text(mise)
})
