배운 점
1. pseudo-code(의사코드(pseudo-code))
b반 튜터님한테 질문하러 갔을 때 알게 된 단어이다
pseudo-code는 알고리즘이나 프로그래밍을 할 때 구현할 것들을 어떻게 작성할 것인지를 스텝바이스텝식으로 하나하나 적어보는 것을 의미한다
영어로 구글링을 해보니 영어가 모국어인 사람은 영어로 하지만 나는 한국어가 모국어이기 때문에 한글로 하나하나 튜터님과 적어보았다
예를 들면 버튼을 클릭했을 때 다른 페이지로 이동하는 기능을 구현한다고 치자
그러면 다음과 같이 단계별로 적어볼 수 있다(내가 적은 것이 틀릴 수도 있음)
<div>안에<button>태그를 넣어 버튼을 생성한다<button>안에onclick이벤트를 넣는다onclick을 할 때 다른 페이지로 넘어가는 함수를 만든다onclick="함수명()"을 적는다
이런 식으로 적어볼 수 있다(틀렸을수도...?)
저렇게 상세하게 적어야 코드를 짜기 편하다
그런데 예를 들면 getElementById라는 것이 정확히 어떤 역할을 하는지를 모르면 저렇게 쓰기가 힘들다는 것이다
내가 이런 경우에 해당되어서(대충 이런 거구나 하고 넘어감...)
다시 차근차근 어떤 역할을 하는지 개념부터 익혀야한다
2. object-fit: cover;
글 작성 기능을 구현하던 중 콘솔창을 끄니 첨부한 이미지의 비율이 안 맞게 나왔다
어떻게 하면 가로세로 비율을 맞출 수 있을까 구글링을 해본 결과
object-fit이라는 속성을 새롭게 알게 되었다
object-fit은 <img>나 <video>안의 오브젝트 사이즈를 컨테이너에 맞게 크기가 재조정되는 속성이다
object-fit의 속성값은 다음과 같이 여러가지가 있다
-
contain
이미지의 가로, 세로 비율을 유지하면서 컨테이너에 주어진 높이와 너비 안에서 이미지를 최대한 크게 확대시킴
그래서 이미지의 옆쪽이에 공간이 생길 수 있음 -
cover
이미지의 가로, 세로 비율을 유지하면서 컨테이너를 꽉 채움
이미지와 컨테이너 간의 가로 세로 비율이 일치하지 않으면 이미지 일부가 잘려나감 -
fill
기본값으로 컨테이너에 지정된 사이즈에 맞게 이미지를 채움
가로 세로 비율은 안 맞추며 강제로 사이즈를 지정하는 효과가 남
비율을 맞추지 않고 지정된 사이즈에 맞게 늘어나거나 줄어들거나 커지는 것이기 때문에 컨테이너에 담긴 이미지가 찌그러지거나 너무 늘어나거나 하는 단점이 있음 -
none
이미지를 컨테이너에 맞게 조절x -
scale-down
none 또는 contain 중에 이미지가 더 작아지는 값을 선택함
3. 게시글 수정 기능(feat. 다은님)
게시글 수정기능을 구현하는데 필요한 값은 확인했는데 불러오는 걸 하지 못해 다은님의 도움을 많이 받았다
먼저 헷갈리는 용어부터 정리하겠다
- DocumentSnapshot
공식문서를 보아하니 DocumentSnapshot은 내 파이어스토어 데이터베이스의 문서에 있는 데이터가 들어있다고 한다
.data() or .get()를 사용하여 특정 필드의 데이터를 가져올 수 있다고 한다
DocumentSnapshot이 존재하지 않는 문서를 가리키면 'undefined'를 반환한다고 한다
- DocumentReference
번역을 돌려보니 Document Reference는 데이터베이스에 있는 문서 위치를 가리키는 것이다. 말 그대로 Reference이다
데이터의 이 위치를 쓰거나 읽거나 듣는 데 사용할 수 있습니다. 참조된 위치의 문서가 존재하거나 존재하지 않을 수 있습니다. Document Reference를 사용하여 하위 컬렉션에 대한 컬렉션 참조를 만들 수도 있습니다.
자세한 코드와 내가 이해한 내용은 WIL에 작성하겠다 ㅎ
느낀 점
포기한다는 말은 이제 금지
object-fit 참고 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/object-fit 파이어베이스 용어정리 출처 : https://firebase.google.com/docs/reference/js/v8/firebase.firestore.DocumentReference
