I T H

관리자 페이지의 로그에 관련된 페이지를 작성했다. 로그 관리에 대한 주제는 여러가지가 있지만, 그중에서 로그인이력을 볼수 있는 부분을 구현했다. 관리자가 로그인한 이력을 볼수있고, 조건을 아이디와 시작날짜 또는 종료날짜로 주어서 원하는 데이터를 출력할수 있게 하였다. 사용 라이브러리는 react-datepicker와 moment.js, mui grid를 사용했다. 해당 라이브러리들은 그동안의 챕터에서 설치하는 부분을 작성했으므로, 이번 챕터에서는 그부분에 대한 설명은 생략하도록 하겠다. Frontend [ src / pages / LogManagement / index.tsx ] - 데이터 조회 조건(관리자로부터 입력을 받게 되는 input의 값)에 대한 부분을 작성해준다. 아이디, 시작날짜, 종료날짜가..

레이아웃에서 header(Navbar)에 해당하는 부분에서 pc버전이 아닌 모바일화면에서 볼수 있는 화면 UI를 작성하고자 한다. 토글 기능을 사용해서 화면이 작아질때는 특정 아이콘이 생기면서 Navbar 부분이 사라지고, 다시 아이콘을 클릭하면 모바일에서만 볼수있는 navbar부분이 생기게 구현했다. 추가적으로 tooltip기능을 이용해서 보충설명에 해당하는 간단한 기능도 넣었다. [ 툴팁(tooltip) 사용하기 ] - 툴팁은 말풍선 모양처럼 생긴 그래픽 사용자 인터페이스 요소이다. - cursor를 pointer할때 동작하게 된다. - 참고자료는 아래 링크를 클릭하면 볼수 있다. https://www.w3schools.com/css/css_tooltip.asp CSS Tooltip W3Schools..

엑셀을 다운로드 할수 있도록 해주는 라이브러리 exceljs는 db에 저장된 데이터들을 엑셀로 다운로드 받고싶거나 엑셀로 출력된 결과물을 원할때 사용할 수 있는 방법이다. 다운로드에 대한 기능은 백앤드인 node.js에서 진행했고, 원하는 데이터에 따라 다르게 다운로드 될수 있도록 조건 파라미터도 받도록 했다. - 다운로드 구현할 페이지는 관리자의 사용자데이터 엑셀조회 화면에서 진행하도록 하겠다. Backend - node.js에서 exceljs를 설치 및 다운로드까지 로직을 한 후에, frontend에서 간단하게 요청 파라미터만 보내도록 구현하겠습니다. [ exceljs 설치 ] npm install exceljs [ exceljs 불러오기 ] const ExcelJS = require("exceljs..

- react-datepicker는 버튼 클릭시 아래와 같이 달력을 화면에 보이게 하고, 날짜를 선택하면 적용시킬 수 있도록 도와주는 라이브러리다. - 달력을 쉽게 커스텀해서 사용할 수 있는 장점이 있다. [ react-datepicker 참고사이트 ] https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com [ react-datepicker 설치 ] - typescript를 사용한다면 "@types"를 넣어서 설치해준다. npm install react-datepicker npm install --save-dev @types/react-datepicker [ import / 적용하기 ] - 설치한 reac..

엑셀 다운로드 코드 작업중에 파일이름을 추출하는 함수 부분에서 다음과 같은 에러가 발생하였다. - 바로 이부분에서 에러가 나서 response를 console.log에 찍어보았다. - 백앤드 로직에서는 아래와 같이 넣어주고 있지만, console.log에 Content-Disposition이 보이지 않는다. [ 해결 방법 ] - 방법은 간단했다. headers에 content-disposition을 사용하겠다는 코드를 추가해주면 된다. res.header("Access-Control-Expose-Headers", "Content-Disposition"); [결과화면] - headers에 content-disposition이 잘 들어옴. - console.log화면 - network 화면