[개발 공부 6일차] 팀 프로젝트 마무리! 및 JS 문법 시작

 

 

여러분 녀러분 다들 봐주세요~~~! 저희 진행하던 것 완성됐어요 ㅠㅠ 오늘 오전엔 드디어 팀 프로젝트가 완성되었다!!! 동네방네 소문 내고 싶을 정도로 나의 자랑스런 첫 팀 프로젝트!!!! 오늘 아침까지만 해도, 구현이 안 되는 원인이 대충 짚어지지만 '하 만약 오늘 내에 완성되지 않으면 어떡하지..' 하며 노심초사하였다. 왜냐하면 오늘까지 안 되면 JavaScript 문법 강의 듣기에도 빠듯해서 그냥 미완성된 채로 두고, 주말이나 잠깐잠깐 짬날 때나 코드 수정해야 해서 구현될 가망이 없을 확률이 높았다. 그리고 담 주로 넘어가면 강의는 안 듣고, 만드는 사람처럼 보일 수 있기에... 튜터님들께 질문하기도 눈치 보인다. 다 때가 있는 법!!!

 

하지만? 야무지게 완성 ㅋㅋ

 

도움을 주신 모든 튜터 분들과 함께 해주신 팀원 분들께 넘나 감사한 것..... 배운 게 많은 프로젝트였다 ㅠㅠ 그래서 오늘은 오늘 구현에 성공하고 나름의 입맛대로 꾸미기까지 생긴 문제와 해결 과정을 TIL에 담아보려고 한다!

 

 

< 목차 >

1. 나 혼자 문제 해결해보는 과정

2. 튜터님들께 받은 티칭 내용

3. 금일 소감 및 내일 해야 할 일

 

 

1. 나 혼자 문제 해결해보는 과정

다른 팀원이 해본 최종 코드 병합

 

어제 다른 팀원이 코드 병합한 것을 보내주셨는데 난 구현되지 않았던 토글 기능이 작동되길래 팀원의 코드를 받아서 내 것과 비교부터 해봤다. 코드의 순서가 잘못 됐을 것이라고 예상하였는데 역시 맞았다. 나는 웹 페이지를 볼 때 보이는 위에서 아래순으로 순서로 코드를 넣었는데 그 순서가 아니었던 것이다. 사실 상관이 없을 수도 있으나... 저렇게, 아래 코드대로 하니까 되었다. 토글 기능은 팀원과 똑같이 구현 성공!

 

$("#recordbtn").click(async function () {
            let name = $('#name').val();
            let thumbnail = $('#thumbnail').val();
            let TILBLog = $('#TILBLog').val();
            let TILtitle = $('#TILtitle').val();
            let TILContent = $('#TILContent').val();
            let TILDate = $('#TILDate').val();
            let firstTodo = $('#firstTodo').val();
            let secondTodo = $('#secondTodo').val();
            let thirdTodo = $('#thirdTodo').val();

            let doc = {
                'name': name,
                'thumbnail': thumbnail,
                'TILBLog': TILBLog,
                'TILtitle': TILtitle,
                'TILContent': TILContent,
                'TILDate': TILDate,
                'firstTodo': firstTodo,
                'secondTodo': secondTodo,
                'thirdTodo': thirdTodo
            };
            await addDoc(collection(db, "blogs"), doc);
            alert('기록 완료!');
            window.location.reload();
        })

        $("#closebtn").click(async function () {
            $('#postingbox').toggle();
        })


        $("#mainbtn").click(async function () {
            //debugger;
            let maintitle = $('#edit-maintitle').val();
            let maincontent = $('#edit-maincontent').val();

            let testDoc = {
                'maintitle': maintitle,
                'maincontent': maincontent,
            };

            await setDoc(doc(db, "titles", "title"), testDoc
            );
            alert('저장 완료!');
            window.location.reload();
        })

 

 

 

Uncaught SyntaxError: Identifier 'docs' has already been declared

 

다음 파이어베이스 연동 오류!

그니까 파이어베이스는 왜 안 되는 건데여... 음 처음엔 콘솔 안 보고 코드만 보다가 어쩌고 docs가 많아서 그런가? 흠.. 근데 그것보단 docs 지정한 게 너무 많은 것 같기도...라고 생각해 보며 docs에 빨간 밑줄 쳐져 있는 것을 보면서 저건가..... 싶었다.

 

콘솔도 들어가서 확인해 보니 내 생각이 대략적으로 맞는 것도 같다는 생각이 들었다. 한 68% 정도? "Uncaught SyntaxError: Identifier 'docs' has already been declared" 이미 'docs'가 선언되었다는 얘기인데 뭘 어떻게 수정해야 할지 몰라서 이 이후부터는 튜터님께 가서 해결해야겠다 싶었다.

 

 

 

2. 튜터님들께 받은 티칭 내용

쫄랑쫄랑 튜터님께 가서 여쭤보니 역시나 let docs로 해둔 게 이미 있어서 실행이 안 된 것이라고 둘 중에 하나에서 let을 지워보라고 하셨다. 그래서 let만 지우고 docs는 그대로 두니

 

 

 

사진처럼 구현이 되었다. 와 기능적인 것은 일단 다 됩니다. 돌아는 갑니다.. 파이어베이스 연동된 것이 정말 큰 문제이자 수확이었다 ㅋㅋㅋㅋㅋ 기어코 해내는구나 너란 녀석..(코쓱) 되긴 됐지만 디자인부터가 너무 Cu(구리)죠? 그래서 일단 튜터님께 기입란을 수평적으로 정렬하고 싶다고 말씀드렸다. 수평 정렬 어제도 했는데 잊어버린 나......... 알고 보니 flex였다... div로 두 기입란 묶어주고 flex했습니다 그래서

 

 

 

음... 되긴 됐는데..... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 너무 ㅋㅋㅋㅋ 사이가 안 좋죠?... 그래서 좀 더 붙이고 싶다고 말씀드렸다. id는 flexbox로 지정하고 아래와 같은 코드를 작성하였다.

 

.flexbox {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }

 

 

 

 

 

이렇게 되니까 음.. 일단 맘에 안 드는 부분이 넘 많쥬?... 블로그 카드 부분부터 수정을 해서 띄우고, main 써져있는 기입란을 중간으로 수직 정렬하였다. 닫기 버튼도 규칙 적혀있는 곳 div에 넣어서 자리를 옮겨주었다.

 

[완료] 블로그 카드 간격 띄우기, main 기입란 중앙 수직 정렬, 닫기 버튼 자리 옮기기

 

.card {
            justify-content: space-between;
        }

        #blogs {
            display: flex;
            gap: 16px;
        }

 

 

 

그러다가 가장 중요한! 내가 질문하러 왔던 본질적인 문제가 생각이 났다. 바로 어제처럼 undefined가 입력되어 있어야 할 데이터 자리에 나와있다는 것이다.. 생성된 문서들을 삭제하면 되긴 한데 이전에 지정했던 문서를 다 지워도 그대로길래 어떻게 해야 하나 하는데 튜터님이 저장소를 틀리게 지정해서 그렇다고 새로운 폴더 내 문서에 다시 지정해주셨더니 되었다.

 

$("#mainbtn").click(async function () {
            //debugger;
            let maintitle = $('#edit-maintitle').val();
            let maincontent = $('#edit-maincontent').val();

            let testDoc = {
                'maintitle': maintitle,
                'maincontent': maincontent,
            };

            await setDoc(doc(db, "titles", "title"), testDoc
            );
            alert('저장 완료!');
            window.location.reload();
        })


        // 파이어베이스에서 데이터 불러오기
        let docs = await getDocs(collection(db, "titles"));

 

 

 

아니 내가 지정했을 땐 안 되더니... 너 이 자식 ㅠㅠ... 튜터님이 그냥 내가 코드 잘못 짠 거라고 하셔서 수긍할 수밖에 없었다... 맞긴 해.. setDoc으로 데이터 넣을 공간인 titles 안에 title 문서 만들어 주고 getDocs으로 'titles'에 들어간 데이터를 불어오게끔 하는 원리다. 원리를 아니까 재밌었다!

 

 

그래서 원래 있던 문서들 다 지우니까 이렇게 구현 이후 작성한 데이터 2개만 남았다. CSS랑 머 부수적인 것 좀 더 수정해야 하긴 한데 그건 중요하거나 핵심이 되는 것이 아닌, 잔업이라 이 정도로 TIL은 마무리해야겠다. 시간 될 때나 심심할 때 조금씩 수정해 보며 다른 기능들도 적용 및 습득할 때 써먹어 볼 생각이다.

 

 

 

3. 금일 소감 및 내일 해야 할 일

위에 작성한 것들 외에도 수정한 것들이 더 있긴 한데 다 적고 하기엔 지금 강의도 듣고 해야 해서 중요한 거나 기록하고 싶은 것들만 적어봤다. 튜터님들과 팀원분들이 함께 돕고, 해주셔서 구현할 수 있었다. 하지만 이틀 강의 듣고 한 것치곤 그래두 조금 잘한 듯하다! 앞으로의 프로젝트와 과제, 청강해야 할 강의들도 파이팅해서 해봐야지!

 

내일부터 신정까지 3일간 연휴이긴 한데 '웹개발 기초'랑 'JS 문법' 강의 들어야 해서 그냥 평일처럼 공부를 해야 할 것 같다. 아니 할 것 같은 게 아니라 해야지 뭐 하는 거야 정신 차려

 

아무튼 WIL도 작성하고 항상 공부하며 <'왜' 이렇게 코드를 작성해야 하는지>와 직접 손으로 해보며 <아웃풋을 내는 습관>을 들여야겠다. 이렇게 해야 더 잘 익혀지고 뇌에도 남으며 이해가 잘 되는 것 같다.