addEventListener()로 고급진 이벤트 추가하기

근데 생각해보니까 이거 전에 픽하는게 먼저 와야 하지 않나... 뭐 아무튼. 뭔가 기깔나는 것을 구현하기 위해 이 블로그 혹은 다른 블로그를 보다 보면 그런 게 있다. 어? HTML에서 온클릭도 안 줬는데 작동하네? 어? 이거 더블클릭 하니까 작동하네? 어? 스크롤 내리니까 작동하네? 를 알아보자. 굳이 버튼에 온클릭을 안 줘도 작동하는 비결이 바로 addEventListener()이다. getElementByID나 querySelector같은 걸로 DOM(쉽게 말하자면 문서의 어떤 요소)을 가져와서 addEventListener()로 이벤트를 추가할 수 있다. 이 추가라는 게 단순히 알림이나 콘솔 이런걸 떠나서 뭐 모달 소환 곱하기 이런 함수까지 된다. See the Pen Eventlistner by..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 9. 19.
다크모드 간단하게 토글로 구현해보기

다크모드 간단하게 토글로 구현해보기

근데 말이 간단이지 헐 나 이것도 못해 개발자 하면 안되나봐 ㅠㅠ 이럴 정도는 아닙니다… Reference https://blogpack.tistory.com/1117 다크모드 토글 기능 구현과 다크모드 토글 디자인 구현 웹페이지, 또는 사이트에 적용하는 다크 모드는 구현하는 방법이 여러 가지 있습니다. CSS 속성을 기준으로 구분하면 사용된 배경색과 전경(글자) 색들을 바꾸기만 하는 간단한 구현이기 때문에 blogpack.tistory.com https://www.w3schools.com/howto/howto_css_switch.asp How To Create a Toggle Switch W3Schools offers free online tutorials, references and exercises..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 9. 13.
나홀로메모장 파생형 만들기-Call of AJAX

나홀로메모장 파생형 만들기-Call of AJAX

원래 페이지네이션이랑 수정/삭제도 구현하려고 했는데 못함... 페이지네이션은 전에 했던 게 오브젝트를 동적으로 생성하는건데 여기서는 DB에 있는 걸 받아와서 진행해야 하는거라 버튼 렌더링/로직에서 막혔고 수정/삭제는 이따 보시면 아시겠지만 저기서 뭐가 뭔지를 구분할 수단이 없습니다. 아, 사람은 구별할 수 있지. 컴퓨터가 못해요. 인간적으로 달력 위에 시계 마렵잖아요 Reference https://stickode.tistory.com/124 [JavaScript] 디지털 시계 만들기 자바스크립트을 활용하여 디지털 시계를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '디지털 시계 만들기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코 stickode.tistor..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 9. 1.

삼항연산자

내 최근에 달력 코드를 올렸는데 거기서 보면 dates.forEach((date, i) => { const condition = i >= firstDate && i < lastDate + 1 ? 'this' : 'other'; dates[i] = `${date}`; }) 이놈이 있다. 어디서 나오냐면 이전달/다음달 날짜 구별할 때 나온다. 근데 이게 뭔 람다식인가 했더니 그건 아니고 삼항연산자래요... 그럼 이게 뭔지 한번 알아보자. 얘는 연산자는 연산자인데 항이 세 개이다. 엥? 그게 왜요? 항이 세개일수도 있잖음! 자 생각해봅시다. 우리 더하기 하나에 숫자 몇개 들어감? 두개 들어가죠? 곱하기는? 곱하기도 두개지? 제곱은? 제곱도 두개다. 나누기는? 피제수 제수 두개다. 루트는? 두개다. 예? 루트가..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 31.
나홀로 메모장 파생형 만들기-구성 및 사이드바 달력

나홀로 메모장 파생형 만들기-구성 및 사이드바 달력

Reference https://bigtop.tistory.com/63 [JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기 만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일반적으로 생각하는 Full Calendar를 만들어 볼까 합니다. 이번에도 지금까지 정리 bigtop.tistory.com https://opentutorials.org/course/1375/6761 addEventListener() - 생활코딩 addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. var t = document.getElementById('target'); t..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 29.
마우스를 따라다니는 무언가 만들기

마우스를 따라다니는 무언가 만들기

참고로 이 블로그에도 적용해뒀다. 여러분의 마우스 커서를 따라다니는 Thinking Face가 그것. 워드프레스는 HTML이나 JS는 건드릴 수 없어서 적용 못했고 네이버나 미디움은 HTML쪽 편집이 안돼서 적용 못했음. Reference https://stickode.tistory.com/318 [JavaScript] 마우스를 따라다니는 원 만들기 이번시간에는 [JavaScript] 를 사용해 마우스를 따라다니는 원을 만들어보겠습니다. 스틱코드를 즐겨찾기해주세요. https://stickode.com/detail.html?no=2671 스틱코드 stickode.com Html안에 javascript와 css.. stickode.tistory.com https://codepen.io/falldowngob..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 24.
페이지네이션

페이지네이션

매우 고급져보이는 이 단어의 뜻은 정말 생각지도 못하게 심플하고, 여러분은 이미 이걸 몇 번 봤다. 이런거 다들 한번씩 봤잖음. 블로그건 검색이건... 이게 페이지네이션이다. 저게 코딩관련 글을 11페이지로 옮겼는데(다 옮겼음) 분량이 어마무시하다 그죠...? 아무튼, 페이지네이션은 이런 식으로 한 페이지에 정해진 양의 콘텐츠를 보여준다. 반대되는 개념인 무한 스크롤은 끝이 보일때까지 아래로 아래로 내리는 것. 무한 스크롤은 보통 모바일 앱에서 많이 사용하는 방식인데, 인별이나 미디움도 무한 스크롤이다. 아래로 스크롤하면서 콘텐츠를 계속 볼 수 있어서 굳이 페이지 이동하고 로딩하는 걸 기다리지 않아도 된다. 하지만 콘텐츠가 많아지면 로딩하는 데 시간이 걸리기도 하고(...), 읽다 보면 스크롤바는 줄어드..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 23.
원페이지 쇼핑몰 보강하기-익스트림 CRUD

원페이지 쇼핑몰 보강하기-익스트림 CRUD

진행 상황: 회원가입(완료)/로그인(로직만 완료) 전에도 얘기했듯, 쇼핑몰에서 ‘모든 고객의 주문 내역을 볼 수 있는’건 물건을 파는 사람이다. 다른 고객들은 자기 주문만 볼 수 있다. 내가 옆집 김씨가 뭘 시켰는지 모르고, 뒷집 박씨는 내가 뭘 시켰는지 모르는것처럼. 그래서 나중에 페이지 하단에 있는 얘는 관리자 계정으로 로그인해야만 볼 수 있게끔 할 예정이다. 콩둘기 메일의 상태가? 회원가입 로그인과 회원가입을 모달창에서 받는다는 얘기는 전에 했는데, 그럼 어떤 정보를 받느냐… 아이디, 비밀번호, 비밀번호 확인, 이름, 전화번호, 이메일, 주소 받는다. 타임스탬프도 있긴 한데, 그건 입력받는 건 아니고 가입년월일이다. function account_make() { let id = $('#userID'..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 19.
To-do list 바닐라JS로 만들기

To-do list 바닐라JS로 만들기

쇼핑몰이요? 그거 로그인은 둘째치고 SSL 설정 개꼬여서 걍 인스턴스 엎고 만들라고… 아니 nginx 깔았는데 uWSGI에서 막혀서 하루종일 그거 찾았다니까. 아무도 안 알려줘 그걸… 깝깝해서 오라클 클라우드도 알아봐야 하나 생각중임 지금.. Reference https://woojong92.tistory.com/entry/JS-%EB%B0%94%EB%8B%90%EB%9D%BC-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-ToDo-List-%EB%A7%8C%EB%93%A4%EA%B8%B0-1-%EA%B8%B0%EB%8A%A5%EC%A0%95%EC%9D%98-%EB%B0%8F-HTMLCSS [JS] 바닐라 자바스크립트로 ToDo-List..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 19.
원페이지 쇼핑몰 보강하기-익스트림 어드레스+익스트림 CRUD(준비)

원페이지 쇼핑몰 보강하기-익스트림 어드레스+익스트림 CRUD(준비)

생각해보니 주소는 유효성 검사를 어떻게 해야 하지? 싶어서 물어봤더니 다음API가 잘 되어 있다고 함. 그래서 주소를 그걸로 검색해서 우편번호랑 함께 받고, 상세주소만 별도로 입력받는다. (상세주소까지 입력해야 하는 데도 있고 필수는 아닌데도 봤음) 아무튼 그래서 ㄱㄱ함. 익스트림 어드레스 일단 입력을 받으려면 준비를 해야 한다. 그 준비가 뭐냐면 입력란을 만들고 입력란 아이디를 수정하고 API 가져와서 연결하기 이다. MongoDB는 콜렉션이 없으면 알아서 만들기때문에 콜렉션 청소만 한번 해 주면 되므로 DB는 작업이 다 끝나면 그냥 비우는걸로… 아무튼 이게 그 결과다. 우편변호와 주소는 직접 입력하는 게 아니라 검색하면 가져오는거고, 그 다음에 사용자가 입력하는 부분은 상세주소이다. 그니까 자바스크립..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 19.
만들 수 있다! 이미지 슬라이더!

만들 수 있다! 이미지 슬라이더!

단점: 아직 자동재생이 안됨 기본편 참고 사이트: https://penguingoon.tistory.com/255 자바스크립트 이미지 슬라이드 구현하기 안녕하세요! 오늘은 라이브러리 없이 적은 양의 자바스크립트 코드만으로 간단한 이미지 슬라이더를 구현해보았습니다. 이미지 슬라이더 구현하는 방법이야 한트럭이지만, 그 중에 한 가지 방 penguingoon.tistory.com 하단에 있는 이전/다음버튼을 누르면 그림이 움직인다. HTML Dotted wallpaper 둘러보기 이전 다음 본 이미지 슬라이더에 사용된 이미지는 전부 수제입니다. 도트찍느라 고생했습니다... 사실 얘는 뼈대라 특별히 설명할 건 없다. 응용편의 경우 밑에 뭐가 하나 더 들어간다는 것 빼곤 진짜 특별할 게 없다. CSS @impor..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 19.
원페이지 쇼핑몰 보강하기-유효성 검사와 공백처리

원페이지 쇼핑몰 보강하기-유효성 검사와 공백처리

내 드디어!!! 서버에 올렸어!!! 여러분 이거 해써여!!! 하고 올렸는데… 피드백 온 것 중에 어? 이거 다 입력 안 해도 주문됐다고 뜨는데요? 유효성 검사 추가해주세요. 그게 뭔데요 감마펑션때 온갖가지 경우의 수 다 따져놓고 뭐한겨… (사실 몰랐음) 그래서 보강함. 아 그 HTTP HTTPS로 바꾸는거는… 내가 해봤어요 해봤는데… 그거 따라했는데 접속 안돼서 인스턴스 버렸어… 스크립트파일 분리 이게 과제 할 때는 스크립트고 CSS고 다 HTML파일에 박혀있었는데… 이게 코드 규모가 작으면 그래도 되요 그래도 되는데… 코드 규모가 커지면 인제 골치아퍼… 수정하다 욕해요… 그래서 분리할거다. 파이참에서 Flask project를 만들면 이렇게 된다. 이게 Flask 프로젝트의 국룰인데 HTML파일은tem..

  • format_list_bulleted Coding/JavaScript
  • · 2022. 8. 19.