맨땅헤딩 프로그래밍

Form Validation

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 11. Form validation TIL 1. .icon/ .error 선택 -> e.target.parentNode의 자식으로 검사 다음과 같은 계층구조를 가진 html이 있다. input 요소에서 input 값을 받아오면 그에 맞게 .icon과 .error를 바꾸어주려고 한다. SIGN IN document.querySelectorAll('.icon-success'); document.querySelectorAll('.icon-error'); document.querySelectorAll('.error'); 이 HTML에서 .icon-success, .icon-error, ...

Carousel Slider

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 10. Carousel Slider TIL 1. transition const setSlideNext = slideLength => { if (slideIndex === slideLength + 1) return; slideIndex += 1; setSlide(slideIndex); setTransition(TRANSITIONDEFAULT); }; const checkSlideMove = slideLength => { if (slideIndex === slideLength + 1) { setTransition(0); slideIndex = 1; setSlide(slideIndex)..

AutoComplete

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 09 AutoComplete TIL 1. 정규표현식을 이용한 검사 const searchStr = e.target.value.toLowerCase().replace(/[^a-z\s+]/g, ''); const searchedCountryCode = countryCode.filter(_countryCode => _countryCode[1].toLowerCase().includes(searchStr)); 상기 코드는 국가 코드의 국가명(countryCode[1])에서 includes로 검색할 문자(searchStr)를 포함하는지 포함하지 않는지를 검사하면서 검색된 문자열만을 반환하는 ..

Toast

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 08 Toast TIL 1. 아직 존재하지 않는 요소를 불러와야 할 때 click event로 생기는 toast 속 요소의 X버튼을 클릭하면 toast를 삭제하고자 한다. document.querySelector('.toast-close').addEventListner('click', e => { e.target.parentNode.remove(); }); 위 방법에서는 전역에서 .toast-close 요소를 취득하려고 한다. 하지만, .toast-close는 .button-container가 click되면 생성되는 요소이므로 이 시점에서는 .toast-close가 없다. 따라서,..

Tabs

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 07 Tabs TIL 1. style.left 어트이뷰트에 값을 추가하기 .glider 요소를 클릭된 .tab 요소로 옮겨주고자 한다. 1-1) left를 사용한 방법 .tab 요소의 width 값과 .tab 요소의 index 값을 곱해, .glider가 이동해야 하는 총 거리를 구한다. .tab 요소의 width 값을 구하기 위해 css 변수 --tab-width를 불러왔다. $glider.style.left = index * getComputedStyle($tabs).getPropertyValue('--tab-width') + 'px'; 1-2) transform을 사용한 방법..

StopWatch

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 06 Stopwatch TIL 1. style.display DOM요소에서 style.display 어트리뷰트를 불러오려고 하는 것은 CSS에서 참조하여 불러오는 것이 아닌 HTML 어트리뷰트에 있는것을 불러오는 것으로 확인이 되었다. console.log($laps.style.display); // 아무것도 출력 안됨 $laps.style.display = 'grid'; console.log($laps.style.display); // grid 상기 코드에서 1번째 console.log를 출력해보면 아무것도 출력("")이 되지 않지만 2번째 console.log에서는 grid가 ..

PopupModal

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 05 PopupModal TIL 1. submit event를 받았을 때 버튼이 target이 되지 않는 현상 OK Cancel X ; 위 코드에서는 popup을 종료하는 button이 submit 안에 들어 있다. 이 상태에서 submit 이벤트를 받아서 종료하려고 하면 submit에서 button이 e.target이 되지 않는다. 따라서 submit 이벤트가 필요한 부분과 필요하지 않는 부분을 나누었다. OK Cancel X popup-form 에서는 submit event가 발생하면 입력 필드의 텍스트를 입력받아 화면에 출력한다. 그리고 popup-delete 에서는 clic..

DarkMode

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 04 Dark mode TIL 1. localStorage light모드와 Dark모드 토글 기준을 갖기 위해 로컬스토리지에 key와 value로 저장하고 가져오는 방식을 사용했다. window.localStorage.setItem('mode', mode); window.localStorage.getItem('mode'); // 'dark' 또는 'light' setItem : setItem() 메서드는 key와 value를 인자로 전달하면 해당 key를 지정된 스토리지 개체에 추가한다. 만약, 해당 key의 value가 이미 있으면 업데이트를 한다. https://develope..

Is Palindrome

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 03 Is palindrome TIL 1. 정규표현식 한글을 검색하는 방법: /[ㄱ-힣]/g 2. isPalindrome palindrome인지 검사하는 함수 isPalindrome을 만들었다. const isPalindrome = content => { const tmpContent = content.toLowerCase().replace(/[^a-z0-9ㄱ-힣]/g, ''); return tmpContent === [...tmpContent].reverse().join(''); }; 위 방법에서는 tmpContent가 빈 문자열이라면 true가 나오게 된다. 빈문자열 ''은 거..

Counter

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 02 Counter TIL 1. 클로저를 만드는 방식 매개 변수로 함수를 받아와서 쓰는 방식 const counter = (() => { const $counter = document.querySelector('.counter'); let count = 0; return (aux) => { aux(count); return count; } })(); increase(_count) => { count += _count; return count; } decrease(_count) => { count -= _count !== 0 ? 1 : 0; return count; } 자유변수 co..

Scrolling Go To Top

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 01 Scrolling goto top TIL 1. 메서드 선택 근거 1-1. window.scrollY vs window.pageYOffset 두 메서드는 모두 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환하는 메서드다. 문서를 단일 픽셀보다 높은 정밀도를 가진 장치에서 렌더링한 경우 소숫값을 반환한다. 문서가 위나 아리로 전혀 움직이지 않은 상태에는 0을 반환한다. 이를 통해, 문서가 스크롤 되었는지 확인할 수 있다. window.scrollY https://developer.mozilla.org/ko/docs/Web/API/Window/scrollY window.pag..

모던 자바스크립트 DeepDive 공부 내용 17차

해당 포스트가 마지막 정리 내용이다. 이번 정리 목차는 48 ~ 49장이다. 48장 모듈 모듈의 일반적 의미 - 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 의미 - 자신만의 파일스코프(모듈스코프)를 가질 수 있어야 한다. - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개 가능 이를 Export라 한다. - export된 모듈의 자산은 다른 모듈에서 재사용 가능 - export된 모듈의 자산을 사용하는 모듈을 모듈 사용자라 한다. - 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 Import라 한다. - 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 자바스크립트와 모듈 - JS는 웹페이지..