PureClient NoteApp

순수 클라이언트 기반 웹 노트 애플리케이션입니다. Node.js, React 없이 오직 HTML/CSS/JavaScript만으로 구현되었으며, 브라우저의 LocalStorage를 활용하여 서버 없이도 사용자의 작성 데이터를 지속적으로 보존할 수 있습니다.

주요 기능

📚 과목 관리

• 과목 추가 / 삭제 / 목록 조회 / 선택 기능

📝 노트 관리

• 주차별 노트 작성 / 수정 / 저장 / 불러오기

💾 데이터 저장

• localStorage를 활용해 데이터 영속성 확보

📂 파일 구조화

• 기능별 JS 파일 분리 (모델, 컨트롤러, 유틸)

📱 반응형 UI

• 모바일에서도 작동 가능한 기본적인 반응형 설계

사용 방법

1. 과목 관리

   • 과목명 입력 후 '추가' 버튼 클릭 또는 Enter 키를 눌러 과목 추가
   • 과목 목록에서 과목을 클릭하여 선택
   • 과목 옆의 '삭제' 버튼을 클릭하여 과목 삭제 (관련 노트도 함께 삭제됨)

2. 노트 관리

   • 과목 선택 후 주차 선택 (1주차~15주차)
   • 노트 내용 작성 후 '저장' 버튼 클릭하여 저장
   • 30초마다 자동 저장 기능 제공

기술 스택

• HTML5
• CSS3
• JavaScript (ES6+)
• LocalStorage API

파일 구조

pure-client/
├── index.html                  # 메인 HTML 진입점
├── css/
│   └── styles.css              # 전체 레이아웃 및 UI 스타일 정의
├── js/
│   ├── app.js                  # 앱 초기화 및 이벤트 연결
│   ├── models/
│   │   ├── subject.js          # 과목 모델 (추가/삭제 등)
│   │   └── note.js             # 노트 모델 (저장/불러오기 등)
│   ├── controllers/
│   │   ├── subject-controller.js # 과목 관련 UI 제어
│   │   └── note-controller.js    # 노트 관련 UI 제어
│   └── utils/
│       └── storage.js          # localStorage get/set 유틸 함수

로컬에서 실행하기

1. 이 저장소를 클론하거나 다운로드합니다.
2. 웹 브라우저에서 index.html 파일을 엽니다.
3. 바로 사용 가능합니다!

배포

• GitHub Pages를 통해 쉽게 배포할 수 있습니다.
• 서버 없이 정적 웹 호스팅 서비스 어디서든 호스팅 가능합니다.

향후 개선 사항

• 데이터 내보내기/가져오기 기능
• 다크 모드 지원
• 마크다운 에디터 통합
• 서버 기반 버전으로 마이그레이션 (MySQL 등)