(TIL) 2020-09-23 기록

오늘 한 일

• 중급 CSS 파트에서 display property와 position property에 대해서 배웠다. display property는 크게 inline와 block으로 나뉘는데 block은 자기 혼자서 전체 width를 모두 차지하는 녀석이다. 컴포넌트 자체의 width와 상관없이 그 row에 다른 컴포넌트가 자리하는 것을 막는다. inline은 딱 자기 크기만큼 자리를 차지한다. 대표적인 block으로 <p> 태그가 있고 대표적인 inline 태그로 <img>태그가 있다. 물론 css 코드 내에서 명시적으로 다른 property를 입력해주면 다르게 작동한다. 또 position property도 재밌는데 relative로 설정해두면 자기가 원래 있던 위치와 ‘비교해서’ top left bottom right 프로퍼티들에 의해 옮겨진다. 그러나 absolute로 설정하면 자기의 부모 컴포넌트 기준으로 움직인다. 어찌 보면 absolute가 훨씬 relative해 보이는데 뭐.. 여튼 그렇다. 그리고 fixed를 쓰면 스크롤을 어떻게 하든 정확히 브라우저 상의 그 위치에 계속 붙어 있다. 늘 보여야 하는 컴포넌트가 있다면 쓰면 좋겠다.
• 또 폰트에 대해서도 배웠다. Google Font에서 폰트를 가져와서 쓰는 법, 폰트의 크기를 정할 때에 %를 쓰는 것과 em을 쓰는 것, 또 rem을 쓰는 것의 차이점에 대해서 배웠다.
• 그리고 float와 clear에 대해서도 배웠다. float는 어떤 컴포넌트가 다른 컴포넌트 위에 있게 해준다. 다만 그 덮여 있는 컴포넌트에 clear 프로퍼티를 주게 되면 그 컴포넌트 위에는 다른 컴포넌트가 덮을 수 없게 된다.
• 오늘은 내가 보이스를 업로드할 때 태그 등록과 태그 등록에 따라 서버리스 함수가 트리거 되어 Algolia에 자동으로 인덱싱하는 게 작동되는 걸 확인했다. 서버리스 함수가 조금 말썽을 일으켰지만 algolia client는 saveObject()로 객체를 저장할 때 객체가 단수든 복수든 언제나 배열로 매개변수를 받는다는 걸 몰라서 에러가 계속 발생했다. 객체는 하나지만 배열 안에 넣어주어야 작동을 잘 했다.

내일 할 일

• 보이스챗 앱 로그인 화면을 구현할 것이다.
• 부트스트랩 사용법을 배울 것이다.