I T H

React + node.js 프로젝트 myscheduleProejct에서 frontend쪽의 로직에 대한 설명은 이미 작성하였다. 이번 프로젝트는 백앤드 로직 중에서 DB만 mysql로 수정해서 작성해 보도록 하겠다. - Frontend 로직은 아래 링크 참고 https://devth.tistory.com/92 [MySchedule project] 1. frontend - 타입스크립트 초기 환경설정 - myschedule project는 나의 스케줄에 관련된 모든 데이터를 관리하는 프로젝트임 - frontend 환경은 react with typeScript, backend 환경은 node.js, db는 mongoDB를 사용할 예정이다. 1. 먼저 프로젝트 이름을 정하 devth.tistory.com [ ..

관리자 페이지의 로그에 관련된 페이지를 작성했다. 로그 관리에 대한 주제는 여러가지가 있지만, 그중에서 로그인이력을 볼수 있는 부분을 구현했다. 관리자가 로그인한 이력을 볼수있고, 조건을 아이디와 시작날짜 또는 종료날짜로 주어서 원하는 데이터를 출력할수 있게 하였다. 사용 라이브러리는 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..

이번 시간에는 styled components를 사용해서 Footer 영역을 간단하게 작성하겠다. styled components는 "Css in Js"에 속한다. 그렇다면 css in js란 무엇인가? 스타일 코드를 작성할때 css파일에 작성을 하는것이 아닌 button과 같은 컴포넌트에 삽입하는 것으로, javaScript 또는 TypeScript 환경에서 스타일을 작성할 수 있다. jsx또한 javaScript안에 html이 있는 문법처럼 Css in Js 또한 javaScript안에 css가 있다고 생각하면 쉽게 이해할 수 있다. - styled components 설치와 import는 작성된 부분이 있어서 아래부분을 참고하면 된다. https://devth.tistory.com/103 { ret..