뚭

아우 vue router를 스프링에서 설정해줘야 새로고침이 된다는 사실을 알았네요.

package kr.co.kshproject.webDemo;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.PathResourceResolver;

import java.io.IOException;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
                .addResourceHandler("/**")
                .addResourceLocations("classpath:/static/")
                .resourceChain(true)
                .addResolver(new PathResourceResolver() {
                    @Override
                    protected Resource getResource(String resourcePath, Resource location) throws IOException {
                        Resource requestedResource = location.createRelative(resourcePath);
                        return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");
                    }
                });
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/index.html");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }

}

위의 webconfig 클래스를 만들어서 spring에 등록해주고   

.addResourceHandler("/**") 모든 경로 
 .addResourceLocations("classpath:/static/") build 된 vue index.html에 들어가는곳 이네요 .

일단 해결해서 기쁩니다. ㅎ 

좀 어려웠던 점이 환경설정이있는데요.
기존에는 jquery spring 을 이용해서  ide는 이클립스에서  개발했는데 vue랑 spring 을 이용해서 인텔리제이에서 개발하다보니 조금 어렵네여.
특히나 vue build 를 해서 뭔가 하려고 하니 빌드시간도 잡아먹는 느낌이 ..ㅋㅋㅋ
아 웹개발은 환경살정이 너무 어렵 ㅠㅜ

음 당시 vue build된게 연동된줄 알았는데 연동된게 아니어서 이제 확인해보니 연결이 되었네요.
3일 정도 걸린것같구 ... 지금 문제가 새로고침쪽에 문제가 잇어서 spring에서 vue router를 이동하려는데 
그게 안되서.. 음 서버사이드 쪽에서 렌더링을 해줘야한다는데 지금 그부분은 찾아보고 있습니다.
추가적으로 이미지 버튼이랑 게시판 같은것도 추후에 만들어 볼 예정입니다.
다른건 모르겠고 vue 개발이랑 환경설정이 생각보다 오래걸려서 일단 필요한 vue component들은 대강 완성이 되서 
예쁘게는 모르겠지만 일단 spring과 연결해서 작동하는걸 중점적으로 만들예정입니다. 

결과 화면 :

DropDownButtonCompent는 드롭다운버튼이고요. 

 MouseComponent는 마우스 포인터 및 커서 컴포넌트입니다.

마우스를 커스텀할수 있게 컴포넌트들을 만들어봤습니다. 

DropDownButtonCompent랑 MouseComponent를 만드는데 시간이 걸렸네요. ㅎㅎ 

<template>
  <div>
    <div class="border_area">
      <div class="drop-down-menu" >Border Color</div>
      <DropDownButtonComponent id="dropDown1" :categories="categories1" @CustomEventChanged="(msg) => this.borderColorValue = msg"/>
      <div class="drop-down-menu">Border Shape</div>
      <DropDownButtonComponent id="dropDown2" :categories="categories2" @CustomEventChanged="(msg) => this.shapeBorder = msg"/>
      <div class="drop-down-menu">Pointer Color</div>
      <DropDownButtonComponent id="dropDown3" :categories="categories1" @CustomEventChanged="(msg) => this.pointerColorValue = msg"/>
    </div>
    <div class="mouse_background">
      <MouseComponent :border-color="this.borderColorValue" :pointer-color="this.pointerColorValue" :border-shape="this.shapeBorder" />
    </div>
  </div>
</template>

<script>
import MouseComponent from "../commonComponents/mouseComponent";
import DropDownButtonComponent from "../commonComponents/DropDownButtonComponent";
export default {
  name: "TesterMouseCursor",
  components: {DropDownButtonComponent, MouseComponent},
  data(){
    return {
      borderColorValue : 'fff',
      pointerColorValue : 'fff',
      shapeBorder: 100,
      categories1: [
           {id: 'fff', name:"하양"},
           {id: 'ff0000', name:"빨강"},
           {id: '00ff00', name:"녹색"},
           {id: '0000ff', name:"파랑"},
      ],
      categories2: [
          {id: 100, name:"동그라미"},
          {id: 0, name:"네모"},
        ],
    }
  },
}
</script>

<style scoped>
  .mouse_background{
    background:black;
  }
  .border_area {
    width: 300px;
    height: 300px;
    background: gray;
  }
  .drop-down-menu{
    font-size: 10px;
    color: white;
  }
</style>

ImageSliderCompoenet 를 만들어서 자유로운  사이즈, 이미지량, 속도를 커스텀할수 있도록 만들어봤다. 

Vue 독학이라 쉽진 않네요~

<template>
  <div >
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList1 :p-height-data="400" :p-width-data="400" :p-trans-data="-400"  :b-check-horiz=false :p-second="0.5"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList2 :p-height-data="200" :p-width-data="200" :p-trans-data="200" :b-check-horiz=false :p-second="5"></ImageSliderComponent>
    </div>
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList3 :p-height-data="100" :p-width-data="100" :p-trans-data="-100" :b-check-horiz=true :p-second="2"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList4 :p-height-data="100" :p-width-data="100" :p-trans-data="100" :b-check-horiz=true :p-second="4"></ImageSliderComponent>
    </div>
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList5 :p-height-data="200" :p-width-data="200" :p-trans-data="-200" :b-check-horiz=false :p-second="1.25"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList6 :p-height-data="200" :p-width-data="200" :p-trans-data="200" :b-check-horiz=true :p-second="8"></ImageSliderComponent>
    </div>
  </div>
</template>

<script>
import ImageSliderComponent from "../mainComponents/ImageSliderComponent";
export default {
  name: "Tester",
  components: {ImageSliderComponent},
  data () {
    return {
      imgList1: [
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.etsystatic.com/8800859/r/il/80b642/1645517321/il_570xN.1645517321_cbxw.jpg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrHbY4UAdm3s05D7ZqTIJHl1B1SmND4HEd3VeoiuzR7fAaClmA_NGN4DL7upgjVjai8lE&usqp=CAU',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000',
        'https://i.icanvas.com/list-square/akitas.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
      ],
      imgList2: [
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0i9I6AMEZ9jjN0beTqDk_XOyjWzgFISZXCBvd5Va-WkDvkTXHs9fOYmKGy6AGCO7ci_Y&usqp=CAU',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.pinimg.com/originals/d5/b2/02/d5b202e34b196e430d737b713a2164de.jpg',
      ],
      imgList3: [
        'https://images.fineartamerica.com/images-medium-large-5/colorful-dog-art-heart-and-soul-by-sharon-cummings-sharon-cummings.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://i.pinimg.com/originals/66/9d/c1/669dc1fbb3100a780fbc2a1eb65f06d5.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/1-colorful-long-haired-cat-art-peggy-collins.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList4: [
        'https://i.pinimg.com/originals/fb/55/24/fb55244036ea68a2e511dd86917582f5.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList5: [
        'https://static.vecteezy.com/system/resources/previews/002/492/339/original/abstract-cat-pet-portrait-painting-vector.jpg',
        'https://royalthaiart.com/wp-content/uploads/2022/02/Dog-Painting.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://i.etsystatic.com/8800859/r/il/918819/1903524852/il_570xN.1903524852_ruxb.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList6: [
        'https://cdn.shopify.com/s/files/1/0017/7461/6627/products/abstract-cat-diamond-art-painting-30603514708161_2048x2048.jpg?v=1631438728',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.ebayimg.com/images/g/RHsAAOSwIvRgIbe0/s-l500.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
    }
  }
}
</script>

<style scoped>

</style>

https://roadmap.sh/backend

https://roadmap.sh/frontend

백엔드,프론트엔드 

WebSecurityConfigurerAdapter 사용 불가 현상

Spring 5.7버전 이상부터는 사용 불가하다고 합니다.

https://spring.io/blog/2022/02/21/spring-security-without-the-websecurityconfigureradapter

그래서 

간단하게 configure 함수 오버라이당 했던 방식으로 간단하게 보여드리겠습니다. 

변경 전

@Configuration
@EnableWebSecurity
public class SecurityJavaConfig extends WebSecurityConfigurerAdapter
{
	@Override
    protected void configure(HttpSecurity http){
		 http.formLogin().disable();
    }
}

변경후 

@Configuration
@EnableWebSecurity
public class SecurityJavaConfig  {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.formLogin().disable();
        return http.build();
    }
}

WebSecurityConfigurerAdapter 상속 받은 configure 오버라이딩 된 함수 대신해서 WebSceurtyConfiguration에서 제공하는 filterChain 함수를 사용합니다 대신 return으로 항상 http를 빌드해줍니다. (http.build())

이상태로 junit5에서 사용불가하다 

그래서 동일시 사용하는 방법은 아래 그림과 같다.

https://www.arhohuttunen.com/junit-5-mockito/