ASP.NET core 공부 - 1/24

1. C# 프로젝트 구조

Core - Infrastructure - UI

Core : entities(models), enums, extensions
Infrastructure : DB ~ dapper, EFCore(DBcontext), repository
UI : Models, Views, Controllers, program.cs

localhost:xxxx/
라는 페이지에서 시작을 하면 사실은 localhost:xxxx/Home/Index 에서 시작하는 것.
그래서 HomeController 통해 Index도 지정해줄 수 있고,
Views/Home/Index.cshtml 통해 Index 페이지 레이아웃도 정할 수 있음.

2. Index.cshtml 이해하기 - Vue

전체가 프론트엔트다.

위에는 HTML 통해서 화면 레이아웃을 그리고, <div id="app">
아래에는 JS 통해서 프론트 동작을 정의한다. <script>

Vue의 형태에 적응을 해야 함.

var app = new Vue({
      el: "#app",
      data: {
          search: {
              name: ""
          },
          result: [],
      },
      methods: {
          onSearch: function () {},
      },
      mounted() {}
  });

플러터에 비유해서 표현하자면,
el: 부분은 eliment, HTML에서 "app"이라는 id를 가진 것에 해당한다는 뜻
data: 부분은 초기값 선언이고(app.search.name통해 접근 가능)
--> name이라는 변수의 초기값은 빈칸.
methods: 부분은 말 그대로 메소드 정의(app.onSearch(); 통해 실행 가능)
mounted(){} 부분은 initState() 같은 느낌이다.

el, data, methods, mounted는 변수의 개념이 아니라, 프로퍼티 선언을 도와주는 틀이라고 생각하면 될 듯.

3. Index.cshtml 이해하기 - ajaxHelper.get

ajax는 무엇인가?
우리는 url을 통해 여러 정보를 주고받을 수 있다. 근데 항상 url접근하고 정보를 주고받고 하면 복잡하기도 하고 길기도 하고..
따라서 변수 하나에 내가 소통하고 싶은 url을 넣어서, 그 변수를 통해 통신을 하는 것이다.
신기한 사실, REST API도 ajax다. rest는 개념이다.
암튼, 그래서 여기선 ajaxHelper 통해서 api 통신 함.

onSearch 메소드 실행하면, 매개변수 없고,
this는 상위 객체인 app = new Vue 받음. 결국 $app은 지금 동작하는 app을 받은 객체.
로딩화면을 보여주고, api/test/GetWorkDataList?name= 라는 url 통해서 get을 실행.
우리 아까 위해서 name="" 로 초기값 지정해준 것 기억나나? 여기서 쓰임.
만약 성공하면 받은 ajaxData를 result에 넣어줌. 물론 로딩화면도 꺼주고.

그렇게 하면 DB에 있는 정보 조회 가능하다!!

onSearch는 "조회" 버튼을 눌렀을 때, 그리고 초기에 실행해준다.

접속했을 때 잘 적용되는 것을 볼 수 있다.

4. index.cshtml 이해하기 - 입력값 받기

폼에서 데이터를 받아서 DB에 그 데이터를 넘겨주고자 한다.

단순 값 입력은 input을 통해 해결 가능하다. type을 통해 어떤 값을 받을 것인지를 지정해 줄 수 있다.
v-model은 Vue에 정의되어 있는 것들을 토대로 값을 대입해준다.
class는 우리가 아는 그 클래스가 아니라 style sheet를 의미한다. 뭐 여기선 폼 형태니까..

button도 class 통해 형태 지정해줄 수 있고, v-on:click 통해 클릭 시 동작을 지정해줄 수 있다. 태그 사이에는 buttonText 값을 받는다.

5. index.cshtml 이해하기 - DB 값 출력하기

여러분은 지금 회사 DB로 장난치는 인턴들을 보고 계십니다.

암튼, 이렇게 DB에서 가져온 데이터를 보여주기 위해서는 .. 어떻게 하는게 좋을까?

우리는 카드 내부에 테이블을 만들어서 보여주기로 했다.

아까 onSearch 통해 찾은 값들을 result 값에 넣은 것 기억나나?
v-for="(item, index) in result" 통해 모든 값을 가져와서 보여주기로 한다.
<th>는 table header 로 위의 값, <td>는 table data로 내용을 의미한다.

HTML 내부에서 객체를 가져오기 위해 {{ }} 처리를 하고 item과 관련된 프로퍼티를 출력해준다.