영원히 남는 기록, 재밌게 쓰자

vue에서 spring boot로 post 요청을 보내야 했다. 스프링 부트는 api 서버 역할을 수행하고 vue는 화면구성을 담당하기 위해서 분리를 하였기 때문이다. vue는 개발 포트를 5173을 사용하고 spring boot 서버는 개발포트를 8080을 사용하고 있다. vue에서 axios post 요청을 하게되면 localhost:5173/[요청한 경로]로 요청된다. 8080으로 요청을 하기 위해서 vue에서는 proxy 설정을 해주어야 한다. 나의 경우는 vue3 구성으로 프로젝트를 구성하여서 설정 파일 이름이 vite.config.js이다. 참고로 vite.config.js는 Vite의 설정 파일로, 프로젝트의 빌드 및 개발 서버 구성을 관리한다. 다음과 같이 설정해주었다.import { fi..

cdn 방식, 설치 방식 두가지가 있는데 설치 방식으로 프로젝트에서 사용할 예정이다. https://getbootstrap.com/docs/5.3/getting-started/download/ DownloadDownload Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.getbootstrap.com  부트스트랩 공식 사이트에 들어가서 다운로드하면 css, js 폴더가 있다.  해당 폴더를 src/assets 하위에 넣어주었다. vue는 SPA(Single Page Application) 구조로 되어 ..

Vue.js를 선택하게 된 이유백엔드로만 구성된 프로젝트를 하고 싶었지만 이왕 공부하는거 공부인데 하고 싶은 공부도 하면서 내가 만들어보고 싶었던 프로젝트를 해보자는 생각으로 프로젝트 기술 스택을 고민하고 있었다. 프론트를 깊게 공부하지 않았고디자인을 전문으로 하는게 아니라.. 어차피 디자인을 하는 부분은 부트스트랩의 도움을 받을 것이다..ㅎㅎ 근데 일을 하면서 느꼈지만 어차피 프론트나 백이나 모두 할 줄 알아야 한다는 것이었다. 근데 프론트를 좀 분리해서 사용해서 깔끔하게 경계를 두고 개발을 해보는 것도 괜찮을 것 같았다. 그래서 그래도 react나 angular보다는 러닝커브가 낮은 vue를 선택하게 되었다. 또한 프로젝트를 시작할 때 귀찮아서 배움을 멈춰버리게 된다면 계속 미루고 배우지 않을 것 같..

이전 프로젝트에서는 학생들의 피드백을 작성하기 위한 에디터로 Toast UI Editor를 사용하였었다. 그래서 이번 REST API로 리뉴얼 한 프로젝트를 진행할 때에도 Toast UI Editor를 사용하기 위해 적용을 시켜보았는데, 나는 vue3 버전을 사용중이라서 toast ui editor가 vue3 버전에 대해서 지원을 아직 안하는 것 같았다. 그래서 찾아보니 CKEditor라는 vue3 버전도 지원하는 에디터를 알게 되었고 설정이 조금 귀찮기는 하지만 다른 블로그들 예시를 찾아보니 적용할 수 있을 것 같아 한번 시도해보았다! (이러면서 하나씩 알게 되는거지!!) 설정 사이트CKEditor 사이트에서 바로 원하는 플러그인을 구성해서 적용할 수 있도록 GUI 설정 환경을 제공해주었다. 그래서 천..