[TIL] 팀 : 소개 페이지3

최유나·2024년 7월 22일

TIL 프로젝트

TIL

목록 보기

12/34

여차저차 마무리

firebase를 통한 데이터 관리

위의 멤버 소개 페이지 부터는 firebase를 통하여 관리를 하게 되었다. 물론 사전 강의 때 배운 Jquery로 설계하였으나. 다른 조 분들은 순수 바닐라 자바 스크립트로 사용 하신 분도 계셔서 너무 놀랐다.

팀 멤버 개인 페이지 또한 firebase에 데이터를 입력하고 다시 받아오는 식으로 진행 되었는데, 아이콘 이미지까지 데이터베이스에 등록 하여 다시 받아오는 식으로 구현하게 되었다.

발표 후 피드백

댓글을 쓰고 나서 reload가 되는 과정에서 새로고침이 되는 점을 지적 받았으며, 다음부터는 DB에서 댓글을 가져오는 함수를 다시 실행시키라고 말씀 하셨다.

이슈 및 해결

autofocus 페이지 새로 고침할 때마다 자동으로 스크롤이 중간 지점으로 내려가는 이슈
smooth 내가 짠 scrollTop 코드와 scroll-behavior: smooth; 의 충돌로 인해 버벅거리며 내려가는 이슈

짚고 넘어가야할 부분

display:none vs visitiblity: hidden

영역이 인식되는지 여부에 따라 달라짐.
display:none 속성은 센스리더(국내 스크린 리더기), Jaws, NVDA에서 모두 내용을 읽지 못함, 아예 사라짐
visibility: hidden는 센스리더(국내 스크린 리더기)에서는 내용을 읽을 수 있었으나 Jaws, NVDA는 모두 내용을 읽지 못함, 보이지는 않지만 공간은 있음 (width, height 있을 시)
overflow:hidden의 경우 센스리더(국내 스크린 리더기), Jaws, NVDA 모두 내용을 읽을 수 있음

scroll-snap-type

신 문법으로, a href="#"태그와 div id='#"을 연동으로 사용하는 스크롤 기능 css
부모 컨테이너의 방향과 위치에 따라 자식 스크롤에서 시작점을 지정하여 스크롤 기능을 쓸 수 있다.

<div class="scroll-container">
	<div class="scroll-area">1</div>
	<div class="scroll-area">2</div>
	<div class="scroll-area">3</div>
	<div class="scroll-area">4</div>
</div>

/* 부모 스크롤 스냅 컨테이너 */
.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory; /* y 축 방향으로만 scroll snap 적용 */
}

/* 자식 스크롤 스냅 영역 */
.scroll-area {
  scroll-snap-align: start; /* 스크롤 위치 맞춤 */
}