바닐라 자바스크립트의 필요성은 느꼈지만, 어떻게 시작해야할지 모르겠다. HTML, CSS를 잘 다룰줄 알고 자바스크립트의 기본 문법인 변수, 연산자, 조건문, 함수, 객체, 배열의 개념은 알고 있다. 기본적인 예제들은 따라할 줄 알지만 기능을 설계하고 응용하는 법을 알고 싶다. 구글링 하던 중 '초보자를 위한 40가지의 자바스크립트 프로젝트'를 발견했다. DOM을 다루고 이벤트를 처리하고 HTML과 CSS 속성을 다루는 등 자바스크립트로 간단하게 활용할 수 있는 예제이다. 아직 몇 가지만 해보았지만, 10가지 이상 정도 따라해보고 복습해보면서 충분히 감을 익힐 수 있을 것이라 생각이 든다. 원문 출처 외에도 이 프로젝트를 수행한 다른 블로거도 도움이 많이 되었다. 원문에는 자바스크립트 외에도 프레임워크인 리액트와 타입스크립트 튜토리얼까지 포함되어 있다. 프로젝트 결과물 리스트와 깃허브 소스 코드까지 있으니 공부를 시작하는데 있어 든든한 느낌이다.
1. 원문 출처 (프로젝트 설명 글)
초보자를 위한 40가지의 자바스크립트 프로젝트
프로그래밍 언어를 공부하기 가장 좋은 방법은 프로젝트를 해보는 것입니다. 누구나 쉽게 해볼 수 있는 40가지의 바닐라 자바스크립트, 리액트, 타입스크립트 프로젝트 튜토리얼을 만들었습니
www.freecodecamp.org
2. 원문 출처 유튜브 강의 영상 (영문)
카운터부터 반응형 내비게이션, 탭, 모달, 슬라이더 등
영상 강의로 배우기
Build 15 Javascript Projects - Vanilla JavaScript Course
3. 원문 출처의 결과물 미리보기 모음 (영문)
Javascript Projects completed View
Javascript Projects || John Smilga
Javacript Projects Projects are the most practical way to learn any language, and Javascript is no exception. Solidify your knowledge of Javascript by creating these cool projects. join the course
www.vanillajavascriptprojects.com
4. 원문 출처의 결과물 소스 코드 (Github)
GitHub - john-smilga/javascript-basic-projects
Contribute to john-smilga/javascript-basic-projects development by creating an account on GitHub.
github.com
5. 원문 출처를 수행한 블로거
38가지 자바스크립트&리액트 튜토리얼
웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없
frontend-bear.tistory.com
'JavaScript' 카테고리의 다른 글
| [자바스크립트 예제 #02] Tabs 탭메뉴 만들기 (0) | 2023.11.11 |
|---|---|
| [자바스크립트 문법] classList와 forEach() (0) | 2023.11.09 |
| [자바스크립트 예제 #01] Color Flipper 만들기 (hex-code.ver) (2) | 2023.11.09 |
| Vanilla JS, 바닐라 자바스크립트의 필요성 요약 (2) | 2023.11.08 |
| [자바스크립트 문법] querySelector, querySelectorAll 차이점 (0) | 2023.11.08 |
