예약 리스트에서 예약취소 후 리스트로 돌아가도 데이터가 refresh되지않고 리스트 화면에서 나갔다 들어온 후에야 refresh되는 점을 해결하였다. 그냥 취소버튼 누른 후 데이터를 부르는 함수를 호출해주면 될것같았지만, 이번 경우는 한 컴포넌트에서 처리해주고 있는 것이 아니고 자식 컴포넌트가 가지고있는 함수를 부모컴포넌트로 보내주어야한다. 먼저, 부모컴포넌트인 AppHome에 컴포넌트를 연결해주는 함수를 만든다. // AppHome.tsx fetchMoreDataConnecter = (childFunction?:any) => { console.log(childFunction) } 만들어준 fetchMoreDataConnecter함수를 데이터를 가지고있는 자식 컴포넌트로 보내준다. // AppHome.t..

입사 후 나의 첫번째 태스크는 관리자 페이지였다. 유저가 우리들인만큼 ui는 크게 신경쓰지않아도 되었고 사용감에대한 피드백도 바로바로 들을 수 있어 비교적 쉬운 업무이다. 클래스형 컴포넌트로 개발된 기존 사이트에서 페이지 몇개를 추가하는 작업이어서 이번 기회에 나도 클래스형과 친해질 수 있었다. 사실 기본적인 crud업무라 크게 어려운 점 없이(훅을 사용하지않는 점, 타입스크립트를 사용 한점에서 적응하느라 초반 조금 어려움이있었음) 그 외엔 모두 괜찮았지만, 그 중에서도 몇 부분들을 기록해볼까한다. 1. 배열 복사, splice사용해 x버튼 누르면 데이터 삭제해주기 유저가 입력한 차량 코드와 연식을 서버로 보내주어야한다. 이때 입력된 차량코드에 해당하는 연식을 뱉어주는 api를 연식조회 버튼에 붙여주었다..

현재 작업 중인 페이지에서 테이블의 데이터를 누르면 오른쪽에서 캘린더를 가지고있는 바가 스르륵 열리도록 만들어줘야한다. 스르륵 띄워주기.... 이 작업이 왜이렇게 잘 안되는지!! 꽤 오랜시간 잡고있다가 결국 해결하였다ㅎㅎ transition을 사용하는데, 그럴려면 조건이 일치할때 왼쪽 캘린더를 오픈하는것이 아니고, 캘린더는 항상 띄워주되 width를 0으로 만들어 화면에선 안보이도록 해준다. 그리고 테이블에서 데이터 클릭 시 width를 바꿔준다. // 왼쪽 구역의 너비 width: ${props => props.showRight ? 'calc(100% - 430px)' : '100%'}; // 오른쪽 구역의 너비 width: ${props => props.showRight ? '430px' : '0px..

카카오 map api https://apis.map.kakao.com/ 1. 지도 가져오기 function Map({carId, tripId}) { var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 return ( ); } const Container = styled.div`..

9월이라니..! 2021년이 시작한게 엊그제 같은데! 9월의 시작은 페이지네이션과 함께 하였다. 사실 무한 스크롤을 구현하다가 생각처럼 잘 안되어서 페이징 처리로 바꾸었다. (그래봤자 원리는 비슷할테지만🤔) 페이지네이션 라이브러리를 사용해 프론트에서 페이징 처리를 해주는 작업을하였다. 앤트디자인 페이지네이션을 사용하였고, api설명이 잘되어있어서 사용하는데 비교적 쉬운편이다. (???) api통신 후 가져온 데이터를 tempList에 담고, total은 tempList의 길이로 정해주었다. 그리고 또 tempList를 10개로 잘라 temp에 담아주고 tempList를 dataSend로 넣어준다. const getList1 = () => { setActivate(1) postActions.getWarni..