[Vue.js] Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때3
in FrontEnd
3탄이 돌아왔습니다~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~……..(((((¬ ̄▽ ̄)¬♪
혹시나 다른이유때문에 안나오는것같으면 앞의 1,2편도 참고해주세요
Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때 1편
Vue를 적용하니 IE11에서 하얀화면(blank)으로 나올때 2편
원하지않지만………..어쩔수없죠 서비스제공해야하는 사람입장이면..
사용자에게 어떤 브라우저를 사용하라고 할수는 없으니깐요….
근데…IE쓰는사람들 좀 갈아타주시면 안되나요…. 진심으루…
여튼 1,2편으로다가 다 해결을 했는데도 또 blank인경우가 있어요
미친거죠 이건
어떻게 할수가 없어서 팀장님이랑 같이 git 풀리퀘를 하나씩 뒤져가면서 버전별로 다운받아가면서
도대체 어디서부터 IE에서 안뜨기 시작한건가
디버깅이라 읽고 끝없는 삽질이라 부르는걸 시작했어요^^……ㅎ……………….
결국에는 IE가 뜨는 지점과 안뜨는 지점을 발견했고.. 그때 file changed된것들만 디버깅하는 과정을 거쳐서
드디어 발견했습니다 하하하하하하핳ヽ(・∀・)ノ ♪
그날 file change해서 올린것만 200파일이 넘었는데^^……
분명 다른 프레임워크에도 똑같은 에러가 날거라고는 생각하는데, 우선 vue에서
스타일을 바인딩할때, 똑같은 속성이 들어있으면 IE에서는 아예 그냥 blank를 리턴합니다.
이 사실을 모른채로 여태 삽질을 삽질을.. 그런삽질을….
렌더링이 아예 안되니 app에 찍어주지를 않아요.
그래서 그냥 blank로 나옵니다.
저게 무슨 말이냐면, 예를 들어서
<div v-else :style="{backgroundColor:'#338a2e', padding: '1px 0px 1px 0px',color:'#ffffff',border:'1px solid #338a2e'}">
이런코드가 있다고 합니다.
저div에 적용되는 속성은 backgroundColor
, padding
, color
, border
이렇게 4가지인데,
예를들어 실수로 제가 color
를 한번 더 썼다고 해봅시다. (실제로 그랬음)
그럼 IE에서 안나온다는거죠……..
근데 이걸 어떻게 아냐고요 디버깅을 안해보면…..디버깅하고나서 알았어요.
IE는 스타일 영향을 참 많이 받는다는걸..
그냥style은 저정도로 안먹을텐데 스타일바인딩을 해버리니 저렇게 예민하게 구십니다..
실수라도 ctrl+c,v 잘하시길바라요.
전 복붙하다가 저 사단이 났어요….흑흑
여튼 혹여 vue가 설정을 다 해줬는데도 blank뜨는 분들은 style이 바인딩이 뭔가 겹치는게 없나 한번 잘 봐보세요…
ie와 싸우시는 모든 분들 힘내세요…..ε=(・д・`*)…