D4mations.com

(ENG SUB)[Javascript 기초와 활용 #1] 완전 쉬운 jQuery로 스타크래프트 만들기?!



이번 영상은 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] 강좌 마무리 후 코드 설명 영상 올리도록 하겠습니다.

Original source

d4mer

, , , , ,

49 responses to “(ENG SUB)[Javascript 기초와 활용 #1] 완전 쉬운 jQuery로 스타크래프트 만들기?!”

  1. 조코딩님 이번에 컴퓨터 공학과에 진학하는 새내기 입니다. 제가 원하는 앱을 만드는 과정 중에 카카오톡 혹은 인스타그램 등의 sns와 연동을 하기 위해서는 각 회사와 라이센스 계약을 맺는 것인가요? 아직 실력은 턱 없이 부족하지만 너무 궁금해서 질문드려봅니다….!!
    채널 너무 유용해서 주변 친구들에게 모두 추천해 주고 있어요ㅜㅜ 덕분에 코딩에 관한 접근자체가 훨씬 쉬워진 느낌입니다!!!bbb

  4. 웹개발 공부하다보니 배울 언어들이 너무너무 많아서 그 언어가 뭔지 알기도 전에 어렵다고 생각했었는데 이렇게 쉬운것들이였다니… 맨 땅에 헤딩하면서 한줄 한줄 코딩하다가 라이브러리 하나씩 알려주시니까 코딩이 더 재밋어져요!! 조코딩님 정말 감사해요 ㅠㅠㅠㅠ

  8. 처음엔 호기심으로 본건데…이런저런정보알게되고
    코딩까지…..ㅎㄷㄷㄷㄷ
    잘봤어요….. 앞으로도 좋은 컨텐츠 많이 만들어 주세요. 구독 좋아요. Complete.

  11. 제가 자바스크립트 비슷한? p5.js를 배우고 있는데요. 일러스트에서 캐릭터를 그리고 이미지 크기를 아무리 크게 출력해서 png로 저장해서 코딩을 해도 정작 html에서 보면 화질이 흐릿하게 약간 깨지게 보이는 것 같아요. 이럴 때엔 어떻게 해야하나요?? ㅠㅠ

  14. 자바스크립트로 만든 웹게임을 앱게임으로 가능할까요? 어제는 CSS로 만든 웹페이지를 앱으로 만든 것을 봤습니다.
    영상을 보면러 점점 할 수 있겠다라는 생각이 있어서 실행력을 높이고자 물어봅니다. ㅎㅎ
    가능하겠죠???

    ※ 저는 화학전공 정말 비전공자라서 조코딩님과 같은 이유, 창업에 관심만 가지고 코딩공부를 검색하다가 조코딩님을 알게되었습니다.

  15. 네이버는 들어가지는데 네이버로 검색해도 아무거안돼고 뭘해도 안돼요 브라우저에서 자바스크립트가 사용 중주된 뎡우 사용 설정하라는데 어떡게 해요? ㅜ

  17. 조코딩님 덕에 정말 잘배우고 있습니다. 질문 하나 드려도 될까요? 정말 진심 진심 알고 싶어 죽을정도로 궁금해서요 상점들 포스기에 전화가 오면 전화번호가 뜨잖아요? 그럼 저장된 주소를 불러올수 있구요 이부분에서 질문인데요? 신규 고객들이 상점으로 전화를하면 상점쪽에서는 정보입력 되지않은 신규 번호가 뜨는데 그 신규 번호 뜨게하는 코드 나와있는 곳이나 어떤 방법 없나요? 또 그방법을 사용하려면 자바스크립트 로도 사용 가능한지요? 정말 궁금해 미치겠습니다. ㅠ.ㅠ

  18. 강의 너무너무 감사합니다. 코딩 초심자라 개념이 안잡혀서 힘들었는데… 조코딩님 강의 보고 나니깐 웹개발이란 이런거구나하는 큰 그림이 그려지네요. 감사합니다.

  19. 진짜 등에 가려운 부위 있긴 있는데 어디인지 모르는데
    조코딩님이 다 긁어주시네 이런분들이 강의를 하셔야 하는데 ㅠㅠ
    오프라인 강의 뿐만 아니라 유튜브 강의 중에서도 제일 쉽고 머리에 쏙쏙 들어가게 강의해주십니다
    조코딩님 다른 분들 언어 강의는 너무 이해가 힘든데 조코딩님이 한번 해주시면 안될까요?ㅠㅜ
    저가 온천지 컴공학생들 다 광고할께요
    제발 자주 영상 올려주세요

  21. 진짜 … 너무 쉽게 잘 설명해주시는것같아요 제가 몇달동안 헤매고 개념도 애매하던 부분들이 이 동영상을 보면서 한번에 다잡혔어요..
    ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    진짜 사이다강의 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ사랑합니다

  31. 구독! 좋아요!
    많은걸 배우고 있습니다^^

    조코딩님, 갠적인 질문이 있는데 혹시 괜찮으시다면 메일주소를 여쭤봐도 될까요?
    아니면 제 메일은 been0703@naver.com 이니 내용없이 메일주시면 제가 답장으로 문의드리겠습니다^^
    꼭 부탁드립니다~~

  32. cs전공이었는데 자바 하다가 전과했지만 다시 시작해보려고 하는참에 조코딩님 채널 찾았네요! 자바나 파이썬 등등 강의 앞으로 열심히 보면서 배워보겠습니다 구독하고 갑니당

  34. 조코딩님… 정말 그냥 초보자들의 구세주라는 말 밖에 안나옵니다. 여러 튜토리얼 강의 봤찌만.. 조코딩님처럼 전체적인 그림을 이렇게 쉽게 그려주시고, 라이브러리가 뭔지도 알려주시는 분은 조코딩님이 처음입니다… 사실… 농담이 아니라… udemy나 이런데 강의 만드셔서 유료로 하시면 잘 될 것 같습니다. 앞으로도 조코딩님 강의 계속 보면서 열공하겠습니다. 감사합니다!!

  35. 얼마전 문득 스케쥴앱 아이디어가 떠올랐어요 마켓 찾아보니 다른앱과 차별화가 될것 같아요~
    오전에 스토리보드 구성해보니 절대 20p 안넘네요 특이사항은 주소록 여러명 불러오기,구글 맵 연동,채팅창,캘린더,시간설정하기 등
    맵 연동외에는 스케쥴 범위에서 크게 벗어나지는 않는것 같아요 배워서 가능하겠죠? 그외 푸쉬메세지 와 두가지 엑세서리 기능.
    만약 기획과 스토리보드.디자인 제외하면 개발비용은 대략 어느정도 나오나요?
    여건이 안되면 수익분배 등 여러조건으로 후불도 가능 할 수 있을까요? 개발자 맘이겠지만 계약서를 쓴다든지…^^
    답변 부탁드려요~

  37. 조코딩님 강의잘보고있습니다. 자바스크립트 독학을 하기위한 책을 추천받을수있을까요? html과 css 는 생활코딩으로 독학을하였습니다. 자바스크립트를 이제 공부해서 저도 홈페이지를 만들어보고싶습니다

  38. 감사해요! 복습용으로도 너무너무 좋은 강의고 이해도 잘되요 ㅠㅠ 역시 오늘도 재미있는 강의! 2탄도 기대합니다.
    그리고 질문이 두개정도있는데요! 시간 되시면 답변 부탁드리겠습니다 : )

    필요하거나 궁금한것이 있을때 검색하면 되지만 그게 생각보다 제 마음대로 자료가 딱 하고 나타나지 않더라구요.
    검색하는 법이 꽤 어려운것(?)같아요. 왜냐면 어떤효과나 내가 원하는걸 관련된 걸 검색하고 싶어도 단어를 모르기 때문일까요?
    이건 역시나 많이 검색해보고 유튜브를 보며 터득해야되는걸지 궁금합니다.(질문1)
    그리고 제이쿼리 복사해서 쓰면 된다고 하셨잖아요,
    복사해서 쓰되 왜 그렇게 작동하게 되는지 뜯어보면서 제것으로 만들어야지 공부가 될까요?(질문2)
    사실 처음부터 뜯어보고 만들려고하면 이해도 안되고 금방 지쳐버리게 되더라구요!

    그리고 마지막 하나 더 여쭤보고싶은데요(죄송해요 ㅎㅎ;;)
    jQuery 스크립트 파일 위에 hide and show 를 적용하니까 움직이지 않더라구여,
    jquery 스크립트 파일 밑으로 쌓아나가야 하는건가여? 제이쿼리 스크립트 파일 적용을 한 후에
    다음 함수들이 적용되서 그런건가여~?

  40. 조코딩님 영상은 보고 따라하면 바로바로 결과물이 나와서 좋더라구용 매번 흥미롭게 잘 보고 있습니다! 근데 제가 뭘 빠뜨린 건지 잘 모르겠는데요ㅜㅜ크롬을 기본 웹브라우저로 설정해놨는데도 reveal in explore 을 누르니까 파일이름이 index.com이 아니라 index로만 뜨고 하얀 창만 나와요..어떻게 해결하면 좋을지 알려주실 수 있을까요..?

  44. 오늘도 역시 머리속에 쏙쏙 들어오는 명쾌한 강의 잘 봤습니다. 햄과 햄스터였군요. ㅎ 어차피 직접 코딩은 미친 짓인걸 알기에 최대한 이해만 하려고 노력중입니다.^^

  46. 잘 봤습니다!!! 문법을 배우는데 이걸 어떻게 사용하는건지 막막한 느낌이었는데 도움이 많이 되었습니다. 앞으로도 좋은 영상 많이 올려주세요 ㅠㅠㅠ

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

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

    Javascript의 라이브러리인 JQuery, JQuery UI의 사용 방법 및 구글링 팁 등을 배워보고 지난 시간에도 활용해보았던 Codepen, Bootstrap에서의 Javascript 활용에 대해 살펴봅니다.

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

    실습 이미지 다운로드 주소
    Cloacking: https://drive.google.com/file/d/11Z8vaFjJj0ihNHj02733UmfBZNCypn1r/view
    Wraith: https://drive.google.com/file/d/1skeLoa9RU0A–Kx6XmI_xskNexL0rGF3/view

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

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

    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] 강좌 마무리 후 코드 설명 영상 올리도록 하겠습니다.

Leave a Reply