06-27 ~ 07-02 WIL(Weekly I Learned)

실전프로젝트가 시작한지 1주일이 지나갔다. 여태것 내가 작업했던거는 스크롤 애니메이션, 게시글 CRUD, 이미지 슬라이드와 기타 뷰를 만들었다. CRUD 테스트를 못해서 오류상황을 아직 겪어보지 못했으나 슬라이드 부분에서 좀 막혔던 부분이 있었어서 그 부분에 대해 글을 써보려 한다.

0. 이미지 슬라이드

   이지미 슬라이드는 react-slick 이란 라이브러리가 있어서 구현하기 별로 어렵지 않았다. 다만 prev, next 화살표 부분에서 약간의 막히는 부분이 있었다.

    <ImgBox>
         <Slider {...settings}>
             {listImg.map((item, idx)=>{return(<img src={item}/>)})}
         </Slider>
    </ImgBox>
   
   	const settings = {
       infinite: true,
       speed: 500,
       slidesToShow: 1,
       slidesToScroll: 1,
       arrow:true,
       nextArrow: <SampleNextArrow/>,
       prevArrow: <SamplePrevArrow/>
   };

   slick css 를 import 해와서 prev, next 화살표를 할 수 있었으나 나는 이미지 내에 화살표가 들어가있는 것을 원했다. 그래서 css 부분을 고쳐봤으나 next arrow는 사진 위에 나타나고 prev arrow는 사진에 가려 나오질 않았다. z-index 방식을 고쳐줘도 말이다. 결국 삽질을 수 시간 한 후에 화살표를 커스텀을 해줬다. 다행스럽게도 내가 원하던 화살표가 사진내에 들어가 있는 것을 확인 할 수 있었다.

   

1. 다음 주 작업해야할 것 들

   현재 와이어프레임이 변경되서 재차 작업을 해야한다. 어서 Write 뷰와 Detail, Mian View 를 작업해야하고 CRUD 테스트를 빨리 해보고 싶다. 그리고 이미지를 업로드 할 때 업로드 된 이미지 미리보기에서 이미지를 마우스로 클릭해서 box 내에 자유재재로 옮기는 작업을 해야한다. 예전에 이 부분 라이브러리를 본 적이 있어서 비교적 쉽게 접근할 수 있을거 같다.

   화이팅 하자.