🍊 오늘의 할 일
-
위치 기반 GET /map 서버 통신 테스트 -
필터링 기반 GET /map 서버 통신 테스트 -
카드 모달 구현 -
DevLog 쓰기 -
가이드 모달 안의 카드 마그네틱 슬라이드 구현 수정 필요
=> 모바일 환경에서는 사진을 슬라이드하는 방식을 사용하기 때문
=> 4시간의 결과는... 에러... 미해결...
🍊 오늘의 정리
🍉 redux-persist 오류
(팀원의 오류)
이후 redux-persist 사용할 예정이기 때문에 참고용으로 기록
const persistConfig = {
key: 'root',
storage,
whiteList: ['loginReducer'],
};whiteList => loginReducer만 persist 유지된다.
하지만 의도한 바와는 다르게 아래와 같이 모든 상태가 persist되어 있었다.
이 때문에 이전에 로그인한 기록이 있는 한 팀원에게만 위와같은 에러가 발생하였고, 이번에 최종 merge한 state값이 반영이 되지 않아, content.length 오류가 난 것이었다.
🍉 가이드 카드 Img 스크롤 이동
문제상황
모바일 버전에서 scroll-snap을 제공하려고 하는데, scroll-snap의 경우 현재의 사진 위치를 state에 저장하지 않는다.
slider button으로 사진을 이동시키는 기능도 주고 있는데, 이때에는 transform: translateX(${({ fromLeft }) => fromLeft + 'px'});이렇게 어디에 위치하고 있는지를 state에 저장하여 사진을 이동시켜준다.
state를 사용하지 않고 사진을 이동시키지는 snap 기능과 state의 값을 기반으로 사진의 위치를 인식하여 이동시키는 slider button 간의 위치 차이가 발생하게 되어 이동이 원활하게 되지 않는다.
해결 시도1
해당 태그에 scrollEvent를 주어 스크롤이 이동할 때 scrollLeft의 값을 기반으로 state의 값을 변경해주고, transform에 적용하는 것이다. 하지만 위의 console에서 볼 수 있듯이다. 모든 scroll마다 이벤트가 발생하여 비정상적인 이동을 보였다. 아마 계속해서 state가 갱신되기 때문일 것이다.
const moveImg = (direct) => {
if (direct === 'l' && fromLeft === 0) return;
else if (direct === 'r' && fromLeft === -220 * (tourImage.length - 1)) return;
if (direct === 'l') {
let plusLeft = fromLeft + 220;
setFromLeft(plusLeft);
} else {
let minusLeft = fromLeft - 220;
setFromLeft(minusLeft);
}
};
console.log(fromLeft);
const scrollEvent = (e) => {
let left = e.target.scrollLeft;
console.log(left);
};해결 시도2
scroll이 멈춘 시점에 해당 scrollLeft를 구해주면 될 것 같아, setTimeout을 주었다. scrollEvent가 한번 발생하면 remove하고 해당 state가 변경되면 다시 scroll 이벤트를 붙여주는 식으로 접근을 했다.
const [curImg, setCurImg] = useState(0);
const [fromLeft, setFromLeft] = useState(0);
const scrollRef = useRef();
const moveImg = (direct) => {
if (direct === 'l' && curImg === 0) return;
else if (direct === 'r' && curImg === -tourImage.length + 1) return;
if (direct === 'l') {
let plusLeft = curImg * 220 + 220;
let plusCurImg = curImg + 1;
setFromLeft(plusLeft);
setCurImg(plusCurImg);
} else {
let minusLeft = curImg * 220 - 220;
let minusCurImg = curImg - 1;
setFromLeft(minusLeft);
setCurImg(minusCurImg);
}
};
const scrollEvent = (e) => {
let left = e.target.scrollLeft;
if (left >= 440) {
setCurImg(-2);
} else if (left >= 220) {
setCurImg(-1);
} else {
setCurImg(0);
}
scrollRef.current.addEventListener('scroll', timeEvent);
};
const timeEvent = (e) => {
scrollRef.current.removeEventListener('scroll', timeEvent);
setTimeout(() => scrollEvent(e), 1000);
};아직 해결을 하지 못하였다.
우선 기능 구현을 마치고 수정을 마무리할 예정이다.
🍊 DevLog
아직 해결하지 못한 이미지 슬라이더 + scroll snap 기능 구현
오늘은 어떻게 프로젝트에 기여했나요?
- 위치 기반, 필터링 GET /map 서버 통신 테스트
- 가이드 카드 모달 구현
- 가이드 카드 모달 안의 이미지 슬라이더 구현 중
오늘 프로젝트에서 힘들었던 점은 무엇인가요?
-
가이드 카드 모달 안의 이미지 슬라이더를 구현하던 중 많은 에러를 만나게 되었다. 모바일의 경우, 유저의 편의성을 위해 버튼을 이용한 슬라이더 기능과 마그네틱 스크롤 기능을 제공하고자 하였다. 마그네틱 스크롤의 경우 css 속성을 이용하여 구현하여
쉽게 구현되었지만, 슬라이더 기능과 함께 적용하려다보니, 이미지 위치의 싱크가 맞지 않아 정상적으로 동작하지 않았다.button 슬라이더의 경우 버튼이 클릭될 때마다 이벤트가 발생되어 state값에 지금 보여지고 있는 이미지의 위치를 저장하여 관리하였지만, css 속성인 scroll-snap의 경우에는 유저가 스크롤하는 이벤트 수행하면 자동적으로 이미지의 위치가 이동하는 구조였다.
이를 해결하기 위해 스크롤 이벤트를 주어 이미지의 위치를 추적 하려고 하였고, console.log와 state 정상적으로 변화가 반영되었는데, 이미지의 위치는 정상적으로 변화되지 않는 에러가 발생하고 있다.
아직 해결을 못하였지만, 다른 필수 기능 구현이 우선되기 때문에, 기능 구현이 완료되었을 때 다시 구현할 예정이다.
오늘 프로젝트에서 아쉬웠던 점은 무엇인가요?
- 모달 이미지 슬라이더 에러를 수정하는데 시간을 너무 많이 소비한 것 같다. 우선순위를 고려하여 테스크의 시간분배에 신경써야겠다.
내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- 가이드 카드 신청하기 서버통신 구현
- 통신 에러 핸들링 추가
- 로딩화면 삽입
