I can do it(Feat. DEV)

어느 날 어김없이 유지보수 요청이 들어왔음. 예약목록이 있는데 날짜별로 정렬할 수 있도록 만들어달라 함. 먼저 대관일시를 클릭했을 때 오름차순인지 내림차순인지 알 수 있도록 표시(▲, ▼)를 추가 후 링크처리 함. //대관일시 컬럼 sortRentDate(e)}>//클릭 시 로직 추가 대관일시 {sortStatus === "up" ? "▲" : sortStatus === "down" ? "▼" : ""} 처리 후 정렬 상태를 관리할 변수를 추가해줌. const [sortStatus, setSortStatus] = useState(null); //대관일시 정렬 상태 클릭했을 때 실행되는 함수임. //대관일시 클릭했을 때 const sortRentDate = e => { //대관일시별 정렬기능 e.preve..

스펙 : Spring Boot, h2 db, jsp h2 db에 아래 표와 같이 관리자 데이터를 insert 후 id password admin 123 Spring security를 사용해서 로그인 로직 구현 중 로그인을 했는데 There is no PasswordEncoder mapped for the id "null"와 같은 에러를 만났음. 바로 갓글에 검색. 여러 블로그를 찾아보고 종합한 결과 필자는 security 설정에 password encoding 설정을 하지 않았고, 비밀번호가 텍스트 형태라서 에러가 났음. 🌈해결방법 1. db에 저장된 pw앞에 prefix를 붙여서 저장하는 것 혹은 password를 비교할 때 prefix를 붙여주는 것. //db insert문 insert into ex..

앞서 팝업창 띄우기까지 했지만 기능 추가 요청이 들어옴. 바로바로 하루 동안 보지 않기 기능! 개발엔 안 되는 게 없다는 마인드를 가진(x) 가지려고 노력하는 나. 바로 기능 개발 시작. 예전에 만들어봤었던 방식으로 진행하겠음. 코드는 2022.10.06 - [개발자 모드/React] - React 팝업창 띄우기(1) React 팝업창 띄우기(1) 관리자 화면에서 등록한 팝업창을 사용자 화면에서 띄우기 위해 팝업 컴포넌트를 만들어서 작업하던 중 다른 방법이 없을까? 해서 갓글에 검색. 찾아보니 React-Modal이란 라이브러리 발견. 여기서 precious-value.tistory.com 전에 만들어놓은 팝업창 그대로 사용하겠음. 먼저 위 사진처럼 하루 동안 보지 않기 버튼을 추가해줌. //하루동안 보..

관리자 화면에서 등록한 팝업창을 사용자 화면에서 띄우기 위해 팝업 컴포넌트를 만들어서 작업하던 중 다른 방법이 없을까? 해서 갓글에 검색. 찾아보니 React-Modal이란 라이브러리 발견. 여기서 잠깐. ※ Modal 이란? - 특정 이벤트에서 확인하거나 특정 이벤트를 날려주지 않으면 원래 하던 작업을 계속 이어갈 수 없는 새창. - 특정 이벤트에서 새창을 띄웠을 때 원래 하던 작업을 계속 이어갈 수 있게 해놓은 것이 모달리스라는 반대 개념도 있음. 이거다 싶어서 Modal을 사용해서 팝업창을 만드는데 불편하거나 안맞는 점들이 있음. 1. 필자는 원래 쓰던 디자인을 Modal에 맞게 변경해야 함. 2. 팝업이 뜨더라도 원래 하던 작업을 계속 할 수 있도록 하고 싶음. 3. 검증이 필요. 4. 보통 re..

비가 주륵주륵 오는 걸 감상하며 평화롭게 프로젝트 프론트단을 만들던 중 리액트에서 스크립트 기능이 필요해짐. 예를 들어 상단 메뉴에 마우스를 올렸을 때 숨겨진 서브 메뉴를 보여주는 기능, 이런 탭 클릭했을 때 임팩트주는 기능 등등... 동적으로 style 입혀주는데 스크립트로 원래 하던것처럼 document.getElementById(id).style.color = 'red'; 이런 식으로 ID 값을 추적하는 방식으로 할려고 했으나 생각해보니 리액트는 다른 방법이 있을 것 같아서 갓글에 검색. 검색해보니 useState라는 리액트 훅으로 상태를 사용해 동적으로 style을 변경할 수 있다고 함. 위의 공지사항, Q&A 탭을 선택했을 때 style을 변경하는 기능을 만들어 봄. import React, {..

list 화면에서 컴포넌트를 사용해 detail 화면으로 이동하는데 url에 파라미터를 추가하는 방식으로 진행했었음. to={//기존방식 "/list/detail/" + list.id + "?page=" +//파라미터들(검색 조건) currentPage + "&startDay=" + encodeURI(startDay) + "&endDay=" + encodeURI(endDay) } BUT 시각적으로 파라미터를 주렁주렁 달고 있으니 복잡해보이고 URL도 길어지는 등 별로라고 생각됨. 갓글에 검색해 보니 Router Props란 좋은 기능이 있었음. 📢참조 https://velog.io/@sham/Router-Props-link%EB%A1%9C-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94..