리사트 파밍챌린지 프론트엔드 개발자편 4기 문제 위와 같은 형태로 된 타이머 만들기 레이아웃 우선 HTML과 CSS로 기본 틀을 잡는다. form-fieldset-input을 추가하여 입력 창을 만들고, placeholder로 00을 입력했다. placeholder는 실제 입력 시 사라진다. 3개의 버튼은 동일한 디자인으로 만들었고, flex를 이용하여 space-between으로 간격을 맞췄다. box-shadow로 멋을 좀 부려 보았다. 기능 만들어야 하는 기능은 다음과 같다 - START 버튼을 누르면 시간, 분, 초 단위로 카운트 다운 작동 (시간, 분, 초를 입력하는 영역이 사라진다) - STOP 버튼을 누르면 카운트 다운을 정지한다. - RESET 버튼을 누르면 모든 항목 0으로 초기화 되면서..

카페24로 일하다 보면 다양하게 스크립트 태그를 적용해야 하는 경우가 있다. 나의 경우는 전역으로 뿌려줘야 하는 함수 등은 common.js로 layout 모듈에 적용을 해두었고 개별 페이지에 적용해야 하는 스크립트는 별도로 로 import를 해주는데 카페24는 나름대로 노코딩 툴이기 때문에 라는 카페24만의 문법이 존재한다. 카페24가 기본적으로 저 문법으로 스크립트를 넣고 있는데, 이 스크립트들의 순서가 꼬이게 되면 원하는 기능이 제대로 작동이 안 되는 경우가 있다. 특히 swiperJS와 같이 외부 스크립트 라이브러리를 불러오는 경우...! DOM은 DOM대로 불러오고 내가 만든 함수는 함수대로 적용되는데 갑자기 스와이퍼 적용이 안되는 경우가 있다. 그래서 가끔은 html 내에 를 직접 넣어서 스크..

bind 알아보기 해당 예시는 코어 자바스크립트의 '함수 바인딩'을 참조하였습니다. 📌 들어가며 유데미 강의 중 bind에 대해 설명하며 'bind는 향후 실행을 위해 함수를 사전에 구성한다. 기본적으로 함수가 실행될 때 받을 인수를 미리 구성할 수 있다.'라고 설명하는데, bind에 사용법에 대해 추가로 더 알아본다. 📌 bind란 bind는 자바스크립트 메소드로 호출되면 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환한다. 이 객체를 호출하면 this가 참조하는 변수(context)로 고정된 함수가 반환된다. let exFunc = func.bind(context); 📌 사용하기 1. 먼저 객체에 변수와 함수가 존재할 때 객체 내의 함수를 다른 변수에 할당해 실행하면 예상한 대로..

최근 일하면서 fetch로 백엔드랑 API 통신할 일이 엄청 많아졌는데, fetch를 잘 모르고 통신하다보니 불필요하게 서버에 자주 요청을 보내는 일이 많아졌다 (테스트 하기 위해) 조금이나마 fetch를 알고 사용하기 위해 공부차 기록하기! fetch - 서버에 네트워크 요청을 보내고 정보를 받아오는 일을 한다. - fetch는 AJAX(Asynchronous Javascript And XML)이라는 기술로 서버에서 정보를 '비동기적'으로 가져올 수 있게 해주는 방식 - 페이지의 새로고침(유저 입장에서는 깜빡임) 없이 정보를 브라우저에 표시 - XMLHttpRequest라는 오래된 통신 방식에서 비롯되었다. - fetch는 모던 자바스크립트에서 지원되기 시작한 통신 메소드로 구식 브라우저에서는 폴리필을..

리액트에서는 useEffect처럼 DOM의 변화를 인식해서 재렌더링을 해주는 기능이 있지만 바닐라 자바스크립트에서는 누가 데이터의 변화를 감지하고 있지 않기 때문에 여러가지 방법으로 DOM에 변화를 일으켜줘야 한다. 그럴때 사용하는게 바로 Observer 기능인데 이번에는 회사에서 일을 하면서 Observer을 이용해서 여러가지 기능을 만들게 되었다. Observer에는 InterSectionObserver와 MutationObserver 두 가지가 있는데 자세한 설명은 링크한 MDN을 살펴보면 된다. InterSectionObserver는 무한 스크롤을 만드는데 사용했는데 MutationObserver로 어떤 Node가 추가되었을 때 다른 Node의 변화를 주는 기능을 구현하여 간단하게 정리해보려고 한..

모든 꺽쇠로된 HTML 태그 제거하기 var txt = ~텍스트~; txt.replace(/(]+)>)/ig,"") 태그 중 일부분만 제거하기 var txt = ~텍스트~; txt.replace(/]*)>/gi,""); navigator.share 이용해 공유 기능을 구현하는데 data 태그로 text를 받아오다보니 개행 태그가 그대로 노출되어 정규식과 replace 메소드를 이용해 제거하였다. 인터넷의 대부분의 정규식을 적용해보았으나 가장 정확하게 드는 정규식이라 기록한다! 출처는 아래에! 을 제거하는데도 모든 HTML 태그 없애는 정규식이 가장 깔끔하게 먹혔다. [자바스크립트] 정규표현식을 사용하여 태그만 제거하기 정규표현식을 사용한 태그의 제거 방법입니다. 태그를 제거하기 위해서 내장함수에서 태그를..