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

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분 정도 공부하는 것이 좋을 것 같다.

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

 

 

Python Syntax – Variables and Data Types

1. Welcome!

Python is an easy to learn programming language. You can use it to create web apps, games, even a search engine!

(파이썬은 배우기 쉬운 프로그래밍 언어입니다. 당신은 이것으로 웹  앱, 게임, 심지어 검색 엔진까지 만들수 있습니다.)

2. Variables

Creating web apps, games, and search engines all involve storing and working with different types of data. They do so using variables. A variable stores a piece of data, and gives it a specific name.

3. Booleans

A boolean is like a light switch. It can only have two values. Just like a light switch can only be on or off, a boolean can only be True or False.

4. You’ve Been Reassigned

 

출처 : http://www.codecademy.com Python 강의

Introduction to Ruby – Variables & Data Types

1. Overview & Sneak Peek

  • High-level, meaning reading and writing Ruby is really easy—it looks a lot like regular English!
  • Interpreted, meaning you don’t need a compiler to write and run Ruby. You can write it here at Codecademy or even on your own computer (many are shipped with the Ruby interpreter built in—we’ll get to the interpreter later in this lesson).
  • Object-oriented, meaning it allows users to manipulate data structures called objects in order to build and execute programs. We’ll learn more about objects later, but for now, all you need to know is everything in Ruby is an object.
  • Easy to use. Ruby was designed by Yukihiro Matsumoto (often just called “Matz”) in 1995. Matz set out to design a language that emphasized human needs over those of the computer, which is why Ruby is so easy to pick up.

2. Data Types: Numbers, Strings, Booleans

In Ruby, your information (or data) can come in different types. There are three data types in Ruby that we’re interested in right now: numbers, booleans (which can be true or false), and strings (words or phrases like"I'm learning Ruby!").

Never use quotation marks (‘ or “) with booleans, or Ruby will think you’re talking about a string (a word or phrase) instead of a value that can be true or false. It’s also important to remember that Ruby is case-sensitive (it cares about capitalization).

3. Variables

Declaring variables in Ruby is easy: you just write out a name like my_num, use = to assign it a value, and you’re done! If you need to change a variable, no sweat: just type it again and hit = to assign it a new value.

4. Math

Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)
Exponentiation (**)
Modulo (%)

5.’puts’ and ‘print’

The print command just takes whatever you give it and prints it to the screen. puts (for “put string”) is slightly different: it adds a new (blank) line after the thing you want it to print. You use them like this:

No parentheses or semicolons needed!

출처 : http://www.codecademy.com Ruby 강의

2014년은 자바스크립트 공부의 해

웹 마스터로 약 6년 간 일하다가 사정이 생겨 2007년 웹 퍼블리셔로 전직을 했다.
웹 퍼블리셔는 단순하게 HTML + CSS만 하면 된다고 생각했는데 그게 아니였다.
웹 표준으로 코드를 작성해야하고, SEO도 고려해야하고, 웹 접근성도 고려해야하고, 자바스크립트도 작성해야 하고, 더 넓게는 백앤드 관련 지식도 필요했다.

약 6년간 웹 퍼블리셔로 일하면서 어려웠던 적이 많았으나 가장 큰 벽이 바로 자바스크립트였다.
JQuery라는 자바스크립트 라이브러리로 쉽게 갈 수 도 있지만 자바스크립트에 대한 지식 없이는 이것도 쉬운게 아니였다. 기초가 없으니 응용을 할 수 없었다. 보지도 않는 책을 계속 사기만 했다. 왠지 관련 책을 갖고만 있어도  실력이 늘어날 것 같은 기분이랄까. 책꽂이에 꽂힌 자바스크립트 책만 15권이다.

언젠가는 공부해야지 하고 미루다보니 처음 자바스크립트를 하겠다고 마음 먹은 시간으로 부터 7년이나 지났다.
점점 자바스크립트 활용 범위는 넓어지고 있고 진작 공부하지 않은 것을 후회하고 있었다.

그러다가 클리어보스 운영자 조은님의 자바스크립트 스터디 모집 공고를 보게 되었고 남편의 허락으로 참가할 수 있게 되었다. 이제 1주차를 했고, 스터디 진행 원칙을 볼 때 확실하게 공부할 수 있을 것 같다. 이 스터디의 주 교재는 한빛미디어에서 출간 된 ” 더글라스 크록포드의 자바스크립트 핵심 가이드” 라는 책이다.

생활코딩 그룹에서도 자바스크립트를 제대로 공부해보자는 글을 보게 되었고, 그 글 작성자분이 만든 “자바스크립트 제대로 배우기 스터디그룹”에도 가입했다. 이 곳은 자바스크립트 제대로 배우기라는 기본 가이드(http://bit.ly/1fsUmuG)가 있고 그 가이드에 따라 8~12주간 공부하고 요약해서 자신의 블로그에 올리는 것이다.

두 가지를 동시에 진행하는 것에 약간의 무리가 있긴하겠지만…
올해는 자바스크립트를 제대로 공부하면서 도약의 해로 삼아볼까 한다.

덧…5월 20일부터 매주 화요일 2시 우리 팀에서도 인사이드 자바스크립트라는 책과 생활코딩 자바스크립트를 공부하기 시작했다. 올해는 정말 자바스크립트 공부의 해 인가보다 🙂