JavaScript25 [vue.js] Spring Boot & Vue.js 연동 (2) - vue router 설정 및 설정 Spring boot 와 Vue.js 를 연동 후에는 Router를 통한 다른 페이지로 이동시 문제점이 발생한다. Hash Mode를 설정하는 경우에는 URL 호출 시 서버를 거치지 않지만 URL에 #이 표기 되는 문제점과 SEO에서 나쁜영향을 끼치게 되므로 HTML5 Mode(History Mode)로 설정을 진행하였다. 이 경우에는 URL 호출 시 서버를 한번 거치게 된다. Vue Router 설정 시 페이지 내에서 router로 생성된 링크는 잘 접속이 되지만 url로 접근하거나 새로고침을 하는 경우에는 Spring Boot에서는 'Whitelabel Error Page' 페이지로 전환과 함께 404 오류코드를 반환한다. 사용자가 '/board' 또는 '/main' 등 페이지에 접근하려면 route.. 2023. 8. 17. [vue.js] Spring Boot & Vue.js 연동 (1) 개발환경 1. STS 2. @vue/cli 5.0.8 3. Spring Boot 2.7.14 연동방식 하나의 서버를 두어 두개를 통합하여 빌드후 배포하는 방식 vue.js 를 빌드하면 Spring Boot 내 프로젝트로 빌드파일이 생성되어 , Spring Boot 배포 파읽들과 함께 웹 서버로 배포하는 방식 1. 백엔드 Spring Boot 파일을 만든다(생략) 2. 프론트엔드 설정을 위해 VS code 를 실행 Open Folder 를 클릭해서 해당 Spring Boot 프로젝트 디렉토리를 열고 Ctrl + ` 를 이용해 터미널을 열어준다 vue create frontend 해당 명령어를 실행후 Default Vue3 을 선택한다 3. Open Folder 를 클릭하여 생성된 frontend 로 이동 .. 2023. 8. 16. [vue.js] visual studio code (VS code) 설치하기 및 Vue 프로젝트 생성 1. VS code 설치 Documentation for Visual Studio Code Documentation for Visual Studio Code Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. 작업 파일 생성 3. VS code 에서 폴더 열기 4. ctrl + ` 로 터미널 열기 설치.. 2023. 8. 16. svg d3 도형 - 다르게 표현 //Circle Data Set var circleData = [ { "cx": 20, "cy": 20, "radius": 20, "color" : "green" }, { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }]; //Create the SVG Viewport var svgContainer = d3.select("body").append("svg") .attr("width",200) .attr("height",200); //Add circles to the svgContainer : virutal element 만들기 var circles = svgContainer.selectAll("circle") .data(circleData.. 2021. 12. 9. json data 설정 새로운방법/ key : value var test = [] test['0011'] = 'testdata'; console.log("test출력") console.log(test) 저렇게 사용자가 key값 value 값을 지정하여 key는 좌측 값은 우측에 두어 설정할 수 있다. 2021. 10. 5. [Node.js] 시퀄라이즈 where/ OP. Where 어떤 쿼리문을 작성하든, where 객체를 사용하여 쿼리 내용을 필터링할 수 있습니다. 이는 find/findAll, update, destroy 등에 모두 사용 가능합니다. where은 attribute: 값 의 쌍으로 이루어진 객체이며, 값 으로는 비교 연산의 경우 기본 자료형의 값, 그 외의 연산자의 경우 또다른 객체가 올 수 있습니다. or와 and 연산자를 중첩하여 사용하면 복잡한 AND/OR 조건을 만들어내는 것도 가능합니다. 기본 원칙 [Op.and]: {a: 5} // AND (a = 5) [Op.or]: [{a: 5}, {a: 6}] // (a = 5 OR a = 6) [Op.gt]: 6, // > 6 [Op.gte]: 6, // >= 6 [Op.lt]: 10, // < 10 .. 2021. 9. 29. [Node.js] sequelize.import is not a function error 에러 해결 이부분을 .forEach((file) => { const model = sequelize.import(path.join(__dirname), file) // error occurs here db[model.name] = model }) 이렇게 변경해주면 잘된다. .forEach((file) => { const model = require(path.join(__dirname, file))( sequelize, Sequelize.DataTypes ) db[model.name] = model }) 2021. 9. 8. [Node.js] Browserslist: caniuse-lite is outdated. Please run 오류 오류 해결방법 npm update caniuse-lite browserslist npm i npm-update-all -g npm-update-all npx browserslist@latest update-db 입력하라고 해결방안 제시 2021. 9. 8. Vue.js [1번째정리] 기록 : 뷰 인스턴스 뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다 #인스턴스 생성 인스턴스는 아래와 같이 생성할 수 있다. new Vue(); 인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인할 수 있다. var vm = new Vue(); console.log(vm); 크롬 개발자 도구를 열고 Console 패널을 확인하면 아래와 같은 결과가 나온다. 위와 같이 인스턴스를 생성하기 위해선 new Vue 라는 생성자를 호출해야 한다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 방법이다. 이처럼 인스턴스 안에는 미리.. 2021. 8. 6. 이전 1 2 3 다음
