메뉴 보이기
Profile
이온디

2015.08.27

자바스크립트 관련 유용한 링크 모음집 (러닝은빛)

조회 수 400 추천 수 0
써니소프트 카페에 소개되어있는 자바스크립트 관련 유용한 링크 모음집입니다. 러닝은빛님은 글을 참 깔끔하게 잘 작성하시네요 ㅎ

 

 
"알만툴러를 위한 자바스크립트 강좌"
 
자바스크립트는 지금은 이 바닥에서 사라진 넷스케이프라는 웹 브라우저 내에서 사용하기 위해 고안된 스크립트 언어였으며 웹과 함께 등장했습니다. 자바스크립트는 지금도 굉장히 많이 쓰이고 있고 많은 실력자들이 있습니다. 또한 자바스크립트를 기반으로 하는 많은 라이브러리가 있습니다. 자바스크립트의 세계는 방대하지만 웹에서 가장 많이 사용하는 언어 중 하나이기 때문에 한국어로 되어있는 강좌도 많고 언어 자체에서 제공하는 문법이 많지 않아 접근성도 좋습니다. 다만 OOP와 관련된 확실한 문법을 제공하지 않기 때문에 자바스크립트로 구현된 객체 지향 패턴이 생소하게 느껴질 수는 있습니다.
 

1. 입문자들을 위한 사이트

입문자 입장에서는 생활코딩이라는 사이트를 가장 추천하지만 하나만 걸어둘 순 없기에 모질라에서 제공하는 자바스크립트 래퍼런스 같은 기본 링크들을 추가로 올려놨습니다. 다만 웹 언어로 쓰이고 있기 때문에 HTML 에 대한 이해를 수반해야만 그나마 진행할 수 있는 강좌가 있을 수 있습니다. 일부 강좌는 제외했는데 이미 전문가가 된 전문가들이 어려운 전문 용어를 써가며 블로그에 스스로 참고하기위해 정리해놓은 강좌 아닌 강좌들은 포함하지 않았습니다. (구글에 순위권으로 랭크되는 글들이 모두 이런식이었습니다)

 

생활코딩 자바스크립트 강좌 (한국어)(동영상)

일반인들을 위해 개설된 사이트 취지에 따라 일반인들도 이해하기 쉽게 보다 더 쉽게 설명하는 강좌 사이트이며 어려운 용어를 사용하지 않는게 특징입니다. 전 강좌가 모두 동영상으로 제공됩니다. 운영자가 직접 음성으로 설명을 진행하며 변수, 조건문, 반복문, 함수, 배열, 객체, 모듈, 정규표현식, 객체지향 프로그래밍, 상속 등 거의 대부분의 개념을 쉽게 알 수 있습니다. 자바스크립트 입문자분들에게 강력 추천합니다. 

 

자바스크립트 튜토리얼 및 래퍼런스 (한국어)

파이어폭스 브라우저 개발사에서 제공하는 튜토리얼 문서입니다. 한 페이지 분량으로 되어있으며 자바스크립트에 대해서 간단히 알 수 있습니다. 자바스크립트의 타입변수연산자제어 구조객체배열함수사용자 정의 객체내장 함수클로져메모리 개념에 대해서 간단하게 나마 알 수 있습니다. (안타깝지만, 문서 하나로 자바스크립트를 마스터 할 수는 없습니다)

 

코드 아카데미

입문자분들을 위한 자바스크립트 튜토리얼 사이트로 기초부터 따라할 수 있습니다. 기초부터 직접 타이핑하여 다음 단계로 진입하는 형식으로 되어있기 때문에 학습하기가 편리합니다. 다른 언어를 이미 알고 있는 경우 모든 코스를 끝까지 따라하면 자바스크립트에서 지원하는 프로토타입이라는 문법에 대해서 어느 정도 알 수 있게 됩니다. 어디까지나 입문자용이기 때문에 자세한 내용까지는 나오지 않습니다. 하지만 직접 코딩을 해볼 수 있고 어디가 틀렸는지 결과도 바로 보여주기 때문에 효과는 있는 것 같습니다.

 

W3Schools (JS)

입문자분들을 위한 자바스크립트 튜토리얼을 제공하는 웹 튜토리얼 사이트입니다. 많은 예제를 제공하고 사이트 내에서 바로 예제를 실행해볼 수도 있습니다. 다만 웹에서 사용하는 자바스크립트 중심이라 이해하기 힘든 개념이 있을 수 있습니다.

 

튜토리얼스 포인트(자바스크립트) 

자바스크립트 튜토리얼을 제공하는 웹 사이트입니다. 웹에서 사용하는 자바스크립트를 설명합니다. 

 

2. 디자인 패턴

좋은 코드를 만들기 위해서는 디자인패턴과 자료구조에 대해서 알아야 합니다. 다음 사이트들은 좋은 코드의 표본을 제공하고 있으며 구현하는 방법에 대해서 보여주고 있습니다. 디자인패턴을 활용하여 객체를 잘 설계하고 싶다면 아래 사이트를 참고해보세요.

 

자바스크립트 디자인패턴 (By SHI CHUAN)

기본 문법 사용 패턴, 리터럴 및 생성자 패턴, 함수 패턴, 객체 생성 패턴, 코드 재사용 패턴, 디자인 패턴 등이 잘 정리된 사이트입니다.

 

자바스크립트 디자인패턴 (By Addy Osmani)

자바스크립트 디자인패턴이라는 책으로 유명한 Addy Osmani 가 운영하는 웹사이트로 보여지며 자바스크립트로 구현된 디자인패턴을 볼 수 있습니다. (일부만 공개되어있음)

 

필요하지 않을 수도 있지만 대부분 효율적이고 좋은 코드는 디자인 패턴을 따르고 있습니다.

 

3. 자바스크립트로 컴파일되는 언어

다음 언어들은 자바스크립트의 문법을 모두 포함하고 있고 Ruby, C++, Java 에서 객체 지향 프로그래밍과 관련된 유용한 문법들을 더 제공합니다. 따라서 코드의 생산성을 높일 수 있습니다. 추후에는 코드를 최적화하여 자바스크립트 표준안에 명시된 형태로 최종적으로 컴파일됩니다. 즉, 처음부터 자바스크립트로 컴파일되어지도록 고안된 언어입니다.

 

CoffeeScript

자바스크립트를 생산할 수 있는 스크립트 언어이며 자체적인 문법을 가지고 있습니다. 다른 객체지향 프로그래밍 언어에서 제공하는 문법도 제공합니다. 커피스크립트로 작성된 코드를 자바스크립트 파일로 바꿀 수 있습니다.

 

TypeScript

마이크로소프트에서 개발했으며 자바스크립트 문법을 그대로 사용할 수 있습니다. 상속이나 클래스 개념도 제공하기 때문에 관리에 수월합니다. 또한 최종적으로 자바스크립트 파일을 만들어냅니다.

 

4. 라이브러리

자바스크립트의 세계에는 많은 라이브러리가 존재합니다. 루비에서도 루비젬이라고 불리는 많은 라이브러리들이 있지만 엔터브레인 측에서 막아놨었기 때문에 편리한 라이브러리들을 사용할 수 없었습니다. 하지만 이번 작품에서는 자바스크립트가 웹 언어이고 플러그인 매니저를 통해 간단히 포함할 수도 있기 때문에 많은 기대가 생겼습니다. 

 

Undersocre.js 

자바스크립트는 루비에서 배열이나 열거자에서 자주 사용했었던 map, max, min, first, last, 같은 유용한 함수들을 기본적으로 제공하지 않기 때문에 루비 사용 경험이 있는 유저분들이라면 당황 할 수 있습니다. 물론 자료구조에 폭넓은 지식을 가지고 있는 분들이라면 함수 하나쯤은 그냥 만들어쓸 수도 있겠지만 굉장한 시간이 소요될 수 있으며 성능에 문제가 발생할 수도 있습니다. 그렇기 때문에 검증된 라이브러리를 추가해서 사용합니다. 이 유틸리티 라이브러리는 기존 라이브러리에 추가 기능을 붙여주는데 Collections, Arrays, Functions, Objects, Utility, Chaining 과 관련된 추가 함수들을 제공합니다. (이 링크에서 소스코드를 살펴볼 수 있습니다.)

 

5. 기타

 

 

자바스크립트 치트시트

자바스크립트에서 사용할 수 있는 코드들을 한 눈에 살펴볼 수 있는 치트시트 사이트입니다. 인텔리센스(자동 완성) 기능을 제공하지 않을 경우 한 번 쯤 들어보시면 도움이 될거라 여겨집니다.

 

 

ECMA 262 표준 스펙 문서

자바스크립트 표준 문서입니다. 자바스크립트 관련으로 잘못된 정보가 많을 수 있는데 버전 별 표준안을 살펴보면 해당 구문에 대한 궁금증이 해결될 수도 있습니다. 

 

SRPG Studio

MV 처럼 자바스크립트를 사용하는 일본의 한 게임 엔진입니다. 이 엔진에 담겨있는 코드를 구경하는 것만으로도 훌륭한 공부가 될 것으로 보여집니다. 홈페이지에 예제 스크립트 파일이 준비되어있습니다.

 

Cocos2d-JS HTML5 ReferenceCocos2d-JS Github

오픈 소스 엔진이기 때문에 소스 코드가 모두 공개되어있습니다. C++도 사용할 수 있지만 자바스크립트, 루아스크립트 등과 같은 스크립트 언어도 사용할 수 있게 되어있습니다. 여기에 담긴 샘플 코드들은 말 그대로 실무에서 쓰는 코드라고 볼 수 있습니다. 실제 프로그래머들이 만든 것이기 때문에 이해하기 어려운 개념들이 있을 수 있는데 코드만 참고해도 자바스크립트 실력 향상에 굉장한 도움이 될 수 있습니다.

 

■ 게시물 업데이트 
2015.08.17
Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
[팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 400
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 315
75 [팁] 정규식 테스트 사이트 모음 profile 이온디 2019.11.12 16
74 [팁] offset().top 오류 profile 이온디 2019.04.27 345
73 [팁] 프레임셋 안에서 주소창 주소변경하기 profile 이온디 2019.04.06 85
72 [라이브러리] 제이쿼리 패럴랙스 profile 이온디 2018.07.17 33
71 [팁] animation json lottie profile 이온디 2018.03.28 27
70 [editor] Froala Editor profile 이온디 2017.10.22 35
69 [팁] 얇은 스크롤바 profile 이온디 2017.10.11 71
68 [팁] li 더블클릭 편집 profile 이온디 2017.09.12 27
67 [팁] 핫키 소스 profile 이온디 2017.06.29 40
66 [기초] 자바스크립트 innerHTML 을 이용한 H1~H5 자동입력 profile 이온디 2017.05.17 48
65 [차트] Chart.js profile 이온디 2017.03.29 440
64 [라이브러리] 가격 범위 슬라이더 스크립트(1) - Ion.RangeSlider profile 이온디 2017.01.02 192
63 [라이브러리] parallax.js 패럴럭스 스크립트 profile 이온디 2016.07.18 0
62 [팁] 자바스크립트 카운터 및 가격 계산 profile 이온디 2016.07.03 1490
61 [라이브러리] 자바스크립트 로딩바 progressbar.js profile 이온디 2016.06.17 98
60 [라이브러리] 자바스크립트 로딩바 nprogress profile 이온디 2016.06.17 113
59 [라이브러리] 자바스크립트 프로그레스바 page.js profile 이온디 2016.06.17 90
58 [고급팁] Javascript 바보들을 위한 Promise 강의 - 도대체 promise는 어떻게 쓰는 거야? profile 이온디 2016.06.10 91
57 [고급팁] 동기와 비동기 프로그래밍 profile 이온디 2016.06.10 43
56 [고급팁] Javascript 비동기 프로그래밍 profile 이온디 2016.06.10 101