[월:] 2017년 09월

css 단위 rem, em

css 단위 rem, em

css 를 사용하다 보면 만나게 되는 단위인 rem 과 em 에 대해 정리합니다.

em

em 은 현재 font-size를 정의합니다.

body {
    font-size: 14px;
}
div {
    font-size: 1.5em; // 14px * 1.5 = 21px
}

위와 같이 설정을 한다면 body안의 폰트는 모두 14px 정의 될 것입니다.
그런데 만약 div 안의 font-size 값은 어떨게 될까요?
정답: 21px

이제 아래 내용을 봅시다.

<body>
<div>
  A  <!-- 14 * 1.5 = 21px -->
    <div>
    B  <!-- 21 * 1.5 = 31.5px -->
    <div>
      C  <!-- 31.5 * 1.5 = 47.25px -->
    </div>
  </div>
</div>
</body>

css em test – JSFiddle

이제 em은 이해가 된 듯 합니다.

rem

그럼 div 테그 안의 font-size를 고정하고 싶을 경우에는 어떻게 해야할까요?

바로 rem 단위를 사용하면 됩니다. rem 에서 r 은 최상위(root)의 의미를 지니고 있습니다.

body {
    font-size: 14px;
}
div {
    font-size: 1.5rem; // 14px * 1.5 = 21px
}

css rem test – JSFiddle

둘 차이를 JSFiddle 을 통해 손쉽게 확인 가능합니다.

Font awesome 아이콘 정렬 문제

Font awesome 아이콘 정렬 문제

상황

현재 Bootstrap 4 를 사용해서 프로젝트를 진행 중입니다.
bootstrap 4는 버전이 beta 상태로 있지만 어차피 나중엔 쓸테니까 처음으로 시작하는 프로젝트는 모두 bootstrap 4 로 작성 중 입니다.

Bootstrap 4 에는 기존에 있던 Glyphicons 가 사라졌습니다.

링크 참조 Migrating to v4 · Bootstrap

그래서 기존 Glyphicons 를 사용하지 않고 아이콘 버튼을 만들기 위해 font awesome 을 사용하게 되었습니다.

GitHub – Justineo/vue-awesome: Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.

설치하면 font-awesome 이 내장되어 있습니다.

글 작성일 현재 README 문구를 보면 버전을 확인 할 수 있습니다.

Vue-Awesome is built upon Font Awesome v4.5.0 and depends on Vue.js v2.0.1+.

문제점

Vue-awesome code using Pug

icon(name='archive')
span Zones

Font-awesome 에 있는 아이콘과 link를 생성해보면 아래 이미지와 같은 align 관련 문제점을 확인 할 수 있습니다.

http://blog.uniqbuild.co.kr/wp-content/uploads/2017/09/picture-bootstrap-noalign.png

해결

Icon inside bootstrap button · Issue #52 · Justineo/vue-awesome · GitHub
여기에서 보이는 것처럼 css 를 추가해 줍니다.

저는 .btn class 는 사용하지 않으므로 제외 했습니다.

.fa-icon {
    vertical-align: middle;
    margin-right: 0.5rem;
}

입력 후, 화면을 확인하시면 아래와 같이 아이콘이 정렬된 모습을 확인 할 수 있습니다.

http://blog.uniqbuild.co.kr/wp-content/uploads/2017/09/picture-bootstrap-align.png

Strings must use singlequote 에러

Strings must use singlequote 에러

Prerequisite

  • vue 2.8.2.
  • webpack 2.6.1
  • eslint 3.19.0

문제점

Vuejs를 사용하면서 라이브러리를 사용하고 싶을 때가 생깁니다.
제 경우는 table 관련 라이브러리를 원해서 찾아보던 중,
GitHub – vuejs/awesome-vue: A curated list of awesome things related to Vue.js) 이 곳에서 본 vuetiful-datatable 을 사용하려고 코드에 적용해서 테스트를 해봤는데 이러한 에러가 발생했습니다.

Strings must use singlequote

원인

관련해서 찾아보니 eslint에서 quote 를 하나로 강제하는데, 제 프로젝트(vue-cli를 이용해 만든 webpack template)는 single quote를 사용하는데 반해 vue-datatable 의 코드는 double quote를 사용하고 있어서 였습니다.

해결

Allow enforcing single/double-quotes without preventing use of template literals · Issue #5234 · eslint/eslint · GitHub

위 내용을 참고 해서 프로젝트 ROOT 폴더의 .eslintrc.js 파일에 해당 줄을 추가해줬습니다.

"quotes": [2, "double", { "avoidEscape": false }],

.eslintrc.js

  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    "quotes": [2, "double", { "avoidEscape": false }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }

근데 이렇게 하니 반대의 에러가???

Strings must use doublequote

관련 문서 – Rule quotes – ESLint – Pluggable JavaScript linter 를 찾아보니 둘다. (Single and double quote) 되게는 못하는듯? lint를 사용하지 말아야하나…..

그리하여 결국,
해결은 어이없게 한것이….
라이브러리를 변경했습니다….
vue-datatable가 vuejs 1.x 지원인 듯한 관계로,
vue-data-tables – Vue2.0 DataTables, based on element-ui
위의 라이브러리로 변경 후에 테스트 모듈 작성 완료!

관련 샘플 코드는 하단 참고하시면 됩니다.
GitHub – 9to6/vue-data-tables-test

추가

라이브러리 변경 후 해결한 뒤, 또다른 라이브러리를 사용하려다 보니 같은 문제가 발생 했습니다.
결국 quote error 를 무시하기로 결정!

혹시 필요하신 분이 있으실 까 해서 적어둡니다.

In .eslintrc file

'quotes': ['off', 'single'],

위의 내용을 rules에 추가하면 quote 를 무시하게 됩니다.

크로스 도메인 이슈

서문

요즘 마이크로 서비스가 대세입니다.
저는 요즘 Vuejs 를 이용한 Web app 을 만들려고 시도 중입니다.
이 웹앱을 마이크로 서비스로 만들려합니다. 이러한 경우에 만나는 문제가 바로 크로스 도메인 문제, CORS(Cross Origin Resource Sharing) 이슈입니다.

환경

현재 시스템은 localhost:8080 에 떠있는 RESTful API Server 에. localhost:8082에 떠있는 Web App 에서 http 요청을 해서 데이터를 가져오는 형태입니다.

문제점

간단한 SPA(Single Page Application) 어플을 만들 때, 이 웹 어플리케이션에 채워지는 데이터는 REST API 를 이용, 비동기 네트워크 통신으로 API 서버와 WEB APP의 서버가 다른 경우가 생깁니다.

이때 Web app 에서 ajax를 이용해서 REST API 를 호출하면 Browser console window 에서 이런 에러를 만나게 됩니다.

XMLHttpRequest cannot load http://localhost:8080/v1/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

원인

보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한하기 때문입니다.

해결책

간단합니다.
RESTful API서버의 RESPONSE HEADER 에 하나만 추가해주면 됩니다.

Access-Control-Allow-Origin: *

만약 특정 도메인만 허용하고 싶다면,

Access-Control-Allow-Origin: http://test.com, http://test2.com, …

이런 형태로 사용하시면 됩니다.

Vuejs History mode 테스트 해보기

Vuejs History mode 테스트 해보기

요즘 Vuejs를 스터디 중입니다.
그래서 간단히 Vuejs 문서를 읽어 가면서 스터디 내용을 정리하던 중에 Vuejs history mode를 직접 테스트 해보고 싶어졌습니다.
읽어보다보니 history mode는 필수라고 생각 되었거든요.

HTML5 History 모드 · vue-router
위 문서 참조.

Vuejs history mode를 테스트 해보기 위해서는 서버 설정이 필요한데,
간단한 기본 껍데기만 만들어서 테스트 해보고 싶었으나(webpack 설정 없이..), node 알못 및 npm project settings 알못 인 관계로 간단한 서버(backend)위에 vuejs(frontend) 를 얻는 방법을 못찾아서 결국 포기…

그냥 express 프로젝트에 vuejs를 연동하기로 마음 먹었습니다. (webpack을 이용해서)

express와 vue를 이용한 개발 환경 구성 살펴보기 – Vue.js 한국 사용자 모임

이 페이지를 참고하여 구성해보았습니다.

관심 있으신 분은 GitHub – 9to6/vue-router-express: Vuejs + Vue-router + express 여기 소스 및 REAMDE를 참고 해주세요.

결론

만들어 놓고 보니 backend 와 연동하기 위해 vuejs를 컴파일해서 index.html을 얻어내야하는 불편함이…
물론 vuejs 코드만을 테스트 하려면 npm run dev로 가능하겠지만…

이제 history mode테스트도 해봤으니, 본격 vuejs를 이용한 프로젝트에 착수할 수 있으려나…