서대전고등학교 인트라넷, WEST 입니다.
WEST 사이트 소개 글에서 사이트에 대해 자세히 소개하고 있습니다.
🐞
- 버그가 있습니다</>
- 이런 기능이 있으면 좋겠습니다
사이트에서 버그를 발견했거나 사이트에 있었으면 하는 기능이 있다면, 구글폼으로 내용을 제출해주세요.
Discord 에 참여하여 사이트의 업데이트 현황을 더 빠르게 만날 수 있습니다.
WEST 서대전고 인트라넷 오픈소스 프로젝트
Home Page: https://sdj-in.vercel.app
서대전고등학교 인트라넷, WEST 입니다.
WEST 사이트 소개 글에서 사이트에 대해 자세히 소개하고 있습니다.
🐞
- 버그가 있습니다</>
- 이런 기능이 있으면 좋겠습니다사이트에서 버그를 발견했거나 사이트에 있었으면 하는 기능이 있다면, 구글폼으로 내용을 제출해주세요.
Discord 에 참여하여 사이트의 업데이트 현황을 더 빠르게 만날 수 있습니다.
현재 대나무숲 글 목록 페이지에서 intersection observer 기술을 사용하여 무한스크롤 기능을 구현했습니다.
글 목록의 맨 끝에 있는 로딩 스피너 요소에 observer가 등록돼 있어서, 로딩 스피너가 화면에 보이면 글 목록의 끝에 도달한 것으로 인식하여 서버에서 새 글을 더 가져와서 화면에 보여주는 방식으로 구현했습니다.
문제는 화면 크기가 큰 디바이스에서 접속 시 스피너에 첫 번째 intersection이 발생하여 서버에서 글을 가져온 뒤, 스피너가 여전히 화면에 남아 있게 되는 경우에 더 이상 intersection이 발생하지 않는다는 것입니다.
스피너가 화면 밖으로 벗어난 다음 다시 화면에 나타나야 두 번째 intersection이 발생하여 정상적으로 새 글이 불러와지기 때문입니다.
따라서 정상적으로 작동하려면, 페이지가 처음 로드될 때, 서버에서 충분한 양의 글을 가져와서 화면에 스피너가 충분히 밑으로 내려가서 화면을 벗어나도록 유도해야 한다는 것입니다.
이는 다양한 디바이스 크기를 고려하지 않은 기능입니다.
년도 바뀌면
1학년 메일 추가
학년 반 올리기 (학년 반 업데이트 하라는 모달을 띄우기)
학교 일정 시간 바뀌면
시간표 active 함수 구간 바꾸기
첫 화면 로딩 시간이 너무 오래 걸립니다.
학교 와이파이는 전체적으로 느리기 때문에 문제가 더 심각합니다. 어떨 때는 사이트가 마치 마비된 것처럼 1분 이상 로딩중일 때도 있습니다.
page.server.ts에서 필요한 데이터를 얻는 것 보다는, page.svelte에서 데이터를 얻고, 데이터를 받아오는 동안 로딩 화면을 각각 표시하는 것이 UI 친화적입니다.
1학년 패턴: [email protected]
2학년 패턴: [email protected]
3학년 패턴: [email protected]
이외의 패턴은 선생님 이메일임
이는 외부에서 사이트의 api 요청에 접근할 수 있으며, 사이트의 데이터를 외부 사용자가 열람할 수 있다는 것을 의미합니다.
크리티컬한 보안 이슈이므로 서둘러 해결해야 합니다.
사용자의 활동 상태를 데이터베이스에 기록하고 있기 때문에, 사용자가 페이지에 들어왔을 때 active 상태를 true로, 사용자가 페이지를 닫았을 때 active 상태를 false로 바꿔야 합니다.
사용자가 페이지에 들어왔을 때, +layout.svelte의 onMount에서 서버에 요청을 보내고,
사용자가 페이지를 떠나려고 할 때 +layout.svelte의 beforeNavigate에서 서버에 요청을 보냅니다.
하지만 사용자가 페이지를 떠나려고 할 때 매커니즘이 불안정합니다.
'하트비트' 패턴을 사용하는 방법이 더 좋습니다.
'하트비트' 패턴이란, 클라이언트는 일정한 간격으로 서버에 '나 여기 있어'라는 메시지를 보냅니다. 서버는 이 메시지를 받아서 사용자의 active 상태를 갱신합니다.
sveltekit examples 찾아보면서 알잘딱깔쎈하게 리팩토링하기
대나무숲에 부적절한 글들이 많이 올라와서 잠시 서비스를 중단했었음.
익명 기능을 없애버리면 완화될 것으로 예상하고 있음.
현재 사이트에 로그인된 상태에서 외부 사이트의 문서에 현재 사이트의 링크를 걸어놓고 들어가면, 로그인이 풀려있는 초기 화면이 나오고 새로고침 했을 때 정상적으로 로그인된 화면이 나타납니다.
사이트의 보안 이슈에 대해 점검합니다.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.