📝 ZETE 편리한 메모서비스

메모를 작성하고 "저장" 버튼을 깜빡하면 어쩌죠?

걱정마세요! ZETE는 작성과 동시에 메모가 저장되어 유실 될 걱정이 없습니다!
카테고리와 태그를 통해서 간편하게 분류하고 AI를 통해 검색한 정보를 간추려서
메모로 즉시 반영할 수 있는 똑똑하고 편리한 메모 서비스입니다.

💾 저장버튼 없이 즉시 저장   📚 카테고리, 태그를 통한 분류 관리   🤖AI(Chat GPT)가 내장된 검색 결과 메모

배포 버전 레포지토리 👉 [ 바로가기 ]     📢 기존 코드를 다른 스택으로 컨버팅하는 과정과 배포 등의 경험이 포함되어 있습니다.

🚀 프로젝트 지향점

✔️ CRUD에 대한 이해와 경험을 목표로 Frontend, Backend 개발을 진행하였습니다.
✔️ 현업에서도 사용 가능한 기술과 코드를 경험하기 위해 노력하였습니다.
✔️ 클린코드와 보다 나은 설계 구조에 다가가기 위해 여러 차례 리팩토링을 진행하였습니다.
✔️ 명확히 이해한 기술만 사용하려 노력하였고 기술 사용 전 Docs를 정독하고 있습니다.
✔️ 트래픽 증가에 따라 분산 가능한 구조로 설계하였습니다.
✔️ Openapi Codegen 등을 통하여 개발을 자동화하고 효율적으로 관리하기 위해 노력하였습니다.

⚙ 사용된 기술 스택

CATEGORY	STACK	ETC
Common	TypeScript	타입을 정의하는 과정이 추가되지만 그로 인해 코드가 명확해지고 컴파일 타임에서 오류를 인지할 수 있었습니다.
Frontend	React.js	가장 대중적인 인터페이스 라이브러리인 react의 숙달을 목표로 하였습니다.
	Redux Toolkit	react와 함께 사용하는 대표적인 상태관리 라이브러리인 redux를 통해 상태관리에 대한 이해와 경험을 목표로 하였고 thunk를 사용해 통신결과에 따른 상태를 관리할 수 있었습니다.
	Openapi Generator	백엔드에서 만들어진 통신 객체의 타입을 수작업으로 프론트에 동기화 하는 것은 프로젝트가 커질수록 고통스럽고 문제가 생길 여지가 있다고 생각되었습니다. 때문에 이를 자동화할 수 있는 Open Generator를 도입하였고 template을 직접적으로 수정할 수 있어 axios통신 함수를 용도에 맞게 생산하는 등 생산성에 큰 효과를 보았습니다.
	Tailwind CSS	css파일을 오가지 않고 className에 미리 정의된 css속성의 클래스를 사용하는 방식은 더 직관적이고 생산적이라고 느꼈습니다.
Backend	Nest.js	Javascript기반의 백엔드 프레임워크 중 많은 학습자료, 필요한 대부분의 기능을 잘 정리해둔 Docs, 모듈형식의 아키텍처 등 학습하기에 가장 적합한 NestJS를 선택하였습니다.
	MariaDB	MySQL과 호환되며 오픈소스인 MariaDB를 무난하게 선택하였습니다.
	TypeORM	NestJS에서 데이터베이스를 다루는 자연스러운 방식에 따라 사용하게 되었지만 typescript지원과 엔티티와의 맵핑, 보안문제 등 해결가능 한 것이 많은 이점이 있었습니다.
	Swagger	API및 통신 객체 타입 등의 명세를 위해 사용하였고 더 나아가 yaml양식을 생성하여 codegen에 활용하였습니다.
	JWT Token	사용자의 인증과 로그인 유지에 대한 메커니즘을 깊게 학습하였고 토큰 탈취 등에 대비한 Refresh Token을 추가하였습니다.

😎 서비스 주요기능

📌 GIF는 배포중인 zete-zustand-reactQuery 버전의 시연입니다.

• 카테고리 생성, 수정, 삭제
• 메모 추가, 수정, 삭제, 검색 (작성 시 자동적으로 저장되어 별도의 저장버튼 불필요)
• 카테고리 생성, 수정, 삭제 (생성된 태그는 카테고리 하위 네비게이션에 노출)

• 메모 입력 하단영역에 AI(Chat GPT)에게 원하는 정보를 질문하고 그 답변을 메모할 수 있습니다.