[WIL] 미니 프로젝트를 마치며

기성·2024년 7월 19일

TIL

목록 보기

4/81

2024년 7월 3주, 캠프 1주차 마무리

첫 주는 팀원 소개 페이지를 만드는 것으로 시작과 마무리를 했다. 배포까지 마무리하고 발표까지 하게 되었는데 발표 참 쉽지않다. 사람 성격이라는게 변하긴 쉽지 않나 보다. 대본까지 쓰고 가볍게 발표만 하면 됐는데 그런 자리만 가면 왜 이렇게 긴장을 하는지,,
프로젝트 배포 링크: https://leekee0905.github.io/whoareyou/

프로젝트 구조

file_structure

프로젝트 구조는 다음과 같이 설정 했고 index.html파일 하나에서 원 스크롤 페이지로 구성했다.

페이지 구성

첫 화면

main

팀 목표

purpose

팀 목표 구역
페이지 상단에서 벗어나면 나타나는 우측 하단 Top Scroll 버튼 구현
각 팀원 별 구역 mouse over시 css 변화

팀 약속

promise

팀 약속 구역
카드를 통해 팀 약속 표현
팀 좌우명 - 기간 내에 완수하자

팀 소개

introduce

현재 구역 부터는 Firebase를 통한 데이터 관리
카드 이미지와 이름, mbti 정보를 Firebase를 사용하여 관리
mouse-over시 흑백에서 컬러로 볼 수 있음
각 멤버 구역 클릭 시 해당 팀원의 소개란으로 스크롤하여 이동

팀원 소개

mem1

mem2

mem3

각 프로필 이미지는 팀 소개와 마찬가지로 mouse-over시 컬러로 전환
깃허브와 블로그 링크 이동
Firebase를 통한 이미지, 소개 정보 연동

댓글 CRUD

comment

Firebase를 통한 댓글 등록 및 수정 삭제 기능 구현
튜터님의 조언을 통해 비밀번호로 수정 삭제 통제 ⇒ 개인적으로 암호화를 하고 싶었으나 시간 관계상 텍스트 데이터로 대체

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
발표 후 피드백을 통해 코드 수정에 대한 피드백을 받았는데 수정 및 삭제 후에 reload를 시킬 것이 아니라 DB에서 댓글을 가져오던 함수를 다시 실행 시키면된다고 하셨다. 이걸 왜 생각 못했을까? 이 간단한 문제를,,,

개발 이슈 및 해결

이 부분은 저번에 TIL 작성하면서 한번 정리했었다.
링크: [TIL] 오늘의 미니 프로젝트 문제 해결

Conflict!

<<<<<<< HEAD(Current Change)
hello world!
========
bye world!
<<<<<<< BRANCH(Incoming Change)

첫 main, branch 병합 과정에서 일어난 Conflict, 삭제할 부분을 잘못 삭제하고 병합, html태그 주석 처리 과정에서 닫는 태그가 날아가 css가 망가지는 에러가 발생.

해결: 마지막으로 병합한 Branch의 코드를 찾아가서 복사 붙여 넣기 후 날아간 남은 코드 합친 후 다시 push

⇒ Branch의 중요성을 깨닳음, 서로의 이름으로 브랜치를 팠지만 예전에 기능별로 브랜치를 하나씩 팠던 기억이 나서 다음부터는 한 브랜치가 아닌 하나의 기능마다 브랜치를 파서 버전을 늘려야겠다고 생각

autofocus

페이지가 새로고침 때마다 자동으로 스크롤이 중간 지점으로 향하는 에러를 발견.

해결: 구글링을 해도 찾지 못해 ChatGPT에게 자동으로 스크롤 될만한 HTML,CSS,JS 속성들이 있는지 질문하여 autofocus라는 속성이 존재함을 알게 되었고 이것이 자동 스크롤을 유발하는 것을 알게 됨.

⇒ 댓글 CRUD input태그에 autofocus속성이 설정되어 있었음

피드백 주워 담기

display:none vs visitiblity: hidden

css를 통해 화면에 보이지 않게 하는 기법 두 가지인데 둘의 차이점이 있다하셨다. 그런데 나는 이걸 어디서 본 것 같았는데 display:none은 렌더링을 아예 안시키고 visibility:hidden은 렌더링을 시킨 후 안보이게 하는 것이라고 알고 있다.

찾아보니 display:none은 아예 사라지게 하는 것이고 해당 공간 조차 존재 하지 않는 것으로 된다하고 visibility: hidden은 width와 height을 주었다면 그만큼의 공간이 존재하게 된다고 한다.

scroll-snap-type

많은 팀이 원 페이지 스크롤 방식을 통해 구현을 했는데 scroll-snap-type이라는 css로 손 쉽게 스크롤을 구현할 수 있다 했다. 보아하니 scroll-snap 관련하여 여러 속성이 있는 것 같은데 그중 type은 x축이나 y축에 적용할지 정하는 것 같았다. 이 속성은 스크롤을 부드럽게 해줄 수 있는 속성인 것 같다. 여기에 a태그의 href속성을 사용해서 href="#info"이렇게 설정해두면 해당 ID값으로 부드럽게 스크롤 할 수 있다 하셨다.

쓰로틀링(Throttling)

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

다른 조 얘기를 하다 주워 들은건데 스크롤 이벤트를 통해 스크롤때마다 위의 바가 줄어들고 늘어나고 하는 것을 볼 수 있었다. 이것 때문에 성능문제에 관해서 쓰로틀링이 필요하다 했는데 이미 구현하셨다고 했다. 진짜 처음들어보는 단어였는데 덕분에 하나 배워갑니다. 스크롤 이벤트에서 많이 쓰나보다.

후기

그래도 초반까지는 어느 정도 자신이 있는 상태였는데 오늘 발표보고 힘빠졌다. 분명 다들 비전공자라고 했던 것 같은데 왜 이렇게 기능도 많이 만들고 디자인도 잘만든건지,, 예상했던 바를 넘어섰다.

기능도 모자란 것 같고 내가 좀 더 했으면 괜찮았을까 하는 생각이 든다. 또 내가 몰랐던 기능을 많이 알게 된 것을 보아 많이 부족하다는 생각이 나는 하루다.

기성

프론트가 하고싶어요

이전 포스트

[TIL] innerHTML && appendChild

다음 포스트