ASP .Net Core 3.1 - Razor

안녕하세요 씨앤텍 시스템즈 최홍준 연구원입니다.

이번 포스트는 ASP. Net Core 3.1 버전 MVC패턴 다음 포스터인

Razor 기능에 대한 설명입니다.

---

Razor는 컨트롤러 및 뷰를 사용하는 것보다 더 쉽고 생산적으로 코딩 페이지에

초점을 맞춘 방식입니다.

---

* Razor문법은 @로 시작하는 형태입니다.

---

[1. Controller에 RazorDemoController.cs 생성]

그림1. Controller - 추가 - 컨트롤러 선택

그림2. MVC 컨트롤러 - 비어있음 선택 후 추가

그림3. 이름을 RazorDemoController로 변경 후 추가버튼 클릭

그림4. RazorDemoController.cs 파일 생성 완료

위와 같이 Controller를 생성이 완료가 끝났다면 아래와 같이 기본적으로 Index()가 생성됩니다.

    public class RazorDemo1Controller : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }

---

[2. Views에 RazorDemo폴더 생성 및 Demo1.cshtml 생성]

그림.5 Views - 추가 - 새 폴더 선택

그림.6 RazorDemo 폴더생성

그림7. RazorDemo - 추가 - 보기 선택

그림8. Demo1로 변경 후 추가버튼 선택

그림9. Demo1.cshtml 파일 초창기 내용

---

[3. RazorDemoController.cs에 View 선언 및 실행]

그림10. RazorDemoController에 Demo1 View 선언

        public IActionResult Demo1()
        {
            return View();
        }

이렇게 작성 후 CTRL + F5번을 눌러 실행 후

그림11. Razor Demo1 경로

localhost:44346/RazorDemo/Demo1을 입력 후 들어가 주면

그림12. RazorDemo1 View 실행

위와 같은 화면이 뜨면 정상적으로 구동하는 중입니다.

---

[4. Demo1.cshtml에 Razor 코드 작성]

Razor 사용하는 방법은 앞에서 언급한 바와 같이 @를 붙여야 합니다. 간단한 Razor 코드를 작성을 한다면 다음과 같습니다.

그림13. Demo1 Razor 코드

<h1>레이저 표현식 (구문) 학습</h1>

<h2>변수 선언 및 주석</h2>
@{ var sum = 1234; }
@{
    var msg = "안녕하세요";
    var file = @"C:\";
    var quote = @"안녕하세요. ""ASP.NET Core"" ";
}
<h2>인라인 표현식</h2>
<p>합계: @sum, 메시지: @msg</p>
<p>경로: @file, @quote</p>

<div>
    이메일: aspnet@dotnetkorea.com, a@("@")a.com
</div>

<div>
    트위터: @@aspnet
</div>

<h2>API 출력</h2>
<div>
    @DateTime.Now.ToString();
</div>

이렇게 입력 후 다시 실행을 해본 결과

그림14. Demo1 페이지 Razor 작성 후 화면

화면에 잘 표시가 되는 걸 보실 수 있습니다. 여기서 중요한 부분은 

그림15. Demo1 Razor 사용법

위와 같이 @이를 출력하는 방법입니다. 이메일 같은 경우 @가 들어가는데 표현할 수 있는 방법이 2가지가 있습니다.

---

1. Html 코드에서 자체적으로 Razor를 이용하여 출력하기

2. Razor를 무력화 하기

---

첫 번째로는 Html 코드에서 자체적으로 Razor를 사용하는 방법입니다. 맨 처음 줄과 같이

@() 이러한 형태로 작성을 했습니다.

코드 중에서는 @() 방법을 저 부분만 사용하였는데 @{}와 @()의 큰 차이점은 코드가 한 줄이냐 여러 줄이냐에 따라

영역을 잡아주는 괄호가 달라지는 이유입니다.

 

두 번째로는 Razor를 무력화입니다.

@ 하나만 사용한다면 Razor형태이겠지만 @@를 사용한다면 Razor형태가 자신의 형태가 아니라고 보고 해당 코드는

무시하게 됩니다. 이거와 같은 방식은 C/C++ 등 C 기반의 코드들이 \를 출력할 때

\\를 쓰는 것과 같다고 보시면 됩니다.

 

만약 트위터: @aspnet만 사용한다면 

그림16. Razor 에러

다음과 같이 에러가 발생합니다 됩니다. @aspnet은 Razor형태이고 괄호가 없는 상태여서 Razor에서는 변수로 인식하여

Razor 변수를 찾지만 해당 변수는 위 코드에서 선언하지 않았기 때문에

찾을 수 없다 ( 컨텍스트에 없습니다. )라고 인식하게 됩니다.

 

---

[5. Demo2.cshtml 작성 후 if문 / for문 사용 및 인코딩 출력 ]

이번에는 Razor에 if문, for문, 인코딩 출력을 해보겠습니다.

Demo1.cshtml을 만들었던 방법과 동일하게 Demo2.cshtml를 만든 후 아래 코드를 작성합니다.

 

@{
    Layout = null;
}

<h2>조건문과 반복문</h2>
@{ 
    int age = 21;
}
<div>
    나이 : @age
    (
    @if(age%2 == 0)
    {
        <span>짝수</span> <text>나이</text>
    }
    else
    {
        <text>홀수</text> @:나이
    }
    )
</div>
<div>
    @for(int i=0;i<10;i++)
    {
        <span>@i&nbsp;</span>
    }
</div>

<h2>인코딩 출력</h2>
@{ 
    var js = "<script>document.write('레이저 표현식');</script>";
}
<div>
    @js, @Html.Raw(js)
</div>

<h2>경로 해결</h2>
<a href="~/Home/Index">Home</a>

그림17. Demo2.cshtml 작성

위에서부터 if문 그다음은 for문 그다음은 인코딩 출력에 해당합니다.

if문 구분은 다른 언어와 마찬가지로 if(조건)을 사용합니다.

위 코드를 분석하자면 age를 2로 나눈 나머지가 0이면 짝수 나이라는 텍스트와 0이 아니면

홀수 나이라는 텍스트를 출력하는 간다한 코드입니다.

 

그다음 for문에서는 0부터 10까지 1씩 증가하면서 하나씩 출력하는 코드입니다.

이것 또한 다른 언어와 같이 형태가 for(변수,조건,증감 연산자) 입니다.

 

그다음은 인코딩 출력입니다.

Script부분을 Razor변수에 저장을 하고 해당 부분을 출력할 때에는

Html.Raw(인코딩할 문자)를 사용합니다.

다음과 같이 js변수를 그냥 출력하게 된다면

그림18. 인코딩

위 사진과 같이 코드가 그대로 출력이 됩니다.

---

[6. 확장 태그 사용하기 ]

Razor에서는 확장 태그를 지원합니다.

다른 확장태는 MSDN 공식 문서에서 제공합니다.

https://docs.microsoft.com/ko-kr/aspnet/core/mvc/views/tag-helpers/authoring?view=aspnetcore-3.1

ASP.NET Core의 작성자 태그 도우미

확장 태그 사용법은 다음과 같습니다. @addTagHelper [namespace], [assembly]

[namespace]는 태그에 대한 명칭이고

[assembly]는 태그 도우미의 정의입니다.

아래 코드는 모든 태의에 asp-* 속성 확장 태그입니다.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

해당 확장 태그를 선언해주고 다음과 같이 Demo2.cshtml 마지막에 코드를 작성해줍니다. 그리고 실행

<h2>경로 해결</h2>
<a href="~/Home/Index">Home</a>
<br />
<a asp-controller="Home" asp-action="Index">Home</a>

그림 18. 경로 실행

다음과 같이 경로 해결 밑에 Home이라는 A태그가 2개 생성됩니다.

해당 Home들을 눌러주면 경로가 각각 다릅니다.

 

첫 번째로는 A태그에 href속성으로 만든 링크입니다.

그림 19. a태그 href속성 이용

이렇게 경로가 /Home/Index라는 게 노출이 됩니다.

 

하지만 2번째 확장 태그를 이용하면

그림20. a태그 확장태그 이용

/Home/Index라는 경로 없이 맨 처음 실행했을 때 나온 경로만 나옵니다.

보안상으로도 href 속성보단 확장 태그를 이용하는 게 좋습니다.

 

---

*** 보안상 Razor를 사용하면 좋은 이유 ***

Razor가 자바스크립트보다 보안상으로 좋은 이유는

저희가 만든 Demo1, Demo2 페이지를 크롬에서 F12번을 눌러 코드를 확인해 보면 다음과 같습니다.

 

그림21. Demo1 페이지 Elements

그림22. Demo1 Sources화면

그림23. Demo2 Elements

그림24. Demo2 Source

이와 같이 해당 Razor코드는 빌드를 한 순간 HTML 코드로 변환시키고

외부 사용자가 내용을 보지 못한 형태로 바꿉니다.

Demo2 경로 해결에도 보면 확장 태그를 이용하였지만 실제 보여주는 내용은 HTML 코드로 변환하여

Home에 Index의 경로 즉 / 경로로 변환하여 보여줍니다.

이러한 이유로 Razor를 사용하여 자바스크립트를 이용할 코드를 대신하여 시큐리코딩을 하여

더 안전한 홈페이지를 만들 수 있습니다.

 

감사합니다.

 

 

 

 

Written by 기술연구소 최홍준 연구원