개발하는 일상

한 줄 요약 select 태그를 커스텀하게 만들고 싶다면 div 태그에 tabIndex="0" 속성을 주고, blur 이벤트리스너를 활용해보자 여러 옵션 중 하나를 선택할 수 있게 해주는 HTML 태그가 있다. select 태그인데, 내부 운영용 툴을 만들다가 이 태그를 쓰게 되었다. select 태그를 쓰게 되면 디폴트로 아래 그림1와 같은 디자인이 따라온다. 이 디자인은 css로 바꿀 수 없다는 것이 문제였다. 아무리 내부용 툴이지만 이렇게 만들고 싶진 않아서, div 태그로 직접 select 태그를 구현하기로 했다. 적절한 style과 클릭 이벤트리스너를 달아서 아래 그림2와 같은 태그를 만들었다. div 태그로 select 태그를 흉내내면서 생긴 하나의 문제가 있었다. select 태그는 선택지를..

브라우저의 히스토리가 아래와 같이 쌓여있다고 해보겠습니다. // ['/', '/post/1', '/post/2'] 여기서 함수 foo를 실행하면 어떻게 될까요? function foo () { history.go(-1) // 1 history.pushState({}, null, '/post/3') // 2 } 1이 먼저 실행되고, 2가 실행되면 히스토리는 아래와 같이 구성됩니다. // ['/', '/post/1', '/post/3'] 하지만 실제로는 2가 먼저 실행되고, 1이 실행되어 아래와 같은 히스토리를 갖게됩니다. // ['/', '/post/1', '/post/2..

아래 코드의 결과를 예측해보세요. const foo = '12,4,15,163,51'.split(','); const bar = foo.map(parseInt); console.log(bar); 아래 코드와는 결과가 다를까요? const foo = '12,4,15,163,51'.split(','); const bar = foo.map((num)=>parseInt(num)); console.log(bar); 첫 번째 코드의 결과는 [ 12, NaN, 1, 1, NaN ] 두 번째 코드의 결과는 [ 12, 4, 15, 163, 51 ] 입니다. 이유는 map과 parseInt가 어떻게 정의되어 있는지를 보면 알 수 있습니다. // map map(cal..

먼저 코드 const hello = '연속된 공백을 하나의 공백으로 처리하려고 함' // 이 문자열을 '연속된 공백을 하나의 공백으로 처리하려고 함' 으로 바꾸고 싶은 것! const spaceRemovedHello = hello.replace(/ +(?= )/g, '') console.log(spaceRemovedHello) // '연속된 공백을 하나의 공백으로 처리하려고 함' 정규식 해설 / +/ +는 정규식에서 앞의 표현식이 1회 이상 반복되는 것을 의미합니다. 정리하면 위의 정규식은 1회 이상 반복되는 공백이라는 의미가 됩니다. /x(?=y)/ x 중에서 뒤에 y가 뒤따라오는 x의 의미입니다. 여기서 실제로 대응되는 것은 xy 전체가 아니라..

문제링크: programmers.co.kr/learn/courses/30/lessons/72410 문제 입력으로 받은 문자열 new_id를 다음 단계에 맞게 바꾸어 추천아이디를 만드는 문제입니다. 1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다. 3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다. 4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다. 5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다. 6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외..

어떤 요소의 이벤트리스너를 딱 한 번만 발동시키고 싶다면 어떻게 해야 할까요? addEventListner와 removeEventListner를 적절히 사용해야 되겠죠? 크게 3가지로 나눠 방법을 소개하겠습니다. 1. 함수에 이름 붙여 사용하기 function onClickFunction(){ eventTarget.removeEventListener('click', onClickFunction) alert('event has been removed') } eventTarget.addEventListener('click', onClickFunction) removeEventListener에 함수 이름이 인자로 필요하기 때문에 따로 선언하여 제거하는 모습입니다. 좀 더 간편한 방법은 없을까요? 2. once..