본문 바로가기

전체 글148

[항해99 67일차] 2022.05.11 TIL (무한스크롤 구현) 무한스크롤의 늪... 무한스크롤 구현 중 draft list에 payload에 있는 list들을 push하다보니 이전 페이지에 들어갔다가 다시 뒤로갔다가 다른 리스트 페이지로 들어갔을 시 이전의 리스트들이 똑같이 불러와지는 문제 발생했었다.. 현재는 해결이 되었다.!!! 수정 전 코드 //액션생성함수 const getSOList = createAction(GET_SEARCH_OFFICE_LIST, (list,page) => ({ list,page })); //미들웨어 const getSOListDB = (keyword,pageno) => { console.log("keyword : ", keyword); return (dispatch,getState) => { instance // .get(`/api/l.. 2022. 5. 12.
[항해99 66일차] 2022.05.10 TIL (지도 오버레이 클릭시 상세페이지로 이동) 오늘은 위처럼 지도 위에 있는 마커를 클릭하면 그 오버레이에 해당하는 리스트들로 이동하는 페이지를 만들고, 지도 위에 로딩 스피너도 추가했다. 우선 오버레이에 어떻게 onClick이벤트를 줄지 고민을 했었는데.. 쉬웠다... 커스텀 오버레이를 div로 감싸주고,,,div에 온클릭 이벤트를 등록하면 되었다.ㅎㅎ 코드 {is_loaded? ( { getOffice?.cityResponseDtoList?.length ===0? null: getOffice?.cityResponseDtoList?.map((position, index) => ( history.push(`/map/office?query=${position.title}`)} > ))} ):()} 이제 저 리스트를 페이징 처리를 할 차례가 왔다 ..!.. 2022. 5. 10.
[항해99 65일차] 2022.05.09 TIL (지도 마커 띄우기) 오늘은 검색리스트에서 나온 오피스 매물을 클릭하면, 지도로 위치 띄워주는 것과 아래에 매물 정보를 띄워주는 뷰를 만들었다 ... ㅠㅠ 아직 와이어프레임이 없다보니까.. 나 혼자 와이어프레임 짜고.. 뷰 그리고.. ㅠㅠ 그러고 있다 지금..ㅎㅎ 바로 이 페이지다 ㅎㅎㅎㅎ 똥이 너무 귀여워 ㅎㅎㅎㅎ마커는 ..디자이너님이 그려주신 오싹이 캐릭터를 내가 조금 변형 시켜서 ㅎㅎ 마커 이미지로 넣어버렸다. 위의 소스 코드 import React, { useEffect } from "react"; import { useSelector } from "react-redux"; import styled from "styled-components"; import onePin from '../../static/images/o.. 2022. 5. 10.
[항해99] 9주차 WIL [실전프로젝트] 🧸 이번 9주차 WIL 키워드 ! 실전 프로젝트를 진행하며 기술적으로 막혔던 부분은 무엇인가요? 해결했다면 어떻게 해결했는지 과정을 작성해주세요! 8주차 키워드와 똑같다 !!! 우선 지도부분이 가장 막혔었다.. 이번에 또 문제였던 것은 검색어를 입력했을 때 해당 키워드와 관련있는 매물들을 지도에 마커로 띄워주는 것이었는데 ... 정말 정말 정말 뇌가 멈춘 기분 ? 이었다 ㅎㅎㅎㅎㅎ 어떻게 구현을 해야될지 ㅠㅠ알고릐즘 적인 뇌가 ..부족하다보니까 아무런 생각도 나지 않았고, 카카오 api안에 있는 검색 라이브러리를 이용해서 .. 어찌저찌 검색어 입력하면 움직이기는 했는데.. 생각보다 잘 움직이지 않았고,,뭔가가 이상했다. 원래 사용하던 지도를 계속 사용해야 하는지... 지도를 새로 그리는 컴포넌트를 그려야.. 2022. 5. 8.
[항해99 63일차] 2022.05.07 TIL (리액트 가격 필터? 카테고리 필터 뷰) 뚜뚱.. 정말 검색을 무진장 많이했다..!!!! 하 진짜 안되가지고 죽는줄 알았다.ㅠㅠ 정말 키워드를 다양하게 하여서 검색했었다... 하루종일 걸렸다 ~~~~~~~~ ㅜ..ㅜ 필터 코드 부분 import React, { useState } from 'react'; import { Grid,Text,Button } from '../../elements/index'; import styled from 'styled-components'; const Filter=(props)=> { const {isOpen,setIsOpen}=props; const ModalClose=()=>{ setIsOpen(!isOpen) } const [currentClick, setCurrentClick] = useState(nul.. 2022. 5. 8.
[항해99 62일차] 2022.05.06 TIL (리액트로 탭메뉴 구현) 뭐 디자인은 아직 미완성이라 .. 이쁘지는 않지만, 탭메뉴 구현을 해보았다 !!!!! 먼저 탭메뉴의 탭타이틀이 있는 부분의 코드 import React, { useState } from "react"; import styled from "styled-components"; import { Grid, Button, Text, Image } from "../../elements/index"; import XScrollDrag from "../shared/XScrollDrag"; import {OfficeList,NearStation} from "./index"; const Office = () => { const tabTitle = ['맛집', '역']; const tab = { 0: , 1: }; cons.. 2022. 5. 6.

티스토리툴바