javascript 독학하기 /8주

• 기간 : 6~8주 (주당 20~25시간)
• 전제 : 프로그래밍 경험 필요 없음.

자바스크립트를 배울 때 하지 말하야 할 것들

1. 처음부터 관련 없거나 관련된 자바스크립트 온라인 튜토리얼로부터 자바스크립트를 배우려고 하지 마라.
2. 일부는 존경받는 자바스크립트 대부인 더글러스 크락포드의 “자바스크립트 핵심 가이드 - JavaScript: The Good Parts”로 자바스크립트를 배우는 것을 추천할 것이다. ..그의 책은 초보자에게 좋은 자바스크립트 책이 아니다.
3. 그리고 Codecademy만을 이용해서 언어를 배우려고 하지 마라. 여러분이 매우 작은 자바스크립트 태스크들을 프로그래밍하는 법만을 알게 될 것이므로, 절대적으로 하나의 웹앱을 만들 만큼 충분히 알지 못하게 된다.
4. 6주 동안(상대적으로 공격적인 일정이다) 모든 섹션을 전념할 충분한 시간이 없어도, 8주 이상을 넘기려 하지 마라. 오래 걸릴수록 배우는 모든 것을 이해하고 기억하기가 어려울 것이다.

1주 ~ 2주 (7월 3째주 ~ 4째주)

• 모든 예제코드는 타자하고 브자우저(ex. chrome) 콘솔에서 테스트해보자.
• 빠른 실습은 JSFiddle이나 JSbin을 이용하자.

1. Codecademy의 Make a Website 트랙을 공부한다.
2. 프론트앤드 개발자를 위한 자바스크립트 프로그래밍의 도입/ 1장/ 2장을 읽는다.
3. Codecademy의 javascript트랙중 Introduction to Javascript섹션을 공부한다.
4. 프론트엔드 개발자를 위한 자바스크립트 서문 /3장 /4장을 읽는다. (“비트 연산자(Bitwise Operators)”는 건너뛸 수 있다; 여러분의 자바스크립트 커리어에서 그것들을 사용하는 경우가 거의 없을 것이다.)
   읽으면서 JSbin이나 JSFiddle에서 예제 코드를 꼭 쓰고 실험하자.
5. Codecademy의 javascript 트랙 중 섹션 2에서 섹션 5까지 공부한다.(Functions ~ Control Flow)

3주 ~ 4주 (7월 5째주 ~ 6째주)

1. 프론트엔드 개발자를 위한 자바스크립트 6장을 읽는다.
   (객체에 대한 이해 만 읽는다.)
2. 프론트앤드 개발자를 위한 자바스크립트 프로그래밍의 5장/ 7장을 읽는다.

• 이 시점에서 if ~ else 선언, for, Arrays, Functions, Objects 등을 테스트하는 것에 많은 시간을 써야한다. 브라우저에서 Codecademy를 하지 않고 독립적으로 코딩을 해야한다. 책을 참고하지 않고 사용 할 수 있어야 한다.

1. Codecademy의 javascript 트랙 중 섹션 6에서 섹션 8까지 공부한다.(Data Structures ~ Object2)
2. Codecademy의 Project트랙으로 가서, 다섯개의 작은 Basic Projects를 만든다.
3. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 8장, 9장, 10장, 11장, 13장, 14장을 공부한다.
4. Code School - Try jQuery에 있는 전체 jQuery과정을 공부한다.

WebStorm

• 첫번째 프로젝트를 만들기 전에, 여러분이 자바스크립트 개발자가 되거나 자바스크립트를 자주 사용하려고 한다면, 여기서 잠시 쉬고, 웹스톰 : WebStorm의 평가판을 내려받는다. 웹스톰을 시작하는 법을 여기에서(이 과정을 위해 별도로 쓰였다) 배운다.

빨간펜 선생님, JSHint

• 웹스톰에서 JSHint 를 사용하도록 설정한다.

• JSHint는 “자바스크립트 코드에서 에러와 잠재적인 문제점들을 감지하고, 여러분 팀의 코딩 규칙을 적용해주는 툴” 이다. 웹스톰을 사용할 때 멋진 점은 JSHint가 여러분 코드의 에러 밑에 빨간 줄을 자동으로 추가하는 것이다.

• Node.js, Git과 다른 자바스크립트 프레임워크를 통합하고 있어서, 여러분이 록스타 자바스크립트 개발자가 된 후까지도 그것을 사용할 것이다.

첫번째 프로젝트/ A Dynamic Quiz

• 이 시점에, 여러분은 관리할 수 있는 견고한 웹앱을 만들 수 있을 정도로 배웠다. 내가 아래에 기술한 이 앱을 성공적으로 만들 수 있을 때까지 어떤 추가적인 진행을 하지 마라. 막히면, Stack Overflow에 질문하고, 개념을 제대로 이해하기 위해 책의 섹션들을 다시 읽어라.

• (HTML과 CSS도 사용하여) 자바스크립트 퀴즈 앱을 만들 것이다. 기능은 다음과 같다:

1. 라디오 버튼 선택을 하는 간단한 퀴즈이다, 완료하면 사용자에게 점수를 보여준다.
2. 퀴즈는 퀴즈 문항 수와 선택 문항 수를 원하는 대로 보여줄 수 있다.
3. 사용자 점수를 기록하고, 마지막 페이지에 최종 점수를 보여준다. 마지막 페이지에선 점수만 보여주므로, 마지막 질문은 제거한다.
4. 모든 질문을 저장하는 배열을 사용한다. 각 질문은 - 선택과 정답이 함께 - 한 객체에 저장되어야 한다. 질문의 배열은 이와 비슷하게 보여야 한다:

   // Only one question is in this array,
   // but you will add all the questions.
   var allQuestions =[{
   question:"Who is Prime Minister of the United Kingdom?",
   choices:["David Cameron", "Gordon Brown",
   "Winston Churchill", "Tony Blair"],
   correctAnswer:0
   }];
   

5. 사용자가 “Next” 버튼을 누르면, (document.getElementById 혹은 jQuery를 사용해서) 동적으로 다음 질문을 추가하고 화면에서 현재 질문을 제거한다. Next 버튼은 이번 버전의 퀴즈를 탐색하는 유일한 버튼이 될 것이다.
6. 여러분은 이 글의 댓글 혹은 될 수 있으면 스택오버플로우에서 도움을 요청할 수 있다. 스택오버플로우에서 신속하고 정확한 답변을 얻을 수 있을 것이다.

5주 ~ 6주 (8월 2째주 ~ 3째주) / Regular Expressions, Window Object, Events, jQuery

1. 프론트앤드 개발자를 위한 자바스크립트 프로그래밍의 20장/ 23장을 읽는다.
2. 이즈음에, 여러분은 자바스크립트가 매우 편안해져야 한다. 여러분은 아직 제다이(스타워즈..?)가 아니다, 계속 배우고 개선하기 위해 새로 습득한 지식과 기술을 할 수 있는 한 자주 사용하여야 한다.
3. 이전의 퀴즈 앱을 개선한다:

• 클라이언트 측의 데이터 유효성 검사를 추가한다: 다음 질문으로 진행하기 전에 사용자가 각각의 질문에 대답해야 한다.
• 사용자가 되돌아가서 대답을 수정할 수 있도록 “Back” 버튼을 추가한다. 사용자는 최초의 질문으로 되돌아갈 수 있다. 사용자가 이미 대답한 질문에선 다시 질문에 답하지 않도록, 선택한 라디오 버튼을 보여주어야 한다.
• 애니메이션을 추가하기 위해 jQuery를 사용한다(현재의 질문을 페이드아웃하고 다음 질문을 페이드인한다.)
• 퀴즈를 IE 8과 9에서 테스트하고, 버그를 고친다. 여러분에게 좋은 연습을 줄 것이다 :)
• 하나의 외부 JSON 파일에 퀴즈 질문을 저장한다.
• 사용자 인증을 추가한다: 사용자가 로그인하고 로그인 인증을 로컬 저장소(HTML5 브라우저 저장소)에 저장하도록 한다.
• 사용자를 기억하기 위해 쿠키를 사용하고, 사용자가 퀴즈로 되돌아왔을 때 “Welcome, First Name” 메시지를 보여준다.

7주 ~ 8주 (8월 4째주 ~ 5째주) / Classes, Inheritance, more HTML5

1) 프론트앤드 개발자를 위한 자바스크립트 프로그래밍의 6장(이번에는 “객체 생성 : Object Creation”과 “상속 : Inheritance”만), 16장, 22장, 24장을 읽는다.

• 주: 이 섹션을 읽는 것이 전체 로드맵에서 마주치는 가장 기술적인 독서이다. 모두 읽기를 원한다면 여러분한테 달려있다. 적어도 Prototype Pattern, Factory Pattern과 Prototypal Inheritance은 읽어야 한다. 모든 패턴을 알 필요는 없다.

2) 퀴즈 앱을 한층 더 개선한다:

• 좀 더 전문적으로 보이도록, 퀴즈 엘리먼트를 포함한 전체 페이지 레이아웃을 위해 트위터 부트스트랩을 사용한다. 추가 보너스로서, 트위터 부트스트랩의 탭 유저 인터페이스 컴포넌트를 사용하고 각각의 탭에 4개의 퀴즈 중 하나씩 보여준다.
• Handlebars.js를 배우고, Handlebar.js 템플릿을 퀴즈에 추가한다. 더는 자바스크립트 코드 안에 어떠한 HTML도 있어선 안 된다. 여러분의 퀴즈는 조금씩 진보하고 있다.
• 퀴즈를 수행하는 모든 사용자를 계속 기록하고, 각 사용자에게 다른 퀴즈 수행자의 점수 중 자신의 점수 순위를 보여준다.

3) 나중에(Backbone.js와 Node.js를 배운 후), 여러분은 퀴즈 앱을 리팩터링하고 최신 자바스크립트 프레임워크를 사용하여 만들어진 - 복잡하고 모던한 싱글페이지 웹앱으로 만들기 위해 이 두 기술을 사용할 것이다. 사용자 인증 증명과 점수를 MongoDB 데이터베이스에 저장할 것이다.

4) 다음: 개인 프로젝트를 결정하고 즉시 여러분의 프로젝트를 만든다.

다음 공부

1. Backbone.js를 완전히 배운다
2. 중급과 고급 자바스크립트를 배운다
3. 자신감을 갖고 Node.js를 완전히 배운다
4. 곧 올라올 내 포스트 Getting Started with Meteor.js를 읽는다. (역자주: 언제 올라올지 모르니 최근 한글 번역이 완료된 Discover Meteor를 무료로 읽을 것이다^^)
5. 곧 올라올 내 포스트 the Three Best Front-end JavaScript Frameworks를 읽는다.

NOTE
원문 : How to Learn JavaScript Properly
참고 : Nolboo’s Blog