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

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

 

쿠키 값 생성 코드
쿠키 값 생성 코드

 

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

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

 

복붙용 코드

//접속 로그
fnGenerateUid = function(){
  return  '' + Math.random().toString(36).substring(2, 11) + Date.now().toString().substring(0,10);
}

setCookie = function (name, value, day){
  var date = new Date();
  date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000);
  document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
}
deleteCookie = function(name){
  var date = new Date();
  document.cookie = name + "= " + "; expires=" + date.toUTCString() + "; path=/";
}
getCookie = function(name) {
  var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  return value? value[2] : null;
}

if(!getCookie('COOKID')){
   setCookie('COOKID', fnGenerateUid(), 1);
}

var cooKid= getCookie('COOKID');
console.log(cooKid);

 

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

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

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

 

쿠키 값 확인 방법
쿠키 값 확인 방법

 

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

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

 

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

 

deleteCookie
deleteCookie

 

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

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

삭제된 쿠키 값
삭제된 쿠키 값

 

 

이번엔 지난 글에 이어서

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

 

기본 샘플 코드
기본 샘플 코드

 

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

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

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

 

기본 코드 결과 콘솔 사진
기본 코드 결과 콘솔 사진

 

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

 

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

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

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

 

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

 

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

이전에 글을 쓰면서 나는 map() 함수를 사랑한다고 한적이 있는데 오늘은 자바스크립트를 하며 많이 사용하고 찾게 되는 배열 순회 함수를 소개한다. 많이들 보았겠지만 map()과 forEach()가 대표적

teddy-code.tistory.com

 

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

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

 

객체 배열 순회 split 결과 콘솔

 

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

*** 공부 메모 ***

코드 사진
app.tsx의 router 코드

 

기본적인 route에서

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

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

 

Protected-route.tsx 사진
Protected-route.tsx 사진

 

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

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

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

 

구조 ->

ProtectedRoute > Layout > Outlet ( home || Profile )

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

예시 코드 =>

let array = [1, 4, 9, 15];
let str = ['a', 'ab', 'abc', 'abcd' ];
let obj = [{name:"lee", age: 13}, {name:"kim", age: 15}, {name:"park", age: 12}, {name:"choi", age: 14},];

const result = array.filter((a) => a > 5);
const result2 = obj.filter((a) => a.age > 13);
const result3 = str.filter((a) => a.length > 2);

console.log(result);
console.log(result2);
console.log(result3);

 

 

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

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

 

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

 

위 코드 실행 콘솔 사진
위 코드 실행 콘솔 사진

 

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

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

 

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

+ Recent posts