본문 바로가기

Web Programming50

[React + SpringSecurity + DB] 로그인 구현하기 (Backend) 저의 예시는 스프링 2.5.5 버전입니다. 버전에 따라 코드가 다를 수 있으므로 버전에 맞게 코딩해주시면 되겠습니다. 스프링 시큐리티부터 만들어볼까 합니다. build.gradle implementation 'org.springframework.boot:spring-boot-starter-security' 위 문구를 적고 재빌드를 해줍니다. SecurityConfig.java @RequiredArgsConstructor @Configuration @EnableWebSecurity @Component public class SecurityConfig extends WebSecurityConfigurerAdapter { @Bean public PasswordEncoder passwordEncoder() { .. 2024. 1. 18.
[Kendo Vue + SpringBoot + Oracle] 동적인 메뉴 아코디언 만들기(Creating a dynamic menu accordion) kendo Vue의 treelist를 이용하여 만드는 예제입니다. https://www.telerik.com/kendo-vue-ui/components/treelist/get-started/ Vue TreeList Component Getting Started - Kendo UI for Vue Docs & Demos vue 2.6.11 or 3.0.0Contains the functionality necessary to define Vue components.@progress/kendo-licensingContains the internal infrastructure related to licensing.@progress/kendo-svg-iconsContains the SVG icons for the .. 2024. 1. 3.
[Vue.js] Datepicker를 이용한 캘린더 만들기 - 데이터 바인딩 및 오늘 날짜로 설정하기 먼저 datepicker를 다운받아야 하는데요 npm install vue3-datepicker 를 해서 패키지를 받아줍니다. 다음은 본론인 코드로 넘어가겠습니다. 입사일자 ... 이렇게 를 만들어 줍니다. - 상황에 따라 변형은 자유롭게 하면 됩니다. import {ref} from 'vue'; import Datepicker from 'vue3-datepicker'; import axios from 'axios'; let picked = ref(new Date()); // 오늘날짜 const locale = reactive(ko); const inputFormat = ref('yyyy-MM-dd'); export default { ... 변수 선언을 해줍니다. 조회할 때 데이터 바인딩 하는 방법입니다.. 2023. 12. 7.
[Vue.js] select 태그에 데이터 바인딩하기 공식사이트 기준으로 먼저 말을 해보겠습니다. Please select one A B C 선택함: {{ selected }} 위와 같은 코드가 나타나는데요 이러한 이미지로 만들어지는 것을 볼 수 있습니다. 출처: https://v2.ko.vuejs.org/v2/guide/forms.html#%EC%85%80%EB%A0%89%ED%8A%B8 저는 저렇게 만들지 않고, v-for 을 이용하여 select 태그를 완성하였는데요 {{ user.name }} data() { return { selWrkTyp: [ {name:"전체", value: ""}, {name:"A", value: "01"}, {name:"B", value: "02"}, ], }; }, 이렇게 완성을 하였습니다. 데이터 바인딩을 v-model.. 2023. 12. 5.