.net

컴포넌트 분리const Item = ({item, drag, itemImgObj}) =>{ return( )}export default Item;import Item from './Item';const ItemCollection = ({items,drag, imgArr})=>{ return ( { items.map((item)=>(item.ranking === 0) ?o.id === item.imageId)}/> :null) } )}export default ItemCollection; 이벤트 리스너 생성import Re..

Grid 만들기src/Components에 RankingGrid.js 생성const RankingGrid = ({items, imgArr})=>{ const rankingGrid = []; const cellCollectionTop = []; const cellCollectionMiddle = []; const cellCollectionBottom = []; const cellCollectionWorst = []; const pushCellMarkupToArr = (cellCollection, rankNum, rowLabel)=>{ if(rankNum > 0){ var item = items.find(o=>o.ranking === rankN..

페이지 생성ClientApp/src 디렉터리 아래에 RankItem.js 파일 생성import React, {useState, useEffect} from "react";import MovieImageArr from "./MovieImages";const RankItems = ()=>{ const [items, setItems] = useState([]); const dataType = 1; useEffect(()=>{ fetch(`item/${dataType}`) .then((results)=>{ return results.json(); }) .then(data=>{ setItems(data); ..

Model 생성프로젝트 최상위 디렉터리에 Models 디렉터리를 생성Models 디렉터리에 ItemModel.cs 파일 생성namespace RankingApp.Models{ public class ItemModel { public int Id{get; set;} public string Title{get; set;} public int ImageId{get; set;} public int Ranking{get; set;} public int ItemType{get; set;} }}ItemModel 클래스는 필드로 위 값을 가지게 된다.이때 필드 값이 getter와 setter를 가지도록 설정한다.Controller 생성프로젝..

프로젝트 생성 dotnet new react -o "프로젝트명"위 명령어를 사용해서 React 프로젝트를 생성할 수 있다.-o 뒤에 프로젝트 명을 아웃풋으로 지정한다.React 앱 실행ClientApp 디렉터리에서 React에 필요한 모듈을 설치한다.cd ClientAppnpm iRankingApp 디렉터리 아래에는 C# 프로젝트가 존재한다.ClientApp 디렉터리 아래에는 React 앱이 만들어져 있다.npm startClientApp 디렉터리에서 위 명령어를 사용하면 프론트부분만 실행된다.닷넷 실행전체 프로젝트가 위치한 디렉터리에서 아래 명령어를 실행cd ..dotnet run    출처https://developefeel.tistory.com/41 [React] 리액트 닷넷으로 시작하기.NET 설..