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

분류 전체보기

• [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

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 번외편(feat. ES6)

  javascript 2019. 4. 28. 23:18

  안녕하세요, Jerry입니다! 조용한 알람(silence alarm) 웹 앱 만들기가 끝났습니다. 그런데 왜 웹 앱 만들기라는 제목으로 번외를 적냐? 5편 포스팅을 발행한 후 소스를 천천히 보니 마음에 들지 않는 부분이 있어서 코드를 수정을 했고, 수정한 부분을 공유하고 싶어 이렇게 번외 편으로 포스팅을 작성했습니다. 어느 부분인지 코드를 먼저 보고 코드 블록 이후에 설명을 적겠습니다. alarm.js const alarmContainer = document.querySelector('.js-alarm'); const currentTime = alarmContainer.querySelector('h1'); const setTime = alarmContainer.querySelector('input'); ..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 5

  javascript 2019. 4. 27. 19:03

  안녕하세요, Jerry입니다. 우리가 어느새 5편까지 왔어요. 이제 마무리를 해야 하니 전편 소개를 정성 들여 이쁘게 해 볼까 합니다 :D [#1] querySelector( )와 백틱( ` )을 소개합니다. ▶ https://bejerry.tistory.com/15 [#2] setInterval( )과 ES6 맛보기! ▶ https://bejerry.tistory.com/16 [#3] typeof( )와 블록스코프! ▶ https://bejerry.tistory.com/17 [#4] classList 객체와 css 애니메이션 :) ▶ https://bejerry.tistory.com/18 자, 전 시간에 추가했던 CSS, 기억나시나요? 추가한 부분을 기존 alarm.css에서 걷어내고, 새로운 popu..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 4

  javascript 2019. 4. 26. 22:08

  안녕하세요, Jerry의 공부방에서 웹 앱을 만들어보는 시간을 갖고 있는 Jerry입니다. 블로그에 포스트 리스트를 보니 썸네일(대표 이미지)들이 전부 마음에 안 들더라고요. 따로 썸네일용 이미지를 하나 제작하던가 해야겠어요. 벌써 4편입니다. 원래 계획은 3편 안에 끝내는 거였는데 호락호락하지 않네요. 포스팅하는 순간순간마다 추가적으로 무엇이든 설명하려고 해서 그런 것 같습니다 :) 좋은 자세라고 스스로를 위로하고 있습니다. 이전 포스팅들의 링크를 안내하고 시작할게요. 조용한 알람 웹 앱 만들기 - 1, 조용한 알람 웹 앱 만들기 - 2, 조용한 알람 웹 앱 만들기 - 3 입니다. 3편의 소스를 쭈욱 읽어보시고 이해하시는 게 중요한 것 같습니다. 이제 CSS에 코드를 추가하여 색깔이 깜빡이게 해 보아요..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 3

  javascript 2019. 4. 24. 17:48

  안녕하세요, Jerry의 공부방의 Jerry입니다. 3편을 쓰기에 앞서 1편과 2편의 링크를 먼저 걸고 시작하겠습니다. 1편 : 조용한 알람(display alarm) 웹 앱 만들기 - 1(https://bejerry.tistory.com/15) 2편 : 조용한 알람(display alarm) 웹 앱 만들기 - 2(https://bejerry.tistory.com/16) 자, 정리를 간략히 하고 3편 이어 나가겠습니다 :) 1편에선 시간을 구하는 것까지 했습니다. 그리고 2편에선 우리가 멈춘 시간에게 생기를 불어넣어 시계가 움직이게 했죠! 정말 간단한 거지만 결과물을 보면 괜스레 기분 좋습니다 XD 그렇다면, 이번 시간엔 태그에 시간을 입력해서 현재시간과 세팅 시간(input에 사용자가 입력한 시간)이 ..

  Read More