[태그:] 문제

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

크로스 도메인 이슈

서문

요즘 마이크로 서비스가 대세입니다.
저는 요즘 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, …

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