혜르미온느

분명 어제는 메인 슬라이더 배너 바로 아래에 최근 본 상품이 있었는데, 오늘은 슬라이드가 하나 생겨있었다. https://hyermione.tistory.com/53 [Challenge] - 네이버 쇼핑 20일차 : 최근 본 상품 지난번 포스팅을 보면 온통 슬라이더 이야기 뿐이다. 슬라이더에서 주춤하게 되니 당분간 보고싶지 않아 프로젝트와 권태기 아닌 권태기가 왔다. 네이버 쇼핑 본 페이지를 보니 슬라이더가 아 hyermione.tistory.com 네이버 쇼핑의 배포날이었을까? 부랴부랴 빠르게 칸을 만들었다.

지난번 포스팅을 보면 온통 슬라이더 이야기 뿐이다. 슬라이더에서 주춤하게 되니 당분간 보고싶지 않아 프로젝트와 권태기 아닌 권태기가 왔다. 네이버 쇼핑 본 페이지를 보니 슬라이더가 아니면 무슨 소용이 있나 싶어 스크롤만 왔다갔다 하던 중..! 어찌되었건 개인적으로 프론트에서 CSS를 모르는 건 자랑이 아니라고 생각하기 때문에 간단한 마크업이라도 진행해보자 싶었다. 사실 별 도움이 안 되는 것 같아 프로젝트 자체를 그만할까 생각했지만 한 페이지라도 완성하게 되면 비단 스크립트 발전이 아니더라도 뭐라도 얻어가겠지 라는 생각으로 끝까지는 완성 할 예정이다 (라고 쓰고 지금은 그렇다. 나도 완성하고 싶지만 마음이 바뀔 수 있다. 라는 말은 삼켜본다)

배너 1번 가로스크롤에서 0.2px의 오차가 생성된다. e.axesEvent.pos.flick의 transform을 따오는거라서 라이브러리 내부의 이슈인지 계산의 차이인지 확인 필요하지마... 아마 후자일 가능성이 상당수로 높다...... 일단 육안으로 확인이 되는 만큼은 아니라서 오늘은 여기서 마무리- +) 18일 차에서 %로 했더니 자꾸 안 맞는 경향이 있어서 아예 고정값을 주어 해결했는데, 해상도를 변경해보니 left가 0.2보다 훨씬 틀어지는 것을 발견하였다. 상대 값으로 체크해야하나보다. 그래서 결론은 또 제자리 하핳

flicking의 onMove Method를 통해 움직일 때 마다 transform position의 위치를 계산하여 슬라이더 스크롤의 현재위치 position에 주입해준다. - onMove 함수에서 useState로 저장한 변수가 인식되지 않는다 : 함수 실행 시 마다 querySelector를 체크하여 테스트 하는 중이다. - scroll bar 사이즈를 계산해야한다 : 현재는 임의로 6개를 기준으로 계산할 수 있지만 10개 20개가 되어도 같은 비율로 계산되는 계산 식을 찾아야한다. 더불어 배너의 transform position과 bar에 적용되어야 할 position의 사이즈가 다름으로 스크롤 축소 비율을 동등하게 적용하여 계산해야한다.

flicking slider를 사용하여 auto play 기능을 넣으려면 https://github.com/naver/egjs-flicking-plugins GitHub - naver/egjs-flicking-plugins: Plugins for @egjs/flicking Plugins for @egjs/flicking. Contribute to naver/egjs-flicking-plugins development by creating an account on GitHub. github.com 를 설치해야한다. 개인적으로 라이브러리 설치는 별로 안 좋아하는데, 일단 큰 틀을 만들어 두고 정리를 해 보도록 하자. 지금은 뭐라도 코드를 만져보고 싶다. 플러그인은 배열로 구성하여 넣어주면 되는 것 같다. 그..

실질적인 코딩을 잠시 멈추고 오픈 소스를 파헤쳐보려고 한다. 예전에 문과장이 맨날 아무 생각 없이 코드 쓰라고 했던게 습관이 되어서 그런지 차분히 코드를 보고 이해하며 필요한 부분을 내 것으로 언젠가 꺼내 쓰는 방법말고는 실력 향상 방법을 잘 모르겠다. (이래서 첫 사수가 중요한가..? 현재 문과장과 매우 친해서 할 수 있는 이야기 ㅎㅎ) 아무튼 라이브러리는 사실 도큐먼트만 보고 따라하면 얼추 동작하기는 하지만 네이버는 어떻게 코드를 짜는지도 궁금하고, 아무 생각없이 라이브러리를 쓰는 것보다 하나씩 보면서 하고 싶어서 일단 해본다. 막상 실력 향상에 별로면 다른 방법을 찾아야지 (라고 하고 몇 년 째 못 찾는 중ㅠㅠ) https://github.com/naver/egjs-flicking/tree/mast..

JS 공부를 하면서 혼자 네이버 쇼핑 따라 하기를 진행하던 중 슬라이더 구현에서 멈칫하게 되었다. 네이버처럼 자연스러운 기능을 구현하려 하니 코드가 점점 꼬이는 기분이 들어서이다. https://hyermione.tistory.com/category/Challenge/%EB%84%A4%EC%9D%B4%EB%B2%84%EC%87%BC%ED%95%91 'Challenge/네이버쇼핑' 카테고리의 글 목록 해르미온느같은 혜르미온느 hyermione.tistory.com 여러 슬라이더 관련 오픈 소스를 참고하려고 알아보던 중, 네이버에서 직접 사용하고 관리하는 Flicking에 대하여 발견하게 되었다..! 두둥 호기심이 생겨 간단하게 정리한 바를 포스팅으로 남겨본다-! Flicking 내가 이해한 바가 맞다면, ..

어제 슬라이더에 대하여 고민을 한 후, (사실 열정적인 고민을 하지는 않았다) slick-slider의 오픈 소스를 참고하려고 검색하였다. http://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io https://react-slick.neostack.com/ Neostack The last react carousel you will ever need re..

슬라이더를 네이버와 같게 직접 구현하고자 했다. 내가 파악한 포인트는 크게 두 가지인데, 자동으로 슬라이드 되며, 무한으로 돌아갈 것 x-scroll을 마우스로 움직일 때, 슬라이더 바도 함께 움직일 것 이 모든것을 충족시키고자 구현을 하려 하니, 코드가 눈에 잘 안 읽히는 문제를 차치하고서도 뭔가 꼬아서 진행하는 느낌이다. 더 꼬이기 전에 다시 한 번 고민을 해 보아야 할 부분이다.

진행한 일 메인/레이아웃 브랜치 코드 정리