Nuxt.js를 활용하여 개편 소개 페이지 만들기

도입배경

올해 초 부터 Vue.js에 관심이 생겨 개인적으로 학습하고 있었다.
2017 1사분기를 회고하는 글에 이런 내용을 적었었다.

“회사 개발자 세미나에서도 해당 주제로 발표할 예정이며,
가능하다면 외부 밋업에서도 발표하고 싶다.”

실제로 지난 4월 19일에 외부 밋업에서 발표하게 되었다.

주제는 회사에서 발표한 Vue.js와 Firebase를 활용기를 Vuetiful Korea 1회 모임에서 발표하였다.
이 날 많은 사람들 앞에서 발표한 것도 좋은 경험이였지만 Nuxt.js라는 Vue.js 기반 범용 SSR 프레임워크를 알게 되었다.
용량도 가볍고 필요한 개발 환경은 미리 다 포함하고 있어서(Vue, Vuex, Vue-router, Vue-meta, webpack) 개발 생산성이 높아질 것으로 보여졌다.

어떤 서비스에 도입해볼까 고민하다가 하이웍스 전자결재 개편 소개 페이지에 도입해보았다.
하이웍스 전자결재 개편 소개 페이지는 IE9 이상 지원해도 될 것이라 생각하였고 20여 페이지 정도의 작은 규모이니 무리가 없을 것이라고 생각했다.

“일단 만들면서 모르면 찾아보자”

라고 가볍게 생각하고 시작했는데 결론은 도입은 했으나 삽질의 연속이였다.

하이웍스 전자 결재 개편 소개 바로 가기

본격 도입기 ( 삽질기)

1. 페이지 구성/설계

  • 디렉터리 구조
    src/
    –| assets/
    —-| css/
    ——| main.css
    —-| images/
    –| components/
    —-| Leftmenu.vue
    —-| main.vue
    —-| Rightcontent.vue
    –| layouts/
    —-| hiworks.vue
    –| pages/
    —-| default-approve/
    ——| create.vue
    ——| index.vue
    ——| public.vue
    —-| format-approve/
    ——| apply.vue
    ——| applyview.vue
    ——| index.vue
    ——| reply.vue
    ——| send.vue
    ——| sendview.vue
    ——| view.vue
    —-| new-approve/
    ——| after.vue
    ——| after2.vue
    ——| behalf.vue
    ——| behalf2.vue
    ——| index.vue
    ——| last.vue
    ——| last2.vue
    —-| view-approve/
    ——| index.vue
    ——| progresss.vue
    —-| admin-approve.vue
    —-| docu-approve.vue
    —-| go-beta.vue
    —-| index.vue
    —-| list-approve.vue
    —-| print-approve.vue
    —-| write-approve.vue
  • 메인 페이지
    • 반복되는 부분을 v-for를 써서 처리
  • 서브 페이지
    • layout을 만들어서 모든 subpage는 동일한 레이아웃 사용
    • 좌 메뉴는 컴포넌트로 만들어서 재사용
    • 우 콘텐츠는 구성은 비슷하지만 내용이 바뀌는 구조

      2. 필요한 개발 도구 설치

  • Yarn
    • Yarn은 작업을 병렬로 처리하여 속도가 빠르다.
    • 윈도우는 사이트에서 설치 파일을 다운로드 받아 설치한다.
    • 제대로 설치 되었는지 버전을 확인한다.
      yarn –version
    • 여러 작업자가 일관적으로 패키지 버전을 관리하려면 yarn.lock을 공유하면 된다.
    • 새 프로젝트를 initialize하여 package.json을 생성한다.
      yarn init
  • Nuxt.js
    • package.json을 아래와 같이 작성한다.Nuxt.js 설치를 한다. 현재 Nuxt.js는 rc버전이므로 0.10.7버전을 선택해서 설치한다.

      yarn add nuxt@0.10.7
    • Vue, vue-server-renderer, vue-template-compiler 세 개의 버전이 모두 동일해야한다.
      안그러면 start할 때 에러가 발생한다. 개별적으로 Vue의 버전을 업데이트 했다가 이런 문제를 겪었다.

3. 작업 과정

  • 기본 가이드에서는 pages를 생성하고 그 안에서 *.Vue파일을 생성하게 되어 있는데 assets과 components, layouts의 폴더가 생기니 너무 산만해서 src라는 폴더를 만들고 nuxt.config.js에서 srcDir 설정을 바꿨다.
  • router는 base에서 변경할 수 있다.
  • generate 폴더 설정
  • build 아웃풋 파일 네이밍 변경
  • 페이지 생성
    • 모든 Vue 파일에는 name 옵션을 줘서 디버깅이 쉽게 하였다.
    • 메인 페이지는 v-for로 돌리고, css는 scoped 옵션을 줬다.
    • 서브 페이지
      • 좌 메뉴는 컴포넌트로 생성하였다.
      • hiworks 레이아웃을 만들었다. 적용은 layout: '레이아웃 이름'
      • 레이아웃을 쓸 때 <template> 안에 <nuxt />를 넣어주어야 한다.
    • 로딩 페이지
      • 로딩 페이지를 만들고 nuxt.config.js 에서 로딩 페이지 관련 내용을 정의해준다.
      • true면 기본 로딩 바를 사용한다는 의미이다.
      • 기본 로딩 바의 색상도 변경 가능하다.
    • 활성 페이지 설정
      • 자동으로 해당 링크에 활성 페이지의 클래스가 생성된다.
      • 그 클래스명(.nuxt-link-active)에 맞춰 css를 추가하면 된다.
    • 트랜지션
      • 이것 역시 해당하는 클래스가 있으므로 그것을 그대로 사용하면 된다.
        .page-enter-active, .page-leave-active {
        transition: all .3s ease;
        }
        .page-enter, .page-leave-to
        {
        opacity: 0;
        }
  • 에셋에 대한 경로나 기타 경로 설정
    • ~assets/
    • ~components/
    • 에셋은 webpack에서 처리된 에셋을 사용해도 되고 별도로 폴더를 루트에 생성하고 사용해도 된다.
  • 각 페이지의 메타 태그
    • 전역 메타는 nuxt.config.js, 각 페이지 메타 태그는 각 페이지에서 설정한다.
    • 전역 메타의 경우는 og를 넣어주는 것이 좋다.
  • 최종 nuxt.config.js는 아래와 같다.
  • 개발서버 자체에서 build 할 수 있게 셋팅이 안되어 있으므로 yarn generate 를 입력해서 정적인 파일로 변환하여 배포한다.

장점

  • 기본 레이아웃 사용, 좌 메뉴 컴포넌트 사용, v-for의 디렉티브 사용으로 코드의 양이 줄었다.
  • 각 페이지 별로 메타 태그를 설정할 수 있어서 SEO를 향상시킬 수 있었다.
  • 기본적으로 페이지 전환, 활성화 된 페이지 표시, 로딩 페이지 기능을 제공하고 있어서 작업 공수를 줄여준다.
  • 일부 CSS는 작동하지 않았지만 IE8에서 개편 소개 페이지를 볼 수 있었다.
  • 전역 설정과 지역 설정을 나눠서 작업할 수 있다. (메타태그, 페이지 전환, 스타일 시트 적용 등)
  • 오류를 체크해주므로 디버깅을 쉽게 할 수 있다.
  • 정적인 파일 생성시 자동으로 코드 분할 uglify, minify를 해준다. 이 부분은 옵션에서 수정이 가능하다.

시행착오

  • CodeIgniter의 경우는 my-project와 같은 명명을 지원하지 않는다. controller에서 설정이 가능하지만 되도록이면 백엔드와 협의 후 명명을 하자.
  • 임의로 파일명을 생성하기 보다는 조금 더 의미있는 작명을 했어야하지 않을까
  • Yarn으로 로컬서버를 실행시키면 다만 파워쉘로 실행시키면 자주 얼음하고 윈도우에서도 설치가 불편하다. 실제로 제대로 설치가 안되서 2-3번 재 설치를 했다.
  • 해당 기술에 대한 충분한 이해가 없어서 삽질을 너무 많이했다.
  • 우측 콘텐츠 내용을 하드코딩을 해서 넣었는데 사실 컴포넌트로 만들었으면 더 좋지 않았을까?
  • webpack으로 번들링을 하게 되면 모든 파일의 무결성을 위해 해시태그가 랜덤하게 붙게 된다. 옵션에서 변경이 가능하였는데 webpack에 대해 잘 몰라서 그냥 사용했다.

결론

  • Nuxt.js는 빠르고 가벼운 개발을 하기에 적합한 도구이다.
  • 너무 많은 삽질은 생산성을 낮출 수 있으니 기본적인 사용방법은 알아두자.
  • 모든 문제의 정답은 가이드에 있다. Nuxt.js 가이드 문서에 없는 내용은 각 개발 도구의 가이드 문서를 찾아보면 있다.
  • CodeIgniter + Vue.js boilerplate를 하반기에 만들고 싶다.
  • CSS를 Sass로 사용해서 CSS 개발 생산성도 높여야겠다.
  • 다음엔 어떤 서비스에 도입해볼까?

추가) 글을 쓰고 나서 Vue 커뮤니티에 해당 글을 올렸더니 최신 버전에서는 경로 설정이 다르다는 피드백을 받았다.
내가 한 작업에 대해 되돌아보고 그 내용을 공유해서 피드백을 받는 것도 중요하다는 생각을 하였다.

Vue.js Study Plan

작년에 React Study Plan이라는 글을 쓴 적이 있다.
그렇게 공부하면 당연히 React로 뭔가 개발을 할 수 있다고 생각했다.
내가 너무 기초가 안 되어 있는 상태에서 배우기에는 버거운 상대였다.
유튜브 API를 연동해서 뭔가 만들긴 했지만 온전하게 내 것이 되진 않았다

그러다가 Vue.js를 만나게 되었다.
Angular1과 React의 장점이라고 생각하는 부분을 전부 갖고 있고 심플한 소스에 반해버렸다. 게다가 가이드도 한글이다!

어쩌다 보니 사내에서 Vue.js와 Firebase를 활용한 내용을 발표하게 되었고
Vue.js 한국 사용자 모임에서도 발표하게 되었다
발표를 하다 보니 내가 알고 있는 것이 참 좁은 지식이라는 것을 알게 되었다.

그래서 아래와 같이 Vue.js를 공부해보려고 한다.

  1. The Majesty of Vue.js 2 (한글, 유료)
    이 책을 번역한 박창주 님은 기본 가이드가 가장 좋다고 하셨지만 일단 시작은 책으로 잡고 필요하면 그때마다 공식 가이드를 보는 것이 나에게는 좋을듯하다.
  2. Learn vue2 step-by-step (영어, 무료)
    Vue.js에 관해 짧은 동영상으로 설명해준다. 원래 egghead.io의 Vue.js강의를 보고 있었는데 그 쪽은 아직도 1. x 버전이라서 2. x 버전으로 설명하는 이 강의로 옮겨탔다. 무료지만 강의 질도 괜찮다.
  3. Vue JS 2 – The Complete Guide (영어, 유료)
    The Complete Guide라는 이름답게 약 340개의 동영상으로 구성되어 있다. 거의 모든 부분에 대해서 다루는 것으로 보인다. udemy가 $10으로 가격을 낮추는 경우가 많으니 그때 서 보길 권한다.
  4. Vue.js 공식 가이드 문서 (한글)
    틈틈이 필요한 내용은 공식문서에서 찾아볼 생각이다.

3번까지 하고 나면 Nuxt.js를 해볼 생각이다.
그리고 이번에는 토이프로젝트 뿐만 아니라 사내 프로젝트에도 쓰일 만한 곳이 없는지 잘 찾아봐야겠다.

React Study Plan

하반기에 나 자신의 개발역량 강화를 위해 React를 공부하기로 결심하였다.
회사에서 다른 개발자들은 ng를 주로 사용하지만, 최근에 ng2가 나오면서 뭔가 1,2가
서로 다른 부분도 있기도 하고, typescript를 배워야 한다고 해서 React를 선택하였다.

React Native를 이용하면 앱도 개발할 수 있다고 하니 왠지 더 끌리기도 했다.

5개월이 길다면 길고 짧다면 짧은 시간인데 그 시간을 잘 활용하기 위해 대략적인
공부 계획을 세워보았다.

React Study Plan

  1. React Fundametals 동영상 보며 감잡기 (영어)
    처음 공부하기로 마음 먹었을 때 MERN Stack을 보려고 했다.
    아무 지식이 없는 상태에서 보일러플레이트로 공부하는 것은 쉽지 않았다.
    그때 이상한모임 에서 어떤 분이 이 동영상 링크를 알려주셨다.
    영어지만 5분 이내에 짧은 동영상이고, 보다가 잠깐 멈추고 따라 쳐보기 좋다.
  2. facebook 공식문서 보기 (한글번역)
    짧은 동영상으로 감을 잡았다면 그 다음은 React 공식 문서로 기초를 다지려고 한다.
    공식문서만큼 제대로 된 설명서는 없다고 생각한다.
  3. Modern React with Redux (영어)
    React 강의 들으러 갔다가 알게 된 이모 분이 추천해주신 강의. 영어지만 상당히 알아듣기 쉽게 발음해준다.
    왠지 React 듣다가 영어도 늘을 듯. 속된 말로 개 이득?
  4. Advanced React and Redux (영어)
    이것 역시 이모 분이 추천해주신 강의. 위의 강의와 동일한 강사다.
    udemy의 강의는 구글링만 잘하면 강의 할인쿠폰을 구할 수 있다.
  5. pro react 책 보기 (한글번역본)
    MERN 다음으로 이 책으로 React를 시작하려고 하였지만, 책의 내용대로 잘 되지 않았다.
    그 이유는 책이 나온 시점의 React버전과 현 시점의 React버전이 다르고,
    나 자신도 React 기본지식이 하나도 없었기 때문이다.
    앞에 동영상들과 공식문서로 학습한 시점에서는 무리없이 소화할 수 있을 듯 하다.
  6. React Native 보기 (영어)
    더 나아가 React Native를 익혀서 앱을 만들어보려고 한다.

공부하면서 알게 된 내용, 기억할 내용, 잘 이해가 안 되는 내용 등을 이 블로그에 업데이트할 계획이다.
이렇게 글로 남기는 것은 나 스스로 꾸준히 공부하기 위함이기도 하고 다른 사람들에게 보임으로써 나태함을
방지하기 위해서다.

React로 뭔가 개발했다는 글을 올 연말에는 남기고 싶다.

[JS] JavaScript 라이브러리 충돌 방지

짧은 실력이지만 현재 운영하고 있는 그룹웨어 서비스 로그인 페이지에 마우스를 오버하면 툴팁이 뜨도록 JQuery로 작업을 했습니다.

그런데, 툴팁이 뜨지 않는 것입니다. 클래스 명이나 변수가 잘못되었나 확인해봤지만 문제가 없었습니다.

firebug로 확인해보니 Prototype.js가 그룹웨어 서비스 어딘가에서 사용되고 있었습니다. Prototype.js 도 JQuery처럼 $() 를 사용합니다.  그러므로 라이브러리간에 충돌이 발생할 수 있습니다.

충돌을 방지하기 위해서는 메서드 $.noConflict() 를 사용하여 아래와 같이 해결합니다.

 

 

[CSS Quiz] CSS를 이용해 아군을 구출하라!

출처 : 정찬명님 블로그 (http://naradesign.net/wp/2014/08/01/2057/)

 상황 설명

  • <ol>은 적의 진영이기 때문에 함부로 침범하거나 수정할 수 없습니다.
  • <li>는 적군 병사이거나 또는 적군에게 잡혀간 아군 병사들 입니다.
  • 1과 9는 적의 문지기 병사이고, 짝수인 2, 4, 6, 8 역시 적군 병사입니다.
  • 밑줄 친 숫자(1보다 크고 9보다 작은 홀수)가 적진에 잡혀간 아군 병사입니다.

<style>/* 아군 진지: 작전은 이곳에 */</style>
<!–
 적군 진지: 수정할 수 없음 –>
<ol>
<li>1(
적군: 문지기)</li>
<li>2(
적군)</li>
<li>3(
아군)</li>
<li>4(
적군)</li>
<li>5(
아군)</li>
<li>6(
적군)</li>
<li>7(
아군)</li>
<li>8(
적군)</li>
<li>9(
적군: 문지기)</li>
</ol>
<!–
 적군 진지: 수정할 수 없음 –>

미션 설명

  • 아군 진지에서 스타일 상륙작전을 이용하여 적진에 잡혀간 아군 병사에게 빨간 망토(background:red)를 씌워주세요.
  • 아군 진지에서 가장 짧게 작전을 작성하여 아군 포로에게만 빨간 망토를 씌우는 사람이 승리.
  • 비밀 작전이기 때문에 JS 또는 image 연합군의 도움을 받을 수 없음.
  • 야전 교범http://www.w3.org/TR/selectors/
  • 훈련소http://codepen.io/ | http://jsfiddle.net/
  • 정찬명 님의 답 :  http://codepen.io/naradesign/pen/Hocut

최근에 전문가를 위한 CSS3를 공부하는 중에 이 문제를 만난 덕분에 쉽게 풀었습니다.

See the Pen yNPxGe by In Suk Kim (@shoo7830) on CodePen.

Pure CSS Drawing with codepen.io

css관련 글을 구글링 하다가 “Simpsons in CSS” 라는 글을 보게 되었습니다.
Chris Pattle이라는 웹 개발자가 순수하게 CSS만을 사용해서 유명 애니메이션 심슨가족 캐릭터를 어떻게 그렸는지 소개한 글입니다.
“The Simpsons in CSS”프로젝트 페이지도 연결되어 있어 더 많은 캐릭터 그림을 볼 수 있었습니다.
이 글을 보고, 저도 언젠가는 CSS로 그림을 그려봐야겠다고 생각(만) 했었죠.

그러다가 CSS만 사용해서 그린 아이폰6를 보게 되었습니다.

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@fbrz) on CodePen.

이것을 보고 나니 진짜 CSS로 못하는 것이 무엇일까? 라는 생각과 이렇게 그림을 그리다보면 CSS에 대한 이해도와 활용방법이 늘겠다라는 생각을 하게 되었습니다. 그래서 CSS를 이용해 그림 그리기를 시작했습니다. 전 이제 시작단계이니 나름 간단한 라인의 캐릭터 “브라운”의 얼굴만 그리기로 했습니다.   라인 브라운 일반적인 에디터에서 작업해도 좋지만, 코드를 작성하고 실시간으로 결과를 확인할 수 있는 codepen.io를 사용하기로 했습니다. 그렇게 해서 그린 브라운입니다.

See the Pen line brown css3 drawing by In Suk Kim (@shoo7830) on CodePen.

이렇게 그리다보니 제 코드의 몇 가지 개선할 점이 보입니다.

  1. 되도록 div를 적게 사용하면서 CSS로 표현하기
    css로 그린 그림들은 대부분 div하나를 이용하며, :after나 :before 같은 슈도 선택자를 사용해서 그림을 그립니다. 지금은 div를 남발해서 그렸는데 차후에는 저도 div를 줄이려고 합니다.
  2. 귀 부분은 어떤 속성을 쓰면 잘 그릴 수 있는지 고민하기
    브라운의 귀 부분은 얼굴과 자연스럽게 연결이 되며, 귀 안쪽에 반원 형태의 색상이 들어갑니다. 위에 언급한 심슨캐릭터 그리는 방법을 응용해보려고 합니다.

PSD 페이지 마크업만 하다가 이렇게 즐기면서 CSS를 익히니 더 기억에 남고, 불분명한 것은 책이나 명세로 다시 한번 확인하니 쉽게 잊어버리지 않을 것 같습니다.


참고링크

 

코드카데미를 이용한 온라인 프로그래밍 공부

코드카데미는 온라인 프로그래밍 공부 사이트다.

HTML/CSS, JavaScript, JQuery, PHP, Python, Ruby 등을 공부할 수 있다.

뿐만 아니라 API활용, 웹 페이지 레이아웃 제작도 배울 수 있다.

좀 바쁜게 지나가서 코드카데미를 이용해 백엔드를 공부하고 있다.

 

처음 백엔드할 때는 그렇게 싫었는데 스스로 하고 싶어서 하는 것이고,

뭔가 동기부여가 되다보니 (학습진도에 대한 표시, 강의 마지막에 주는 배지)

정말 재밌다. 학습한 내용을 잊어버리지 않기 위해 블로그에 조금씩 정리하고 있다.

지금은 원어 그대로 정리하고 있지만, 시간이 되면 조금씩 번역해서 올릴까 한다.

 

동시에 여러 언어를 같이 하다보니, 헷갈리는 부분이 없잖아 있긴하다.

else if, elsif, elif 같은 것이 그러하다.

 

업무에 크게 방해받지 않는 선에서 하루 30분 정도 공부하는 것이 좋을 것 같다.

코드카데미를 마치고 나면 책 한 권 정해서 제대로 공부해보려고 한다.

 

 

가비아 기업도메인 취약점 개선

개편 전 기업도메인 사이트 메인

개편 전 기업도메인 사이트 메인

13

개편 후 기업도메인 사이트

 

 

 

 

 

 

 

 

  • 링크 : https://bizgabia.com/
  • 기간 : 2014년 5월 19일 ~ 5월 28일
  • 오픈 : 2014년 6월 18일
  • 작업사항
    1. 메인 개편
    2. 푸터 수정
    3. 탑메뉴 수정
    4. 개인정보 취급방침 추가
    5. 약관 추가
    6. 개인정보 수정 페이지 수정
    7. 회원가입 페이지 수정
    8. 로그인 페이지 추가
    9. 기업회원 혜택 페이지 추가
    10. 비밀번호 안내 팝업 수정
  • 작업시 애로사항
    1. 쿽스모드 (…) 이건 뭐 간만에 뭉크의 절규 표정을 지었음. 핵쓰기 싫었는데 간만에 핵 사용
    2. 분명 탑메뉴 부분이 인클루드로 되어 있어서 한 개의 페이지만 수정하면 다 바뀔거라 생각했는데..그것은 나의 착각…탑메뉴 안에 또 각 메뉴별로 인클루드 파일이 있었음. 아아아!!!! 페이지 몇 개를 열어서 수정한 것이야…
    3. 테이블 레이아웃
    4. 인라인 스타일
    5. 개발서버와 실 서버의 환경차이로 인한 초기 셋팅 시간 지연
    6. 기존 CSS와 주소검색 CSS와의 충돌

이번 작업을 하면서 좀 더 기획서를 잘 분석해야겠다는 생각. 그리고 쿽스모드랑 테이블 레이아웃은 그만 보고 싶으며…작업 전에 기존 소스를 잘 확인 해봐야겠다.

오픈 한 것 보니 뿌듯~뿌듯~

IE9 이하에서 placeholder 적용하기

각종 입력 폼에 예시 문구를 나타내기 위해서 예전에는 이미지를 잘라서 position을 잡고 포커싱이 되면 이미지가 사라지게 하는 방법을 사용했다.

HTML5에 추가된 placeholder 속성을 사용하면 아주 간단하게 예시 문구를 처리할 수 있는데, 이 죽일 넘의 IE는 IE9 이하는 placholder가 뭔지 모른다.

하지만 간단하게 스크립트 하나만 추가하면 IE9 이하에서도 placeholder를 사용할 수 있다.

두 가지 스크립트가 있다. 하나는 JQuery를 사용하는 방법이고 하나는 Placeholders.js이다.

http://jamesallardice.github.io/Placeholders.js/  에서 스크립트를 다운 받고 아래와 같이 써준다.

이러면 끝!
각 버전별로 잘 동작하는 것을 확인할 수 있었다.

 

2014.09.22 추가사항

Placeholder.js 파일은 간편하지만, IE7~9에서 새로고침을 누른 경우 가끔 placeholder가 사라질 때가 있다.

그래서 지금 진행중인 프로젝트에서는 JQuery를 사용하는 방법을 이용하기로 한다.

우선 https://github.com/mathiasbynens/jquery-placeholder 에서 스크립트를 다운받고 아래와 같이 써준다.

그런 다음,  코드 한 줄을 추가한다.

IE7~9에서 전부 확인해보니 별 문제 없이 동작하였다. 개인적으로는 이 방법을 더 추천한다.

 

2015.02.11 추가사항

placeholder.js를 사용하면 IE9이하는  .placeholder라는 클래스가 자동으로 input에 생성된다.

이것을 이용하여 placeholder 색상을 바꿀수 있다.

다만, IE10이상, FF, Chrome의 경우는 각각 브라우저 업체별 접두어를 사용해서 변경한다.