minmoong / west Goto Github PK

문제 상황

현재 대나무숲 글 목록 페이지에서 intersection observer 기술을 사용하여 무한스크롤 기능을 구현했습니다.

글 목록의 맨 끝에 있는 로딩 스피너 요소에 observer가 등록돼 있어서, 로딩 스피너가 화면에 보이면 글 목록의 끝에 도달한 것으로 인식하여 서버에서 새 글을 더 가져와서 화면에 보여주는 방식으로 구현했습니다.

문제는 화면 크기가 큰 디바이스에서 접속 시 스피너에 첫 번째 intersection이 발생하여 서버에서 글을 가져온 뒤, 스피너가 여전히 화면에 남아 있게 되는 경우에 더 이상 intersection이 발생하지 않는다는 것입니다.

스피너가 화면 밖으로 벗어난 다음 다시 화면에 나타나야 두 번째 intersection이 발생하여 정상적으로 새 글이 불러와지기 때문입니다.

따라서 정상적으로 작동하려면, 페이지가 처음 로드될 때, 서버에서 충분한 양의 글을 가져와서 화면에 스피너가 충분히 밑으로 내려가서 화면을 벗어나도록 유도해야 한다는 것입니다.

이는 다양한 디바이스 크기를 고려하지 않은 기능입니다.

• 타이틀 길이 넘어갈시 ... 으로 표시
• 글 목록 기능 제작
  • 무한스크롤 기능 구현
  • 목록 새로고침 기능 구현
• 글 내용 보기 기능 제작
  • 존재하지 않는 글입니다 스타일링
  • 글 쓸때 줄바꿈 문자까지 db에 저장 후 표시
  • 글 게시할 때 서버단에서 sanitize 하기
  • 조회수 기능 구현
  • 뒤로가기 버튼 만들기
  • 닉네임 누르면 프로필로 이동
  • 글 개추, 싫어요 기능 제작
  • 글 삭제 기능 구현
    • 삭제된 포스트를 위한 테이블을 따로 마련
  • 스토어에 글 데이터 저장하기
    • 글 게시 후 포스트 스토어 리셋하기
    • 글 삭제 후 포스트 스토어 리셋하기
  • 댓글 기능 제작하기
    • 댓글 등록, 보기 기능 제작
    • 댓글 삭제 기능 제작
    • 댓글 프로필 누르면 프로필로 이동
    • 댓글 익명 기능 제작
    • 댓글 좋아요, 싫어요 기능 제작
    • 대댓글 기능 추가

년도 바뀌면
1학년 메일 추가
학년 반 올리기 (학년 반 업데이트 하라는 모달을 띄우기)

학교 일정 시간 바뀌면
시간표 active 함수 구간 바꾸기

• #2
• #20
• #21
• #26
• #27
• #36
• 토스트 메시지 모바일 환경에서는 좀 작게
• #38

첫 화면 로딩 시간이 너무 오래 걸립니다.
학교 와이파이는 전체적으로 느리기 때문에 문제가 더 심각합니다. 어떨 때는 사이트가 마치 마비된 것처럼 1분 이상 로딩중일 때도 있습니다.

page.server.ts에서 필요한 데이터를 얻는 것 보다는, page.svelte에서 데이터를 얻고, 데이터를 받아오는 동안 로딩 화면을 각각 표시하는 것이 UI 친화적입니다.

• 학교 홈페이지에서 급식 사진 파싱해서 보여주기

• #29
• 시간표
  • #7
• #16
• #23
• #25
• 기타
  • #5
• 문서 작성
  • 사이트 정보 notion 문서 작성
    • 급식/시간표
    • 대나무숲
    • 갤러리

1학년 패턴: [email protected]
2학년 패턴: [email protected]
3학년 패턴: [email protected]

이외의 패턴은 선생님 이메일임

이는 외부에서 사이트의 api 요청에 접근할 수 있으며, 사이트의 데이터를 외부 사용자가 열람할 수 있다는 것을 의미합니다.

크리티컬한 보안 이슈이므로 서둘러 해결해야 합니다.

사용자의 활동 상태를 데이터베이스에 기록하고 있기 때문에, 사용자가 페이지에 들어왔을 때 active 상태를 true로, 사용자가 페이지를 닫았을 때 active 상태를 false로 바꿔야 합니다.

사용자가 페이지에 들어왔을 때, +layout.svelte의 onMount에서 서버에 요청을 보내고,
사용자가 페이지를 떠나려고 할 때 +layout.svelte의 beforeNavigate에서 서버에 요청을 보냅니다.

하지만 사용자가 페이지를 떠나려고 할 때 매커니즘이 불안정합니다.

'하트비트' 패턴을 사용하는 방법이 더 좋습니다.
'하트비트' 패턴이란, 클라이언트는 일정한 간격으로 서버에 '나 여기 있어'라는 메시지를 보냅니다. 서버는 이 메시지를 받아서 사용자의 active 상태를 갱신합니다.

sveltekit examples 찾아보면서 알잘딱깔쎈하게 리팩토링하기

TODO

• eslint-plugin-import 설정
• prettier-plugin-tailwindcss 클래스 정렬 기능 설정

대나무숲에 부적절한 글들이 많이 올라와서 잠시 서비스를 중단했었음.

익명 기능을 없애버리면 완화될 것으로 예상하고 있음.

현재 사이트에 로그인된 상태에서 외부 사이트의 문서에 현재 사이트의 링크를 걸어놓고 들어가면, 로그인이 풀려있는 초기 화면이 나오고 새로고침 했을 때 정상적으로 로그인된 화면이 나타납니다.

• 현활 기능
• #33
• 프로필 사진 데이터 저장 기능
• 유저 삭제되었을 때 삭제된 유저로 표시

사이트의 보안 이슈에 대해 점검합니다.

• #19