자기 일은 스스로 하자멘토 우상훈

멘티 김재욱, 장초롱, 나석주

김재욱항공대학교

장초롱세종대학교

나석주고려대학교

팀 소개

우상훈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

“cmdhema@gmail.com” “데이터베이스”

[ { 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 구현

메모의 내용이 변경될 때마다 자동 저장

memong.xyz시연

github.com/carret/memong