코드library

혼자 해보고 싶은 사이드 프로젝트를 만들다가 처음엔 firebase로 데이터 베이스를 사용하려고 했으나
내가 제공하고자 하는 데이터 양이 너무 많은데 firebase 데이터를 캐싱하는게 쉽지 않았다...

내가 개발하면서 하루 사용량 초과하니 말 다했지..

그래서 결국 실질 데이터는 따로 db를 사용하고
계정관리나 게시글 관리 정도만 firebase로 하기로 하고 데이터를 이전하기로 결정했다.

우선 나는 choco를 사용하기 때문에
choco install mysql
로 가볍게 설치해주고(관리자 권한 실행) 

mysql_secure_installation
명령어로 설정을 한다 -> 첫번째만 N / 비밀번호 / 그 후 전부 Y

이렇게 하면 비밀번호 설정도 끝났고 워크벤치까지 choco로 설치
choco install mysql.workbench

2. 워크벤치에서 json 파일 업로드하기

choco로 설치할 경우 root로 이미 하나가 생성되어 있을 수 있다.

가볍게 지워주고(우클릭 delete connection)

더하기 버튼을 클릭하면 새로운 connection을 생성할 수 있다.

위에 이름을 써주고 store in vault...를 누르면 비밀번호 입력하는 창이 뜬다
처음에 설정한 비밀번호 입력 후 ok 옆에 Test Connection을 누르면

에러난 거 같지만 성공이다 그 후 ok를 눌러주면 생성 끝

다음 더블클릭으로 들어오면 초기화면이 나온다
위에 아이콘이나 스키마 영역 우클릭으로 스키마 생성 후 우클릭 하고 
Table Data Import Wizard 클릭

위치 경로 설정으로 json 파일 선택
그 다음 설정이 몇가지 있지만 기본적으로 next 하면 추가가 완료된다.

테이블로 잘 들어갔다!

오늘 글은 객체(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()을 함께 사용하는 예

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

*** 공부 메모 ***

기본적인 route에서

index 경로 페이지의 <Layout / > 컴포넌트에

Outlet으로 <Home / >과 <Profile / > 컴포넌트를 두고 라우터를 보호하고 싶을때

ProtectedRoute에 children으로 유저가 로그인 상태면

<home />과 < Profile / > 페이지를 보여주고

아닐 경우 로그인 페이지로 리디렉션

구조 ->

ProtectedRoute > Layout > Outlet ( home || Profile )

오늘은 배열에 특정한 조건을 주어 값을 걸러낼 수 있는 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 실행이에요