사 설 온 사회에 사회주의도덕생활기풍이 차넘치게 하자...어버이장군님의 유훈을 하루 빨리 현실로 꽃피우기 위한 구 체적인 방향과 방도를
자기 일은 스스로 하자
Transcript of 자기 일은 스스로 하자
![Page 1: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/1.jpg)
자기 일은 스스로 하자멘토 우상훈
멘티 김재욱, 장초롱, 나석주
![Page 2: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/2.jpg)
김재욱항공대학교
장초롱세종대학교
나석주고려대학교
팀 소개
우상훈Naver
![Page 3: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/3.jpg)
프로젝트 개요
텍스트 에디터 마크다운 지원메모 단위의
컴포넌트 관리
PROCESS1. 무엇을 만들까?
![Page 4: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/4.jpg)
PROCESS2. 개발 툴 & 서비스 정하기
프로젝트 개요
FluxApplication Architecture
MongoDBDatabases
Node.jsFrameworks (Full Stack)
RedisIn-Memory Databases
Reactjavascript UI Libraries
jQueryjavascript UI Libraries
LessCSS Pre-processors
gulpJS Build Tools
![Page 5: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/5.jpg)
PROCESS3. 프로젝트 목표
프로젝트 개요
• 백엔드와 프론트 엔드 모두 다뤄 볼 수 있다.
• 실제로 서비스 가능한 웹 서비스를 개발해 볼 수 있다.
![Page 6: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/6.jpg)
아키텍처 설계
Front-End
DB
Back-End
![Page 7: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/7.jpg)
Front-End
![Page 8: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/8.jpg)
Back-End
![Page 9: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/9.jpg)
DB
![Page 10: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/10.jpg)
레이아웃 설계
![Page 11: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/11.jpg)
레이아웃 설계
Directory Viewer
![Page 12: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/12.jpg)
장초롱세종대학교
NEXT PRESENTATION
![Page 13: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/13.jpg)
디렉토리 뷰 - 구조
계층 구조
노드
노드 - 트리 테이블 매칭
폴더
노트
![Page 14: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/14.jpg)
디렉토리 뷰 - 이벤트
Node Event ▼
Create Directory Action ▼
Send a req to Server ▼
request processing ▼
Receive a res from Server ▼
Server receive Action
![Page 15: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/15.jpg)
레이아웃 설계
MemoSearcherAccount
Login/Logout
![Page 16: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/16.jpg)
NEXT PRESENTATION
김재욱항공대학교
![Page 17: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/17.jpg)
로그인 토큰 제작
return email
jwt 인코딩
쿠키 저장
token Redis 저장
key:token
value:email
접속 쿠키유무 판단
브라우저
쿠키 토큰
로그인 화면 렌더
Redis 비교
없음
있음
유효한 토큰 메인화면 출력
유효하지 않은 토큰
401 Error
로그아웃 브라우저 쿠키 삭제
Login Process
![Page 18: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/18.jpg)
mecab을 활용한 명사 기반 검색 제공
입력 : 메모를 클릭하여 편집하세요
출력 :
noun과 count를 활용하여 Indexing Table 제작
Client의 Input과 noun과 일치하는 메모 반환
Search Process
![Page 19: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/19.jpg)
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 구조
![Page 20: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/20.jpg)
레이아웃 설계
MemoViewer Editor
![Page 21: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/21.jpg)
NEXT PRESENTATION
나석주고려대학교
![Page 22: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/22.jpg)
Editor 설계
상태 메모로 저장됨 이벤트
EditMemo 편집 중 X 메모 추가, 내용 편집
CompleteMemo 편집 완료 O 클릭 시 편집
NoneMemo 편집 완료 O(타이틀 없음) 클릭 시 편집
GlobalEditMemo 편집 중 X 메모 추가, 내용 편집
![Page 23: 자기 일은 스스로 하자](https://reader031.fdocuments.net/reader031/viewer/2022030311/58f002431a28ab0b768b45f9/html5/thumbnails/23.jpg)
Auto Save 구현
메모의 내용이 변경될 때마다 자동 저장