오봉이와 함께하는 개발 블로그

라우터 현재 화면에서 다른 화면으로 전환하는 기능으로 웹 페이지 이동 SPA는 하나의 index.html을 두고 컴포넌트만 바꿔 끼워 동작하기 때문에 어떤 URL로 접속했을 때 어떤 컴포넌트를 렌더링 할지 명시해야 한다. 프레임워크나 라이브러리마다 router에 맞는 문법이 있지만, 어떤 방법으로든 URL을 이동하면 라우터 라이브러리에서 지정한 컴포넌트로 렌더링 { path: '/', 1. /로 이동하면 name: 'home', component: HomeView 2. HomeView 컴포넌트를 렌더링 }, ....

디렉토리 구조 . └── component ├── README.md ├── babel.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── ArticleList.vue │ │ ├── ChildComponent.vue │ │ ├── DataService.vue │ │ ├── HelloWorld.vue │ │ ├── ParentComponent.vue │ │ └── layout │ │ ├── Footer.vue │ │ └── ..

컴포넌트 Multi Page Application 방식의 웹 애플리케이션에서 사용하는 일종의 컴포넌트 개념은 아래와 같이 표현 정확하게 컴포넌트라는 용어를 사용하지는 않지만, 모듈화 되어 컴포넌트를 사용하는 목적은 동일 // jsp // Thymeleaf Single Page Application은 컴포넌트를 통해 화면을 렌더링 한다. 각 컴포넌트는 목적에 맞게 화면을 렌더링 하기 위한 코드들과 상태를 관리하는 코드가 존재해야 한다. SPA에서 컴포넌트는 생산성, 유지보수, 확장성, 가독성, 재사용성 등의 이유로 사용 객체지향에서 기능과 역할에 따라 함수를 나누고, 클래스를 분리하는 이유와 같다. 각 기능에 맞게 컴포넌트를 분리해서 설계하는 것이 중요 컴포넌트는 용도에 따라 전역-지역 컴포넌트가 있고 관..

개요 회사에서 새로운 프로젝트에 투입되어 Vue와 같은 SPA에 대해 공부할 필요성이 생겨 공부한 내용을 작성하려 한다. 개념적인 부분만 다루기 때문에 SEO나 Next.js, Nuxt.js 등과 같은 언어적인 부분은 다루지 않고 개념만 짚어보려 한다. MPA(Multi Page Application) 글의 주제는 SPA지만 SPA를 알기 위해서는 먼저 MPA부터 알아야 한다고 생각하기 때문에 MPA부터 간단하게 설명하려 한다. MPA는 우리가 보통 생각하는 MVC 방식을 떠올리면 된다. 사용자가 웹 페이지를 이동할 때(새로운 페이지를 요청할 때 혹은 새로고침) 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드 되어 사용자에게 보여준다. MPA는 Server Side Re..

Router MPA(Multiple Page Application) 기존 웹페이지 작동 원리 Server Side Rendering 사용자가 다른 페이지로 이동할 때( 태그 사용) 마다 새로운 HTML을 받아오고 페이지를 로딩할 때 마다 서버에서 리소스 전달 받아 해석한 뒤 화면에 출력 사용자에게 보이는 화면을 서버에서 준비하여 전달 웹 출력 내용이 많은 경우 새로운 하면을 보여줄 때 마다 서버 측에서 모든 뷰를 준비 성능 문제 발생 사용하고 있는 상태 유지하는 작업이 번거로움 변경되지 않은 부분까지 새로 불러와야 하므로 불필요한 로딩이 있어 비효율적 캐싱과 압축 기능으로 최적화는 가능. 사용자와의 인터렉션이 자주 발생하는 모던 웹 애플리케이션에서는 부적합 SPA(Single Page Applicatio..