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

분류 전체보기

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

  javascript 2019. 4. 24. 15:18

  웁웁(!) 돌아왔습니다. 이전에 했던 CSS, HTML 소스는 여기서(https://bejerry.tistory.com/15) 확인 하실 수 있습니다. 이전 소스가 있어야 원할히 따라하실 수 있을 것 같습니다. (누가? 대체 누가 이걸 따라해?) 지난 시간 네, 이전 글에는 시간을 브라우저에 나타내긴 했습니다만 실시간으로 초가 올라가고, 분이 올라가지 않고 멈춰있었습니다. 우리가 필요한건 디지털 시계처럼 시간이 가는걸 브라우저에 나타내야 합니다. 이 때 우리에게 필요한 것은 setInterval( ) 메서드입니다. setInterval( ) mdn(https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)에..

  Read More

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

  javascript 2019. 4. 23. 14:04

  안녕하세요, Jerry입니다. 포스팅에 앞서 조용한 상황을 가정하고 시작해보려고 합니다. 회사나 조용한 곳에서 데스크탑 혹은 노트북으로 일을 보고 있습니다. 알람을 맞춰야 하는데 소리모드로 하자니 주위가 조용합니다. 진동모드로 하자니 제가 진동을 체크 못 할것 같습니다. 그렇다면 시간을 어떻게 맞춰야 할까요? 그래서 생각한 정말 정말 매우 매우 간단한 웹 앱을 하나 만들어보려고 합니다. 이름을 굳이 지어야 한다면, Silence Alarm으로 지어놓고 시작하겠습니다. (혹시 괜찮은 이름 있으면 댓글 남겨주세요 XD) 간단한 웹 앱에 무엇이 필요한지 체크해보겠습니다. 1. 현재 시간 2. (알람이 울릴)설정 시간 3. 새 창 4. 화면 눈에 띄게 깜빡거리기 이 정도면 될 것 같습니다. 설정한 시간이 현재 ..

  Read More

• [MySQL] MySQL 백업(Export, Import)

  database/mysql 2019. 4. 23. 00:27

  첫번째. Export 방법 1. 왼쪽 메뉴 창 하단에 [Management] 탭을 클릭하고 2. 왼쪽 메뉴 창에 나온 Management 메뉴 중 [Data Export] 클릭 3. 상단 상태바에 Export인지 확인 후 4. 백업(Export)할 데이터베이스(Database)를 선택 5. 4번에서 선택한 해당 데이터베이스(Database)의 백업(Export)할 테이블(Schema)을 선택 6~8. 해당 번호에 체크박스 및 경로(파일명) 설정을 마친 후 9. [Start Export]를 클릭 [finished]를 확인하고 상단 상태바의 [X]를 눌러 창을 닫습니다. 두번째. Import 방법 Export와 마찬가지로 [Management] 탭에서 [Import]를 클릭하여 Import창을 띄운다. 1...

  Read More

• [JavaScript/VanillaJS] 날짜 계산/날짜 포맷팅(setDate/format/...)

  javascript 2019. 4. 17. 15:42

  날짜를 가지고 코딩을 해야할 때가 있다. 어떻게 해야할까? 생각할 단계엔 짜증난다. 자료를 찾고 코딩을 하며 바뀌는 결과물을 보고 있다보면 재밌어진다. 오늘을 기준으로 3개월 전 날짜를 구해야 할 일이 있었다. 날짜 계산 / date format function init() { var prevDate = formerDate(); //...생략 } function formerDate() { var objDate = new Date(); objDate.setMonth(objDate.getMonth() - 3); // 3개월 전 var formerDate = formatDate(objDate); return formerDate; } /** * @since 2019-04-17 * date format funct..

  Read More

• Step by step Guide ... 2019

  기타 2019. 4. 14. 21:48

  Step by step Guide to becoming a Web developer in 2019 안녕하세요. Jerry의 공부방에서 Jerry를 맡고 있는 Jerry입니다. (응?) 여러 웹개발 관련한 블로그와 유튜브를 심심찮게 보던 중, 올 해 배워야할 것들을 단계별로 나타낸 좋은 컨텐츠가 있어 공유하고 싶은 마음에 시기가 조금 늦었지만 포스팅하게 되었습니다. 이 리스트들을 올 해 안에 All Clear하긴 힘들겠지만 조급한 마음을 잠시 뒤로 한 채 한 Step씩 Step by step으로 나아가며 포스팅을 같이 한다면 훗날 제 소중한 자산이 될 것 같습니다. 감상은 이따가 다시 하기로 하고 이 포스팅에 중요한 부분을 차지하는 리스트를 한 번 적어보겠습니다. HTML/CSS JavaScript - d..

  Read More

• [JavaScript/VanillaJS] 마우스 오버 및 휠 이벤트 (onmouseover, onmousewheel)

  javascript 2019. 4. 10. 14:29

  저번 포스팅(https://bejerry.tistory.com/8)에 이어서 계속 Sellery.me 클론을 해보려고 노력중입니다. (하루가 지나고 이틀이 지났는데도 성과물이 없다. 여전히 휠 이벤트로 div이동을 못하고 있다ㅠㅠ) 그래도 나름 진전이 있었습니다. HTML JS 일단 내 마우스의 위치가 어떤 div에 있는지를 알아냈습니다. 현재 마우스가 읽을 수 있는 div는 가장 하위의 div(class="section-content")이기 때문에 부모를 호출해서 나눠야하고, classList.js에선 각 div에게 다른 class name을 지정해주기 때문에 div를 구분할 수 있습니다. 소스를 컴파일하는 순서대로 가볼까요? 1. html을 전부 읽은 후 body가 끝나기 전, test.js(scro..

  Read More

• [JavaScript/VanillaJS] 마우스 휠 이벤트 (a.k.a window.onmousewheel)

  javascript 2019. 4. 9. 15:56

  포스팅에 앞서 링크 하나를 적고 시작하겠습니다. https://sellery.me Sellery sellery.me 직장인이 알아두면 좋을 법한 웹 앱입니다. 이 웹 앱을 보며 저도 존버를 하고 있습니다. (언제쯤 퇴사를.. 웁웁..!) 보다보니 라이브러리없이 Vanilla JS로만 클론코딩을 해보고 싶은 마음이 들었습니다. (비전공개쪼렙신입개발자햇병아리라서 성장해야한다..!) 클론코딩을 시작해보자 마음먹고 실천에 옮기자마자 난관에 부딪혔는데 휠만으로 페이지 전환이 되길래 신기해서 좀 뜯어봤는데 페이지 전환이 아니라 div 이동이었습니다. (차라리 페이지 전환인게 마음은 편할 것 같다ㅠㅠ) 흠.. 클론코딩을 끝내고 포스팅을 하는게 아니라! 중간 중간 잊지말자는 의미로 양도 적고 시덥잖고 금방 훑고 지나갈..

  Read More

• [JavaScript/ES6] let 키워드(var와 비교)

  javascript 2019. 3. 29. 10:14

  @since 2019-03-29 본문에 앞서, 책 한 권을 읽으며 정리하고 싶은 부분을 일부 발췌하여 정리합니다. 출처를 남기지만 혹여 문제가 있다면 알려주시고, 통보없이 삭제되도 슬프지만 군말없이 인정하겠습니다.(흑..) 출처 도서에서 발췌한 부분은 저자 분께서 책에 서술하신 어투 그대로 발췌하며, 제가 작성한 것도 포스팅할 때 제가 헷갈리지 않기 위해, 혹여 누군가 이 모자란 글을 읽을 때 어투가 바뀌어 혼란을 주지않기 위해 저자 분의 어투대로 작성하겠습니다. 변수는 지역(로컬)변수와 전역(글로벌)변수로 크게 구분을 짓습니다. 그 이유는 스코프(scope, 범위) 때문입니다. 지역(로컬)변수 : 함수 또는 오브젝트를 스코프로 사용하려는 의도이며, 전역(글로벌)변수 : 프로그램 전체에서 공용으로 사용하..

  Read More