연구원 이씨

• 이번 포스팅에서는 저번 시간에 이어서 작동순서를 계속해서 알아볼예정
• 또한 Vue 구성 뿐만아니라 백엔드에서 설계한 Api에 맞춰 통신하는 방법
• 통신하기위해서 사용하는 Axios 비동기 통신 라이브러리를 알아보겠다
• 이전의 포스팅에서 이어지는 내용.

1.Layout & Router

• App.vue 화면을 통해서 우리는 SPA를 구성할 수 있다는 걸 알 수 있었음
• scriptsetup을 통해서 다른 곳에 있는 구성들을 불러 올 수가 있다.
  (기본적으로 웹페이지가 Head / Body / Footer 로 구성되어 있기 때문에 지금 처럼 구성해주는 것)

1-1) layout

• 여기서 Head와 Footer를 구성해준다.
• 이렇게 하면 일련의 다른페이지가 app.vue안에 구성되기 때문에 부분적으로 동작 할 수 있음
• 즉 정적인 부분과 동적인 부분을 한 곳에 구성할 수 있게 된다. 

1-2) Router

• Vue의 핵심 장점을 보여주는 가장 핵심적인 부분
• router로 폴더에보면 Footer와 HeadingNavbar와 다르게 index.js 이 있는 것이 보인다. 
• import

1-3) index.js

• main.js 을 눌러들어가게 되면 위의 사진처럼 구성하려는 화면으로의 이동을 설정할 수 있다. 
• 이것을 이해하려면 vue-router를 이해해야 한다. 이전에 1-2 사진에서 보여줬던 vue-router이라는 모듈을 불러와 RouterView로 플레이스홀더를 지정해주었다.
• 다시 돌아와서 1-3 번에 createRouter 함수를 통해서 Vue.js 애플리케이션의 라우터를 생성할 수 있다.
  * createRouter 
  • 이 함수는 라우터에 대한 기본적인 설정을 포함하여, 라우팅의 주요 구성을 정의
  • 주로 사용자 정의 라우팅 규칙, 라우트의 정의, 및 다른 옵션들을 설정한다.
• createWebHistorty함수는 웹 애플리케이션에서 사용되는 HTML5 히스토리 모드를 설정한다.
  * createWebHistorty
  • HTML5 히스토리 모드는 브라우저의  'history.pushState' 및 'history.replaseState'를 사용하여 URL을 조작하여 페이지를 다시 로드하지 않고 SPA에서 라우팅을 할 수 있게 해준다.
  • 'createRouter' 함수의 'history' 옵션에 이를 적용하고 라우터를 설정한다. 

• 이 부분을 통해서 qna-list로 보내는 Redirect를 설정할 수 있다.
• Component를 통해서 해당 component의 위치를 지정해준다. 

* 플레이스 홀더(placeholder)란?

2. views

• 그래서 QnA를 1-3의 23번째 줄처럼 views에 QnAView로 들어오게되면 <router-view></router-view>가 표시된 것이 보인다.
• 필자는 여기서 쓰면서 이걸 왜 쓰는거지 라는 생각을 했었다.
  => 모든 화면이 Vue의 컴포넌트로 이루어져 있기 때문

3. components

• 이 폴더에는 우리가 구성하려는 Vue component들이 담기는데 그 안에는 앞서봤던 layout과 여러가지들이 모두 담겨있다. 
• 해당 vue안에서도 여러가지 다른 vue들을 불러와서 화면을 구성할 수 있다. 
  즉 여러가지 vue화면 들을 객체처럼 사용할 수 있게 되는 것 
• 또한 vue는 그 밖에도 자바스크립트로 만들어진 객체와 함수를 이용하여 기능들을 적용할 수 있다. 

• template를 통해서 우리는 HRML처럼 구설 할 수 있다.
• 오른쪽 처럼 반복문을 통해서 여러가지 객체를 담아 불러 올 수 있고, PageNavigation도 구성할 수 있다. 
  
  

• CSS와 같이 화면에 Style을 적용시키는 부분은 이곳에서 해주면 된다. 

4. common / icons / store / util 등

• common
  • "common"폴더는 주로 Vue.js 애플리케이션의 공통 요소 및 모듈을 저장하는 폴더
  • 이 폴더에는 여러 컴포넌트, 유틸리티 함수, 믹스인(mixin)함수, 헬퍼 함수 등이 포함될 수 있다.
  • 개발 마다 다를 수 있다.
    
    1. 컴포넌트(Component):
       • 여러 컴포넌트 간에 공유되는 기본적인 UI 컴포넌트나 레이아웃 구성 요소 등을 "common" 폴더에 저장
       • 재사용 가능한 컴포넌트들은 여기에서 관리되며, 다양한 부분에서 활용될 수 있다.
    2. 유틸리티 함수(Utility Functions):
       • 애플리케이션 전반에서 사용되는 유틸리티 함수들이 "common" 폴더에 위치할 수 있다
       • 이러한 함수들은 일반적으로 어플리케이션 전체에서 공통으로 사용되는 기능들을 구현하며, 여러 컴포넌트에서 호출될 수 있다
    3. 미들웨어(Middleware) 또는 믹스인(Mixin):
       • Vue.js에서 미들웨어나 믹스인은 여러 컴포넌트에서 공유되는 로직을 추상화하는 데 사용
       • 미들웨어나 믹스인이 공통적으로 사용되는 경우, 이들을 "common" 폴더에 저장하여 코드 중복을 방지하고 유지보수를 편리하게 할 수 있음
    4. 상수 및 설정 파일:
       • 애플리케이션 전체에서 사용되는 상수 값이나 설정 파일들이 "common" 폴더에 저장
       • 예를 들어, API 엔드포인트 URL, 토큰 값, 언어 설정과 같은 상수 값들이 여기에 포함
    5. 헬퍼 함수(Helper Functions):
       • 특정 작업을 수행하는 간단한 헬퍼 함수들이 "common" 폴더에 위치할 수 있다.
       • 코드의 가독성을 높이고 재사용성을 강화하기 위해 사용되는 함수들이 여기에 포함될 수 있음
    6. 스타일 및 CSS 파일:
       • 애플리케이션의 전반적인 스타일이나 공통적으로 사용되는 CSS 파일들이 "common" 폴더에 저장
• Store
  • 상태 관리를 위한 중앙 집중식 저장소
  • 주로 Vuex라는 상태 관리 라이브러리를 사용하여 구현
  • Vuex는 Vue.js 애플리케이션에서 컴포넌트 간에 공유되는 상태를 효율적으로 관리하고, 상태 변경에 따른 예측 가능한 동작을 제공
    
    1. 상태(State) 관리:
       • Vuex store는 애플리케이션의 전역 상태를 저장합니다. 이 상태는 여러 컴포넌트에서 공유되어 사용
       • 여러 컴포넌트 간에 공유해야 하는 데이터(상태)를 중앙에서 효과적으로 관리
    2. 상태 변경(Mutation):
       • 컴포넌트에서 상태를 변경하려면 일반적으로 Vuex store에 정의된 "mutations"을 통해 변경
       • Mutation은 동기적으로 상태를 변경하는 역할
         (여러 컴포넌트가 동시에 같은 상태를 변경하려는 경우, 이를 조절하고 예측 가능하게 만들어준다.)
    3. 액션(Actions) 처리:
       • 비동기 작업이나 복잡한 로직은 "actions"에서 처리
         (액션은 비동기적으로 상태를 변경하거나 여러 뮤테이션을 일으키는 역할)
       • 예를 들어, API 호출, 비동기 작업, 혹은 조건에 따른 여러 뮤테이션의 실행 등이 여기에 속한다.
    4. 상태 가져오기(Getters):
       • "getters"는 store의 상태에 대한 계산된 속성(computed property)을 정의
         (즉, 특정 상태를 기반으로 다른 값을 계산할 때 사용된다.)
       • 다양한 컴포넌트에서 동일한 계산 로직을 사용하고자 할 때 편리하게 활용
• util
  • 주로 유틸리티 함수 및 도우미 함수들이 모여 있는 곳을 가리킨다.
  • 1. 재사용 가능한 함수:
       • 자주 사용되는 기능이나 로직을 유틸리티 함수로 추상화하여 여러 곳에서 재사용
       • 예를 들어, 날짜 포맷 변환, 문자열 조작, API 호출과 같은 기능을 유틸리티 함수로 정의하여 여러 컴포넌트에서 활용
    2. 데이터 변환 및 가공:
       • 서버에서 받은 데이터를 원하는 형식으로 가공하거나, 특정 형식으로 데이터를 변환하는 로직
       • 데이터 형식이나 구조를 일관성 있게 유지하고, 필요에 따라 변환하는 작업이 여기에 포함될 수 있음
    3. 인증 및 권한 처리:
       • 사용자의 인증 상태를 확인하거나, 특정 권한을 가진 사용자인지를 검증하는 로직을 구현
       • 인증 및 권한 처리와 관련된 유틸리티 함수는 애플리케이션 전반에서 일관된 방식으로 사용될 수 있음
    4. HTTP 요청 처리:
       • API 호출이나 HTTP 요청과 관련된 로직을 담당할 수 있다.
         (UTF 8 과 같은 설정도 여기서 가능하다.)
       • 이를 통해 컴포넌트에서 직접적으로 HTTP 요청을 하는 것이 아니라, 유틸리티 함수를 사용하여 관련된 로직을 추상화할 수 있음
    5. 유틸리티 클래스:
       • 유틸리티 함수뿐만 아니라, 특정 작업을 수행하는 유틸리티 클래스를 정의
       • 클래스를 사용하여 관련 메서드와 속성을 그룹화하고, 필요한 경우 인스턴스를 생성하여 사용할 수 있음
    6. 헬퍼 함수:
       • 코드 작성을 단순화하거나 특정 작업을 쉽게 수행하기 위한 헬퍼 함수를 제공
       • 예를 들어, 특정 동작을 수행하는 간단한 헬퍼 함수를 제공하여 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있다.이들은 주로 재사용 가능한 기능을 제공하거나, 코드를 단순화하고 가독성을 높이는 데 사용

지금 보는 것과 같이 폴더에서 하는 내용들이 중복될 수 있는 만큼 개발할 때에는 특정 폴더에서 어떤 역할을 처리할지를 상의를 하는것이 좋다. 이러한 폴더안에서 로그인의 따른 상태관리, 조회수나 특정 상황이 상태를 기억하고 그 상황을 여러 컴포넌트에서 작동할 수 있도록 기록하고 매끄럽게 움직일 수 있도록 잘 구성해 주어야 한다. 

5. API / Axios

5-1) AXIOS란 무엇인가? 

• axios는 JavaScript 및 Node.js 환경에서 사용되는 HTTP 클라이언트 라이브러리
• 주로 웹 애플리케이션에서 서버와의 HTTP 요청을 만들고 응답을 처리하기 위해 사용
• axios는 Promise 기반의 API를 제공하며, 비동기 작업을 처리하고 쉽게 데이터를 주고받을 수 있도록 도와준다.

5-2) AXIOS 호출

• http-commons.js 파일을 보면 서버와 통신하기 위해 axios 함수를 호출해서 URL과 Content-Type을 설정해준다. 
• 또한 다른 전역에서 사용할 수 있도록 export 함수로 처리해준다. 

5-3) Axios 적용 (프론트엔드와 백엔드를 연결해주는 것)

• Axios의 메서드는 이곳을 참고하면 좋을 것 같다. 

• API 폴더안에서 서버와 통신을 할 수 있도록 설계해준다.
• http-common.js에서 불러온 axios를 여기서 사용할 수 있는 것이다.
• 이곳에서는 백에드에서 설정한 주소와 맞아야 하며, 성공여부에 따라 사용자에게 맞는 화면을 제공할 수 있도록 통신을 해야한다.

• 백엔드에서 처럼 qna_comment와 같은 주소를 통해서 통신할 수 있는데 우리는 이를 ' "API"를 설계한다 '라고 할 수 있다. 

마무리

• 사용자에게 필요한 정보를 전달하기 위한 백엔드 개발을 원한다면 프론트엔드에 대한 지식이 어느정도 기반이 되어 있어야 된다고 생각을 함
• 실제에서는 협업을 하는 부분이다 보니 상대의 고충을 이해할 수 있음으로 원활한 커뮤니케이션에 도움이 될 것으로 보인다. 
• 글을 쓰는데 큰 도움을 주신 @권송아 https://singasongah.tistory.com/님께 무한한 감사의 인사를 표합니다.

초기설정 (CDN vs CLI)

• 이곳을 참고해서 설치하면 좋다.

1. 뷰(Vue)란 무엇인가?

자바 진영에서 Spring이 웹서버의 Flame work 라면 vue는 프론트 진영에서 대표적인 Flamework 라고 할 수 있다. Vue의 특징은 아래와 같다.

• Vue.js는 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크 입니다.
• HTML, CSS 및 JavaScript에 대한 기본적인 이해만으로 Vue.js에서 웹 앱 구성을 시작할 수 있는 액세스 가능하고 간단한 프레임워크
• Vue의 핵심 라이브러리는 양방향 데이터 바인딩을 사용하여 프로토타입과 뷰 구성 요소 간의 동적 조정을 가능하게 하는 뷰 모델 구성 요소에 의존
• 이렇게 하면 단일 페이지 앱 개념을 사용하는 표준 웹 프로그램을 더 쉽게 구축할 수 있다.
• Vue 라이브러리의 기초는 HTML, CSS 및 JS이다.
• 데이터 연결을 통해 Vue는 핵심 Vue 모델에 "연결된" HTML 파일을 동적으로 개조함  

2. Vue의 핵심 기술

2-1) 단일 페이지 애플리케이션(SPA, Single Page Application)

• 단일 페이지 애플리케이션은 대부분의 콘텐츠가 정적이며 작은 구성 요소만 한 번에 수정해야 하는 애플리케이션
  EX) 사서함을 탐색할 때 너무 많은 이동이 없는 것
  (헤더와 사이드바는 사서함 전체에서 읽은 것과 동일하게 유지)
• 클릭할 때마다 SPA는 필요한 데이터만 제공한 다음 브라우저에서 렌더링
  이것은 시스템이 사용자가 수행하는 각 작업에 대해 새로 렌더링된 전체 페이지를 시스템에 제공하는 일반적인 페이지 로드와 다르다. 결과적으로 사용자는 클라이언트 측의 단편적인 접근 방식으로 인해 훨씬 더 빠른 응답 시간을 볼 수 있다.

2-2) HTML 템플릿

• Vue의 템플릿은 기존 웹 페이지 애플리케이션에 상호 작용 기능을 추가하는 데 도움이 된다.
• 시뮬레이션된 DOM(Document Object Model) 렌더링 기능은 Vue의 템플릿에 포함되어 있다.
  결과적으로 Vue는 애플리케이션의 컨텍스트가 변경될 때 최소한의 DOM 작업만 수행

* 돔(DOM)이란 무엇인가?

• 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
• DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
• DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다
• 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다.
• DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
• mdn web docs의 공식 문서에 잘 설명되어 있음 링크

3. Vue의 동작 원리

• DOM을 통해서 우리는 웹 페이지를 동적으로 반응시킬 수 있다.
  (= 변화에 맞춰서 일부분만 바꿀 수 있다는 것)
• Vue를 통해서 한 화면에서 여러개의 화면(검색창, 컨텐츠, 로그인)등을 마치 객체 처럼다룰 수 있다.
• 이를 JavaScript를 기반으로 동작하게 하는 것이며,
• 최종적으로 HTML 과 CSS로 렌더링 된 화면을 사용자가 보는 것이다. 

4. 내부 작동순서

4-1) package.json

• 모든 npm 패키지는 package.json 파일을 프로젝트 루트에 포함하고 있다.
• 여기엔 프로젝트와 관련된 메타데이터가 담긴다. (npm은 패키지를 주고 받는 장소) 
• NPM이란 Node Package Manager의 약자로 유용한 패키지를 빠르고 쉽게 공유할 수 있게하는 패키지 매니저
  (즉 NPM이란 이러한 패키지를 관리하는 장소이자 도구 및 방법) 추가 정보
• 이러한 package.json 파일은 보통 Node.js 프로젝트의 루트 디렉토리에 위치해 있다. npm은 이를 통해 프로젝트를 식별하고, 프로젝트의 디펜던시를 처리한다.
• SpringBoot에서 build.gradle 처럼 일련의 라이브러리들을 전역에서 사용하도록 설정해주는 것과 유사하다. 

4-2) index.html

• 기본적인 HTML 파일
• App.vue가 들어갈 장소를 명시해놓는 뼈대 역할을 한다. 
• 14번째 줄 /src/main.js가 main.js 를 호출할 수 있도록 해준다. 
• 11번째 줄에 <div id="app"></div> 이라고 되어 있는 부분이 App.vue가 들어가는 곳이다.

4-3) main.js

• 전역으로 파일을 연결시키려면 main에서 처리하면 된다.
• 그래서 app.mount를 보면 가장 먼저 마운트 되는 vue가 '#app' 
• Vue.use('해당 플러그인)으로 전역으로 사용할 수 있다. (플러그인은 자주쓰는 함수나 명령어들을 모아 놓은것) 

• * mount되는 개념은 무엇인가?
  • Vue.js에서 "마운트(mount)"는 컴포넌트가 DOM에 삽입되고 화면에 표시되는 시점을 가리킴
  • Vue컴포넌트의 라이플사이클 훅 중 하나인 'mounted' 훅은 컴포넌트가 DOM에 마운트된 직후에 호출
  • 다시 말해, Vue 컴포넌트가 생성되고 화면에 표시되면 'mounted ' 훅이 실행된다. 
  • mounted 는 일반적으로 한번만 실행되며, 컴포넌트가 DOM에 처음으로 삽입될 때 호출
    (만약 동일한 컴포넌트가 다시 렌더링되어 다시 마운트 되면 'mounted'는 다시 호출되지 않음.
• * 플러그 인과 라이브러리의 차이점

4-4) APP.vue

• 가장먼저 마운팅되는 vue 파일
• Script / Template / Style 크게 세 부분으로 나뉜다. 
• router-link로 화면을 전부 매핑시켜줄 수 있다.
• <router-view/>이 태그에서 link로 된 페이지가 펼쳐진다. 
• 위와 같이 import된 것들을 template에서 호출하여 SPA 즉 하나의 화면처럼 꾸밀 수 있다는 것이다.

4-5) Router.js

• 라우터는 말 그대로 클라이언트 사이드 네비게이션을 관리하고 SPA에서 페이지간의 이동을 지원하는 vue.js의 공식 라우팅 라이브러리
  (이 때문에 우리는 화면을 동적으로 바꿀 수가 있다.)
• 라우팅의 주요기능은 아래와 같다.

• component: () => import("@/views/TheQnAView.vue")
  윗줄의 의미는 아래와 같다. 
  import Home from '../views/TheQnAView.vue';
  component: Home  

4-6) Component 하위 디렉토리 밑에 vue 파일들

• index.js를 통해서 components 안에 vue들로 화면을 구성 할 수 있다. 

5. 마무리

• Axios를 통해서 백엔드와 통신하는 방법에 대한 내용도 곧 포스팅할 예정
• https://gustv.tistory.com/21 의 자료를 많이 참고하였습니다. 감사합니다.