OTL - 3일차 TIL

팀명 : 아, 저장안했다
팀원 : 4명
프로젝트 이름 : OTL
내 담당 : 댓글 기능 구현

팀원 구성이 웹 퍼블리셔로 일 하다 오신 한 분과, 코딩 경험이 없으신 두 분 나를 포함해서 총 4명이다. 
백엔드를 경험해보지 못한 분들이여서 내가 먼저 완성을 하고, 코드리뷰를 해 드리기로 했다.
(근데 나도 별로 자신감이 없었다..)
 
1일차 : 주제 정하기
2일차 : html css 틀 완성, 백엔드 시작
3일차 : 백엔드 구현
 
1. 파이어베이스 연결하기

파일 구성이 이렇게 되어있어서 .html로 작업을 하면 CORS 보안 오류 때문에 db서버와 연결이 안 되길래 어쩔 수 없이 html 코드에 type = "module"로 적어넣었다.

html 주석이 <!---->인걸 잊고 있었다. // 가 손에 익은 사람..
 
2. 댓글 저장 기능 구현
기능을 구현하기 전에, db 구성을 먼저 짜 보았다.

허접한 그림판
우리는 아직 아이디 비밀번호가 없기 때문에 id 식별자가 이 역할을 해줄 거다. 팀원이 네명이라 id는 04까지 있다.

이런 식으로 html태그 끝부분을 01, 02, 03, 04로 네이밍을 해서 값을 각각 불러오는 형태로 구현을 해봤다.
디자인 하다 보니 방명록이 네 개가 되었고,
그래서 각각의 댓글창을 불러오는 형태로 구현 방향을 잡았다.

전직 웹 퍼블리셔 분이 계셔서 진행이 수월했다. 백엔드와 협업 경험이 있으셔서 다양한 html 오류에 대응이 가능하신 것 같았다.
'친해지러가기' 버튼을 누르면 댓글창이 레이어 팝업으로 나오고, 닉네임을 설정해서 익명으로 만들었다.

저 검은 것이 댓글 등록 버튼인데 내가 만지다가 css에서 오류가 생긴거다 ㅎㅎ.

여기까진 별 문제 없이 진행됐다. 하지만 진짜는 그 뒤에 있었다. .. ...
 
3. 댓글 확인 기능 구현
db에서 id가 html에서 id와 같은 것을 찾아서 한 화면에 그 사람 것만 뜨게 구현을 하는데,
옛날에 어떻게 했는지 기억이 거의 안 난다 ㅠㅠ 착실히 공부해야겠다. 오늘 구글과 내 깃헙을 몇번 들락날락 하는 지 모르겠다. 아마 다른 프레임워크를 안 쓴 거의 바닐라 자바스크립트라서 더 어렵게 느껴지는 것 같다.

id가 같은 것을 찾아야 하기 때문에 where과, 정렬을 위한 orderBy를 임포트했다

댓글 창 띄우기 함수
여기서 무간지옥에 빠졌다. html코드를 가져다 쓰기 싫어서 js로 html에 값을 집어넣는 걸 찾느라 고생했는데 html보다 코드가 더러웠(?)다.

그래서 그냥 html로 작성했다. 아무튼 작동만 되면 된다.

넌또뭐야

찾았다
클릭문을 추가하면서 앞부분을 저렇게 바꿨는데 !! 화가난다.

click함수와 호출해야 하는 함수를 분리 한 모습! html 코드에도 id를 심었다. 제발 작동되어다오

넌뭐야
하하 변수명이 헷갈려서 생긴 버그였다 ㅎ

크아아아악 드디어 뭐라도 뜬다
로드되는 데이터가 이상하니 이 부분만 확인하면 될 것 같다!

하하하하 생각해보니 이 안에 값을 안 넣었다!
뭐 아무튼 해결하면 그만이다

이미 망가져버린 css와 02번을 눌렀는데 01번 댓글창이 뜨는 모습 ㅎ ㅎ ㅎㅎㅎㅎㅎ
콘솔로 확인을 하니 계속 01만 떴다 ㅠ
이건 댓글 작성 탭에도 오류가 있다는 거라, 눈물이가 난다......

이거나 눌러놓고 쉬다가 와야겠다 하하하하하하ㅏ
그리고 뭔가 이상하게 댓글이 실시간으로 안 올라간다 ㅠ

아이 뜁 흑흑ㄱㅎ그가흐갛ㄱ

제일 윗단에서 idNum 변수 전달 함수를 만들었다. 흫ㄱ흑.. 커다란 버튼을 누르면 idNum변수에 값이 들어간다
이쯤 되니 그냥 변수 쓰지 말고 쉽게 코드를 4개 복붙할걸 싶기도 하지만
이 방법이 장기적으로 유지보수가 좋을 것이다.

넌뭐야
ㅠ....
콘솔로그로 실행 순서를 살펴 보니 html이 로드되기 전에 innerHTML을 써서 그런 것 같다.ㅠ
사실 지금 인텔리제이로 작성하고 있어서 js코드가 다 흰색이라 더 머리털이 빠질 것 같다
난 바보다 왜 여태 vscode를 안 썼지?
 
차분히 허리도 펴고 밥을 먹고 왔다.
express nodejs mysql 그립다.
바닐라 js와 제이쿼리로 html파일 안에서만 이렇게 하니까 코딩테스트를 보는 느낌이다. 나를 살려다오
 
 
윗 줄 이후로 2시간 정도 뜯어보고 있는데 되던것도 안된다. 슬프다
나는 비동기가 밉다..