[TIL] 2041031 TIL

오늘의 주요 포인트는 발표를 앞둔 해당 웹 개발 프로젝트 개인 구현을 마무리하고 취합해서 시연 영상 만드는 일이다.

그 동안의 작업을 쭉 정리해 보았다.

https://github.com/ssy1248/team_page

<프로젝트>
팀 소개 웹페이지 제작

<담당 파트>

• 팀장
• [팀원 소개] 페이지 구성

<필수 구현>

• [팀원 소개] 페이지 머릿말
• [팀원 소개] 페이지 내의 팀원 카드
• 팀원 카드를 통한 세부 팀원 정보 확인
• • modal 을 이용한 세부 팀원 정보에 대한 팝업 구현
• 홈 버튼을 통한 [팀 소개] 페이지로 돌아가기

<추가 구현>

• 관리자 모드

• • key값 일치 시 관리자 모드 진입
• • key값 불일치 시 접근 제어
• • 불일치 시도 일정 횟수 초과 시 일정 시간 동안 lock
• • 관리자 모드 진입 시, 멤버 카드에 대한 CRUD 기능 (생성, 삭제, 수정 권한)
• • 모든 흐름에 대한 예외 처리
• • • sessionStorage를 통한 admin mode 상태에 대한 저장
• • • 데이터 누락한 상태로 멤버 카드 생성 시도 시의 예외 처리
• • • 데이터 삭제 시도 시 선택한 멤버 카드 없을 시의 예외 처리 등등..
• • 관리자 모드 진입 전에는 페이지 내 텍스트 선택 블락

• 편의성

• • SweetAlert2 라이브러리를 통한 알림, 토스트 메시지, 컨펌 메시지

<유의 사항>

• html, css, js 파일에 대한 모듈화를 위해 분리해두어 로컬 저장소에 접근하므로, Live Server를 통해 접속해야 함. (미충족 시 CORS 정책 문제 발생)

<사용한 기술 스택>
HTML, CSS, JS
JQuery, SweetAlert2, Firebase

sweetalert2라는 라이브러리로 간단하게 좋은 비주얼의 알림창과 토스트 메시지를 대체할 수 있어 편리했다.