[Vue.js] Vue2 IE 지원하기 (3)

Vue2에서 IE(2024년 1월 기준 IE9까지) 지원하는 방법은 이전 포스팅들을 참고해 주세요. 

2024.01.30 - [Study] - [Vue.js] Vue2 IE 지원하기 (1)

[Vue.js] Vue2 IE 지원하기 (1)

2024.01.31 - [Study] - [Vue.js] Vue2 IE 지원하기 (2)

[Vue.js] Vue2 IE 지원하기 (2)

 

IE로 개발 중 그동안 몰랐던 것이나, 알았어도 잘 사용하지 않았던 것들을 사용해 볼 수 있었는데
이 몇가지를 공유하고 싶어 정리해 보았다.

 

---

1. ES6 미지원

 

https://ko.w3hmong.com/js/js_history.htm

ECMA Script 표준을 보면, IE에서는 ES6 이상을 지원하지 않는다는 것을 알 수 있다.
따라서, Babel을 사용해 ES5 이하로 변환시켜 주어야 한다.

내 경우에는 Vue CLI를 사용하여 쉽게 Babel로 변환할 수 있었다.

 

---

2. 시맨틱 태그 제한

 

https://caniuse.com/?search=semantic%20elements

 

우선, IE에서는 ES6 이상을 사용할 수 없고, HTML5 시맨틱 태그 일부 또한 제약이 있다.
특히, 위에 명세되어 있듯, `section`, `article`, `aside`, `header`, `footer`, `nav`, `figure`, figcaption`, `time`, `mark`, `main` 이 태그들을 HTML5에서 새롭게 제공되는 태그들이다.

`time`과 `main` 태그를 제외한 나머지 태그들은 ES8 이하에서 사용할 수 없다.

`time`과 `main` 두 태그의 경우에는 IE에서 아예 사용할 수 없다.

Partial support refers to only the <main> element (added later to the spec) being "unknown", though it can still be used and styled.

HTML element에 대한 caniuse의 캡션에 명시된 글을 확인하면 `main` 태그에 한해서는 unknown을 참조하지만 여전히 사용하고 스타일을 적용할 수 있다고 한다.

내 현재 프로젝트는 IE9까지만 지원하고 main 태그를 사용하지 않고 있었기 때문에 시맨틱 태그는 딱히 손 볼 것이 없었다.

 

---

3. IE9 navigate mode

 

진행 중인 프로젝트에서 신기한 것을 알게 되어 공유하기 위해 예제 프로젝트에 라우터를 추가하여 다른 페이지로 이동할 수 있도록 간단한 페이지와 라우터를 추가 구현하였다.

현재 사용 중인 프로젝트는 router를 history 모드로 사용 중이라 예제 프로젝트에도 라우터를 해당 모드로 구현하였다.

아래는 예시로 구현한 router.js 코드이다.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const route = [
	{
		path: '/',
		name: 'Main',
		component: () => import('@/views/MainPage'),
	},
	{
		path: '/detail',
		name: 'Detail',
		component: () => import('@/views/DetailPage'),
	},
];

const router = new VueRouter({
	mode: 'history',
	routes: route,
});

export default router;

간단히 구현하여 main과 detail 페이지만 있는 이런 코드가 된다.

 

다른 페이지로 이동하면 IE11에서는 다음과 같이 지정한 history 모드로 url이 보인다.
(localhost:8081 -> localhost:8081/detail)

 

하지만 IE 모드를 전환하여 IE9으로 변경하여 페이지를 이동해 보면,

이렇게 기존 설정한 router의 history 모드가 아닌, hash 모드로 전환된 것을 볼 수 있다.

 

이유는, vue-router의 history mode가 IE9를 지원하지 않기 때문이다.
vue-router issue에서 찾아볼 수 있었는데, 아래 로직을 보면 알 수 있듯 hash모드로 변환해 주기 때문이다.

https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L61-L69

 

만약, 프로젝트가 이 두 모드에 크게 영향을 받는다면 주의하길 바란다.

 

---

4. IE에서는 CSS도 ES6 문법 사용 불가

 

Babel은 Javascript 문법만 ES6에서 ES5로 바꿔준다. 때문에 CSS에 ES6 문법이 포함되어 있다면 IE에서는 동작하지 않게 된다.

진행 중인 프로젝트를 예시로 들면, 
CSS에서 font나 image-background에 URL()을 사용하는 경우를 들 수 있다.

때문에 이를 해결해 주어야 한다.

구글링 시, 이 함수 자체를 무시하는 방법이 많이 나와 어려움을 겪었다. 해당 방법을 사용하면 에러는 사라질지 몰라도, 해당 함수 또한 사용할 수 없었다. 여러 번 시행착오 끝 아래와 같은 방법을 얻을 수 있었다.

 

찾은 방법은 Webpack 설정에서 esModule을 꺼주는 방법이었다.

CLI를 사용하는 내 경우에는 vue.config.js에서 loaderOptions을 설정해 주었다.
현재 프로젝트에는 CSS 뿐만 아니라 Sass도 사용하고 있어 Sass도 함께 설정을 해주었다.

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
	transpileDependencies: true,
	devServer: {
		webSocketServer: false,
	},
	css: {
		loaderOptions: {
			css: {
				esModule: false,
			},
			sass: {
				sassOptions: {
					esModule: false,
				},
			},
		},
	},
});

이 방법으로 에러를 해결할 수 있었다.

 

---

5. IE 대응하면서 가장 많이 사용한 CSS 정리하기

(feat: display: flex; 대신 사용한 CSS들)

 

IE9에서는 유감스럽게도 레이아웃을 잡을 때 가장 많이 사용했었던 display: flex 속성을 사용할 수 없었다. 

https://caniuse.com/?search=flexbox

flex로 대부분의 레이아웃을 잡았기 때문에 CSS 수정이 불가피했다.

아래는 flex 대신 사용했던 방법들과 부수 효과로 인해 도움이 되었던 CSS 방법들이다.

 

1) 레이아웃

IE9부터는 아예 flex를 사용할 수 없고, 10과 11에서도 flex일 때 사용할 수 없는 속성들이 있어, 아예 다른 속성으로 대체하여 구현하였다.

그 대표적인 예시가 display table과 inline-block이다.

 

inline-block은 기존에 많이 사용했던 속성이라 익숙했다.

display: inline-block;

 

display 속성을 table로 설정할 때에는 부모에 table 속성을 설정하고 자식에 table-cell을 속성으로 설정한다.

display: table;

dispaly: table-cell;

 

만약 table 속성 사용 시, width가 고정되지 않을 때, table-layout을 fixed로 설정해 주면 100%로 고정이 된다.

display: table;
table-layout: fixed;

 

내 경우, 보통 간단하게 세로나 가로 너비가 같은 것들은 inline-block으로 설정했고, 높이가 고정되어 있지 않거나 width를 100%로 고정해야 하는 경우는 table로 설정해 주었다.

사실 CSS는 설정하면서 더 잘 어울리는(?), 적은 수정으로 해결될 수 있도록 수정하였다.😅

 

2) 정렬

수직 정렬(Vertical Align)

수직 정렬의 경우 세 가지 정도의 방법을 사용했다.

첫 번째는 height와 line-height를 동일하게 설정하여 높이와 폰트 높이를 일치시켜 가운데로 정렬시켰다.

두 번째 방법은 padding으로 위아래에 동일한 여백을 주는 방법이다.

마지막 방법은 부모의 속성으로 table을 사용할 때, 자식의 속성에 table-cell을 주고, vertical-align 값을 middle로 설정해 주는 방법이다.

// 1
height: 20px;
line-height: 20px;

// 2
padding: 20px 0;

// 3
display: table-cell;
vertical-align: middle;

 

수평 정렬

수평 정렬의 경우에는 수직 정렬보다는 간단했다.

display 속성이 inline이나 inline-block의 경우에는 text-align을 center로 설정해 주었고,

block의 경우에는 margin 양쪽을 auto로 설정해 주었다.

// 1
text-align: center;

// 2
margin: 0 auto;

 

 

3) 간격

display: flex; 속성을 사용할 때는 gap을 사용하여 모든 간격을 조정할 수 있었는데, 이를 display: inline-block;이나 display: table;로 변경하고서는 gap 속성을 사용할 수 없어 불편했다.

대신 inline-block을 사용할 때는 margin으로 간격을 조절하고, table을 사용할 때는 border-spacing으로 조절하였다. 대신 border-spacing의 경우에는 해당 값이 상속되므로, 주의해서 사용해야 한다.

margin: 8px; // gap 대신 사용
border-spacing: 8px; // table에서 사용

 

---

이렇게 어느 정도 IE 대응을 할 수 있게 되었다.

 

처음에는 고려하지도 않았던 IE를 대응해야 해서 굉장히 막막했었는데, 차근차근 검색하며 해결할 수 있었고, 모르는 것 또는 알았지만 잘 사용하지 않았던 것을 적용해 나가며 뿌듯함을 느꼈다.

내가 사용할 줄 몰랐던 IE를 대응하게 된 것도 그렇고 , CSS의 경우에도 flex로 변경하는 것만 해보았지 반대로 flex에서 다른 것들로 바꾸는 것은 처음이라 새로웠다.

 

 혼자 하는 프로젝트로는 해볼 수 없었던 경험에, 이렇게 배운 내용을 다시 한번 정리하고 공유할 수 있는 뜻깊었던 경험이었다.

---

REF

https://server0.tistory.com/58

https://labs.brandi.co.kr/2019/04/30/kangww.html

https://ko.w3hmong.com/js/js_history.htm

https://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin

https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox