Jang_bo_go 15

vue.js ckeditor5 연동하기

https://cordingmonster.tistory.com/175?category=1052748 vue.js 맛보기!/ckeditor5/router/axios/async/await 점검사항 1. 기본지식 습득 2.ajax는 어떻게 해야 하는가(적용) 3. 페이징은 어떻게 이뤄지는가(적용) 4. 부트스트랩 연동 법(적용) 5.ckeditor5 연동 법(적용) 6. 포트번호변경(적용) 7.async/await(적용) 8.ht cordingmonster.tistory.com 이글에 써놓긴 했는데 좀 부족한 거 같기도 해서 좀 더 정갈하게 다시 쓰려고 한다 1.npm으로 케디터를 다운로드한다 (공식 홈페이지 아니면 구글에 많이 나와있다) 2.main.js에 등록해준다 (ck는 무시하고 CKEditor만보면 ..

Jang_bo_go 2022.01.08

springboot security 권한에 따른 url접근

상점 등록 페이지를 만들고 있었다 상점 등록은 회사/어드민만 권한을 가지고 있어야 한다 따라서 시큐리티에 설정을 추가해주었다 .authorizeRequests().antMatchers("/auth/store/**").access("hasRole('ROLE_COMPANY') or hasRole('ROLE_ADMIN')") 편리하게 권한을 체크해준다 테스트 ROLE_USER일 때 ROLE_COMPANY일 때 로직을 잘 타다가 조건대로 에러를 잘 발생해준다! 주의할 점 권한은 대문자로 해야 한다

Jang_bo_go 2022.01.01

vue.js 카카오지도 원그리기

기업회원가입 후 매장 등록을 할 때 1. 주소를 선택하면 매장 위치를 표시해주고 2. 배달 반경을 입력하면 매장 중심에서 n키로만큼 원을 그려주기였다 문서 https://apis.map.kakao.com/web/sample/drawShape/ 이렇게 마커가 뜨고 이동한다 이제 반경 숫자를 입력하면 이렇게 원이 나온다 여기서 다시 주소를 검색하거나 숫자를 바꿔도 자연스럽게 움직인다 소스를 봐 보자 1. 주소 마커 표시하기 1. 주소 선택이 완료되면 결과를 result로 들고 온다 2. 결과값이 ok라면 마커 표시 3. 반경까지 정했다면 재탐색 좌표를 중심으로 원 그려주기를 해준다 2-1. 원 그려주기 1. 반경 입력값이 숫자인지 검사한다 2. 원을 그리는 함수 호출한다 2-2. 원 그려주기 1. 이전에 그..

Jang_bo_go 2021.12.30

vue.js eventbus 컴포넌트간 주고받기!

카카오 지도를 호출하였다 검색만 해주면 된다 문제는 컴포넌트 간에 어떻게 주고받아야 할지 몰랐다 쉽게 말해서 지도/내비 바/풋터는 한화면에 각기 다른 컴포넌트이다 즉 검색창에 타이핑 후 search버튼을 눌렀을 때 지도 컴포넌트에게 검색 값을 줘 야한다 구글링 결과 eventbus를 활용하기로 결정하였다! 1.eventbus 만들기 Vue.prototype.$EventBus = new Vue(); main.js에 이렇게만 해주면된다 2. 메서드 지정하기 네비 바로 가자 this.$EventBus.$emit('searchStore',storeKeyword); 뭔뜻이나면 searchStore로 storeKeyword를 전송한다는것이다 emit은 지정할때 on은 받을때 쓴다 받는곳으로 가보자! this.$Ev..

Jang_bo_go 2021.12.16

시작하며

프론트=vue.js 백엔드=springboot 클라우드=aws ec2/sqs/s3 형상관리=git&github 데이터베이스=mysql 목표 1.ec2를 이용해 베포까지하는게 목표이다 2.mysql을 ec2에 올려놓고 어디서든 접근가능하게 할것이다 -현재 rds로 변경 서버만 ec2베포예정 3.git을 적극적으로 활용할것이다 4.db에 좀더 이제 신경쓰기 내용 동네 마트배달서비스! 배달의 민족의 초초초초슈퍼 라이트 버전! 그동안 작업한 내용을 봐보자!

Jang_bo_go 2021.12.16