TIL - 23.11.30

오늘은 오전에 학교 수업이 있어서 캠프엔 오후부터 참여했다.

팀 소개 페이지 제작은 기능면에서 90% 이상 완성이 된 상태이므로 CSS나 추가적으로 넣을 컨텐츠들을 결정하기만 하면 완성이다.

일단 전체적인 웹페이지 테마는 블랙으로 결정했다.

유명 e스포츠 선수가 했던 말을 인용해서 팀 메인 타이틀에 넣었고, 아래엔 팀의 목표와 설명을 넣었다.

그 외 팀원 카드를 클릭하면 여러 정보가 포함된 모달창을 만들었는데, 이 모달창은 사전캠프때 구현해본 모달 창 코드가 도움이 많이 됐다.

CSS부분을 수정하던 중 중복된 스타일을 여러 요소에 넣다보니 코드가 과하게 길어지는 문제가 있었다.

다행이 찾아보니 아래처럼 같은 스타일을 공유하는 요소는 동시에 여러개를 선언해도 괜찮은 모양이였다.

#comment::placeholder,
#yourname::placeholder,
#password::placeholder {
    color: rgb(193, 193, 193);
}

#comment,
#yourname,
#floatingTextarea2Disabled,
#password {
    color: rgb(227, 227, 227);
    background-color: #484848;
    border-color: #878787;
}

 

 

 

마지막 최종 완성본 코드를 팀장님에게서 받고 우리 팀원의 정보를 올리려고 하는데 합류하기 기능이 작동을 안했다.

 

크롬 개발자 도구 탭에서 오류를 확인해봤다.

Uncaught (in promise) FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field blog in document member/187VItjKvvRKOp6hNpUR)

해석하자면 blog 필드에 전달된 값이 undefined값을 가지므로 addDoc을 실행할 수 없다는 뜻이였다.

 

알고보니 블로그 주소를 받아서 카드에 하이퍼링크를 출력하는 코드를 팀원이 짜 줬었는데 이걸 내 코드로 옯기는 과정에서 팁 합류 모달에 블로그 주소를 받는 input창을 추가하지 않아서 생긴 문제였다.

 

팀 합류 버튼을 누르면 나오는 모달창인데, 8번 항목 블로그 주소를 받는 input창을 추가하니 잘 작동했다.

정보를 데이터베이스에 저장하는 과정에서 값을 받지 못한 필드가 존재해서 발생한 오류였다. 

 

그렇다면 아무것도 입력하지 않고 바로 합류하기 버튼을 누르면 어떻게 될까? 모두 값을 받지 못한 필드가 되서 오류가 날까? 

결과는 그냥 빈칸으로 나온다.

찾아보니, 코딩에선 빈칸(" "나 ' ' 같은 것)처럼아무것도 없는 것과 undefined은 다른 것이였다. undefined은 아무런 정보를 받지 못한것이고 빈 문자열 " "은 "아무 값도 없음"이라는 정보를 받은것이다.

그래서 아무런 정보를 입력하지 않고 합류하기 버튼을 눌러도 필드엔 아무 값도 못받은 정보가 들어가는 것.

 

내일은 발표를 준비해야 한다.  

 

 

요약

 

1. CSS작성시 같은 스타일을 공유하면 선언도 같이 하자

2. 코드 제대로 꼼꼼이 쓰자

3. 빈칸과 undefined는 다르다