IT Dev Log

리액트 기초 강좌, 두번째 1. 리액트 기본 구조 이번 포스팅에서는 리액트에 기본 구조에 대한 설명이다. 먼저 리엑트 애플리케이션의 폴더와 파일들을 살펴보자. 리액트는 3개 기본 폴더를 가지고 있다. - node_modules : javascript 패키지/라이브러리가 저장 - public: html / image 와 같은 컴파일이 필요 없는 파일이 저장 - src : javascript 소스 파일이 저장 public 폴더를 보면 index.html 파일만 존재한다. 리액트의 기본 템플릿이 되는 파일이며, 리액트는 ID 가 root 인 컴포넌트를 찾아서 화면 구성을 다시한다. 이 부분을 Injection 이라고 부르는데, 자세한 내용은 몰라도 , id="root" 인 컴포넌트가 react 에 의해서 대치..

리액트 기초 강좌 1. 리액트를 위한 프로그램 설치 및 환경 설정 리액트 프로그램 개발을 위해서 Visual Studio Code, Node.js, React Developer Tools ( chrome extension ) 을 설치한다. - VS Code : https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, ..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - new product 이번에는 Create 버튼을 클릭하면 새로운 product 을 생성하는 페이지를 만든다. newProduct 생성을 위한 준비 newProduct 에 관련된 폴더 및 파일을 생성한다. 그리고 app.js 에 /newProduct 에 대한 route 정보를 변경한다. newProduct 생성하기 결과 화면

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - product 페이지 product 페이지에서는 product 에 대한 상세 정보를 보고 필요에 따라서 수정할수 있다. product 페이지 준비하기 product 폴더 및 파일을 생성한다. 기본 react functional component 를 만든다. app.js 파일에 product/{id} 에 대한 route 를 업데이트 해준다. 결과 화면 이제 준비 작업이 완료되었다. Product 상세 페이지 및 업데이트 결과화면 Product 페이지에서는 상단에는 상품에 대한 sales 및 제품 정보를 보여주고, 그 밑에 제품 업데이트 기능을 추가한다. TopLeft : product sales for 3months. 챠트를 그리기 ..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - productList 페이지 ProductList 페이지 준비 productList 를 위한 폴더 및 파일 생성하고 기본 react fuctional component 를 생성한다. app.js 에서 product 를 위한 routes 를 설정해 준다. user 와 동일하게 productList, product, newProduct 를 만들어 주고 이번 포스팅에서는 ProductList를 구현한다. /products 링크로 들어같을때 다음과 같이 나오면 준비가 완료된 것이다. ProductList 데이터 테이블 만들기 userList 에 DataGrid 를 참고해서 products 테이블을 만들면 된다. UserList.jsx 와 ..

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - new user 새로운 사용자 등록을 위한 페이지 만들기 사용자 등록을 위한 폴더 및 페이지 생성한다. 이번에 새로운 페이지 생성과 같이 기본 react 컴포넌트를 만들고 css를 import 시킨다. 그리고 app.js 에서 새로운 url 에 대한 Route 를 설정해 준다. 결과 화면 여기까지 나오면 새로운 페이지에 대한 준비가 완료된 것이다. 등록에 필요한 사용자 정보를 입력할 수 있도록 추가한다. newUserForm에 flex를 적용한다. 화면의 크기를 조절해보면 아이템의 갯수가 크기에 따라서 조절되는 것을 확인할 수 있다. flex-wrap: wrap 으로 설정했기 때문에 브라우저 사이즈에 따라서 아이템배열이 달라진다. ..

프로젝트 #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 만들어 추가한다. 작은 위젯, 큰 위젯 두개를 그래프 아래에 추가한다. 먼저 위젯을 위한 컴포넌..

React Admin - 5. Chart 컴포넌트 만들기 이번에는 화면에 그래프를 보여주는 컴포넌트를 추가해보자. 여기서 사용할 라이브러리는 "Recharts" 이다. link : https://recharts.org/en-US/ 자세한 사용법은 공식 홈페이지에서 확인하시고, 간단한 라인그래프를 그리기 위해서 example 에 있는 내용을 바탕으로 그래프를 추가할 예정이다. rechart 라이브러리 설치 chart 컴포넌트를 위해서 chart 폴더와 jsx, css 파일을 생성한다. 기본 react function component 를 생성한다. chart 컴포넌트를 만들었으니 home 페이지 추가해서 정상 동작하는지 확인한다. chart 컴포넌트의 위치를 조금 조절한다. padding / margin ..