IT Dev Log

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - display and edit user 이번에는 개별 사용자에 정보를 보여주고 필요에 따라서 수정하는 페이지를 생성한다. 사용자 페이지를 위한 폴더와 파일을 생성한다. 그리고 App.js 에서 /user/{userID} 요청에 대해서 포워딩 해주도록 설정한다. 결과 화면: 이제 부터는 사용자 정보를 보여는 페이지를 만든다. 첫번째로 페이지 타이틀 만들기. 결과 화면 다음은 show / update 영역을 1:2로 분할하고, show에서는 이미지를 포함한 디테일 정보가 표시되고 update 영역에서 정보를 수정해서 변경할수 있게 할 예정이다. 그럼 flex를 이용해서 화면 분할 부터 시작한다. userShow 와 userUpdate ..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - Material UI Table tutorial 이번 포스팅에서는 별도의 페이지를 이용해서 사용자 정보를 보여주도록 한다. Material UI 테이블 만들기 제일 먼저 userList 를 보여줄 페이지를 생성해 준다. pages 폴더 밑에 userList.jsx 와 userList.css 파일을 생성한다. userList.jsx 에서 기본 functional 컴포넌트를 만들어주고 userList.css 를 import 시켜준다. 지금까지는 home 페이지하나를 가지고 작업했지만 userList 페이지를 추가해주면 url 에 따라서 다른 페이지를 보여주어야한다. react 에서는 이런 페이지 전환을 위해서 react-router-d..

2021.11.11 - [REACT/Admin Dashboard - project #1] - React Admin - 4. featured info 컨포넌트 만들기 2021.11.11 - [REACT/Admin Dashboard - project #1] - React Admin - 5. Chart 컴포넌트 만들기 React Admin - 6. User Info 컴포넌트 만들기 다음은 신규 사용자 정보를 표시할 위젯을 만들어 화면에 표시할 예정이다. 사이즈가 다른 두가지 타입의 위젯을 통해서 사용자 정보를 화면에 보여준다. User Information 컴포넌트 준비하기 chart 아래쪽에 homeWidgets 만들어 추가한다. 작은 위젯, 큰 위젯 두개를 그래프 아래에 추가한다. 먼저 위젯을 위한 컴포넌..