뚭

금일 약속이 있어서 조금 늦게 개발을 시작해서 페이지 넘어가서 파라미터 받는거 정도 했네요 ㅠㅠ ㅎ

내일 퇴근하고 좀 빡세게 해서 상품 보이게 하구 가능하다면 db까지 연동하보려고합니다.

음 아직 몇가지 프론트쪽에 문제가 좀 있는것같은데 그부분은 천천히 해결하도록 하겠습니다.

일단 vue slider 컨포넌트 만들어둔거를 이용해서 버튼 클릭까지 눌러서 log에 찍히도록 해봤고요

내일은 링크 클릭하면 상품의 가격이랑  동영상 보여주는걸 만들어 볼겁니다. 

흠.. 내일은 db랑도 연결 해야겠네요 ㅎ .. db랑 연결하는데 또 시간 잡아먹을것같은뎅 ㅠㅠ ㅎ 

아우 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

백엔드,프론트엔드