JERRY의 공부방🔥 JERRY의 공부방🔥

javascript

• vanilla js : 알람 웹 앱 만들기 영상 강의

  javascript 2019. 9. 30. 18:38

  안녕하세요, JERRY 입니다. vanilla js로 알람 웹 앱 만드는 강의를 블로그에 포스팅 했었고 이를 바탕으로 영상 제작까지 했습니다. 유튜브 강의 재생목록 링크 : https://www.youtube.com/playlist?list=PL7v_KkOujqF1uL-EzlFFPVU2sckY7hX0T vanilla.js : 알람 웹 앱 만들기 - YouTube www.youtube.com 영상은 총 10개로 구성되어 있고 영상 길이가 그리 길지 않기 때문에 반나절도 안걸려서 간단한 웹 앱을 만들어 보실 수 있고 vanilla js의 개념을 이해하시는데는 충분할거라 생각듭니다. java script 강의이기 보다는 vanilla js가 무엇인지 알려드리고 싶은 마음에 제작했고 10개의 영상을 전부 보시고..

  Read More

• [JavaScript/ES6] Arrow(화살표) 함수 - 주의할 점

  javascript 2019. 5. 28. 22:17

  안녕하세요, JERRY 입니다. 근황을 조금 말씀드리고 시작할까 해요 :) 요즘 강의 영상을 제작하며 지내고 있습니다. 퇴근하고 영상찍고 편집하고 주말에도 일어나서 편집하는데 확실히 고되네요. 근데 또 재밌습니다. 하루는 4~5시간 할애해서 편집 다 했는데 편집 프로그램이 뻑나는 바람에 4~5시간 편집한 게 날라갔습니다. 엄청 허무해서 뭐 아무 말도 안나오더군요. 주제는 Vanilla JS이고, 처음 만드는 강의라 퀄리티나 내용 면에서 많이 부족할 수 있는데 다 만들어지는대로 블로그에도 올려보겠습니다. 이번 포스팅은 Arrow(화살표) 함수를 사용할 때 주의해야 할 점들 몇 가지를 소개하려고 합니다. 내용은 mdn에서 참고하였습니다. new 연산자 사용 불가 arrow(화살표) 함수는 생성자로서 사용될 ..

  Read More

• [JavaScript/ES6] Arrow(화살표) 함수 - this편

  javascript 2019. 5. 21. 00:13

  안녕하세요, JERRY입니다. 구문 편을 포스팅 한 이후 열 흘이 지났네요. Arrow 함수의 경우엔 시리즈이기 때문에 서둘러서 포스팅했어야 했는데 어떤 이유가 있어도 전부 핑계겠지요. 이전 포스팅(https://bejerry.tistory.com/25)의 마지막에서 화살표 함수의 경우 this, arguments, super 또는 new.target을 바인딩하지 않는다고 말씀드렸었습니다. 이 부분에 대해서 엄청 상세히 포스팅하려고 했었는데 zerocho님께서 실행 컨텍스트를 알면 this 같은 것들은 이해가 된다고 하셔서 추후 실행 컨텍스트에 대해서 포스팅을 해서 그때 this를 상세히 다루기로 하고 현재 포스팅 중인 arrow 함수에서는 this가 어떻게 바인딩이 되지 않는지 간략히 소개만 드리려고 ..

  Read More

• [JavaScript/ES6] Arrow(화살표) 함수 - 구문편

  javascript 2019. 5. 10. 18:34

  안녕하세요, Jerry입니다. 이번 포스팅은 arrow function(화살표 함수)에 대해서 작성하려고 합니다. arrow function(화살표 함수)의 경우 언급할 게 많아서 2편 혹은 3편으로 나눠서 포스팅할 것 같습니다. ECMAScript 6(저자, 김영보) 책의 내용과 MDN의 내용을 참고하였습니다. 화살표 함수는 기존의 함수 형태인 function(parameter) { code } 형태를 축약한 것으로 기존 function 표현보다 짧습니다. 아래 작성된 구문을 한 번 볼까요? 기본 구문 매개변수가 하나뿐인 경우 괄호는 선택사항 (param) => { code }; param => { code }; 매개변수가 없는 함수는 괄호가 필요 ( ) => { code }; 여러 파라미터(param..

  Read More

• [JavaScript/ES6] const 키워드

  javascript 2019. 5. 7. 21:27

  안녕하세요, Jerry입니다 :) 지금까지 let 키워드에 대해 많은 이야기를 했습니다. var 키워드도 같이 했었죠. 하지만 ES6에는 이 두 키워드 외에도 하나가 더 있습니다. 바로 'const 키워드'입니다. const 키워드는 변수에 할당된 값을 변경할 수 없습니다. 즉, 할당된 값은 상수가 됩니다. let 키워드 때 설명을 못 드린 것이 있는데, const 키워드와 함께 짚고 넘어가겠습니다. 변수에 값을 할당할 때 콤마( , )를 사용하여 구분 짓고 할당할 수 있습니다. 밑에 캡처를 보시면 바로 이해가 되실 겁니다. 다만, const 키워드의 경우 변수를 선언만 할 수 없고 초깃값을 설정해야 합니다. 이것도 아래 캡처를 보시죠. 그리고 const 키워드의 scope(범위, 스코프)는 let 키워..

  Read More

• [Javascript/ES6] for ( ) 문 & NodeList

  javascript 2019. 5. 5. 18:46

  안녕하세요, Jerry입니다 :) 계속해서 스코프에 대해 이야기를 하고 있습니다. 블록 스코프에 특히 많은 얘기를 하고 있는데요. 이번 포스팅도 블록 스코프에 관련된 내용을 포스팅하려고 합니다. 우리가 블록 스코프에서 빼먹으면 안 될 구문이 있죠? 네, 바로 for( ) 문과 if( ) 문이죠. if( ) 문과 for( )의 차이점은 조건절에 변수 선언 여부겠죠. for( ) 문도 미리 선언돼있는 변수를 사용할 수 있겠지만 조건절 안에서 선언할 수 있습니다. 그러다 보니 키워드에 따라 스코프가 달라집니다. var 키워드와 let 키워드가 for( ) 문에서 어떻게 다른 스코프를 갖는지 알아보겠습니다! for.html 1~10 11~20 21~30 for.js var nodes = document.quer..

  Read More

• [Javascript/ES6] try - catch 와 switch - case

  javascript 2019. 5. 4. 01:48

  안녕하세요! 요 며칠 영상 준비를 어떻게 할 것인가? 에 대한 고민으로 포스팅은 엄두를 못 냈습니다. 응? 갑자기 무슨 영상이냐? 하실 수 있는데요, 조용한 알람 웹 앱 만들기 시리즈의 시작이었던 첫 편(https://bejerry.tistory.com/15)에서 정말 지나가는 말인 것처럼 글로 적었었는데 저한테는 영상으로 알려드리면 좋겠다는 생각이 강했습니다. 그리고 이 조용한 알람 시리즈를 블로그에서 마침과 동시에 같은 주제로 더 심화 있게, 그리고 좀 더 다양하게 알려드려야겠다는 생각을 했고 이에 맞춰 준비 아닌 준비를 했습니다. 제목은 try-catch와 swich-case인데 왜 제목이랑 맞지도 않는 말로 서론을 길게 하는가 하면 변명을 하고 싶었습니다. 1일 1포스팅을 하고자 마음먹었던 터라 ..

  Read More

• [JavaScript/ES6] let 과 this 키워드

  javascript 2019. 4. 29. 22:51

  안녕하세요, Jerry입니다. ECMAScript 6(저자: 김영보)를 계속 읽고 있습니다. 저번 ES6 포스팅에선 let과 var의 차이점에 대해 이야기를 나눴었는데요. 혹시 let과 var의 차이점 포스팅을 못 보신 분들 중에 궁금하신 분들은 ▼여기 아래 링크로 접속해보세요 :) ·let 키워드와 var 키워드의 차이점 ☞ https://bejerry.tistory.com/7) 이번 포스팅에선 this 키워드를 다뤄보려고 합니다. 본 포스팅은 ECMAScript 6(저자: 김영보)를 기반으로 설명을 드리며, 예제 소스도 비슷한 점 안내드리고 포스팅 시작하겠습니다. 블록 스코프에서 this 키워드가 참조하는 오브젝트를 한 번 보실까요? let - this var music = '음악'; console...

  Read More