코드library

오늘 글은 객체(Object)에 키 : [배열] 값으로 저장하고 그것을 변수로 불러와 보는 방법이다.
업무중에 배열로 리스트를 뽑아내는 작업이 있었는데

중복으로 리스트를 뽑아내는 경우를 방지하기 위해 배열을 초기화 시켜주다보니

한 페이지에 여러 리스트가 있는 경우 고정된 값만 사용되게 되었다.

그것을 막기 위해 객체에 키 : [array]로 값을 키 값을 가져와서 리스트를 여는 방법을 찾았다. 

기존에 업무에서 쓰던 코드와는 다르지만 예시로 설명하기 위해 코드를 조금 수정했다.

div를 클릭했을때 div의 속성 중 하나를 매개변수로(예시에서는 id) 객체에서 키 값을 찾아주는게 목적이다

(실제 업무 형식과 동일)

우선 빈 객체를 만들어주고 키 값으로 사용할 변수를 만든다.

그 후 변수로 키 : 값을 넣어주기 위해선 [ ] 괄호가 필요하다

객체이름[변수이름] = 값

ex)
list_result[list_id] = split_list;

객체를 써본 사람들은 .변수이름 이렇게 찾거나 만드는게 익숙할텐데

변수를 사용하려면 중괄호가 필요하더라

(중괄호가 없으면 변수가 아닌 그냥 키로 사용해버림)

다음은 쉽게 매개변수로 키 값으로 배열을 불러와 사용이 가능하다

Easy~

오늘은 접속자 로그 같은걸 쌓아야 할때 사용하는 쿠키 값 생성하기를 소개합니다.

(내가 만든 쿠키~) ???

지금 보여드리는 코드는 하루에 한번씩 초기화되는 // 로그중복 어뷰징 방지

그리고 쿠키를 삭제하는 deleteCookie() 함수가 포함된 코드입니다.

복붙용 코드

fnGenerateUid를 통해 쿠키의 문자열을 생성하고

접속할 때 COOKID라는 쿠키 값이 없으면

setCookie() 함수를 사용하여 24시간 유지되는 쿠키 값을 생성합니다.

쿠키가 제대로 생성했는지 확인하기 위해서 f12를 누른 개발자 도구창에서

애플리케이션 쿠키를 확인하면 COOKID가 제대로 생성된 것을 확인할 수 있습니다

그리고 삭제하는 것도 확인해보면...

애플리케이션 쿠키에서 삭제된 것을 확인할 수 있습니다.

(정확하게는 유지시간을 현재시로 맞춰서 만료시켜버림)

이번엔 지난 글에 이어서

javascript의 배열, 객체 문자열 자르기 2탄 split() 메소드를 소개합니다.

기본적으로 split() 메소드는 문자열의 특정 문자를 기준으로

문자열을 슬라이스 해서 새로운 배열을 만들어주며

배열을 순회하는 기능은 없기 때문에 배열의 문자열을 자를때는 index 번호가 필요합니다.

array 배열의 0번 인덱스 ab-cde-fgh가 -을 기준으로 잘려서 배열로 반환된 것을 볼 수 있습니다.

하지만 이런 문자열을 다루는 메소드들은

map() 또는 forEach() 같은 배열 순회 메소드와

함께 사용하면 훨씬 좋은 효과를 기대할 수 있습니다.

2023.11.02 - [Javascript] - [Javascript] 배열, 객체 배열 순회하기 map(), forEach()

map()과 split()을 함께 사용하는 예

특정 문자열로 구분되는 결과 값을 받아와서 다뤄야 할때 사용해보세요~

오늘은 배열에 특정한 조건을 주어 값을 걸러낼 수 있는 filter() 함수를 소개합니다.

예시 코드 =>

기본적으로 모든 배열에 사용할 수 있고

배열의 모든 원소에 조건을 부여하여 얕은 복사(원본 유지 복사)를 해줍니다.

해당 코드를 실행한 콘솔을 보면

각각의 얕은 복사된 결과물이 콘솔에 찍히는 것을 확인할 수 있습니다.

이 외에도 여러가지 기본 메소드를 사용하여 배열 또는 객체(문자)를 필터할 수 있는데 

다음 시간에 계속 알아보도록 합시다! 

이전에 iframe 안에 있는 태그들을 선택하는 방법을 포스팅한적이 있는데

그것과는 별개지만 이어서 작업을 하다가 부모창에서 자식창의 복수 선택자에 이벤트를 줘야 하는 경우가 생겼다.

(사실 이거 말이 안되는거 아닌가..?)

부모창에서 iframe 컨텐츠에 접근하는 법은 아래에 링크 참조

2023.10.11 - [Javascript] - [Javascript] 부모창에서 iframe 컨텐츠 접근하기

그럼 우선 선택자에 대해 알아보자

각각 querySelectorAll, getElementsByClassName, getElementById로 콘솔을 찍어보면

id의 특성상 당연히 하나만 찍힌 id_content와 달리 메소드 이름부터 복수인

ElementsByClassName과 All은 노드리스트와 html 태그 배열이 보인다.

자 이제 이러면 자동완성 기능은 어떤 반응을 보이느냐

이렇게 자동완성부터 addEventListener를 거부한다.

그리고 억지로 넣어봐도?

복수 선택자이기 때문에 그렇다..

그렇다면 결국 하나하나씩 해줘야 하는데..

클래스 하나씩 개별로 따로 줘서 변수 또 따로 주고 하나씩할꺼 아니지 않은가?

정답은?

배열을  for문을 돌려서 length만큼 각각 이벤트를 바인딩하면 된다.

하지만 여기서 ClassName과 SelectorAll의 차이점이 있다. (중요)

바로 SelectorAll로 선택된 배열은 forEach가 된다는 점

귀찮게 for문 필요없이 바로 배열 순회가 가능하다.

개인적으로 이렇다면 복수 선택자에 이벤트 바인딩을 할때에는 SelectorAll에 forEach를 쓰는게 편할꺼 같다.

안 좋은 점이 있는지 혹시나 아신다면 댓글로 알려주시면 감사하겠습니다.

현재까지의 결론 =>

똑같은 class의 dom에 동시에 이벤트를 바인딩할때에는 SelectorAll에 forEach! 

이전에 글을 쓰면서 나는 map() 함수를 사랑한다고 한적이 있는데

오늘은 자바스크립트를 하며 많이 사용하고 찾게 되는 배열 순회 함수를 소개한다.

많이들 보았겠지만 map()과 forEach()가 대표적이다.

샘플로 만든 array 숫자 배열과 객체 배열인 obj를 map()과 forEach()를 통해 콘솔에 찍어보면 비교가 쉽다.

우선 사용하는 방법은 둘다 동일하다.

array.map() 또는 forEach()안에 (배열의 원소) => 실행될 함수 방식으로 써주면 된다. (꼭 arrow function 아니여도 됨)

둘의 가장 큰 차이점은 10번줄에 찍힌 로그를 보면 확인할 수 있는데

객체 배열의 name을 콘솔에 찍은 것은 둘다 똑같지만 (단순 실행)

map을 사용한 arrayMap[]은 결과가 배열로 리턴된 것을 볼 수 있고 그것과 달리 forEach를 사용한 arrayFor는 undefined가 나온다..!

결론 => map()은 실행과 함께 결과 값도 저장(리턴)

forEach()는 just 실행이에요

실제 업무할 때 쓰는 프로그램중에 복사 붙혀넣기를 해야하는 프로그램이 있는데 너무 많이 붙혀넣기를 하려다보니 귀찮아서 자동으로 복사되는 프로그램을 만들어 보다가 js로 복사하는 메소드를 찾게 되었다.

이전부터 쓰이던 것들이나 api도 있는거 같지만 환경만 된다면 가장 간단하게 할 수 있는 방법으로 소개한다.

window.navigator.clipboard.writeText();

간단하게 설명하면 innerHTML(textarea)이나 textContent(div)로 가져온 문자열을 복사해준다.

환경은 https 또는 localhost 에서만 작동하는데 집에서 인터넷으로 할때는

127.0.0.1까지는 문제 없이 작동하는 것을 확인했다.

회사에서 쓸때 와이파이나 테스팅 서버에서 사용할 경우에는 앞에 주소를 localhost로 바꿔주면 문제 없었다.

 i'm 완벽이에요^^

슬라이드 메뉴를 만들때 유용한 Swiper.js를 사용하다가 클릭한 요소를 가운데로 옮기는 기능이 필요하게 되었다.

이것 또한 블로그에 여러 글을 보게 되었는데 다 방법은 똑같으나 나는 계속 달라서 왜 그러는지 고민하다가 성공했다..

보통 블로그 글에서는 초기화 시키고 깨끗한 상태에서 가운데 정렬 시키는 경우가 많았는데 나는 spaceBetween으로 거리를 벌려 두었다. 그래서 계속 슬라이드의 인덱스 수와 인덱스 사이의 거리만큼 슬라이드 전체 길이가 늘어나서 오른쪽에 있는 슬라이드들이 가운데로 못가고 있었다.

슬라이드 부분만 슬쩍 가져오고 색깔도 막 해놓은거라 이쁘진 않지만..

가운데 정렬이동과 선택은 잘 된다. 

항상 질문과 같이 고민할만한 내용은 환영입니다. (본인은 뇌가 고통 받는거 좋아함)