PKSelect
  • Document
  • 프로젝트 개요
  • 프로젝트 준비
    • 개발환경 및 팀구성
    • 워크플로우
    • 사전조사 & 의사결정
      • 사전조사
      • 의사결정
        • 기능적 의사결정
        • 비기능적 의사결정
  • 프로젝트 설계
    • FRONTEND 설계 개요
      • FRONTEND 화면 흐름 및 동작
      • 콘텐츠 구성
        • Mainpage
        • Secondpage
      • 디자인 설계 의사결정
        • 디자인 컨셉 및 기능 정의
        • 컴포넌트 디자인
          • PC version
          • Mobile version
        • 로고결정
    • 시스템 구조 설계 개요
      • 시스템 흐름도 및 구조도
    • API Document
  • issue
    • FrontEnd
      • FrontEnd/Device classification issue
      • FrontEnd/cross browsing issue
    • BackEnd
      • BackEnd/lms_login_pw_issue
      • BackEnd/Circular Imports
    • Memo
  • 프로젝트 개발
    • FrontEnd
      • 페이지 UI
        • Mainpage
        • Loading page
        • SPA
        • Secondpage
          • Calendar
          • Table
            • 데이터 정렬
            • table
            • Button
              • 마감기한 지난 항목 삭제 <-> 확인 button
              • 과목 <-> 강의, 과제, 시험 button
              • 종강 D-day button
          • 피드백 이후 추가된 기능
      • 향후 개발 계획
    • BackEnd
      • Flask
        • PKSelecter/
        • controller/
        • app/
        • tests/
      • Server
        • AWS
        • Nginx + wsgi + Flask
        • (Sercurity) HTTPS
    • Prototype
  • 프로젝트 결과
    • 결과 보고
      • 개요
      • FrontEnd
      • BackEnd
      • PKSelect, Beta Service
      • 베타 서비스 설문조사
        • 서비스 사용성 평가
        • 베타 서비스 피드백
      • Google analytics 적용
      • 중간 발표 질문 정리
      • 최종 결과 보고
        • 피드백 적용 기능
Powered by GitBook
On this page

Was this helpful?

  1. 프로젝트 개발
  2. FrontEnd
  3. 페이지 UI

SPA

PreviousLoading pageNextSecondpage

Last updated 3 years ago

Was this helpful?

SPA(Single Page Application)를 해보고자 jQuery의 show(), hide()를 이용해보았다. 다음 코드는 서버에 요청했던 값의 status가 200 일 때 두번째 페이지를 사용자에게 보여주기 위해 사용했던 코드이다.

$('#secondpage').hide();
$('#mainpage').show();

데이터의 양이 많지 않고, 단순한 웹사이트였기에 jQuery를 이용해도 충분했지만 다음 프로젝트에서는 Ajax과 Vue.js나 react을 도전해보고 싶다.