vue.js 맛보기!/ckeditor5/router/axios/async/await

점검사항

1. 기본지식 습득

2.ajax는 어떻게 해야 하는가(적용)

3. 페이징은 어떻게 이뤄지는가(적용)

4. 부트스트랩 연동 법(적용)

5.ckeditor5 연동 법(적용)

6. 포트번호변경(적용)

7.async/await(적용)

8.https적용(미적용)

 

1. 기본지식 습득

https://www.youtube.com/watch?v=-tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

https://www.youtube.com/watch?v=sqH0u8wN4Rs 

이영상들만 봐도

기본 지식들은 얻을 수 있었다

 

2.ajax->axios?

다운로드는 영상 참조(npm다운로드 후 사용 가능)

드디어 이게 나왔다

구글링 하면서

xhr/ajax/axios

이 세 개를 자주 봤었는데

가장 최신 테크가 axios 같다 

비동기

생각보다 간단했다

post/get 등을 선택해주고 

파라미터 순서로 url/data/부가 내용을 적어주면 되는 거 같다

 

테스트

test로가서 쿠키까지 얻어오는 통신이다

before

백엔드vscode

쿠키확인창

after

백엔드vscode

쿠키창

파라미터 전달 성공

쿠키 받아오기 성공

 

3. 페이징은 어떻게 이뤄지는가

다운로드는 영상 참조(npm다운로드 후 사용 가능)

라우터라는 게 존재했다

마치 백엔드의 컨트롤러 같았다

router.js

사용할 모듈들을 임포트 해준다

import Vue from 'vue';

import VueRouter from 'vue-router';

import firstdoor from './components/views/firstdoor.vue';

import home from './components/views/home.vue';

import test from './components/views/test.vue';

 

Vue.use(VueRouter);

이건 왜 하는지 모르겠는데

vue방식은 이런가 보다 하고 일단 넘어갔다

 

라우터를 만들어주자

const router =new VueRouter({

    mode:'history',

    routes: [

      {path:'/',component: firstdoor},  

      {path:'/home',component: home},

      {path:'/test',component: test}  

    ]

});

보면 path로 오면 페이지를 뿌려준다

익스포트 지정

export default router;

테스트 전 app.vue세팅

app.vue

헤더=위에 상단바만 고정이고

페이지를 이동할 때마다

 <router-view></router-view>

부분만 갈아치워 지고 새로 그려준다

 

테스트

http://localhost:3030/

http://localhost:3030/

저 대문 a태글르 클릭하면 /test로 이동하게 된다

클릭

http://localhost:3030/test

이동 완료

4. 부트스트랩 연동 법

-영상 참조(npm으로 설치만 해주고 main.js에 세팅해주면 된다)

 

5.ckeditor5 연동 법

ckeditor5 공식 홈페이지 가서 

npm을 다운로드한다

data에 에디터를 설정해주고

템플릿에 넣어준다

그다음 이제 이미지업 로더를 구현해야 하는데

여기가 고비이다

MyCustomUploadAdapterPlugin

1. 일단 공식 사이트를 따라 해 봤다

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html

Custom upload adapter - CKEditor 5 Documentation

뭔가 잘못했는지  실패했다

2. 스택오버플로우

https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5

How to enable image upload support in CKEditor 5?

처음에 작동했지만 뭔가 건드려서 

망했다 

 

그 후

어림도 없지

미친듯한 구글링으로 닥치는 대로

복붙 했다

최종

여기서 주의할 점

던지는 부분은 

data.append('upload', result);이다

즉 서버에서 받을 때 이름이 다를 수 있으니 서버랑 맞춰줘야 한다

(처음에 가져온 소스에는 'file'로 되어있어서 오류 가남)

가져오는 부분은

resolve({

       default: response.url

  });

역시 서버에서 던질 때 맞춰줘야 한다

(처음에 response.awss3라고 되어있어서 이상한 링크가 잡혔다)

 

백엔드 서버

 

summernote랑 다르게

MultipartHttpServletRequest 사용해서 뽑아내야 한다

한 장만 테스트하려고. get(0)을 해놓았다

자세한 내용은

https://cordingmonster.tistory.com/154?category=1046973 

Springboot 게시판만들기!(2) 글쓰기 썸네일 출력+aws s3

여기에 적어놓았다

 

테스트

<img src="https://s3.ap-northeast-2.amazonaws.com/kimsshop/images/2021-10-0726baa913-627a-4f72-a7f2-1cd985f44ef1스크린샷(1820).png">

이라고 나온다 클라우드 가서

2021-10-0726baa913-627a-4f72-a7f2-1cd985f44ef1스크린샷(1820).png 검색해보자

ㅏ

잘 들어온다 

6. 포트번호변경

검색하면 많이 나온다

package.json에 가서

package.json

--port 원하는 번호

라고 적어주면 된다

 

7.async/await

아직 완벽하게 이해 하진 못했다

다만 비동기를 동기식처럼 처리할 수 있는 기능이다

promise대용으로 자주 쓰이는 거 같다

https://www.youtube.com/watch?v=aoQSOZfz3vQ 

보고 어느 정도 이해했다

문제는 then 후에 promiseresult에 값이 들어있는데

그걸 꺼내는 걸 찾는 게 진짜 힘들었다

결론은 async함수 외에서는 꺼낼 수없었고

콜백 받아 변수에 넣어줘야 했다

 

axios호출

 

. then으로 콜백 받아서 서버가 던저준 결과 중. flag를

this.flag에게 주입하는 방식이다

 

템플릿

fasle라면

     <b-dropdown-item href="/joinPage">회원가입</b-dropdown-item>

            <b-dropdown-item href="/loginPage">로그인</b-dropdown-item>

true라면

  <b-dropdown-item href="#">내구매내역</b-dropdown-item>

            <b-dropdown-item href="#">내정보</b-dropdown-item>

            <b-dropdown-item href="#">로그아웃</b-dropdown-item>

테스트

서버에서 false를 줄 때

서버에서 true를 줄 때

와 진짜 힘들었다

자바스크립트는 도대체 어떤 언어인 것인지 

아주 혼란스럽다..