Vue.js 시작하기 – Age of Vue.js

Vue.js 시작하기 – Age of Vue.js

“1000명이 넘는 분들의 성원과 피드백에 힘입어 새롭게 탄생한 Vue.js 입문 강좌입니다”

강좌소개

누구나 다루기 쉬운 Vue.js 입문의 리뉴얼 강좌입니다. 입문자 관점으로 더욱더 눈높이를 낮춰 프런트엔드 개발할 때 알고 있으면 좋은 지식들을 상세하게 설명하였습니다. Vue.js로 재밌게 웹 개발을 시작하실 수 있도록 알차게 내용을 구성하였으니 관심 있으신 분들은 90초 소개 영상을 꼭 확인해보시고 수강 신청해주세요 😁

강좌를 들으면서 Do it! Vue.js 입문 책도 함께 보시면 더 좋습니다. 미리 책을 보고 강의로 더 살을 붙이셔도 될 것 같아요. 책에는 없는 내용들도 많이 다뤘습니다 😁

누구에게 도움이 되나요?

1. 프런트엔드 개발에 입문하는 분 
2. 프런트엔드 개발자로 전향하고픈 퍼블리셔 
3. 프런트엔드 개발을 해보고 싶은 디자이너 
4. 프론트엔드 개발자로 취업을 희망하는 대학생 
5. jQuery에서 벗어나 프레임워크를 사용하고픈 백엔드 개발자
※ 다만 HTML, CSS, JS 의 기초는 알고 계셔야 합니다..! 😁

함께 실습해요!

추천 학습 로드맵

1. Vue.js 시작하기 
Age of Vue.js (현재강좌)

2. Vue.js 중급 강좌
웹앱 제작으로 배워보는 
Vue.js, ES6, Vuex 

3. 쉽게 배우는 Webpack
최신 프론트엔드 프레임워크
(React, Angular, Vue)에서 
필수로 사용되는 도구

4. Vue.js 고급 강좌
Vue.js 완벽 가이드

같이 공부하면 좋은 자료

vuejs

강좌를 들으면서, 입문 책도 함께 공부해보세요 🙂
vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고, 
실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과 
프로젝트 구조화 노하우까지 알차게 담았습니다.

배우면 할 수 있는 것들

  • Vue.js 개발
  • 화면 UI 개발
  • 프런트엔드 개발

수강 대상

  • 프런트엔드 입문 개발자
  • 대학생
  • 디자이너
  • 퍼블리셔
  • 백엔드 개발자
  • 프런트엔드 개발자

선수 지식

  • Javascript
  • CSS
  • HTML

지식공유자 소개

장기효 (캡틴판교)

  인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

“강의 수익금으로 Vue.js 커뮤니티와 생활 코딩을 후원합니다 😁”

Vue.js 완벽 가이드

Vue.js 완벽 가이드

배우러 가기

1. Vue.js Complete Guide

“Vue.js 완벽 가이드”
Do it! Vue.js 입문 → Vue.js 초급 강좌 → Vue.js 중급 강좌의 계보를 잇는 Vue.js 실전 강좌입니다. 실제 API로 웹 서비스를 만들어나가면서 Vue Router, Vuex를 비롯한 HTTP 통신 구현 방법과 외부 라이브러리 사용 방법, 컴포넌트 디자인 패턴 등 Vue.js를 실무에서 사용할 때 필요한 모든 기술과 지식을 알아봅니다.

“Vue 창시자, 에반 유에게 배운 그 내용”
Vue.js 창시자 Evan You의 오프라인 수업에서 익힌 고급 기술과 Vue 코어 팀 멤버들에게 전수 받은 지식을 그대로 녹여내었습니다. 잘하는 Vue.js 개발자들은 어떻게 코드를 작성하는지 이번 강의에서 함께 알아보겠습니다.

“단순 지식 전달형 강의는 이제 그만, 실습 유도의 대화형(Interactive) 강의
단순히 코드만 따라쳐서는 내 것이 되지 않습니다. 간결한 이론 설명과 강사의 시범 구현 후 수강생분들과 함께 웹 서비스를 만들어나가는 대화형(Interactive) 강의를 지향합니다. 12개의 실습 예제를 통해 강사가 알려준 내용을 내 것으로 만들어보세요.

“입문자의 눈높이에서 바라보는 리팩토링(코드 개선)”
컴포넌트 기반 개발 방식보다 jQuery가 더 익숙한 입문자 분들의 눈높이에서 서비스를 설계하고, 같이 코드와 애플리케이션의 구조를 개선시켜나가며 컴포넌트 기반 사고력을 기릅니다. 실무에 바로 적용 가능한 코드를 함께 만들어봅니다.

2. 어떤 걸 배우나요?

  • 최신 뷰 CLI(v3.0)로 프로젝트를 구성하고 개발하는 방법
  • Vue Router 기본부터 실전, 그리고 고급 패턴까지
  • Axios를 이용한 API 호출 방법과 자바스크립트 비동기 처리
  • Vuex와 상태 관리에 대한 깊은 이해
  • User Experience를 고려한 데이터 호출 방법
  • Mixins와 High Order Component를 이용한 컴포넌트 재활용
  • 외부 라이브러리를 프로젝트에 결합하는 방법
  • 뷰 컴포넌트 Design Pattern

3. 강좌 특징

2년간 오프라인 수업에서 200명의 수강생을 가르치며 깨달은 입문자 관점으로 수업 교과과정을 구성하였습니다. 컴포넌트 기반 사고에 익숙하지 않은 분들이 자연스럽게 컴포넌트 기반 사고를 할 수 있도록 실습과 리팩토링을 수업 곳곳에 녹여내었습니다. 수업을 다 듣고 나면 한층 더 성장한 자신의 모습을 발견하실 수 있을거에요 🙂

4. 누구에게 도움이 되나요?

  • Vue.js로 새 프로젝트를 시작하는 실무자
  • Vue.js로 나만의 서비스를 만들고 싶은 프런트엔드, 백엔드 개발자
  • Vue.js를 더 잘 사용해보고 싶은 Vue.js 개발자
  • 기초, 중급 강좌를 들었지만 아직은 서비스 개발이 낯선 퍼블리셔, 디자이너
  • 취업용 포트폴리오를 준비하는 대학생
  • 기술 인터뷰를 준비하는 이직 희망자

5. 지식공유자 소개

장기효(캡틴 판교)

  인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

배우러 가기

지금이 웹 개발하기엔 ‘참 좋은 시기’ – 개발자 장기효 2편

지금이 웹 개발하기엔 ‘참 좋은 시기’ – 개발자 장기효 2편

Today We Learned #02
인프런이 만난 사람 – 개발자에게 듣다

지금이 웹 개발하기엔 참 좋은 시기

– 웹 개발자 장기효 2편

 

요즘 비전공자분들도 웹 개발을 배워요. 강의하는 입장에서도 느끼시나요.

네. 오프라인 수업에서도 비전공자들이 대다수에요. 수업 들으시는 분들은 전공자들이 오히려 별로 없어요. 비전공자들이 많아요. 실질적으로 인프런에서도 비전공자가 배움을 더 갈망하시는 것 같아요.

프론트엔드 개발에 어울리는 자질이 있을까요? 

프론트엔드는 상대방의, 사용하는 사람의 시각에서 볼 줄 알아야 한다고 생각해요. 만약 제가 사용할 땐 되게 편한데 다른 사람은 불편하다고 말해요. 그럼 이렇게 얘기할 수 있어요. “어, 나는 편한데 너는 왜 불편해?” 그런 사람은 프론트엔드 개발자가 되면 안 되고요. 오히려 자기 생각보다 주변 의견을 듣고 종합해서 서비스에 반영할 수 있는 사람이 프론트엔드 개발자에 맞는 것 같아요.

문제점이 있다면 같이 공감하고 해결할 수 있는 사람. 그냥 기술이 좋다고 기술을 배워서 적용하고 끝났어, 이게 아니라. 기술은 사실 도구거든요. Vue.js도 도구인 거고. 궁극적으로 프로그램을 만드는 이유는 모두 편하게 쓰기 위해서예요.

아까 제가 인턴할 때 사람들이 편하게 사용하면 좋다고 말한 것도 같은 맥락이에요. 결국 사용하는 사람들을 생각해서 만드는 거니까. 그런 관점에서 접근할 수 있는 관점과 태도가 필요해요.

책에 ’내 꿈은 세상을 이롭게 하는 것이다’라고 적혀있어요.

친구가 추천서를 좋게 써줬고요. 원래 글을 잘 쓰는 친구예요. 받아 읽고 감격했죠. 그래. 내 목적은 세상을 이롭게 하는 것이지, 하면서. (웃음) 친구가 평상시 저를 보고 좋게 표현해줬어요.

솔직히 블로그에 글쓴다고 해서 돈을 버는 건 아니거든요. 제 블로그에는 광고를 달지 않았어요. 소소하게라도 광고를 달면 운영에 금전적으로 도움을 받지만, 컨텐츠에 집중하는 환경을 만들고 싶었어요. 그래서 광고를 달지 않았고. 글을 공유했을 때 사람들이 글을 통해 도움을 받잖아요. 그럼 사람들은 또 다른 사람에게 나눠주거든요. 그런 문화를 시작할 수 있다고 생각해서 블로그 활동을 해요.

그리고 ‘감사합니다’, ’잘 읽었습니다’ 이렇게 댓글이 달리면 메일이 와요. 그럼 되게 기분이 좋아요. 그래서 또 쓰게 되죠. 중독성이 있어요. 이걸 보고 도움을 받는 사람이 있구나, 그럼 더 잘 정리해서 올려야겠다는 마음이 생겨요.

‘내 꿈은 부자가 되는 것이다’ 하는 사람도 많잖아요.

아, 부자는 필요 없는 것 같은데요? 하하 사실 돈에 대한 가치가 다 다르니까요. 회사 다니면 월급 나오잖아요. 주는 월급으로도 밥 먹고 사는 데에는 지장 없거든요. 거기서 돈 욕심을 더 부린다고 저에게 행복이 돌아오는 건지 잘 모르겠어요. 그래서 돈에 대한 욕심은 별로 없어요.

Vue.js, Webpack, PWA 강의를 올려주셨어요. 세 강의는 어떤 관계에 있나요?

방금 말씀하신대로Vue.js – Webpack – PWA 순서로 배우면 좋아요. Vue.js는 화면을 개발하기 위한 도구에요. 땅을 파기 위한 도구라면 삽이랑 포크레인이 있잖아요. 비유하자면 Vue.js는 삽이랑 포크레인 사용법을 배우는 거예요. 그리고 Webpack은 Vue.js를 잘 쓰기 위한 보조도구에요.

Webpack은 삽을 쓴다고 했을 때, 삽질(?)을 더 잘하게 도와주는 장갑이라고 생각할 수 있어요. PWA는 땅을 어떻게 (예쁘게) 팔 거냐는 관점에서, 그러니까 설계 관점에서 바라보면 좋을 것 같아요.  기본적으로 웹이 제공하는 것 이상의 부수적인 사용자 경험을 주고 싶을 때 PWA를 선택하는 게 좋아요.

ⓒ 인프런

 

Vue.js를 배우고 나서 웹팩은 안 배워도 돼요. 배우는 게 좋지만 Vue.js로 만들어진 웹사이트에 PWA를 올릴 수 있어요. 입힌다고 하는 게 더욱 정확한 표현일 거 같아요. 스텝별로 밟아간다면 Vue.js  – Webpack – PWA 순서가 괜찮아요. 만약 모바일 앱을 만들고 싶다면 뷰 다음에 웹팩 대신 PWA로 넘어가면 될 것 같아요.

Vue.js 책을 쓸 때 수면과 수명을 줄여가면서 쓰셨다고

팩트를 짚자면 절대 밤을 새우진 않았고요, 그때 출근을 두 번 했어요. 아침에 9시에 출근하고 6시에 퇴근하면 판교역 앞에 파스쿠찌 카페로 2차 출근해서 오후 7시부터 12시까지, 그리고 집에 와서 보통 새벽 2-3시까지도 작업했어요. 그런 식으로 매일매일 주말도 없이 약 세 달을 그렇게 하니깐. 좀 힘들었죠.

자바나 다른 언어들은 한 번에 여러 개의 일들을 처리할 수 있는데, 자바스크립트는 언어의 특성상 한 번에 한 개의 일 밖에 못해요. 저도 약간 그런 스타일이에요. 하나의 일을 끝내지 않으면 다른 일에 스위칭을 잘 못해서 빨리하고 다른 일로 넘어가는 스타일이에요. 그래서 책을 무조건 빨리 써야지 다른 개인 개발이나 다른 공부를 하겠다 싶어서 좀 몰아서 했었죠.

개발 빼고 요즘 꽂혀 있는 건 있나요? 

개발 빼고요? 세상에. 친동생이 결혼을 해서 축가 연습에 꽂혀있었고요. 그거 끝나고 지금은 모든 정신이 개발 쪽에 있어요. 근데 안 좋은 거 같은데요. 하하. 저는 괜찮은데 남들이 봤을 때는 ‘개발 안 하면 못사네’ 라고 생각할까봐요.

주말에 여자친구랑 같이 코딩하신다고 들었어요.

저희가 3년 정도 만났는데요, 일수가 이제 1000일이 조금 넘잖아요. 장담하건대 930일은 코딩했을 것 같아요. 거의 90%는 코딩했어요. 가끔씩 저는 이 사람은 나랑 연애를 하는 건가, 코딩하려고 부르는 건가 싶기도. 하하. 저보다 제 여자친구가 배울 게 더 많은 사람 같아요. 먼저 제안을 많이 해줘요. 어느 날은 여자친구가 이야기하고 다음에 여자친구가 한가해지면 제가 할 거 있다고. 그런 식으로 계속 주고받아요.

5년 후에 그리는 자기 자신의 모습이 있나요?

5년 후엔 길거리에서 산소통을 쓰고 있을 것 같아요. 요즘 미세먼지가 너무 안 좋아가지고! (웃음) 그런 맥락에서 해외에서 근무해보고 싶어요. 원격근무하더라도 판교역 근처 카페가 아니라 스위스 같은 데 가서 맑은 공기 마시면서 일해보고 싶어요. 개인적으로는 리모트 워킹같은 것도 해볼까 싶긴해요. 내년엔 한번 가봐야 할 것 같아요. 5년 뒤에는 캡틴 팔로알토*가 되겠습니다. 캡틴, 판교할 때 이니셜 P가 안 바뀌고 지역만 바뀌는 거죠. 도전해보고 싶네요. *실리콘밸리 지역명

강의를 듣는 분들께 건네고 싶은 말 부탁드려요.

저는 고무적인 말을 하고 싶은데요. 제가 보기에 지금이 웹 개발하기엔 참 좋은 시기라고 생각해요. 기존에 있던 웹이 많이 변하고 있어요. 아, 갑자기 생각나네요. 한 수강생 분이 인프런  Vue.js 초급 강의 있잖아요? 3시간 듣고 회사 합격했다고 하셨어요. 원래 Vue.js를 몰랐는데, 면접 때 Vue.js 과제가 나왔다고 하시더라고요.

ⓒ Vue.js

이런 이야기를 하는 이유가, 요즘 프론트엔드가 많이 바뀌고 있어요. 새로운 도구가 많이 나와서 기존에 잘하던 사람들도 결국에는 학습하고 알아야지 경쟁이 되거든요.

기존 기술로 현재의 기술을 대체하거나 경쟁할 수 있는 시대가 지났기 때문에, 오히려 지금 새롭게 웹 개발하시는 분들에게 기회가 아닌가 싶어요. 기업에서도 맨 앞단에 있는 최신 기술 도구를 이해하는 사람을 뽑고 싶어 할 거예요. 오히려 기업들이 그런 개발자를 뽑고 싶어 하지만 없어서 문제라고 생각하거든요.

진짜 이건 빈말이 아니고요. 강의를 하다 보면 주변에도 사람을 추천해달라는 사람이 많은데, 은근히 최신 개발 환경을 이해하면서 개발하는 분이 많이 없더라고요. 그래서 인프런 같은 플랫폼이 도움이 될 거 같아요.

저 말고도 김정환 님 강의도 있고 워낙 좋은 강의들이 많잖아요. 김민준(Velopert)님 강의도 있고 진짜 잘하시는 분들이 많아요. 원래는 학원까지 시간을 내고 멀리가서 오랫동안 강의를 듣고, 이런 수고를 해야 하는데, 집에서 그냥 클릭으로 그렇게 잘 하시는 분들의 강의를 저렴한 가격에 수십 개 듣잖아요. 그게 큰 이점이죠.

저도 어제 회사에서 급하게 스프링 개발을 하게 돼서 스프링을 배워야 하는데요. 방법이 여러 가지가 있어요. 스프링 공식 문서를 보던지, 아니면 서점에서 스프링 책을 사봐야 해요. 책은 약간 원하는 부분을 빠르게 보기 어렵고 무엇보다 시간이 많이 걸리는 측면이 있어요.

그런데 백기선님 강의를 들으면 이미 목차가 있고 제가 필요한 부분만 클릭해서 바로 볼 수 있어요. 그리고 원소스 자체에서 진짜 잘하는 분의 지식이나 노하우를 바로 얻을 수가 있잖아요? 그건 돈으로 못 사는 거죠. 기선 님 강의가 제 입장에서는 급하게 해야 하니까 50만 원이더라도 (물론 개인 돈 아니고 회사 돈 내겠지만) 그만큼이라도 지불하고 볼만할 가치가 있다고 생각해요. 시간을 돈주고 사는 거니까요. 솔직한 얘기를 드린 거예요. 지금 실제로 듣고 있고, 돌아가서 스프링부트(Spring Boot)해야 해요.

저희 팀 개발자가 궁금해 합니다. 점심에 뭘 드셨나요?

점심은 갈비탕을 먹었습니다. 넥슨이랑 SK플래닛 건너편에 만도가 있어요. 거기 건물 옆에 천지연이라고 있어요. 조금 비싸고 가격이 있는데 거기 갈비탕이 아주 맛있어요.

캡틴판교 장기효 님이 정성껏 만들었습니다.
프론트엔드 개발 공부에 도움되는 링크모음

취미번역
https://www.slideshare.net/GihyoJoshuaJang/gdg-lightening-talk-1-66493746
왜 43%의 프론트엔드 개발자들은 Vue.js를 배우고 싶어하나?
https://joshua1988.github.io/web-development/translation/why-43percent-devs-wanna-learn-vuejs/
React 인가 Vue 인가?
https://joshua1988.github.io/web-development/translation/vue-or-react/

우리는 성장 기회의 평등을 추구합니다.

 

결국엔 ‘같이 간다’는 마음으로 – 웹 개발자 장기효 1편

결국엔 ‘같이 간다’는 마음으로 – 웹 개발자 장기효 1편

Today We Learned #02
인프런이 만난 사람 – 개발자에게 듣다

결국에는 ‘같이 간다’는 마음으로

– 웹 개발자 장기효 1편

jang
포스코 ICT에서 웹 개발자로 일하는 장기효 님은 수식어도 직함(?)도 많은 사람입니다. 프론트엔드 개발자, 번역하는 개발자, 노래하는 개발자, 웹 개발자 캡틴판교 블로그 운영자, 그리고 틈틈이 Vue.js 강의를 만드는 기효 님은 프론트엔드 개발자(Frontend web Developer)는 상대방의, 사용하는 사람의 시각에서 볼 줄 알아야 한다고 말했습니다. 왜 그런지, 팔방미인 웹 개발자 캡틴판교, 장기효님의 이야기를 들어보았습니다.

어떤 일을 하나요? 

저는 회사에서 웹 애플리케이션을 만드는 웹 개발자에요. 회사에서 시키는 건 하지 않구요. 아니, 시키는 대로 하지 않구요. 하고 싶은 거 위주로, 주로 웹 개발을 많이 했어요. 좀 더 구체적으로 말씀드릴까요? 신문에도 나오는데요. 사무자동화 프로그램을 만들고 있어요. 그게 인간이(…) 다 해고당하는 프로젝트인데요. 하하, 인사팀이나 노무팀에서 월급날이 되면 ERP 시스템 들어가서 클릭, 클릭한 다음에 돈을 지불하고 하는 과정들 있잖아요. 이제 로봇이 하는 일이 될 거예요. 그런 서비스를 만들고 있어요.

업무를 자동화하는

네 맞아요. 자동화하는 일을 하고요, 자동화를 하면 컴퓨터마다 로봇들이 따로 있잖아요. 그 로봇들을 다 관리할 수 있도록 화면이랑, 부수적으로 플랫폼같은 것들을 만들고 있어요. 여러  관리 화면에서 파일들의 정보를 관리해서 다른 사람에게 넘겨주는 프로그램들을 만들어요.

근무환경은 어떠신가요? 

어떻게 얘기해야 되지? 원래는 제가 회사에 갖고 있던 이미지가 되게 좋았어요. 제가 원래 프론트엔드 개발자인데요. 회사에서 외주직원을 뽑아서 백엔드 개발을 하다가 그 외주 직원이 그냥 나가버렸어요. 하던 업무를 인수인계도 안 하고, 설명도 안 해주고 무단으로 나갔어요. 아무 말도 없이. 그리고 남아있는 사람이 일처리를 해요.

일반적으로 SI*는 외주, 프리랜서를 많이 뽑다 보니까 법적으로도 관리가 잘 안되는 것 같아요. 이건 최근에 겪은 일이고요. 전체적으로 회사는 제가 5년을 다녔는데요. 근무환경은 되게 좋았어요. 왜냐하면 사람들이 다 제가 새로운 걸 한다고 했을 때도, ‘어, 그래, 해봐!’ 약간 이런 식으로 반응해주셨어요. 보수적으로 ‘네가 그런 걸 왜 하냐?’ 이런 반응이 아니라. 한번 해보라고.
*system integration : 기업이 필요로 하는 정보시스템에 관한 기획에서부터 개발과 구축, 나아가서는 운영까지의 모든 서비스를 제공하는 일.

그래서 PWA나 이런 것도 회사에 적용하면 좋을 것 같아 개인적으로 학습해서 적용했어요. 저의 선택에 지지를 많이 해주셔서 그런 부분 때문에 여태까지 회사 생활을 재밌게는(?) 아니고요. 하하. 순탄하게 할 수 있었어요. 일단 같이 일하는 사람들이 되게 좋아요.

컴퓨터 공학을 전공하셨나요.

네. 어렸을 때부터 컴퓨터를 좋아했어요. 초등학교 때, 90년대 중반이니까 그 시절엔 인터넷도 없었죠. 이상하게 아버지가 집에 새로운 기계들을 많이 들여다 놓으셨어요. 저희 아버지가 삐삐도 맨 처음 사셨어요. 컴퓨터를 들여다 놓고부터는 집에서 컴퓨터를 만지작거리면서 놀았죠. 그래서 초등학교 때부터 컴퓨터를 되게 잘했어요. 별명이 컴퓨터 수리공이었어요. 그리고 제 동생이 기계들을 다 고장냈는데요. 제가 하나씩 고쳤어요. 동생이 고장 낸 것들을. 동생은 고장 내고. 저는 고치고.

ⓒ samsung

쿵짝이 잘 맞는 형제(?)였네요. 학교생활은 어떠셨어요? 

네. 컴퓨터를 원래 좋아했었고. 학교 다닐 땐 IT 경영 관련 학회를 했어요. 20대 때 미국에서 인턴했을 때 개발 일을 하고 싶다고 생각한 것 같아요. 그전에는 그냥 이걸 재밌으니까 하고 공부하고 그랬는데요. 제가 미국에서 인턴을 했었거든요. WEST라는 프로그램이 있어요. 그때 인턴을 처음 했거든요.
한-미 정부 간에 협약을 맺어서 한국에서 대학생들을 모아서 미국으로 보내면, 비자 문제를 도와주고 기업에 취직을 시켜주는 프로그램

IT 전문 기업은 아니었지만 제가 컴공이니까 IT 관련 부서에 가서 시스템을 만드는 일을 했어요. 그 일을 할 때 뭔가, 되게 뿌듯하더라고요. 왜냐면, 예를 들어 직원이 회사에 와서 하루에 세 시간 동안 작업해야 하는 일을 프로그램을 만들면 1시간이면 다 해요. 그런 프로그램을 만들어드렸더니 되게 좋아하는 거예요. 너무 고맙다고. 그때 뿌듯한 거예요. 와 이쪽 길이 나랑 맞는구나. 이런 걸 만들어서 사람들이 편해지면 좋겠구나.

그때 이후로 계속 그 방면으로 생각했던 것 같아요. 그런 프로그램을 여기 이 회사 와서도 몇 개 만들었어요. 실제로 사내에서 지금도 쓰고 있는 프로그램이고요. PWA도 그래서 한 거예요. 제가 보기에 비효율적인 부분들이 있어서, 이건 이렇게 하면 더 편리할 텐데 하는 부분들이 있잖아요. 그걸 개선하는 프로그램을 만드니까 편하게 일할 수 있었어요.

노래하는 개발자라고 적어두셨어요. 

노래를 되게 좋아하고요. 집에서 소소하게 홈레코딩을 해요. 작곡은 아니고요. 노래 부르는 거 좋아하니까 MR을 띄워놓고 인프런 강의에도 쓰는 마이크로. (웃음) 그 마이크가 음질이 되게 좋아요. 맥으로 작업을 하는 거죠. 녹음하고, 들어보고, 여긴 이렇게 불러보고. 제 개인적인 소망은 나중에 집 평수가 넉넉해졌을 때 녹음실 같은 걸 만들어놓고 음악 작업을 해보고 싶어요. 지금은 소소하게. 제 개인적인 취미활동이니까. 단점은 집이기 때문에 고음을 마음 놓고 지를 수 없어요. 조용한 노래를 조용하게 불러야 해요. 하하

웹 개발자 캡틴판교 블로그*를 운영하고 계세요. 닉네임은 캡틴아메리카에서 따온 건가요?


ⓒ captain pangyo

네. 제가 캡틴 아메리카를 되게 좋아하고요. 예전부터 몸을 잘 만들고 싶어서 캡틴 아메리카를 롤모델로 운동을 많이 했거든요. 요즘은 부상때문에 많이 못 했는데. 운동을 많이 할 땐 하루에 두세 번 할 때도 있었어요. 요즘은 조금 심각하지만 하하.

마블 영화를 좋아해요. 거의 세계관을 꿰뚫고 있고. <퍼스트어벤져>랑 <윈터솔져>랑 <시빌워>랑 이렇게 캡틴아메리카 시리즈가 있는데요. 각각을 최소 10번씩 봤어요. 심심할 때 또다시 봐요. 되게 재밌어요. 근데 아직 얼마 전에 나온 <인피니티워>는 다섯 번밖에 못 봐가지고 나중에 좀 더 봐야죠. 하하.

블로그는 언제부터 시작하셨어요? 

회사에 신입사원으로 들어오고 나서부터 블로그를 시작했고, 그동안 두 번 옮겼어요. 맨 처음에는 지식 저장용으로 네이버 블로그를 했어요. 근데 개발자들한테 아무래도 안 맞잖아요. 검색 노출도 안되고. 그래서 워드프레스로 옮겨서 1-2년 정도 했어요. 워드프레스도 자기 입맛에 맞게 커스터마이징*하는 타입이 있고, 또 일반 네이버 블로그처럼 제공되는 걸 골라서 할 수 있어요. 저는 후자를 사용해서 좀 더 내 입맛에 맞게 바꾸고 싶었어요. 그래서 아예 블로그 제작을 따로 했죠. 블로그는 총 5년 정도 한 것 같아요.
*customizing, 고객이 기호에 따라 제품을 요구하면 생산자가 요구에 따라 제품을 만들어주는 일종의 맞춤 제작 서비스를 말하는 것

일단 그날그날 배운 걸 정리해야 하잖아요. 수첩에다 정리하면 수첩을 들고 다녀야 하는데 제가 웹 개발자고 웹에 올려놓으면 모바일로 접속해서 볼 수 있어요. 그래서 블로그에 정리했어요. 근데 사람들이 점점 많이 들어와서 댓글을 남겨주시고 좋아해 주시니까 그때부터는 개인 저장용이 아니라 보는 사람들을 배려해서 글을 썼어요. 

다른 일반 블로그보다 정제된 느낌이 있어요.

말씀하신 것처럼 하나의 글을 쓸 때, 퇴고를 최소 열다섯 번은 하는 것 같고요. PC랑 모바일에서의 가독성이 중요해서 글을 올리고 나서도 최소 수정을 20번씩은 해요. 철자, 맞춤법이랑 띄어쓰기 이런 것들을 다 봐요. 항상 보는 사람 입장에 저를 대입시켜요. 보다가 흐름이 끊기고 이상하면 저라도 안 볼 것 같거든요. 그래서 다른 사람 관점에서 글을 다듬어요.

Vue.js를 만든 에반유를 만나셨어요. 그 이야기가 궁금해요.

이번 (2018년) 3월에 거금 900만 원, 제 사비랑 휴가를 써서 다녀왔어요. 이번년도 연차가 별로 없었는데 거기 가려고 휴가를 일주일을 썼어요. 에반 유 수업 들으러. 3월에 미국 뉴올리언스에서 Vue.js 컨퍼런스가 있었어요. 컨퍼런스 이틀이랑 워크샵 하루. 그 워크샵이 수업이었어요. 하루종일 에반 유랑 같이 Vue.js 프레임워크를 Javascript로 만드는 수업인데 그게 너무 듣고 싶어서 갔어요. 거기서 저는 Vue.js 코어 같은 것들을 같이 만들어봤고요. 지금 실제로 사용하고 있어요. 시간이 되면 인프런에도 올려야죠. 하하하.

단순히 지식을 전달하는 수업이 아니었어요. 그 수업이 하루에 90만 원인데요. 실제로 점심시간 빼면 수업시간은 다섯 시간밖에 안되거든요. 근데 수업이 꽉 찼고 제일 먼저 매진이 됐어요. 그리고 에반유 수업을 들을 정도면 다 잘하는 사람들이에요. 아시아인, 유럽인, 미국인, 남미 등 여러나라에서 많이 왔어요. 다양한 배경 속에서 정말 난이도가 높은, 수준 높은 질문들이 나와요. 그런 질문들을 에반유가 딱 내공으로 풀어서 해석하고 알려주더라고요. 아, 진짜 잘하는구나. 싶었어요. 에반 유, 되게 멋있는 것 같아요.

에반 유(Evan You)*는 어떤 사람이었나요?

겸손하고 배려를 많이 하는 사람이에요. 지금 에반유는 전세계 개발자 특히 웹쪽에서는 이름이 되게 높은, 그러니까 네임드라고 해야하나. 모든 개발자가 알만한 사람이잖아요. 그럼에도 불구하고 고압적인 태도라든지 자만한다든지 그런게 전혀 없고 사람을 편하게 대하고 겸손했어요. 인간적인 매력이 있는 사람이었어요.

ⓒ evan you twitter

에반 유는 중국계 미국인인데 교포 1.5세대인 것 같아요. 백그라운드가 원래 디자이너였어요. 미국에 파슨스라고 디자인으로 유명한 학교 있잖아요. 거기서 예술 쪽 전공을 하고 석사*로 예술 + IT 쪽을 하다가 구글에 들어간 거예요.
*에반 유 링크드인 프로필

앵귤러라는 프레임워크가 있잖아요. 그걸로 프로그래밍을 하다가 앵귤러가 너무 무겁고 자기처럼 비전공자를 위한 프레임워크는 아니라고 생각해서 Vue.js를 자기가 따로 만든 거죠. 그리고 지금은 많은 사람들에게 Vue.js가 쓰이고 있어요.

그게 중요한 것 같아요. 자기가 잘한다고 해서 남을 배려하지 않고 자기의 길만 가는 것보다, 다른 지식공유자분도 마찬가지지만 결국에는 같이 간다는 마음에서 남들을 위한 프레임워크를 만든다는 게 저는 의미 있다고 생각하거든요. 그래서 Vue.js가 괜찮은 것 같아요. React나 Angular는 철저히 엔지니어 Oriented Framework라서요.

특별히 좋아하는 개발자가 있나요?

에반 유랑, 두 번째로는 더글라스 크락포드*라고 있어요. 자바스크립트 계에서 되게 유명해요. 자바스크립트 언어를 제정하고, 그 언어를 쉽게 사용할 수 있게끔 도구를 만드는 사람이에요. 할아버지예요. 이 분이 자바스크립트 패턴 책을 썼는데요. 제 블로그에도 정리를 조금 해두었어요. 할아버지가 되었을 때, 그분 정도의 어떤 구루가 되고 싶다. 그런 마음도 있고요. 하하
*미국 프로그래머, JSON(JavaScript Object Notation)과 ESLint를 창안한 사람

 

ⓒ douglas crockford github

나이 들어서도 개발하는

확실한 건 나이 들어서도 웹 쪽에서 잘하는 사람이 되고 싶다고 생각해요. 나중에 가서도 그게 유효해야 할 것 같아요. 20년이 지나도 어떤 걸 물어봤을 때 대답할 수 있는 사람이 되고 싶어요. 그리고 엔지니어가 지녀야 하는 마음가짐이라고 생각하는데요. 자기가 잘한다고 해서 남의 지식을 무시하지 않고, 동시에 자기가 모르는 것도 포용할 자세가 되어 있어야 해요.

(제가 아는) 진짜 잘하는 개발자들은 그런 자세를 갖고 있어요. 스펀지처럼 다른 지식을 빨아들여서 더 잘하는 것 같아요. 그리고 자기가 모르는 부분도 겸허하게 모르겠다고 인정할 수 있는 사람이 진짜 잘하는 사람이 아닌가 싶어요.

인터뷰 2편 – 지금이 웹 개발하기에 참 좋은 시기
                 (부록: 캡틴판교가 추천 판교 맛집)

 

웹 개발자, 장기효 님이 정성껏 만들었습니다.
 

우리는 성장 기회의 평등을 추구합니다.

 

0 부터 시작하는 웹 프론트엔드 개발자 과정 – 입문부터 퍼블리싱, Vue.JS 까지

0 부터 시작하는 웹 프론트엔드 개발자 과정 – 입문부터 퍼블리싱, Vue.JS 까지

웹 프론트 Vue.js로 정복하기

웹서비스를 개발하는데는 크게 두부분으로 나뉩니다. 사용자들이 직접적으로 이용하게 되는 Front-End 부분, 기능과 데이터를 관리하는 Back-End. 이 과정은 프론트엔드 개발에 필수적인 HTML-CSS-JAVASCRIPT 를 순차적으로 학습하고, 더 나아가 javascript 프레임워크까지 배워 실제 웹서비스의 프론트 영역을 만들 수 있도록 구성했습니다.  

도움이 되는 분들

프로그래밍에 대해 전혀 아는게 없는 분

아무것도 모르는 사람도 HTML 의 태그부터 차근차근 학습할 수 있습니다.

퍼블리싱 – JS프레임웍까지

화면단을 만드는 HTML-CSS 을 학습한후 개발자로 성장할 수 있는 Javascript, VueJS 프레임웍까지 주니어 프론트 개발자에게 필요한 모든것을 배울 수 있습니다.  

화면단을 이쁘게 만들고 싶은 백엔드 개발자

대략의 개념만 알고 전체 화면을 완벽하게 꾸며본 적이 없는, CSS 백엔드 개발자라도 이쁘고 꼼꼼하게 화면을 구성할 수 있습니다.
 

해내면 얻게 되는 것들

로드맵

웹의 뼈대를 만드는 기술 HTML (무료)

HTML 의 기본을 차근차근 이해하기 쉽게 설명해 줍니다. 또한 HTML5 에서 새롭게 추가된 부분들을 소개합니다.

뼈대에 색과 옷을 입혀주는 CSS (무료)

CSS 는 HTML 문서를 꾸며주는 언어입니다. 단순하게 색만 입히는 것이 아니라 위치, 모양, 속성 등을 통해 시각적으로 이해하기 쉽고 아름다운 정보를 만들어 주는 중요한 언어입니다.

[심화] 앤서블(Ansible)을 깊이 있게 활용하기

단순하게 작성했던 코드를 좀 더 구조적으로 효율적으로 동작하도록 만들고, 재사용할수 있도록 코드를 만들어 보겠습니다.