TIL - JS Level Up : JS데이터2

Seuling·2022년 5월 11일

JS데이터 TIL js

TIL

목록 보기

26/30

JS데이터 실습

가져오기, 내보내기

import 키워드로 가져올 수 있고, export키워드로 내보낼 수 있음

하나의 자바스크립트 파일에서는 export 나가는 통로가 두가지가 있다.

Default export : default라는 기본통로는 이름을 지정하지 않아도 됨

Named export : 이름을 지정해서 데이터를 내보내야한다.

내보내기 (Default export)

export default function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}
/*--------------------------------------------------------------------------*/

export default function(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

이름을 따로 활용할것이 아니기에 getType이라는 함수이름을 지정안해줘도 된다.

또한, 가져와서 활용할 때 이름을 언제든지 다른것으로 지정해도 전혀 문제가 없다.

import random from "./getRandom";

내보내기 (Named export)

export function random() {
  return Math.floor(Math.random() * 10);
}

export const user = {
  name: "Sseul",
  age: 29,
};

이때는 import 시 데이터를 중괄호로 묶어서 사용해야함

import { random, user as sseul } from "./getRandom";
import * as All from './getRandom';
console.log(random());
console.log(sseul);

꺼내올 땐 user라는 이름으로 꺼내오고 활용할때에는 sseul로 활용함!

import * as All from './getRandom'; 와일드카드 (Wildcard Character, *)는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킴

Default export vs Named export 차이점 ?

Named export 로 내보내진 데이터는 이름만 지정되어있으면 몇개든 내보낼 수 있음

Default export 는 하나의 데이터만 내보낼 수 있음!

Lodash 사용법

import _ from "lodash";

const usersA = [
  { userId: "1", name: "Sseul" },
  { userId: "2", name: "Kim" },
];

const usersB = [
  { userId: "1", name: "Sseul" },
  { userId: "3", name: "Park" },
];

const usersC = usersA.concat(usersB);
console.log("concat", usersC);
console.log("uniqBy", _.uniqBy(usersC, "userId"));

const usersD = _.unionBy(usersA, usersB, "userId");
console.log("unionBy", usersD);

_.uniqBy : 하나의 배열데이터에서 특정한 속성(위의 예시에서는 ‘userId’)으로 고유화를 시켜주는 메소드 (사용하는 인수는 배열데이터 하나! (위의 예시에서는 usersC))

_.unionBy : 합치기 전에 여러개의 배열데이터를 적어주고 (위의 예시에서는 UsersA, usersB) 마지막에 고유화작업을 시킬 속성이름을 명시해주고 고유화시킴

JSON

JavaScript Object Notation

자바스크립트의 데이터를 표현하는 하나의 포맷

속성과 값의 하나의 쌍으로 이루어져있음 (키-밸류 형태의 마치 객체데이터와 유사함)

문자데이터이고, 사용시에는 꼭 “”를 사용해야함!

Storage

localStorage vs sessionStorage

localStorage 데이터를 반영구적으로 사용할 수 있고

sessionStorage 페이지를 닫을때 데이터가 사라짐

일반적인 상황에서는localStorage 를 사용함

setItem

키-밸류 형태로 데이터를 저장하고 문자데이터로 저장하는것을 권고함!

두개인수를 통해서 브라우져에 저장

const user = {
  name: "Sseul",
  age: 29,
  emails: ["sgsg9447@gmail.com", "sseul9447@gmail.com"],
};

localStorage.setItem("user", user);

밸류 왜 ??

실제 객체 데이터가 저장이 안되고 [objecgt Objecgt]

로컬스토리지에 저장할 때에는 평소에 사용하는 일반적인 객체, 배열 데이터 사용하면 안되고, 전부 문자데이터로 변환해서 저장해야함

JSON.stringify()

localStorage.setItem("user", JSON.stringify(user));

getItem

특정한 데이터를 읽어오는 용도 (키 값만 알면 되기에 하나의 인수만 적으면 됨!)

console.log(localStorage.getItem("user"));

문자데이터 형태로 출력이 됨

객체데이터로 다시 변환하려면 ??

console.log(JSON.parse(localStorage.getItem("user")));

removeItem

로컬스토리지에 데이터를 지우고 싶을 때 사용!

localStorage.removeItem("user");

정규표현식

정규표현식(RegExp)

정규식, Regular Expression

역할

문자 검색(search)
문자 대체(replace)
문자 추출(extract)

테스트 사이트

https://regexr.com

##정규식 생성

// 생성자
new RegExp("표현", "옵션");
new RegExp("[a-z]", "gi") /
  //리터럴
  표현 /
  옵션 /
  [a - z] /
  gi;

예제 문자

const str = `
010-1234-5678
sgsg9447@gmail.com
abbcccdddd
the quick brown fox jumps over the lazy dog.
https://velog.io/@sgsg9447
`;

메소드

메소드	문법	설명
exec	`정규식.exec(문자열)`	일치하는 하나의 정보(Array) 반환
test	`정규식.test(문자열)`	일치 여부(Boolean) 반환 🌟
match	`문자열.match(정규식)`	일치하는 문자의 배열(Array) 반환 🌟
search	`문자열.search(정규식)`	일치하는 문자열의 인덱스(Number) 반환
replace	`문자열.replace(정규식, 대체문자)`	일치하는 문자를 대체 🌟
split	`문자열.split(정규식)`	일치하는 문자열을 분할하여 배열(Array)로 반환
toString	`생성자_정규식.toString()`	생성자 함수 방식의 정규식을 리터럴 방식의 문자열(String)로 반환

//test 메소드
const regexp = /fox/gi;
console.log(regexp.test(str)); 
//true

//replace 메소드
const regexp = /abbcccdddd/gi;
console.log(str.replace(regexp, "ABCD"));

->abbcccdddd 가 ABCD로 바뀌었음!

플래그(옵션)

플래그	설명
g	모든 문자 일치 (global)
i	영어 대소문자를 구분 않고 일치 (ignore case)
m	여러 줄 일치 (multi line)

//g 플래그
console.log(str.match(/the/g));

//g | i 플래그
console.log(str.match(/the/gi));

i 플래그 : 영어 대소문자를 구분 않고 일치되면 나타내니까!

이스케이프문자(Escape Character)란 (백슬래시) 기호를 통해 본래의 기능에서 벗어나 상태가 바뀌는 문자를 말함 (특정한 기능으로 동작하는것을 탈출해서 간단한 문자로 해석되라고 붙여줌)
-> . 과같은 문자 사용시 이스케이프문자와 함께사용!

패턴(표현)

패턴	설명
^ab	줄(Line) 시작에 있는 ab와 일치
ab$	줄(Line) 끝에 있는 ab와 일치
.	임의의 한 문자와 일치
a\|b	a 또는 b와 일치
ab?	b가 없거나 b와 일치
{3}	3개 연속 일치
{3,}	3개 이상 연속 일치
{3,5}	3개 이상 5개 이하(3~5개)연속 일치
[abc]	a 또는 b 또는 c
[a-z]	a부터 z사이의 문자 구간에 일치(영어 소문자)
[A-Z]	A부터 Z사이의 문자 구간에 일치(영어 대문자)
[0-9]	A부터 Z사이의 문자 구간에 일치(숫자)
[가-힣]	가부터 힣사이의 문자 구간에 일치(한글)
\w	63개 문자(Word, 대소영문52개 + 숫자10개 + _)에 일치
\b	63개 문자에 일치하지 않는 문자 경계(Boundary)
\d	숫자(Digit)에 일치
\s	공백 (Space, Tab 등)에 일치
(?=)	앞쪽 일치(Lookahead)
(?<=)	뒤쪽 일치(Lookbehind)