[Javascript 기초와 활용 #1] 스타크래프트 만들기?! (feat. JQuery, Codepen, Bootstrap 등)

 

(ENG SUB/ENG CC)

이번 영상은 Javascript의 기본 개념 및 활용 분야에 대해 배워보고 가장 중요한 개념인 함수를 배우고 이를 활용해 스타크래프트 예제를 만들어보는 강의입니다.

함수의 개념을 해리포터의 마법에 비유하여 간단히 알아보고 Javascript의 라이브러리인 JQuery, JQuery UI의 사용 방법 및 구글링 팁 등을 배워보고 지난 시간에도 활용해보았던 Codepen, Bootstrap에서의 Javascript 활용에 대해 살펴봅니다.

영상에 나왔듯 함수의 기본 개념만 알아도 이미 만들어진 함수들이 많아서 가져다 쓰는 것 만으로도 엄청 많은 기능을 구현할 수 있습니다.

실습 이미지 다운로드 주소
Cloacking: https://drive.google.com/file/d/11Z8vaFjJj0ihNHj02733UmfBZNCypn1r/view?usp=sharing

Wraith:
https://drive.google.com/file/d/1skeLoa9RU0A--Kx6XmI_xskNexL0rGF3/view?usp=sharing

Codepen은 독특하고 화려한 UI요소들이 많지만 개인 개발자분들이 올려주신 것이라 별도의 라이센스 확인이 필요합니다. 보통 MIT라이센스(상업적 이용 무료)를 따르며 어떻게 쓰든 상관없이 주석으로 여러분의 코드에 라이센스만 붙여넣으시면 전혀 문제가 없습니다. 그러나 특정 작품은 Private 라이센스를 등록한 경우도 있으니 유의하여 꼭 확인해보세요!
Detail View - License 에서 확인 가능

라이센스 설명: https://blog.codepen.io/legal/licensing
라이센스 확인 방법: https://blog.codepen.io/documentation/views/details-vew

Bootstrap: https://getbootstrap.com

이번 영상이 조금 어렵게 느껴지시는 분들은 제 채널의 HTML, CSS 강좌를 참고해주시고 그래도 어렵다면 Javascript 기초 학습 사이트에서 이론 공부를 조금 하시고 다시 시청하시면 이해가 더 잘 되실겁니다! 질문사항은 언제든 댓글 남겨주세요~!

추천 기본 개념 학습 사이트
- Codecademy(미션) : https://www.codecademy.com/learn/introduction-to-javascript
- 생활코딩(영상) : https://opentutorials.org/course/743, https://opentutorials.org/course/3085

*1만 구독자 기념 추첨 생방송에 사용되었던 코드도 Javascript, JQuery를 기반으로 작성되었습니다. Javascript를 모르시면 이해가 어려우실 수 있을 것 같아 [Javascript 기초와 활용 #2] 강좌 마무리 후 코드 설명 영상 올리도록 하겠습니다.

 

 

 

안녕하세요! 누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다.

이번시간에는 javascript에 대해 알아보겠습니다.

Javascript는 기본적으로 앞서 배운 HTML, CSS를 동적으로 변화시키는 역할을 하는 언어입니다.

예를 들어 뭔가를 눌렀을 때 특정 요소를 움직거나 사라지고 하는 등의 역할을 합니다.

요즘은 javascript의 활용 분야가 넓어져서 단순히 웹 요소를 변화시키는 것 외에도 앱을 만들거나, 또 프론트엔드 수준을 넘어서서 백엔드 개발에도 활용되는 만능 언어입니다.

Javascript 언어만 잘해도 웹, 앱, 서버, DB 등을 모두 만들 수 있으니 잘 배워놓으시는 것을 추천드립니다. 제 영상에서 Javascript를 하나하나 다 다루기에는 엄청 양이 많을 수 있으니 지난 시간 CSS와 마찬가지로 가장 기본적인 개념만 알아보고 이를 활용해보도록 하겠습니다.

기본적인 내용을 학습하실 수 있는 추천 사이트는 본문이나 HTML 1강에서 소개드린 사이트를 참고해주세요!

Javascript가 배울 양이 많다고 해서 너무 겁먹지 마세요! 완벽하게 하나하나 배우려고 하지 않으셔도 직감적으로 할 수 있는 부분이 많고 이를 통해 정말 많은 것을 만들 수 있습니다.

Javascript 강의는 크게 2 강으로 나누어서 진행될 예정인데요. 첫 번째는 Javascript의 원래 용도인 HTML, CSS를 선택하고 변화시키는 것을 중심으로 해보고, 두 번째 강의에서는 조금 더 발전하여 API를 활용하고 Back-End 데이터와 통신하여 화면에 처리하는 것 까지 해보도록 하겠습니다.

 

그럼 이번 강의에서는 javascript 첫 번째 시간으로 Javascript 기초 개념과 HTML, CSS 요소를 동적으로 제어하는 방법을 알아보고 재미있는 예제를 만들어보겠습니다.

 

그럼 화면을 통해 함께 보시죠!

 

먼저 많은 분들이 헷갈려하시는 개념부터 정리하고 가겠습니다. java랑 javascript가 비슷한 것이라고 생각하시는 분들이 많으신데요. 전혀 다른 언어입니다. 앞에 java라는 단어가 붙었을 뿐 마치 햄과 햄스터가 전혀 다른 의미인 것 처럼 둘은 완전히 다른 언어입니다.

 

앞서 말씀드렸듯이 JS는 진정한 프로그래밍 언어라 배울 것이 정말 많습니다.

 

관련 내용을 모두 다루기는 영상이 길어질 수 있으므로 자세한 내용은 생활코딩 강의 등을 참고해주시고 이번 강의에서는 함수의 개념만 배우고 바로 실습으로 넘어가겠습니다. 함수만 알아도 할 수 있는 것들이 정말 어마어마하게 많습니다.

 

프로그래밍에서의 함수를 수학에 나오는 함수로 생각하셔도 되지만 수학을 싫어하시면 조금 어렵게 느껴지실 수 있을 것 같습니다.

 

쉽게 비유해서 함수를 해리포터에 나오는 마법이라고 할 수 있겠습니다.

지팡이를 들고 마법 주문을 외우면 물체가 떠오르는 등 특정 현상이 일어나게 되죠

마찬가지로 프로그래밍에서의 함수도 함수의 이름을 부르면 설정된 특정 현상이 발생하게 됩니다.

 

JS에서 함수를 사용하는 방법은 함수 이름뒤에 열고닫는 괄호()를 붙이면 됩니다.

직접 예시를 통해 살펴보겠습니다.