자기 일은 스스로 하자멘토 우상훈
멘티 김재욱, 장초롱, 나석주
김재욱항공대학교
장초롱세종대학교
나석주고려대학교
팀 소개
우상훈Naver
프로젝트 개요
텍스트 에디터 마크다운 지원메모 단위의
컴포넌트 관리
PROCESS1. 무엇을 만들까?
PROCESS2. 개발 툴 & 서비스 정하기
프로젝트 개요
FluxApplication Architecture
MongoDBDatabases
Node.jsFrameworks (Full Stack)
RedisIn-Memory Databases
Reactjavascript UI Libraries
jQueryjavascript UI Libraries
LessCSS Pre-processors
gulpJS Build Tools
PROCESS3. 프로젝트 목표
프로젝트 개요
• 백엔드와 프론트 엔드 모두 다뤄 볼 수 있다.
• 실제로 서비스 가능한 웹 서비스를 개발해 볼 수 있다.
아키텍처 설계
Front-End
DB
Back-End
Front-End
Back-End
DB
레이아웃 설계
레이아웃 설계
Directory Viewer
장초롱세종대학교
NEXT PRESENTATION
디렉토리 뷰 - 구조
계층 구조
노드
노드 - 트리 테이블 매칭
폴더
노트
디렉토리 뷰 - 이벤트
Node Event ▼
Create Directory Action ▼
Send a req to Server ▼
request processing ▼
Receive a res from Server ▼
Server receive Action
레이아웃 설계
MemoSearcherAccount
Login/Logout
NEXT PRESENTATION
김재욱항공대학교
로그인 토큰 제작
return email
jwt 인코딩
쿠키 저장
token Redis 저장
key:token
value:email
접속 쿠키유무 판단
브라우저
쿠키 토큰
로그인 화면 렌더
Redis 비교
없음
있음
유효한 토큰 메인화면 출력
유효하지 않은 토큰
401 Error
로그아웃 브라우저 쿠키 삭제
Login Process
mecab을 활용한 명사 기반 검색 제공
입력 : 메모를 클릭하여 편집하세요
출력 :
noun과 count를 활용하여 Indexing Table 제작
Client의 Input과 noun과 일치하는 메모 반환
Search Process
UserName Word Memos
“[email protected]” “데이터베이스”
[ { title : 15.08.23 데이터베이스, summary : “몽고DB는 NoSQL 데이터베이스이다.”, memoId : “5593c4502eccd”, weight : 8 }, { title : 15.09.23 데이터베이스, summary : “MySQL, MS-SQL, Oracle DB가 있다.”, memoId : “2341s1534qwrre”, weight : 5 }, ]
Weight = Count(Title) * 5 + Count(Content) * 3
Indexing Table 구조
레이아웃 설계
MemoViewer Editor
NEXT PRESENTATION
나석주고려대학교
Editor 설계
상태 메모로 저장됨 이벤트
EditMemo 편집 중 X 메모 추가, 내용 편집
CompleteMemo 편집 완료 O 클릭 시 편집
NoneMemo 편집 완료 O(타이틀 없음) 클릭 시 편집
GlobalEditMemo 편집 중 X 메모 추가, 내용 편집
Auto Save 구현
메모의 내용이 변경될 때마다 자동 저장
Top Related