[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main

 

 

🧑🏻‍💻 Git Hub 주소

 

 

 

🗂 목차

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 삭제

 

👨‍👩‍👧‍👦 회원 관련

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 회원 관련 : 회원 가입

 

- 부 록 -

[Vue.js] axios 설치

[FrontEnd] html Tag 정리

[CSS] CSS 정리

[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Paging 처리

[Vue.js] 기초 개념 정리 - Vue Router

 

 

 

 

 

 

 

 

안녕하세요? 주니하랑 입니다!
주니하랑은 Back End ( Java - Spring 기반 )으로 공부를 했고, FrontEnd도 할 수 있으면 좋겠다는 생각을 한 것이에요.
그 이유는 내가 만들고 싶은 서비스를 나 혼자서도 만들 수 있다는 장점이 있고, 무엇보다 취업을 했을 때 Front End 개발자와 의사소통이 보다 편할 것이라고 기대하는 것이에요.

예전에 처음 Spring Boot를 접하면서 토이 프로젝트를 했을 때, React 기반 Front End 개발 공부하는 분들과 의사 소통을 할 때, 많이 힘들었던것이에요. 도통 무슨 소리를 하는지 ... 🤔

처음 공부이니 만큼 이 프로젝트는 클론 코딩을 기반으로 한 프로젝트 입니다.

다만 완벽하게 기능 구현이 되어 있지 않아 기능을 구현해야 하는 부분이고, 주니하랑의 입맛에 맞춰서 수정할 것은 수정하고, 따라할 것은 따라 해 보면서 Error도 경험하고, Vue의 세계를 탐험 해 보려고 하는 것이에요.

주니하랑은 아무래도 Java 기반 Back End 개발이다 보니 설명하는 부분이 Java와 빗대어 설명하는 부분이 많을 수 있다는 점 참고 바라는 점이에요!

주니하랑과 같이 Java 기반 Back End 개발자인데, Vue를 처음 접해보고 싶은 분들께는 주니하랑의 글이 꽤 도움이 되시리라 생각합니다!

이 곳에서는 기본적인 설치 등은 작성하지 않을 것이에요.
이유는 주니하랑도 처음 접하는 부분이다 보니 일단 되는지를 먼저 확인하기 위해 지나간 것들이 너무 많은 것이에요🥲

대신 Vue를 공부한 내용을 '이 곳'에 준비 해 두었어요!

같이 성장 합시다!

 

 

 

 

🚀 Home (Main) Page 만들기

Home.vue

 

 

 

Home.vue

 

먼저 결과부터 보자면 위와 같이 Main Page를 만든것이에요. 아직 서비스들이 완성이 되지 않았기 때문에 하나하나 붙히기 위해 다 완성하지는 않은 것이에요.

 

 

    🔽  App.vue

 

크롬 확장 프로그램 Vue devtool

 

여기가 바로 실제로 Client의 Web Browser에 실제로 화면이 출력되는 곳 이랍니다.

 

 

    📦 <template> Tag 내용

먼저 <tmplate> Tag에 실제로 화면에 보여질 내용을 넣어 준 것이에요.

주니하랑이 만든 웹서비스는 Header와 Footer는 공통 사항이고, 변화를 주지 않을 것이기 때문에 <TheHeaders />와 <TheFooters /> Tag 두 개를 Contents가 들어갈 곳을 기준으로 각각 위 아래로 나눠 넣어준 것이에요.

그렇게 되면 이 Header와 Footer는 화면이 변화할 때도 Re rendering이 되지 않는답니다! 

그리고, 8번째 줄을 보면 <router-view> 라는 Tag를 사용한 것이에요. 이 내용은 '이 곳'에 정리를 해서 준비 해 둘게요!

주니하랑은 :key 속성으로 $foute.fullpath라는 것을 입력 해 둔 것이에요. 바로 router-view의 Tag 추가 기능인데,
이것은 아래 내용을 해결하기 위해 사용한 것이에요.

컴포넌트가 재활용되고, 파라미터 값만 변경되는 변경되는 경우가 있을 수 있는 것이에요.

parents/1
parents/2

 

parents라는 내용은 그대로 출력하면서 /:id 파라미터로 값을 가져오는 상황인 것이에요.
대부분 이런 경우가 게시글 등 상세 조회 때 이런 방식으로 Backend가 구성을 해 놓는 것이에요.
이 상화에서 Id 값에 따라 "create나, onMount에서 값을 가져오게 만드는" 컴포넌트를 만들었다면 아래와 같은 문제와 만나게 되는 것이에요. 

바로! 주소창에서는 parameter (id)값이 변하는데, 가져오는 결과가 변하지 않는다!

해당 문제가 발생하는 원인은 무엇일까요?
그 이유는 vue는 자원 낭비를 줄이기 위해 동일 컴포넌트로 이동 시 Refresh를 하지 않기 때문인 것이에요.
따라서 있는 기존에 있는 것을 다시 또 보여주다 보니 create나, mount가 동작하지 않는 것이에요.

 

페이지를 많이 만들다보면 마추지는 문제점

또 다른 예시는 하나의 카테고리에 있는 상품등을 클릭 했을 때 발생하는 문제인 것이에요.
예를 들어 인터넷 쇼핑몰에서 물건을 구매하려고 할 때, 우리가 원하는 특정 카테고리에 들어가서 노출된 상품을 보는 것이에요. 그리고, 그 중 하나를 골라 상세 페이지로 이동하는 것이에요. 이 때, 주소창을 보면 주소가 Path Variable 또는 Query String 등으로 되어 있는 것을 볼 수 있는 것이에요. 바로 API로 통신을 해서 클릭을 한 친구의 Param으로 넣어 보내는 것인데, 이 때까지는 문제가 없지만 이제 문제가 시작 되는 것이에요.

# Samsung Laptop 구매 페이지
/samsung/laptop

# Samsung Mobile 구매 페이지
/samsung/mobile

 

우리가 노트북 페이지를 이동하고, 바로 핸드폰 페이지로 이동한다고 했을 때, Page가 Load 되지 않는 문제가 발생하는 것이에요. 이 때 다시 samsung Page로 이동한 뒤, mobile Page로 이동하면 Page는 정상적으로 출력되는 것이에요.
그 이유는 바로 router view에 Key를 Bindding 하지 않아서 발생하는 것이에요.

<router-view :key="$route.fullPath"/>

 

key를 통해 경로 개체 속성을 강제로 연결해 주는 것이에요. 보여지는 화면에 Query 및 Hash가 포함된 전체 URL을 연결하여 Query Sring이 변경될 때 마다 즉, 탐색하는 Event가 발생할 때 마다 Page를 다시 Load하여 노출시키는 방법인 것이에요.

이 방법 외에 아래 방법도 있는 것이에요.

<router-view :key="$route.path" />

 

위와 같은 문제를 해결 하는 방법 중에 아래 내용을 이용하여 해결할 경우 문제가 있는 것이에요. 

<router-view :key="$route.fullpath">

그것은 자원 낭비가 발생하는 안타까운 사건이 발생하는 것이에요. 계속해서 새 화면을 출력함으로써, 쓰레기통에 버리고, 새로운 거 다시 올리고, 버리고를 계속 반복하는 것이에요.

자원 낭비를 줄이며, 파라미터 값에 따라 재 갱신하는 방식으로는 watch로 route params를 감시하여 해당 값이 변환에 따라 로직을 추가해 주는 것이에요.

 

예시 코드

created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // react to route changes…
      }
    )
  },

 

 

 

route key를 사용했을 때 Log

 

hi라는 문자열이 최상위 컴포넌트인데, 파라미터값에 따라 계속 쓸데없이 출력되는 것을 볼 수 있는 것이에요.

 

 

fullpath를 사용 안했을 때 Log

 

 

위의 그림은 최상위 컴포넌트를 재 사용하기 때문에 hi라는 문자열은 생성될 초기 당시에만 표기 되는 것을 볼 수 있는 것이에요.

 

 

    📦 <script> 내용

이 곳에서는 <template>에서 작성된 DOM을 실질적으로 Handling 하기 위해 javascript 등을 이용해서 Coding을 하는 부분인 것이에요.

먼저 주니하랑은 Hader와 Footer component를 Import하기 위해 아래와 같이 Import문을 작성한 것이에요.

import TheHeaders from "@/views/include/myHead.vue";
import TheFooters from "@/views/include/myFooter.vue";

 

그런 다음 20 ~ 23번째 줄에 export default - componets에 import 앞에 작성한 Component 이름을 등록 해 준 것이에요.

data()는 어떤 변수나 배열 등을 선언하는 곳인데, 자바로 치면 생성자안에 변수를 선언하고, 초기화를 하는 곳이라고 주니하랑은 이해한 것이에요.

이곳 26 ~ 28 번째 줄에 특별히 변수 등이 필요없어 그냥 선언만 해 놓은 것이고, 30번째 줄에는 함수를 선언하는 곳인데, 역시 특별히 함수가 필요 없어 선언만 해 놓은 것이에요.

 

 

    📦 <style> Tag 내용

이 곳은 CSS가 들어가는 부분인 것이에요.
주니하랑은 공통적으로 CSS를 사용할 것이기 때문에 style이라는 css 파일을 만들고, 그것을 url()을 이용해서 import한 것이에요.

 

 

 

 

    🔽  myHome.vue

일단 이 component의 이름을 이렇게 지은 이유는 eslint Error 때문인 것이에요.
이게 Home으로 이름을 지으면 multi-word라고 Error가 발생하는데, 아주 미치겠는 것이에요.
실무자 분께서 조언 해 주시길 이걸 Disable 시킬 수도 있지만, 이 내용을 따라 변경하는 것이 좋다고 하여 아예 그냥 이름을 변경한 것이에요. 해당 Error 관련 내용은 '이 곳'에 잘 정리해서 준비 해 둘게요!

 

 

 

    📦 <template> Tag 내용

본격적으로 Component를 만들어 볼 것이에요.

해당 프로젝트에서 사용된 HTML Tag와 CSS는 각각 따로 정리를 해 둘 것이에요.

위에 홈페이지 그림을 보셨듯이 메인 페이지를 구성하기 위해 상단에는 Navigation을 만들고, Header와 Contents 부를 나누기 위해

 

이렇게 구분을 해 준 것이에요.

그리고, 컨텐츠 부에는 게시판을 들어갈 수 있게 작업을 할 것이고, 61~64번째 줄 처럼 개발자 커뮤니케이션이니만큼 주니하랑이 자주 애용하는 개발 관련 사이트를 순서 없는 목록을 만들기 위해 <ul> <li> tag를 통해 Logo를 넣어준 것이에요. a Tag는 하이퍼링크를 지원하는 태그이며, href 속성에 URL을 넣으면 해당 값을 클릭했을 때, 해당 사이트로 이동할 수 있는 것이에요. 만약 href 속성에 `#`을 넣어놓는다면 모양만 있을 뿐 동작하지 않는답니다.

img Tag의 src는 해당 이미지의 위치를 지정해 주는 곳인것이에요. 근데 왜? require를 더 추가해주었을까요? 그 이유는 require를 입력하지 않으면 src에 입력된 img Path는 단순 문자열로 인식이 되는 것이에요. 그렇기 때문에 이를 위치 값으로 인식 시켜주기 위해 입력을 해 주었답니다. 

alt속성은 해당 이미지가 나오지 않을 때, 대신 보여줄 문자열을 지정하는 것이에요.