(국비교육) 81 - Spring boot + vue 게시판 만들기 + AWS 시험 미리보기 + GITHUB 관리(동영상) + Vuex 설치 + store 이용하기 + 포트 변경하기 + 로그인/로그아웃 만들기

■ AWS 시험 미리보기

 

https://www.examtopics.com/exams/amazon/aws-certified-cloud-practitioner/view/

AWS Certified Cloud Practitioner Exam – Free Exam Q&As, Page 1 | ExamTopics

 

2. AWS 클라우드 : 가상의 컴퓨터

운영 탄력성을 가진다. 원래 성능이 좋지 않으면 컴퓨터를 바꾸지만,

가상의 컴퓨터이기 때문에 클릭 몇 번으로 환경 바꿀 수 있다. 

 

3. 월별 비용 -> 비용탐색기

 

4. 유연한 종량제 가격 모델

 

5. DDOS 공격 보호 되는 서비스 -> AWS 쉴드

 

6. 방화벽 역할 => 보안그룹

 

7. 데이터베이스 AWS 서비스 => 아마존 RDS

 

8. 오류 격리 설계 원칙 => 구성요소 느슨하게 결합

 

9. 과도한 트래픽 서비스 어떤 리스소 => 기술 계정 관리자 (TAM)

 

10 AWS 장점 => 필요에 따라 조정되는 컴퓨팅 용

 

■ 필독 github 관리

 

https://codingapple.com/course/git-and-github/

(무료) 매우쉽게 알려주는 git & github - 코딩애플 온라인 강좌

 

■ Vuex 설치하기

 

 

전역변수 저장하는 공간

vuex f5 누르면 전체 새로고침 됨으로 vuex-persistedstate 도 설치한다.

 

 

package.json 에서 정상적으로 설치된 것 확인 가능하다. 

 

■ store 이용하기

 

 

src 밑에 store 폴더 만들기

 

 

js 파일 만들기

 

 

userInfo 에 있는 m_name 과 m_id setUser 로 저장하고,

로그아웃 처리하면 null 로 비워준다. 

 

 

main.js 에서 store 추가해준다. 

 

 

v-model 로 아이디, 패스워드 입력창 받고,

버튼을 클릭하면 loginSubmit 함수로 가도록 설정해준다. 

 

 

store 에 저장된 이름과 아이디 값을 각각 불러와 변수에 대입해준다.

그리고 loginSubmit 버튼 눌렀을 경우 입력한 아이디와 패스워드 알람 뜨도록 한다. 

 

 

다음과 같이 입력한 값이 알람창으로 뜬다. 

 

 

res.status === 200 서버 잘 통하고

data.count == 1 들어온다면

해당 m_name과 m_id 를 저장시킨다. 

 

 

값을 보내고 오는지 확인한다. 

 

 

login 메소드 만들고 일치하는 아이디와 패스워드 값에 맞는 m_name 을 가져온다.

 

 

store 에는 해당 userInfo 내용을 저장한다. 

완료되면 /boardList 로 이동한다. 

 

 

store.commit 을 통해 저장된 userInfo 내용을 store.js 에 저장한다. 

 

 

error 도 넣어줄 수 있다. 

만약 올바른 아이디와 암호가 아닌 경우 아래와 같이 문구가 뜬다. 

 

 

보드 리스트에 h1 에 다음과 같이 넣어주면

로그인한 사람 아이디 보여준다.

 

 

로그인 한 사람만 글쓰기 버튼 보이게 설정하기

 

 

만약 로그인 하지 않았을 경우에는 v-if 를 통해 글쓰기 버튼이 보이지 않는다. 

 

 

버튼을 userInfo.m_name 값을 불러와서 비교할 수도 있다. 

 

■ 포트 변경하기

 

 

포트 변경하고 mapper 폴더 resources 밑으로 옮긴다.

 

옮기는 이유는 vs code 에서 outputDir 처리경로를 static 밑으로 할 예정이다.

그럴 경우 static 밑에 mapper 가 있는 경우 사라지기 때문이다.

 

 

main.js 포트 3000 -> 80으로 변경

 

 

spring workplace 로 outputDir 처리해서 build 해서 만들어준다. 

 

 

폴더가 다음과 같이 생기고 vue 서버를 돌리지 않고 이클립스로 구동해도 보인다. 

 

■ springboot 파일을 .jar 파일로 만들기

 

 

gradlew build 로 만들어주기

 

 

이클립스 끄고 다음 명령어를 치면 spirngboot 가 자동으로 열린다. 

이제 해당 파일로 서버에 올리는 작업을 할 것이다. 

 

■ 다른 방법으로 열기

 

간단하게 클릭해서 0.0.6 으로 만들어 줄 수 있다. 

이제 이것을 서버에 올려서 정상적으로 운영하면 배포까지 마무리 한 것이다. 

 

■ 로그인 여부에 따라 메뉴 화면 바꾸기

 

 

로그인 시 myInfo 와 logout 만 보인다.

 

■ logout 기능 만들기

 

 

클릭 시 logout 메소드 실행한다. 

 

 

store 에 있는 logout 메소드를 불러서 m_name 과 m_id 를 null 처리해준다.

그리고 login 페이지로 이동시킨다.