🙇🏻‍♂️ 프로젝트 소개

Today-I-Learned는 학습내용을 정리하고 복습할 수 있는 CRUD 기능으로 구현된 프로젝트입니다.
학과 수업과 개인공부를 하다보니 많은 양의 학습내용을 정리하여 '필요한 기능 및 내용을 효과적으로 관리할 수 있을까?' 라는 생각으로 프로젝트를 개발하였습니다.

🛠️ Tech

1. vue2.0

vue create vue_til

2. vuex

npm install vuex@next

3. router

npm install vue-router@4

4. axios

npm install axios

5. Node Version Manager

Express : v10.16.3
vue_til : v20.4.0

6. Express.js

7. MongoDB

🔗 MongoDB Info

Name	Column
User	_id
	username
	password
	nickname
	insertedDate
	created_at
	update_at
Post	_id
	title
	contents
	createdBy
	created_at
	updated_at

💿 Vuex Info

Name	State
store	nickname
store	token

🖥️ Views

1. Join

• 회원가입 화면입니다.
• ID와 Password, Nickname을 작성한 뒤 CREATE ACCOUNT 버튼을 클릭하여 회원가입 할 수 있습니다.
  
• 작성한 데이터는 MongoDB의 users 테이블에 저장됩니다.
  
  

2. Login

• 로그인 화면입니다.
• 작성된 데이터는 서버를 통해 MongoDB로 post 요청을 보내 회원여부를 판단합니다.
  
  
• 로그인이 완료되면 cookie 저장소에 쿠기가 저장됩니다.
  
• 저장된 쿠키를 통해 클라이언트 측에서 데이터를 보존하고 재사용할 수 있습니다.

      function saveAuthToCookie(value) {
        document.cookie = `til_auth=${value}`;
      }
      function saveUserToCookie(value) {
          document.cookie = `til_user=${value}`;
      }

3. Main

• 메인화면 입니다.
• 우측 하단의 연필 아이콘을 통해 게시글을 작성할 수 있습니다.
• 접속 시 get 요청으로 데이터를 받아오고 없다면 빈화면이 출력됩니다.
  

4. Post

• 게시글 작성 화면 입니다.
• 작성된 데이터는 서버를 통해 MongoDB의 post에 테이블에 저장됩니다.
  
  

5. Update

• 작성한 게시글을 수정할 수 있습니다.
• put 요청을 통해 게시글을 수정 후 메인화면으로 이동합니다.
  

6. Delete

• 휴지통 아이콘을 눌러서 작성한 게시글을 삭제할 수 있습니다.
• delete 요청을 통해 게시글이 삭제됩니다.
  
  

6. Log out

• nav의 log out을 클릭하면 페이지에서 로그아웃 할 수 있습니다.

    function deleteCookie(value) {
      document.cookie = `${value}=; expires = Thu, 01 Jan 1970 00:00:01 GMT;`;
  }