- 팀 소개 웹페이지 만들기
이번 본캠프 시작과 동시에 팀 프로젝트를 바로 진행한다. 만드는건 팀을 소개하는 페이지를 만드는거고, 기한은 일주일 정도다.
페이지 만드는거 자체는 그렇게 어려운 일은 아니지만 팀으로 하는 프로젝트인만큼 '협업' 이 중요한데, 팀과제는 해본적이 없던지라 쉽지만은 않을 것 같다.
- CRUD ( 방명록 )
둘째날에 결석 한 사이 팀원분들이 정말 많이 진행해두셨다. 일단 Github 에 지금까지 진행된 파일들을 전부 받고 진행상황을 쭉 보면서 파악부터 하기 시작했다. 내가 짠 코드들이 아니다보니 낯선 구성도 몇개 보였고, 각 태그들이 어떻게 사용되었고 어떤 스타일이 적용됐는지 파악하는데 시간이 상당히 오래걸렸다. 어느정도 파악 후 CRUD 에서 'Update' 는 아직 구현이 안됐길래 Update 부터 만들기 시작했다.
우선 스크립트 타입이 'module' 로 되어있어서 기존에 했던 방식과는 다르게 진행해야하는 점이 첫 난관이었다.
두번째는 firebase 를 사용하다보니 이것도 익숙하지않다보니 난감했고 데이터베이스에 어떻게 업데이트 되는지 직접 확인이 안되는게 불편해서 기존 작업하던 내용의 clone을 만들고 거기에 따로 만든 firestore database 를 적용시켜서 작업을 했다.
- 문제 코드
큰 문제점은 없었다만 계속 데이터베이스에 수정한 방명록 내용이 갱신이 아니라 새로운 필드로 추가가 되는일이 발생했다.
<script>
$('#btn_save_edit').click(async function () {
// 사용자가 수정한 내용을 가져옴
const updatedData = {
'wComment': $('#edit_wComment').val(),
'wName': $('#edit_wName').val(),
};
</script>
'수정하기' 를 눌렀을 때 수정되는 부분은 '이름' 과 '내용' 인데 위 코드엔 수정 사항을 'wComment' 과 'wName' 에 저장하도록 코드를 짰던것이다. 이것 때문에 데이터베이스에서 새로운 필드를 만들어서 수정내용을 저장한 것이다.
- 문제 해결
<script>
$('#btn_save_edit').click(async function () {
// 사용자가 수정한 내용을 가져옴
const updatedData = {
'내용': $('#edit_wComment').val(),
'이름': $('#edit_wName').val(),
};
</script>어려울건 없었다. 그냥 'wComment', 'wName' 를 '이름', '내용' 으로 바꿔주면 갱신이 되어 저장하고 화면에 새로고침하면 갱신된 내용으로 바뀌게 된다.
- 최종 코드
<script>
$('.btn_edit').click(async function () {
let doc_id = $(this).data("id");
// 해당 문서의 내용을 가져오기
let targetDoc = await getDoc(doc(db, "coding-three", doc_id));
let rowData = targetDoc.data();
// 비밀번호 입력
const userPassword = prompt("게시물을 수정하려면 비밀번호를 입력하세요.");
// 취소 시
if (userPassword === null) {
alert('수정이 취소되었습니다.');
return;
}
// 입력한 비밀번호가 일치하는지 확인
if (userPassword === rowData['비밀번호']) {
// 수정할 내용을 모달에 적용
$('#edit_wName').val(rowData['이름']);
$('#edit_wComment').val(rowData['내용']);
// 모달을 표시
$('#editModal').modal('show');
// 저장하기
$('#btn_save_edit').click(async function () {
// 사용자가 수정한 내용을 가져옴
const updatedData = {
'내용': $('#edit_wComment').val(),
'이름': $('#edit_wName').val(),
};
// 파이어베이스 문서 업데이트
await updateDoc(doc(db, 'coding-three', doc_id), updatedData);
// 모달 닫기
$('#editModal').modal('hide');
// 화면 새로고침
location.reload();
});
} else {
alert('비밀번호가 일치하지 않습니다.');
}
});
</script>이후에 아무나 방명록을 수정하면 안되니 방명록을 쓸 때 입력했던 비밀번호를 입력해야 '수정하기' 에 접근할 수 있게 코딩을 했다. 그리고 수정을 완료하고 저장하면 '수정하기' 모달을 닫아주고 자동으로 새로고침을 하게 만들어줬다.
- 느낀점
확실히 저번부터 정말 사소한 부분에서 오류가 발생한다. 간단한 오타부터 시작해서 잘못 지정하거나 지정 자체가 안돼있을때도 많았고, css 에서도 충돌이 일어나거나 우선순위때문에 수정이 안되는경우도 꽤 많았다. console.log 활용을 좀 더 자주해서 문제가 없는지 확인해보는 습관을 들여야할 것 같다.
:)