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를 해볼 생각이다.
그리고 이번에는 토이프로젝트 뿐만 아니라 사내 프로젝트에도 쓰일 만한 곳이 없는지 잘 찾아봐야겠다.

2017년 1사분기 회고.

벌써 1년의 1/4이 지났다. 평소에도 정신없이 바쁘게 보내지만 이번 분기는 더 정신없게 지나갔다. 도대체 이번 분기에는 무엇을 했는지 한번 되짚어 보려 한다.

스킬업

  1. Next Generation
  2. Vue.js
  3. Ionic2/ng2 + firebase 스터디
  4. Docker

Next Generation은 회사에서 제작부서-기획실, 디자인실, 개발실-에서 직무별로 1명을 포함해 최대 4명이 한 팀이 되어 활용적인 측면보다는 ‘창의적 발상’과 ‘통섭적 사고’를 키우는 프로젝트이다.

프로토타입까지 제작할 필요가 없다 해서 기획단계 도출에 참여하게 되었다. 1주일 중 하루를 정해서 팀원들과 3시간 동안 주제에 관해 이야기하는 시간을 보냈다. 우리 팀의 주제는 시작은 빅데이터였으나 그 끝은 데이터웨어하우스 구축이 되었다.

다음 기수는 업무와 병행하기 버거운 느낌이라 잠시 쉬어가기로 했다. 프론트엔드 작업은 제발 다다음 기수에 들어가길.

2016년은 5개월 정도 React를 공부했고, 그에 대한 공부 계획도 세웠다. 그런데 나의 경우는 자바스크립트에 대한 기초가 부족해서 그런지 React가 너무 어려웠다. Udemy강좌를 보며 Youtube API를 연동하여 뭔가를 만들긴 했지만 온전히 내 것이 되지 않은 기분이었다.

그러다가 정말 우연히 Vue.js를 접하게 되었다. View만 다루므로 가벼운 느낌, 컴포넌트를 보면 html, JS, CSS가 함께 있으면서도 깔끔하게 분리된 모습이 맘에 들었다. 무엇보다도 학습곡선이 높지 않다는 점이 좋았다. 회사 개발자 세미나에서도 해당 주제로 발표할 예정이며, 가능하다면 외부 밋업에서도 발표하고 싶다.

Firebase는 개발자 회고 글을 모으는 YOP의 아카이브 서비스에서 사용한다는 이야기를 듣고 관심을 갖게 되었다. 그러다가 고재도님의 Ionic 2/ng 2 + Firebase 스터디 모집 소식을 들었고 Firebase 글자 하나만 보고 스터디를 신청하였다. Ionic 2/ng 2는 사실 공부할 생각이 없었지만 스터디를 하면서 흥미가 생겼고 언젠가 토이프로젝트로 앱도 만들어 봐야겠다.

Docker는 홈쇼핑처럼에서 Docker를 사용해서 무중단 배포를 한 포스트를 보고 나서 관심을 갖게 되었는데 회사에서 Docker 스터디가 생겨서 참여하게 되었다.  Gulp task로 Docker를 구성할까 했는데 좀 더 고민해봐야겠다.

학업

방송대 3학년이 되었다. 이번 학기에는 Visual C++, JAVA Programming, Database, 운영체제, 알고리즘, 이산수학을 수강 신청하였다. 운영체제와 알고리즘을 같이 넣은 것이 좀 마음에 걸리지만 뭐 어떻게든 되겠지. 이산수학은 재수강하는 과목이기 때문에 더 신경 써야 하는데 개인적인 일로 출석수업을 듣지 못했다. 나름 2주 정도 수업을 일찍 시작했는데 역시 개인적인 일로 동영상 강의도 중단한 상태다.

이번 학기는 꼭 장학금을 타고 싶었는데 가능할지는…모르겠다.

개인적인 일들

  1. 리니지 레볼루션 시작
  2. 허리디스크가 또
  3. 저탄수화물-고지방 식단 시작
  4. 삶과 죽음 사이에서
  5. 딸의 유치원 진학

설에 친정에 갔다가 작은 언니와 작은 형부가 하는 게임의 그래픽이 화려해서 물어보니 리니지 레볼루션이라고 나온 지 얼마 안 된 게임이라고 했다. 퀘스트도 자동으로 해준다고 해서 그냥 깔았는데 어쩌다보니 계속하고 있다. 석 달째 하고 있지만 레벨은 83정도로 낮다. 만랩찍으면 게임을 접을 계획인데 내가 게임 시작할 때는 만랩이 130인가 그랬던 것 같은데 지금은 180이다. 고만 올려라 넷마블!

허리의 극심한 통증과 엉덩이, 오른쪽 다리가 너무 저려서 병원에 갔더니 작년과 똑같은 허리디스크의 문제였다. 이번에도 수술 없이 주사 치료를 받았는데 작년의 주사 맞을 때 통증이 1이었다면 이번 통증은 10 정도로 아주 아팠다. 의사 선생님은 웬만하면 수술하지 말고 물리치료와 약물치료를 하라고 하였고 더 중요한 건 체중을 줄여보라고 하셨다. 그런 이유로 저탄수화물-고지방 식단을 시작하였다.

학교 선배님이 저탄수화물-고지방 식단을 통해 체중을 줄이셨다는 이야기를 들었고, 관련 페이스북 그룹에서 자료를 얻어 2월 9일부터 시작하였다. 설탕은 조미료라도 안 먹도록 조심하고, 과일도 최대한 먹지 않고, 물을 많이 마시고, 탄수화물은 1일 50g이 넘지 않도록 먹고 있다. 지방은 매일 커피에 버터 20g 정도 넣어서 먹고, 출출할 때 스트링 치즈와 카망베르 치즈, 호두로 간식을 대신하고 있다. 탄수화물은 채소를 통해서 보충하고 있다. 덕분에 지금은 약 4.9kg 정도 감량하였고 허리통증은 줄었다.

지난 3월 9일에는 시어머님이 돌아가셨다. 뭔가 마음의 준비가 되어 있지 않은 상태에서 돌아가셔서 그 충격이 너무 컸다. 그래서 그랬는지 사소한 것 하나하나 마음에 걸리지않는게 없었다. 사람은 유한한 존재이므로 언젠가 죽는다는 것을 알고 있었지만 가까운 분이 돌아가시니 죽음이 엄청 가깝게 느껴졌고 두려워졌다. 일상으로 빨리 돌아와야하는데 그게 쉽지가 않다.

딸이 올해로 5살이 되었다. 가정 어린이집은 4살까지 돌봐주기 때문에 더 큰 어린이집이나 유치원으로 보내야 할 때가 된 것이다. 어차피 유치원을 보낼 거면 빨리 보내는 것이 나을듯해서 집 근처 유치원 두 군데를 후보로 올리고 입학 설명회를 들은 후 더 마음에 끌리는 곳으로 결정했다. 물론 딸의 의견도 반영했다. 지금 보내는 유치원은 비용도 그리 비싸지 않았고 너무 멀지도 가깝지도 않은 위치고 다양한 경험을 할 수 있을 듯 했다. 다행히 딸은 유치원에 잘 적응하고 있다. 가정 어린이집에서 같이 지내던 친구랑 한 반이 돼서 더 빨리 적응한듯하다. 등 하원을 직접 못 해주고, 저녁도 잘 챙겨주지 못하는 게 미안하지만, 연차나 금요휴무나 주말에는 더 적극적으로 놀아줘야겠다.

2사분기에는

이래저래 다사다난한 1사분기였다. 2사분기에는 좀 더 학업에 집중하고 좋은 성적을 낼 수 있도록 노력해야겠다. 그리고 게임을 좀 줄이고 딸과 소중한 시간을 보내야겠다. 우리의 시간은 유한하고 그 시간은 자꾸 흐르니까 말이다.

대학생으로 보낸 1년

올 한해를 돌아보면 정말 다사다난했던 한 해였다. 많은 일이 있었지만, 그중 대학생으로 보낸 1년을 돌아보고자 한다.

나는 원래 가정관리학을 전공했다. 사실 과에 대해서 진지하게 고민해서 정했던 것도 아니고 수능 점수에 대충 맞춰서 들어간 과였다. 학교도 멀고 수업내용도 내가 생각한 수업내용도 아니였다. 애정이 없으니 학점도 좋게 나오진 않았다.

올 초 내가 소속되어 있던 프론트엔드개발팀이 디자인실에서 개발실로 이동하면서 개발자로서 지식을 쌓아야겠다는 생각이 들었다.  새로운 언어나 프레임워크를 배우는 것도 좋지만, 근본적인 지식이 더 필요하지 않을까라는 생각에  방송통신대학교 컴퓨터과학과에 편입하였다. 1학년부터 시작하면 너무 오랜 시간이 걸릴 것 같아서 2학년으로 편입하였는데 2학기 기말고사를 끝내고 가채점해보니 3년 안에 졸업하긴 힘들 것 같다.

방송대에 들어가니 몇 가지 혜택이 있었다. 키세스 국제학생증을 만들 수 있었다. 학생증을 만들고 나니 마이크로소프트, 젯브레인, 오토데스크 등의 프로그램을 무료로 사용할 수 있게 되었다.

방송대는 졸업하기 쉽지 않은 학교라고 알려져 있다. 나는 이미 학교에 다녀보았으니 뭐가 어렵겠어라고 가볍게 생각했다. 하지만 출퇴근 거리도 꽤 되고, 회사일에, 엄마, 주부 등의 역할을 하다보니 학생이라는 역할에 중심을 많이 두기 어려웠다.  1학기는 내가 하고 있던 일과 연관있는 과목이 있었고 튜터지도라는 오프라인 수업을 들어서 학과 수업을 반 이상 듣지 않았어도 점수가 잘 나왔다. 오히려 약간의 장학금을 받았다. 2학기는 적은 금액이지만 1학기에 장학금을 받았기 때문인지 더 게으르게 수업을 받았다. 결과는 처참했다. 아마 대부분의 과목을 재수강해야할 듯하다.

수업을 듣다 보니 내 시간이 너무 없고 공부한 지 너무 오래돼서 무엇 하나 외우려고 하면 외워지지도 않고 학점도 제대로 나오지 않으니 내가 이러려고 다시 대학생이 되었나 자괴감도 들었다.

어느 날인가 내가 시험공부를 하는데 딸이 공부하는 내 모습을 보고 자기가 읽는 동화책을 갖고 와서 내 앞에 앉아 “엄마 나도 엄마 옆에서 공부할래.” 라고 했다. 내가 하는 행동을 보고 딸이 그대로 행동하는 것을 보니 공부를 놓을 수 있겠나. 그리고 덕분에 처음에 내가 왜 학업을 시작하게 되었는지 돌아보게 되었다.

내년에는 학업계획을 좀 더 세밀하게 잘 세워야겠다.  그리고 절대 포기하지 말고 졸업하자.

 

나는 정보처리기사를 이렇게 준비하였다.

나도 이제 정보처리기사.

지난 7월 15일 떨리는 마음으로 정보처리기사 실기 합격자를 조회하였다.
점수는 65점. 합격이다. 시험공부를 하던 기억이 새록새록 떠올랐다. 표현이 새롭지 못하지만 정말 그랬다.

대학 졸업반 시절에도 정보처리기사시험을 보려고 했다. 비전공자라서 그런지 정보처리기사시험 책을 봐도무슨 소리인지 알아들을 수가 없었다. 필기시험 접수만 해놓고 결국 응시하지 않았다. 아까운 접수비만 날렸다.

그 후로 10여 년이 지난 작년 초쯤 누군가가 정보처리기사를 따놓는 게 좋지 않겠냐고 나에게 권유하였다. 사실 일을 하면서 정보처리기사 자격이 필요했던 적이 없어서 딸 생각이 없었다.

갖고 있으면 무엇이라도 도움이 될 거라고 생각해서 2015년 정기 기사 2회 필기를 접수하고 주변에 정보처리기사 자격증을 딴 개발자에게 필기 책을 추천받았다.

필기, 평균 점수와 각 과목의 과락점수가 난관

2015년 2회 필기시험은 시나공 정보처리기사 필기 책으로 준비하였다.

그냥 합격한 사람이 추천한 책이니 왠지 믿을만하겠다 싶었다.

책의 이론부터 읽고, 문제를 나중에 풀었다. 왠지 느낌상 정보처리기사 필기를 한 번에 붙을 것 같지 않았다. 역시나 2회 필기시험은 집에 와서 채점해보니 과락으로 떨어졌다.

그래서 2015년 3회 필기시험을 접수하였다. 기출문제 위주로 파고들었다. 책의 예상 문제도 풀었다.

오답 노트도 작성하였다. 짧은 시간 벼락치기로 공부해서 시험을 봤는데 왠지 합격할 것 같은 기분이었다. 채점을 해보니 전자계산기에서 한 문제 더 틀려서 과락으로 불합격이 예상되었다. 그런데 전자계산기 문제 중 틀린 한 문제의 보기가 모두 정답처리 되었다. 그렇게 필기에 합격하였다. 운도 노력하는 사람에게 온다는 게 맞는 말인가 싶었다. 필기에서는 전자계산기가 가장 어려우니 이 부분에 집중적인 학습이 필요하다.

실기, 겹치는 시험일정과 마지막 40 지 선다

2015년 2회 필기에 합격하고 바로 2015년 3회 실기를 접수하였다. 실기도 한 번에 붙을 것 같지 않았는데 역시나 그랬다. (왜 슬픈 예감은 틀린 적이 없나…)

본인은 방송대 컴퓨터과학과에 재학 중이다. 2016년 1회 실기를 접수하고 보니 중간고사 기간과 겹쳤다.

중간고사를 안 보면 안되나 싶었는데 정보처리기사 시험으로 중간고사를 빠지게 될 경우 사유서를 내야 하고 최대 받을 수 있는 점수가 B+로 정해져 있다. 일단 학과 성적이 중요하니 1회 실기는 패스.

실기는 실기라고 되어 있지만 40 지 선다 중에 정답을 고르는 것이다. 2회 실기까지 기존대로 40 지 선다 방식이고 3회 실기부터는 주관식으로 바뀐다는 소식을 들었다. 주관식으로 보게 되면 정보처리기사 자격은 평생 가도 못 딸 것 같은 기분이었다. 그래서 2회 실기에서 끝을 보기로 했다.

생활코딩 그룹에서 기사 시험이 끝나고 나면 언급되는 두목넷이라는 사이트에서 실기 기출문제 풀이 동영상 강의를 결제하였다. 그리고 거기서 제공하는 기출문제는 11년도부터 15년도까지 빠짐없이 풀었다. 틀리면 틀린 부분을 이해할 때까지 봤다. 알고리즘의 경우는 기존에 출제된 스타일을 보고 이런 유형이 나올 것이라고 예상해서 풀었다. 왠지 모래시계에 눈이 갔는데 실제 문제는 나비넥타이 모양이 나왔다.

동영상 강의 강사가 문제 답이 튀어나와 보일 것이라고 했는데 정말 그랬다. 데이터베이스는 운 좋게 기출문제에서 다 나왔다. 아무래도 유형이 바뀌니까 웬만하면 합격시켜 주려고 그러나 싶을 정도로 문제는 쉬웠다.

시험을 보고 나서 가답안이 돌았는데 채점하고 나서 좌절하였다. 막판에 긴가민가해서 고쳤는데 고치기 전에 답이 정답이었다. 그리고 전산영어에서 정말 쉬운 문제를 하나 틀렸다. 가채점해보니 58점이었다. 주관식으로 유형이 바뀌는 3회 실기를 준비해야 하나 했는데 알고리즘과 데이터베이스의 배점이 각 6점인데 내가 5점으로 채점해버린 것이었다. 다시 채점해보니 65점. 마킹 실수만 하지 않았다면 합격이다.

합격자 발표 날에 합격자 조회를 해보니 마킹 실수는 없었다.
그렇게 나는 정보처리기사가 되었다.

바쁜 현대인을 위한 3줄 요약.

  1. 필기는 최근 5년간 기출문제로 준비, 오답 노트로 틀린 문제는 완벽하게 이해. 전자계산기가 가장 어려움.
  2. 최근 출제된 패턴 이해, 오답 노트로 역시 틀린 문제 완벽하게 이해. 알고리즘과 데이터베이스에 집중할 것.
  3. 대부분 그렇듯이 문제에 답이 있다. 문제 지문을 꼼꼼히 읽어볼 것.

[독서] 명강사 강의 기획을 읽고

“머릿 속에 알고 있는 지식, 제대로 전달하는 방법”

올해 3월부터 방송대에 편입하여 강의를 듣게 되었다.

어떤 교수님의 강의 방식은  PPT 내용을 토씨 하나 틀리지 않고 읽어주고 있었고, 어떤 교수님의 강의 방식은  PPT는 단순 자료일 뿐이고 강의 내용을 말로 잘 풀어서 설명해주었다. 사실 토씨 하나 틀리지 않고 자료를 읽어주는 방식의 강의는 따분하고 지루하고 딴짓을 하게 된다.

사실 나의 꿈은 언젠가는 강의를 하는 것이 꿈이다.

간단한 발표나 강의는 해봤지만 스스로 만족할 만큼의 질이었나 생각하게 된다. 이 책은 지금 당장은 아니더라도 나중에 내가 강의를 하고자 할 때 기획 단계부터 자료 수집, 강의 자료 작성, 발표에 이르기까지 도움이 될 것 같다. 책을 읽으며 강사 경력 15년의 저자가 하나하나 가르쳐 주는 느낌을 받기도 하였다. 다만 자료에 대한 부분은 약간 예스러운 서식이 예시라서 아쉽다. 자료가 뭣이 중헌디라고 하면 할 말은 없지만 최근 강의를 듣는 사람들의 눈도 많이 높아졌기 때문이다.

머릿속으로 알고 있는 지식을 다른 사람에게 전달하기는 쉽지 않다.

그렇기 때문에 강의에는 제대로 된 기획단계가 필요한 것이다. 이 책을 읽으면서 4년 전에 실원을 대상으로 마크업 종일 강의를 해본 기억이 났다. 나 역시 강의가 처음이라 일단은 커리큘럼부터 짜고 커리큘럼에 따라 내용을 정리하고, 정리한 내용을 토대로 자료를 만들었다. 자료는 일단 재미가 있어야 한다는 생각에 온갖 드립을 집어넣었다. 나는 재밌다고 생각했지만 뜻밖에 공감을 받지 못했던 기억이 난다. 조금 차별점이 있었다면 마치 레스토랑에서 코스 요리를 먹는 것에 비유해서 학습의 단계를 표현하고 강의 자료를 만들었던 것이었다. 틀에 박힌 사고는 아니었고 나름 흥미는 유발했다고 생각한다. 그나마 이 책에서 말한 강의 기획의 단계별 활동에 맞게 강의를 잘 짜낸 것 같다. 물론 시간이 부족해서 예행연습은 하지 못했지만.

아무래도 사람이 하는 일에는 시행착오가 생기기 마련인데 이 책에서는 강의도 오점 노트를 작성해서 다시는 그러한 시행착오가 생기지 않게 자유로운 형식으로 적어놓으라고 한다. 강의나 발표나 비슷하다고 생각하니 나의 경우에는 최근에 발표했을 때 처음에는 딱딱한 방식으로 말하다가 긴장이 풀려서 자연스럽게 이야기하게 된 것을 오점 노트에 적으면 좋을 듯하다. 그리고 PPT가 동시에 여러 페이지가 넘어갔던 부분은 사전에 발표 장소의 환경을 파악하지 못했기에 발생한 문제이니 이런 부분도 오점 노트로 작성하고 다음에는 같은 실수를 하지 않는 것이 중요하다고 생각한다. 강의 오점 노트 작성 부분이 가장 이 책에서 주목할 부분이라고 생각한다.

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로 뭔가 개발했다는 글을 올 연말에는 남기고 싶다.

내가 받고 싶은 관리

사회생활을 시작한 지 벌써 15년.
나는 아직도 관리하는 처지가 아닌 관리 받아야 하는 위치에 있다.
관리자가 되고 싶다! 이런 마음을 버린 지 오래되었지만, 혹시라도 나중에 관리자가 되었을 때
관리받는 사람의 입장을 잊어버릴 수도 있으니 내가 받고 싶은 관리에 대해 적어본다.
  1. 팀원을 절대 불평등하게 대하지 말자.
  2. 공적인 일에 나의 감정을 섞지 말자.
  3. 팀원 개개인의 특기가 무엇인지 파악하여 그 특기를 잘 살려주자.
  4. 팀원 누구라도 소외감을 느끼지 않게 하자.
  5. 대화는 꼭 얼굴을 보고 하자.
  6. 퇴근 전후에는 긴급한 일이 아니면 연락하지 말자.
  7. 팀원의 편을 들어주자.
  8. 성과를 위해 팀원만 고생시키지 말고 같이 하자.
  9. 절대 팀원의 험담을 하지 말자.
  10. 내가 대접받고 싶은 만큼 상대를 대접하자.
아마 내가 관리자가 아니라서 바라는 게 많을지도 모른다.
사회 전반적으로 실적을 너무 강요하기 때문에 관리자도 압박을 받고 어쩔 수 없이
팀원에게 잘 신경을 쓰지 못할 수도 있겠다는 생각도 든다.
in 일상 끄적끄적 | 0 Words | Comment

[독서] 나는 왜 형제가 불편할까? 를 읽고

“그래도 평생 친구, 형제자매”

나는 3자매 중 막내다. 큰언니와는 나이 차이가 6살 차이가 나고, 작은언니와는 3살 차이가 난다.큰언니는 나이 차가 많이 나는데도 나보다 더 어리게 느껴질 때도 있었고 역시 장녀라는 생각이 들게 행동할 때도 있었다.
작은언니는 나이에 비해 어른스러운 구석이 있었고 반항 한 번 한 적이 없었다. 두 언니는 어릴 때부터 같이 여행을 다니기도 하고 그래서 그런지 나보다는 둘이 더 친했다. 나의 경우는 어려서 몸이 허약해서 집 밖에 나가서 놀지 않고 책만 읽었다. 아무래도 책만 읽던 나의 존재를 드러내기 위한 수단은 책으로 익힌 지식을 다른 사람에게 과시하는 것이었다. 어린아이가 어린아이 같지 않으니 두 언니는 그런 나를 부끄러워했다.
그런데 이런 우리 관계도 시간이 흐르면서 바뀌었다. 항상 같이 살 줄 알았지만, 결혼을 하게 되면서 각각의 가정을 이루어 살게 되었다. 각자 태어나서 자랄 때까지는 다른 상황에 놓였었지만,  결혼, 출산, 육아를 하다 보니 같은 상황에 놓이니 자매를 이해하게 되었고, 그런 과정에서 서로의 이야기를 하게 되었다. 나는 나름대로 내가 부모님의 애정을 적게 받았다고 생각하고 언니들을 질투했지만 반대로 언니들도 내가 부모님의 애정을 더 많이 가져갔다고 생각하고 있었다. 생각해보니 내가 허약했던 탓에 1년 정도 어머니의 집중적인 과잉보호가 있었다. 작은언니가 어른스러운 구석이 생긴 건 바로 이 때문이었으리라. 학교 다닐 때 학습지 하나 더 하고 싶어도 부모님의 사정을 생각하다 보니 그런 내색도 못했다고 한다. 이러한 이야기를 들으면서 각자 사정이 있음을 알게 되었다.
나는 왜 형제가 불편할까라는 책을 접했을 때, 형제가 불편하다고? 이게 말이 되나? 라고 생각했다. 우리 자매는 이미 불편한 사이였던 관계를 청산하고, 오히려 가정에 위기가 닥쳤을 때 뭉쳐 그 위기를 극복하고 있기 때문이었다.
형제자매의 불편한 사이는 부모의 역할도 중요한 것 같다. 책 내용 중 허약한 아이가 있으면 부모가 더욱 건강한 아이에게는 신경을 쓰지 못한다는 부분을 보니 형제자매가 문제가 아니라 역시나 부모의 양육방식이 문제구나라는 생각이 들었다. 다행히도 부모님은 최대한 우리에게 공평하려고 애쓰셨었다. 혼날 때도 억울하지만 셋이 같이 혼났고 먹을 것도 똑같이 나눠주었던 기억이 난다.
책에서 가장 인상 깊었던 부분은 각자 태어난 순서에 따라 그 성격 차에 대해 설명한 부분이었다. 그 부분을 보면서 우리 자매들의 성향이 그래서 다르다고 생각하였다. 흥미로운 것은 둘째에 관해 설명한 부분이 다른 형제에 비해 많다는 것이었다. 혹시 저자는 둘째인가 라는 생각이 들 정도였다. 사례들이 있어서 이해하긴 쉽지만, 자칫 일반화의 오류를 범하지 않겠냐는 우려도 있다.
이 책은 형제자매 관계에 대해 다루지만, 사실은 그 원인의 근거를 부모에게 두고 있다. 그렇다면 책의 제목은 형제자매가 아닌 부모에 초점을 맞춰지었어야 하지 않겠냐는 생각이 든다.

[독서] 신혼 3년의 힘을 읽고

“재테크 시기를 놓쳤다면 신혼 3년 기간을 잘 활용해보자.”
누구나 재테크를 해야겠다고 마음은 먹지만 세상에 얼마나 지름의 유혹이 많은가.
게다가 그 유혹을 이기고 재테크를 한다고 해도 결국 그 모은 돈은 결혼 자금으로 상당 부분 쓰이게 된다.
대부분의 재테크 책에서는 재테크를 신입때 부터 시작하라고 한다. 그러면 30대가 넘은 시점은 늦어버린 건가라는 좌절감에 빠지고 막막하고 답답한 기분이 들게 된다. 책을 보려고 해도 책은 두껍고 용어는 어렵다.
딱히 재테크를 해본 적이 없어서 포트폴리오도 어떻게 짜야 할지 걱정이다.
“신혼 3년의 힘”은  책 두께도 그리 두껍지 않은데, 알차게 재테크에 대한 내용을 다루고 있다.  그리고, “신혼 3년”을 잘 활용해보라고 말하고 있다. 아직 아이가 없다면 그나마 지출이 적기에 돈을 더 잘 모을 수있기 때문이 아닐까 싶다. 친절하게 신혼이 없이 바로 아이가 생겨버린 경우에 대해서도 다루고 있다.
계획을 잘 짜서 노후를 준비하라는 관념적인 이야기보다는 목표달성을 위한 인생계획표도 제시하고 있다. 엑셀 표로 작성하면 한 눈에 보기 쉬울 것 같다.
요즘 같은 저금리 시대에 어떻게 투자할지 막막한데 실제 포트폴리오를 조정한 사례도 다루고 있다. 표와 함께 조정 전, 조정 후의 모습을 비교해주니 나의 포트폴리오도 어떻게 조정하면 좋을지 대충 머릿속으로 그려졌다.
나는 이미 책에서 말하는 예비부부도 신혼도 아니지만 내 상황에 맞게 받아들일 만한 내용이 많았다.  어찌 보면 어디서 본 내용이 많을 수 있다. 그러한 내용을 나열하는 것에 그치는 것이 아니라 5000만 원이라는 종잣돈을 3년간 어떻게 해서 모으고 어떻게 굴려서 노후자금까지 이르게 하는지를 다루고 있다.
이 정도면 고기 잡는 법이 아니라 고기까지 잡아준 듯한 느낌이다.
책을 덮으며 이번엔 진짜 제대로 된 재테크를 해보자고 다짐하게 되었다.
(과연 실천은 언제?)