[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(1) - 기초

SPA(Sigle Page Applications)를 구현하는 것은 기획한 사람 마음입니다.

이 포스팅을 읽기 전에 참고할만한 내용이 있습니다.

참고 : Michael S. Mikowski - Do you really want an SPA framework?

 

이 포스팅은 제가 SPA를 어떻게 구성했는지를 설명하고 공유하기 위한 것입니다.

[ASP.NET Core] 빈 프로젝트 세팅 (1) - 'index.html'을 시작페이지로 설정하기

[ASP.NET Core] 빈 프로젝트 세팅 (2) - WebAPI 설정

 

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(1) - 기초

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(2) - Ajax공통 기능,  데이터 바인드 처리

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(3) - API 결과 공통 처리

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(4) - 인증 기능 추가

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(5) - 스웨거(Swagger) 설정

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(6) - EF(Entity Framework)와 코드 퍼스트(Code First)

1. 프로젝트 구조

프로젝트 세팅

.NET Core 2.2

Visual Studio 2019 16.2.0 Preview 3.0

ASP.NET

 

웹 세팅

jquery 3.4.1

js router : sammyjs 0.7.6 (http://sammyjs.org/ , https://github.com/quirkey/sammy)

 

프로젝트 소스 : https://github.com/dang-gun/SPA_NetCore_Foundation

SPA_NetCore_Foundation : 일반적인 홈페이지 구조

SPA_NetCore_Foundation_Admin : 로그인을 해야지만 콘텐츠를 볼 수 있는 구조

테스트 페이지 : 

SPA_NetCore_Foundation

SPA_NetCore_Foundation_Admin

'ASP.NET' 프로젝트를 빈 프로젝트로 생성하여 세팅한 프로젝트입니다.

참고 :[ASP.NET Core] 빈 프로젝트 세팅 (1) - 'index.html'을 시작페이지로 설정하기 , [ASP.NET Core] 빈 프로젝트 세팅 (2) - WebAPI 설정

 

다른 추가기능을 쓰지 않기 위해 사인인을 위해 호출하는 구조까지만 구현되어 있습니다.

사인인 테스트 아이디 : test

사인인 테스트 비밀번호 : test

 

인증정보를 관리하지 않아서 로그인 후 새로 고침을 하게 되면 인증정보가 초기화됩니다.

2. 파일구조

html, css, js가 모두 한 폴더에 있습니다.

요즘은 거의 이 3가지를 한 번에 컨트롤하는 경우가 많습니다.

그나마 좀 세분화하여 작업하는 경우라면 'html, css'와 'html, js' 이렇게 따로 다루는 정도죠.

 

결국 전통적인 방식으로 이 세 가지 폴더를 나눠 관리하면 같은 구조의 폴더를 3개 만들어야 합니다.

파일 관리도 힘들고 연결된 파일을 찾는 것도 오래 걸리게 되죠.

그래서 저는 그냥 한 폴더에 몰아놓는 방식을 사용합니다.

(물론 프로젝트가 파트별로 분업이 잘될 거 같으면 전통적인 방식을 그대로 사용합니다.)

레이아웃은 아래와 같습니다.

Page.html

2-1. 프론트 엔드(Front-End)

'jquery'를 사용합니다.

라우트는 sammyjs를 사용합니다.

 

이 프로젝트의 성격상 최대한 기본기능만 넣으려고 한 것이라 다른 라이브러리를 사용하지 않았습니다.

2-2. 백엔드(Back-End)

SignController : 사인 관련 처리

TestController : 테스트용 컨트롤러

 

이 프로젝트는 인증정보를 저장하는 것이 목표가 아니기 때문에 테스트용으로만 사용되는 컨트롤러 들입니다.

 

 

3. 실행구조

'index.html'가 웹 진입점입니다.

'index.html'에서 'app.js'를 로드하여 'Sammy 라우트'를 생성합니다.

라우트 설정의 루트는 기본 프로젝트는 'Home'페이지, 어드민 프로젝트는 'SignIn'페이지로 되어 있습니다.

 

this.get(FS_Url.SignIn, function ()
{
    //객체 생성
    GlobalStatic.Page_Now = new SignIn();
});

 

 

index.html -> Sammy 라우트 생성(app.js) -> 루트로 이동

 

3-1. 'index.html' 규칙

'divMain' div는 반드시 포함되어야 합니다.

전역변수 'DivMain'는 dom이 로드되자마자 'divMain'을 찾아 넣어 줍니다.

 

예>

$(document).ready(function () {
    //메인 객체
    DivMain = $("#divMain");
});

 

 

3-2. app.js 규칙

라우트는 최소한의 기능만 수행해야 합니다.

라우트에서 페이지 클래스를 생성하여 'GlobalStatic.Page_Now'에 넣습니다.

 

예>

this.get(FS_Url.SignUp, function ()
{
    //객체 생성
    GlobalStatic.Page_Now = new SignUp();
});

3-3. 페이지 클래스 규칙

생성자는 'GlobalStatic.PageType_Now'에 자신의 구분용 타입(PageType.js)을 대입합니다.

 

생성자에서 화면을 구성합니다.

 

예>

function Home() {
    GlobalStatic.PageType_Now = PageType.Home;
 
    //홈 인터페이스
    DivMain.load("/pages/Home.html");
}

 

 

 

마무리

완성된 샘플 : Github dang-gun - SPA_NetCore_Foundation/SPA_NetCore_Foundation/SPA_NetCore_Foundation01/

위에서도 말했지만 SPA사이트의 구성은 만드는 사람 마음입니다.

이 시리즈가 뒤로 갈수록 거의 그대로 사용할 수 있는 형태가 되긴 하겠지만 각각을 이해하고 간다면 더욱 활용하기가 좋을 것입니다.