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) 설정
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 : 로그인을 해야지만 콘텐츠를 볼 수 있는 구조
테스트 페이지 :
'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)
라우트는 sammyjs를 사용합니다.
이 프로젝트의 성격상 최대한 기본기능만 넣으려고 한 것이라 다른 라이브러리를 사용하지 않았습니다.
2-2. 백엔드(Back-End)
TestController : 테스트용 컨트롤러
이 프로젝트는 인증정보를 저장하는 것이 목표가 아니기 때문에 테스트용으로만 사용되는 컨트롤러 들입니다.
3. 실행구조
'index.html'가 웹 진입점입니다.
'index.html'에서 'app.js'를 로드하여 'Sammy 라우트'를 생성합니다.
라우트 설정의 루트는 기본 프로젝트는 'Home'페이지, 어드민 프로젝트는 'SignIn'페이지로 되어 있습니다.
|
1
2
3
4
5 |
this.get(FS_Url.SignIn, function ()
{
//객체 생성
GlobalStatic.Page_Now = new SignIn();
}); |
cs |
index.html -> Sammy 라우트 생성(app.js) -> 루트로 이동
3-1. 'index.html' 규칙
'divMain' div는 반드시 포함되어야 합니다.
전역변수 'DivMain'는 dom이 로드되자마자 'divMain'을 찾아 넣어 줍니다.
예>
|
1
2
3
4 |
$(document).ready(function () {
//메인 객체
DivMain = $("#divMain");
}); |
cs |
3-2. app.js 규칙
라우트는 최소한의 기능만 수행해야 합니다.
라우트에서 페이지 클래스를 생성하여 'GlobalStatic.Page_Now'에 넣습니다.
예>
|
1
2
3
4
5 |
this.get(FS_Url.SignUp, function ()
{
//객체 생성
GlobalStatic.Page_Now = new SignUp();
}); |
cs |
3-3. 페이지 클래스 규칙
생성자는 'GlobalStatic.PageType_Now'에 자신의 구분용 타입(PageType.js)을 대입합니다.
생성자에서 화면을 구성합니다.
예>
|
1
2
3
4
5
6 |
function Home() {
GlobalStatic.PageType_Now = PageType.Home;
//홈 인터페이스
DivMain.load("/pages/Home.html");
} |
cs |
마무리
완성된 샘플 : Github dang-gun - SPA_NetCore_Foundation/SPA_NetCore_Foundation/SPA_NetCore_Foundation01/
위에서도 말했지만 SPA사이트의 구성은 만드는 사람 마음입니다.
이 시리즈가 뒤로 갈수록 거의 그대로 사용할 수 있는 형태가 되긴 하겠지만 각각을 이해하고 간다면 더욱 활용하기가 좋을 것입니다.
