매우 간단한 스크롤 이벤트를 해보자

addEventListener에 대해 설명하면서 스크롤 이벤트도 '있다'고 했는데, 이건 말 그대로 마우스를 스크롤했을 때 일어나는 이벤트이다. 그게 다다. Reference https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Javascript 스크롤 이벤트 web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을 써보았습니다. velog.io https://velog.io/@dunde/Javascript-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Javascript 스크롤 이벤트 web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을..

• format_list_bulleted Coding/JavaScript
• · 2022. 9. 21.
• textsms

스택과 큐

자료구조 하면서 많이 들어봤다 그죠? 그겁니다. 네. 이거 진짜 생각보다 간단하다. 아니 진짜임. 쉽게 말하자면 스택은 부페 접시고, 큐는 대기열이다. 회계로 치자면 스택은 후입선출법이고, 큐는 선입선출법이다. 회계에서 물건 들어오고 나간 걸 기장하는 방식 중에 선입선출법, 후입선출법이 있다. 이건 뭐냐면 먼저 산 물건이 먼저 나간걸로 기장하느냐, 나중에 산 물건이 먼저 나간걸로 기장하느냐의 차이. 예를 들어서 내가 어제는 카스테라 100개를 하나당 1000원에 샀고, 오늘은 카스테라 100개를 하나당 900원에 샀다. 그리고 150개를 팔았을 때 선입선출법은 어제 들여온 천원짜리 100개+오늘 들여온 900원짜리 50개가 나가고 후입선출법은 오늘 들여온 카스테라 900원짜리 100개+어제 들여온 카스테..

• format_list_bulleted Coding/코딩잡담
• · 2022. 9. 19.
• textsms

DOM 선택하는 방법 (부제: 너로 정했다?)

DOM은 Document Object Model의 약어로, XML이나 HTML에 접근하기 위한 일종의 인터페이스이다. 자바스크립트는 프론트엔드에서 많이 사용하는 언어의 특성인지는 모르겠지만 아무튼 이 DOM들을 지지고 볶는 게 가능하다. 이벤트 추가는 기본이고 생성 삭제 CSS 클래스 부여까지 다 된다. 남자친구 못 만드는 것만 빼면 만능... 어차피 여욱이도 못 구함 질량이 0이라 document.querySelector() 얘는 같이 다니는(?) 친구가 하나 있는데 바로 querySelectorAll()이다. 그럼 같은 역할인가요? 기본적으로는 그렇다. 기본적으로는 그런데 친구인 쿼리셀렉터올은 해당하는 요소를 죄다 가져온다. 예를 들어서 어떤 문서에 p태그가 6개 있다 그러면 쿼리셀렉터는 맨 위에꺼 ..

• format_list_bulleted Coding/JavaScript
• · 2022. 9. 19.
• textsms

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

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

• format_list_bulleted Coding/JavaScript
• · 2022. 9. 19.
• textsms

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

근데 말이 간단이지 헐 나 이것도 못해 개발자 하면 안되나봐 ㅠㅠ 이럴 정도는 아닙니다… 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.
• textsms

이진 탐색 알고리즘

https://koreanraichu.tistory.com/68 정렬 알고리즘 알고리즘이 문제를 푸는 방법이라고 했는데, 그러면 정렬 알고리즘은 뭘 정렬하기 위한 방법이겠지? 네, 맞습니다. 이것도 여러가지가 있는데 대표적인 것 다섯가지만 일단 알아 koreanraichu.tistory.com 여기서 정렬 알고리즘을 왜 써야 하냐면 정렬 알고리즘으로 깔쌈하게 정렬하고 나면 이진 탐색 알고리즘으로 메다닥 찾을 수 있다고 했다. 예? 근데 그게 뭔데 메다닥이 됨? 을 알아보자. 그래서 이게 뭐 하는 알고리즘인가? 검색 범위를 줄여나가면서 특정 대상을 찾는 알고리즘이다. 뭐 예를 들어서 찾고자 하는 균을 찾기 위해 계문강목과속종 단위로 좁혀나가는 뭐 그런거다. 박테리아 > 장내 박테리아 > 간균 > 대장균 이..

• format_list_bulleted Coding/코딩잡담
• · 2022. 9. 8.
• textsms

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

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

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

삼항연산자

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

• format_list_bulleted Coding/JavaScript
• · 2022. 8. 31.
• textsms

시스템 소프트웨어와 응용 소프트웨어

두 용어간의 차이가 정말 이 이상 심플할 수 없다. 일단 윈도우는 시스템 소프트웨어, 포토샵은 응용 소프트웨어이다. 엥? 그 둘이 무슨 차이인데요? 시스템 소프트웨어는 응용 소프트웨어를 돌리기 위한 플랫폼을 제공하고 컴퓨터 하드웨어에 접근할 수 있게 해 주는 소프트웨어이다. 그리고 운영체제는 시스템 소프트웨어 중 하나. 잘 생각해보자. 컴퓨터에는 하드웨어(단단해서 만져지는 장치라고 생각하면 된다)와 소프트웨어가 있고, 그 중에서도 CPU나 램, 하드디스크(요즘은 SSD)를 하드웨어라고 한다. 그 중에서도 램은 주기억장치, 하드디스크는 보조기억장치이고 CPU는 중앙처리장치, 즉 컴퓨터의 뇌라고 보면 된다. BIOS도 없이 아예 쌩 노트북으로 뭘 할 수 있을까? BIOS가 있어도 바이오스 설정만 가능하지, ..

• format_list_bulleted Coding/코딩잡담
• · 2022. 8. 31.
• textsms

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

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.
• textsms

익명함수 김람다씨

티스토리 테마 컬러를 Vue 로고껄로 바꿨음... 개인적으로 슬랙 테마도 뷰때깔인데 이쁩니다. 우리가 함수를 선언할 때는 function a() { 이 안에... 로직 있다...? } 이런 식으로 선언한다. 이런걸 보통 기명함수라고 하는데, 반대로 익명함수는 저 이름이 없는 함수다. 익명함수를 쓰면 코드가 간결해지고, 반복문 관련 코드에서 불필요한 부분을 뺄 수도 있고, 지연 연산으로 성능을 높일 수도 있다. 보통은 일회성으로 사용되는 부분에 대해서 람다식을 써서 표현하는데, 이 경우 굳이 함수를 저장하기 위해 메모리 할당을 할 필요가 없다. 마트에 갈 때 장바구니 들고가서 사거나, 종량제 봉투에 물건을 담아오지 없으면 옆구리에 끼고 온다 굳이 봉투값 내가면서 일회용 비닐봉지 가져오지는 않잖음? 생리대 ..

• format_list_bulleted Coding/코딩잡담
• · 2022. 8. 29.
• textsms

:root와 var의 조합은 정말 개편합니다.

이거는 어떻게 쓰냐면 :root { --main-color: #8d140a; --sub-color: #ac4404; --back-color: #f7ce1b; } 이런 식으로 :root를 만든 다음 색깔명과 rgb 코드를 넣고 ::selection {color:var(--main-color); background-color:var(--back-color);} 그 할당한 색깔을 쓸 때는 var(이름) 이런 식으로 쓴다. (형식이 망한 이유는 워드프레스에 적용한거 통으로 갖고온거라... 에디터는 알아서 이쁘게 잡아줍니다 여러분) 보통 CSS에서는 * {color:#000000;} 이렇게 쓴다. 보통은 이렇게 쓰는데 문제가 뭐냐면, 이거는 나중에 색을 바꿀 때 일일이 요소별로 찾아서 바꿔야 한다. 그나마 색깔 ..

• format_list_bulleted Coding/코딩잡담
• · 2022. 8. 26.
• textsms