Vue CLI 뜯어보기 및 국가별 DateTime 표기 구현

date

Nov 21, 2022

slug

I18n-datetime

author

status

Public

1) Vue CLI 프로젝트 생성 및 이해

1-1) Vue CLI 설치 및 플러그인 설정

vue를 설치하고, vue create 프로젝트명을 통해 Vue CLI를 설치를 하게 되면 아래와 같이 이미지가 나오게 된다.

default 버전은 vue3와 vue2에 babel과 eslint 플러그인이 포함되어있다.

조금 더 자세히 알아보기 위해 manually select features를 눌러보면 아래와 같은 화면이 나온다.

각각의 플러그인에 대해 짧게 설명해보면 아래와 같다.

babel : 브라우저에서 지원하지 않는 문법을 자동으로 변환해주는 자바스크립트 컴파일러

typescript : 타입스크립트를 vue에서 적용할 수 있게 설정하는 역할

Progress Web App (PWA) Support : 네이티브 앱과 같은 사용자 경험 제공하는 툴

Router : 화면이동이 용이한 라우터 기능을 지원해주는 vue router를 포함해서 설치함

Vuex : 데이터 접근 및 상태관리를 쉽게 할 수 있도록 vuex를 설치함

CSS pre-processors : CSS 전처리기를 자동으로 설치해줌

Linter, Formatter : 린트 및 프리티어 설정에 대해서 설정할 수 있음

Unit Testing : 특정 기능에 대한 테스트를 할 수 있음

E2E Testing : 전체 기능, 어플리케이션의 시작부터 끝까지 테스트를 할 수 있음.

잠깐! 플러그인이 뭐지?

플러그인은 어떤 특정한 하나의 문제를 해결하기 위한 컴포넌트(component)이다.

즉, 사람들이 자주 사용할만한 기능들을 직접 일일이 구현할 필요 없이 필요한 기능들만 그때 그때 찾아서 사용할 수 있도록 미리 만들어 놓은 것이 플러그인이다.

라이브러리보다 조금 더 작은 개념이다.

플러그인의 집합이 라이브러리라고 보면 된다.

근데 딱히 구분해서 쓸 필요 없다. import 해서 사용 가능하다는 점에서 플러그인과 라이브러리는 거의 동일시되어 불리고 있다.

프레임워크(Framework), 라이브러리(Library), 플러그인(Plug-in), 모듈(Module)의 차이

📕 프레임워크 Framework. 직역하면 뼈대/구조라고 한다. 조금 더 풀어서 설명하자면, Frame 은 틀, 규칙/법칙을 의미하고 work 는 일, 소프트웨어의 목적이라고 할 수 있다. 즉, 목적에 따라 효율적으로 구조를 짜놓은 개발 방식이다. Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도의 뼈대(구조)를 제공해주는 것이다. 프레임워크의 종류에는 Spring, VueJS 등이 있다.

https://doozi0316.tistory.com/entry/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%ACFramework-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%ACLibrary-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8Plug-in-%EB%AA%A8%EB%93%88Module%EC%9D%98-%EC%B0%A8%EC%9D%B4

프레임워크(Framework), 라이브러리(Library), 플러그인(Plug-in), 모듈(Module)의 차이

위와 같이 사용하고자 하는 플러그인을 체크하면 더 세부적인 옵션들을 선택할 수 있다. 해당 옵션들을 통해 아래와 같은 설정들을 할 수 있다.

vue 버전 선택

history 모드 선택(라우터에서 자세히 설명)

linter 설정(airbnb, standard 등에서 선택)

저장시 Lint 포맷 여부

package.json 파일에 포함할지 여부

현재 설정한 프로젝트 설정 저장 여부

1-2) Vue CLI 기본 폴더구조

<기본 폴더구조>

기본적인 Vue CLI를 만들면 위와 같은 폴더구조를 만들게 된다

폴더구조는 기본적으로 알고 있는 폴더구조를 그대로 따라가는 듯 했다. 다만, 각 컴포넌트간의 통신이 아직 어색한데, 각 구조를 어떻게 유기적으로 연결할 것인가는 고민해보고 싶은 주제이다.

view(pages) : router에 따른 view(page) 관리 폴더

model(data) : 데이터를 관리하는 부분

store(atom) : 상태관리 폴더

component : 컴포넌트 관리 폴더

hello-vuejs는 간단한 프로젝트이다보니 복잡한 폴더구조를 가질 필요는 없다고 생각했다. view 폴더에 앞으로 온보딩 과정에 진행 될 것들을 계속 추가하고, 컴포넌트로 따로 빼서 관리할 것들은 따로 관리할 예정이다.

2) Vue Router

Vue Router를 사용하기 위해선 아래와 같은 단계를 진행해야한다.

2-1) main.js에서 .use(router) 설정

createApp으로 인스턴스를 시작하고자 하는 root 파일을 설정한다. 해당 인스턴스는 index.html에 있는 id가 app인 요소가 mount 될 때 렌더링이 된다.

인스턴스를 사용할 때 router나 store를 .use를 통해 추가할 수 있다.

2-2) router-link, router-view 설정

router-link는 a tag를 만드는 것이라고 생각하면 된다. to로 해당 접속 url를 설정하고, 문자를 입력하면 된다.

이 때 router-view를 꼭 넣어줘야하는데, 라우터뷰는 해당 자리에 라우터 컴포넌트가 변경된다.

만약 모든 page마다 공통으로 남겨야하는 header 컴포넌트 등은 nav처럼 만들어주면 된다.

2-3) createRouter 설정하기

router 폴더에 createRouter라는 메서드를 이용해서 routes를 객체형태로 넘겨줄 수 있다. 이 때 history 기능을 사용하고자 한다면 환경변수 설정을 해줘야한다.

hash mode와 history mode

처음 router를 아무 설정없이 사용하게 되면 url에 #가 붙은 상태로 이동하게 된다. 오잉? # 녀석은 처음이라 서치해본 결과 hash mode와 history mode라는게 있었다.

같은 페이지로 들어갔을 때 해쉬모드는 요청 url이 / 주소로 들어가게 되고, 히스토리 모드는 해당 페이지로 직접 서버에 로드를 해서 들어가게 된다.

해쉬모드는 기본적으로 다시 서버에 리소스를 요청하지 않기 때문에 속도적인 측면에서 빠를 수 있다. 다만, url이 조금 ugly해질 수 있다는 단점이 있다.

히스토리모드는 기본적으로 해당 url로 서버가 리소스 되기 때문에 속도의 차이가 날 수 있고(유의미한 정도의 속도일지는 잘 모르겠다), 사용자가 직접 해당 url로 한 번에 접속할 경우 해당 view page 로드시 관련 컴포넌트가 다른 router와 연결되어있는 경우에 오류가 발생할 수도 있다. 대신 url이 익숙한 형태로 나올 수 있다.

가장 큰 차이점은

1) 히스토리모드는 기록을 하는 부분. 해쉬모드는 백버튼이 동작이 안됨.

2) spa로 코드를 다 받아놓고 서버에 요청을 안함.

3) on/off 를 할 수 있다.

히스토리모드는 규모가 있는 프로젝트르 할 때 진행

2-4) route component 설정

해당 route로 이동했을 때 컴포넌트롤 load하는 방법은 웹에서 컴포넌트를 읽는 방식에 따라 크게 3가지가 있다

1) 컴포넌트 import

컴포넌트를 직접 import해서 사용하는 것

위와 같이 router이동을 하게 되면, 네트워크 탭의 변화가 없이 한 번에 해당 라우터를 모두 불러온다.

사용자가 메인화면과 같이 해당 컴포넌트가 필수적으로 로드되어야하는 경우에는 위와 같은 방식을 사용하는 것이 적절하다.

2) lazy load

lazy Load 방식은 해당 라우터를 클릭했을 때 웹 서버에 해당 컴포넌트를 요청합니다.

실제 네트워크 에만 들어가는 컴포넌트이거나, 그 컴포넌트의 용량이 작을 때 사용할 수 있다.

webpackChunkName는 로드하는 컴포넌트의 이름인데, 만약 여러 개의 route를 동일한 webpackChunkName을 설정하게 되면 한 번만 서버통신이 이루어진다.

3) lazy load 내의 webpackPrefetch 기능 사용

웹페이지 최초 접근시에 prefatch 설정한 컴포넌트는 미리 받아서 캐쉬에다가 저장해놓음

캐쉬에 저장한 뒤에 해당 페이지가 load되면 해당 컴포넌트를 불러온다.

그렇기 때문에 사이즈가 커서 서버에서 받아오는 시간이 오래걸리거나, 사용자가 들어갈 가능성이 높은 컴포넌트는 prefetch를 true로 넣는 것이 좋음

다만, 너무 많은 데이터가 prefetch로 캐시로 설정될 경우, 최조 로딩이 느려지거나 웹 자체가 무거워지는 경우가 발생할 수 있음.

TODO

prefatch MDN 사이트에서 스터디하기

2-5) view 파일에서 작업하기

router별로 컴포넌트를 설정했으면 해당 컴포넌트에서 작업을하면 된다.

해당 view 파일에서 특정 컴포넌트를 불러오고자 할 때는 해당 컴포넌트 자체를 tag형태로도 가능하고, msg같이 변수를 할당하는 것도 가능하다.

3) Locale

3-1) Date

각 지역에 맞는 날짜, 시간에 대한 정보는 date객체를 통해서 만들어낼 수 있다.

mdn 문서에 따르면 UTC라는 협정 세계시와의 시간차이를 밀리초로 나타낸 정수 값을 담는다고 한다.

따라서 date 객체안에는 위와 같이 시간을 같은 값으로 표기하는 다양한 방법이 있고, 그 기준은 UTC를 기준으로 하는 것이다.

new Date()로 만든 Date 생성자는 아래와 같이 다양한 메서드들을 포함하고 있다.

시간을 추출하는 get~

시간을 설정하는 set~

지역별 시간을 가져오는 toLocale~

3-2) toLocale 메서드 - locales

이 중에서 우리는 toLocale 메서드에 대해 알아볼 것이다. 여러가지가 있지만 3가지 방식으로 표현이 가능하다.

날짜만 표현하는 경우 (toLocaleDateString)

시간만 표현하는 경우 (toLocaleTimeString)

날짜와 시간을 같이 표현하는 경우 (toLocaleString)

toLocale~ 메서드는 locale 정보와 option정보를 인자로 받아서 값을 반환하는데, Locale 정보는 각 국가마다 다른 코드를 넣을 수 있다.

기본적으로 Locale 국가코드는 ‘언어_국가’ 형태로 표기되며, 아래와 같이 표기 할 수 있다.

우리가 표기하고자 하는 5개의 국가 코드는 아랍어를 쓰는 사우디아라비아, UAE와

영어를 쓰는 미국과 영국, 마지막으로 러시아어를 쓰는 러시아의 국가코드이다.

만약 locale 코드가 undefined가 들어갔을 경우에는 유저의 위치를 기반으로 설정된다.

Language Code를 볼 수 있는 사이트

Language Codes

NOTE: Code page is an outdated method for character encoding. It is now preferable to use 16 bit character set of Unicode. As defined by Microsoft, a locale is either a language or a language in combination with a country. See below for the definitions of locale and LCID and other resources.

https://www.science.co.il/language/Locale-codes.php

3-3) toLocale 메서드 - options 속성

option은 각 locale 메서드마다 조금씩 다른데 날짜를 표현하는 toLocaleDateString메서드에서 설정할 수 있는 옵션은 아래와 같이 weekday, year, month, day 옵션이 있고,

시간을 표현하는 toLocaleTimeString에서는 timeZone, timeZoneName으로 설정한 timezone과 그 이름을 표기할 수 있는 옵션이 있고, minute,hour,second 단위로 원하는 옵션들만 넣을 수도 있다. 시간 표기는 numeric(ex.3)과 2-digit(ex.03)으로 표기하는 방법이 있다.

현재 코드는 시간과 분만 필요했기 때문에 minute과 hour 속성을 numeric으로 표기했다.