choi95의 TIL📝

Issue https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 현재 프로젝트에선 사용자에게 팔로우할 만한 친구를 상단 바에서 보여주는 기능을 제공한다. 이때 친구 리스트를 한 번에 모두 보여주는 것이 아니라 초기에 8명의 Friend Figure만 보여주고 사용자가 버튼을 클릭하였을 경우에 한해서, 8개의 배수로 유동적으로 증가하는 offset을 query값으로 설정하여 서버에 API 통신을 한다. Carousel Slider 기능은 ..

Issue 프로젝트 도중 회원 가입 창이 뜨기 전에 이용 약관 동의 창에 대한 디자인 시안이 추가되었다. 처음에는 이용 약관 동의 라이브러리를 사용하려고 했지만, 체크 박스 관련 기능은 앞으로도 많이 쓰일 수 있기 때문에 이번 기회에 스스로 문제를 해결해보기로 하였다. Code 우선, 각 체크 박스의 체크 활성에 대한 여부를 저장해주어야 이용 약관 동의 창에서 여러 기능을 사용할 수 있기 때문에 다음과 같이 각 체크 박스의 Key값에 대한 체크 여부를 확인할 수 있는 Boolean Value를 지닌 객체를 state값으로 초기화 하였다. const [checkInfo, setCheckInfo] = useState({ webAccessCheck: false, privateInfoCheck: false, a..

Issue 현재 프로젝트에서 대부분의 사이드 이벤트에 대한 내용은 Modal 창이 띄워져 화면에 랜더링된다. 이를 위해 Modal 창에 대한 Presentation Component인 BodyBlackout 코드를 다음과 같이 작성하였다. mport { useDispatch } from "react-redux"; import styled from "styled-components"; const BodyBlackout = ({ modalSort, setAuthModalVisible, isVisibleAuthModal, }) => { const dispatch = useDispatch(); if (isVisibleAuthModal) document.querySelector("body").style.setPr..

Infinite Scroll 기능의 필요성 원래는 진행하던 프로젝트의 메인 페이지 내에서 추가 데이터를 서버에서 가져와 랜더링하는 방식은 Carousel Slide 였지만 관련 디자인 시안이 대폭 수정되었다. 이에 따라 데이터를 보여주는 방식이 특정 지점에 도달했을 때, 이를 인식해 서버에서 추가 데이터를 가져오는 Infinite Scroll 방식을 사용하기로 하였다. 처음에는 특정 지점을 계산하기 위해 ScrollingElement 내의 scrollTop값을 사용하였지만, 스크롤이 되는 속도에 따라 값이 항상 바뀌는 이슈와 scroll event 자체의 성능 저하 문제(동기적으로 이벤트 발생할 때마다 호출되는 콜백 함수)로 인해 Intersection Observer API를 사용해 보기로 했다. In..

문제 현재 mainPage redux store에는 크게 콘텐츠를 보여주는 contents와 사용자 방을 보여주는 roomList가 저장되어 있다. redux-saga를 통해 서버와 API 통신을 하여 각각의 배열 내에 데이터들을 적재해주는 과정에서 문제가 발생하였는데, contents에 해당하는 데이터들은 서버에서 문제 없이 가져와 저장되는 반면에, roomList에 해당하는 데이터들은 저장되지 않았다. 처음에는 서버와 API 통신하는 과정에서 문제가 발생한 줄 알고 Promise 후속 메서드인 then 메서드 내에서 콘솔을 찍어봤는데, 문제 없이 roomList에 해당하는 데이터들도 가져왔다. 문제해결 한참을 해당 Blocker에 대해서 고민한 결과, 리액트 상에서 불변성을 지켜주지 못해 발생한 문제..

문제 프로젝트 도중 검색창에 영어를 치면 별 문제 없이 쿼리 값을 API path에 담아 서버에서 관련 데이터를 무사히 가져오지만, 한글을 칠 경우에는 해당 keyword의 값이 깨진 상태로 쿼리 값을 서버에 보내 제대로 데이터를 가져오지 못하는 문제가 있었다. 문제해결_encodeURI https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURI encodeURI() - JavaScript | MDN encodeURI() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. developer.mozilla.org The encodeURI()..

문제 "info_list": [ { "id": 1, "name": "숲과 생활", "category": "민박", "address": "전라/전주시", "min_people": 2, "max_people": 3, "min_price": 187000, "max_price": 264000, "image_url": "https://images.stayfolio.com/system/pictures/images/000/058/604/small/632cee6dc35346df1f2c6b5d586ed5e73ec7c8a7.jpg?1606199154" }, ( ... ) ] 다음과 같이 서버에서 숙박 리스트 데이터를 가져와 화면에 랜더링하고자 했다. 이때 키 값 중 min_price와 max_price는 원화로 표시되어야..