{"id":26242350,"url":"https://github.com/lc-02s/pbl-notes","last_synced_at":"2026-04-14T10:33:19.754Z","repository":{"id":221729069,"uuid":"755049128","full_name":"LC-02s/PBL-Notes","owner":"LC-02s","description":"macOS 기반 메모 앱 SPA 마이그레이션 프로젝트","archived":false,"fork":false,"pushed_at":"2025-03-20T11:14:59.000Z","size":25594,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T14:57:15.157Z","etag":null,"topics":["motion","notes","notes-app","react","react-router","tailwindcss","typescript","vite","zustand"],"latest_commit_sha":null,"homepage":"https://pbl-notes.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LC-02s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-09T10:33:06.000Z","updated_at":"2025-03-20T11:15:07.000Z","dependencies_parsed_at":"2024-02-09T18:31:53.667Z","dependency_job_id":"08050803-96c9-49d2-bc07-b7c9afaac9e1","html_url":"https://github.com/LC-02s/PBL-Notes","commit_stats":null,"previous_names":["lc-02s/pbl-notes"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LC-02s/PBL-Notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LC-02s%2FPBL-Notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LC-02s%2FPBL-Notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LC-02s%2FPBL-Notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LC-02s%2FPBL-Notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LC-02s","download_url":"https://codeload.github.com/LC-02s/PBL-Notes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LC-02s%2FPBL-Notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31793215,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["motion","notes","notes-app","react","react-router","tailwindcss","typescript","vite","zustand"],"created_at":"2025-03-13T09:50:55.730Z","updated_at":"2026-04-14T10:33:19.734Z","avatar_url":"https://github.com/LC-02s.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PBL Notes\n\n![intro image](https://github.com/LC-02s/PBL-Notes/blob/main/public/img/pbl-notes-ui.jpeg?raw=true)\n\n- **배포 URL** : [https://pbl-notes.netlify.app/](https://pbl-notes.netlify.app/)\n- **개발 기간** : 2024.02.08 ~ 2024.02.28 (20일)\n- **기여도** : 100% (개인 프로젝트)\n\n\u003cbr\u003e\n\n## 프로젝트 소개\n\n- `PBL` 은 `Problem Based Learning` 의 약자로 구름톤 트레이닝 과정에서 플레이어들이 수행하게 되는 문제 해결 기반 학습을 의미합니다.\n- 해당 프로젝트는 과제에서 주어진 요구사항을 모두 구현하는 것에 그치지 않고, 한 걸음 더 나아가 실사용할 수 있는 웹 기반 노트 앱 서비스를 만들기 위해 시작되었습니다.\n- 서비스를 사용하며 생성되는 모든 데이터들은 서버를 통하지 않고 사용자의 브라우저에 저장됩니다. (PC 저장 공간의 최대 50%까지 사용)\n\n\u003cbr\u003e\n\n## 개발 환경 (Only FE)\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB) ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n\n### React\n\n\u003e 브라우저 내에서 불필요한 리로딩을 최소화하여 기존 노트 앱과 최대한 비슷한 UX를 구현하기 위해 도입하였습니다.\n\n### Redux (RTK)\n\n\u003e 서비스 특성상 전역 상태 변경이 빈번하게 일어나기에 복잡한 상태들을 조금 더 쉽게 중앙 집중적으로 관리하기 위해 도입하였습니다.\n\n### TypeScript\n\n\u003e 복잡한 어플리케이션을 구현함에 있어 실수로 인해 예상하지 못한 런타임에러를 최대한 방지하고자 도입하였습니다.\n\n### React Router Dom\n\n\u003e 프로젝트 초기에는 라우터 없이 폴더 기능 구현을 시도했었지만, 폴더와 노트에 대한 여러 상태들을 직접 관리하려다 보니 어플리케이션의 복잡도가 불필요하게 증가된다고 판단하여 도입하게 되었습니다. 도입 후 라우터의 도움을 받아 폴더 기능을 구현하여 기존에 사용했던 불필요한 중간 변수들과 액션 함수들을 최소화할 수 있었습니다.\n\n### React Hook Form\n\n\u003e 폴더 생성 및 수정 시 이름에 대한 유효성 검사를 쉽게 구현할 수 있고, `useRef` 기반으로 동작하여 불필요한 컴포넌트의 리렌더링을 줄여 성능을 개선할 수 있기에 쓰지 않을 이유가 없었습니다.\n\n### Styled Components\n\n\u003e 유지보수를 고려해서 테마 별 스타일을 편리하게 관리하기 위해 `theme provider` 을 사용하였습니다.  \n\u003e 서비스 특성상 전역 상태 변경이 다수 발생되어 그에 따른 스타일 변경을 쉽게 조건부로 관리할 수 있다는 것 또한 매력적이었습니다.\n\n\u003cbr\u003e\n\n## 시작 가이드\n\n### Requirement\n\n- [Node.js v18.19.0](https://nodejs.org/en/blog/release/v18.19.0)\n- [Npm v10.2.3](https://nodejs.org/en/blog/release/v18.19.0)\n\n### Installation\n\n```\n$ npm install\n$ npm start\n```\n\n### Build\n\n```\n$ npm run build\n```\n\n\u003cbr\u003e\n\n\u003e This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) TS template.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flc-02s%2Fpbl-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flc-02s%2Fpbl-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flc-02s%2Fpbl-notes/lists"}