1. 문자열 객체 메소드

문자열 추출

charAt(인덱스 번호)

let str = "Gone with The wind"
document.write(str.charAt(0)) // G -> '0'인덱스의 문자 추출

하위 문자열(시작 인덱스 번호, 종료 인덱스 번호+1)

let str = "Gone with The wind"
document.write(str.substring(10, 13)) // 10~12인덱스의 문자 추출

슬라이스(시작 인덱스 번호, 마지막 인덱스 번호+1)

let str = "Gone with The wind"
document.write(str.slice(10, 13)) // 10~12인덱스의 문자 추출

문자열 교체

toLocaleLowerCase()

let str = "Gone with The wind"
document.write(str.toLocaleLowerCase()) // 전부 소문자 치환

대문자로()

let str = "Gone with The wind"
document.write(str.toUpperCase()) // 전부 대문자 치환

replace(바꿀 문자, 바꿀 문자)

바꿀 문자열을 “”(빈 문자열)로 지정하면 문자를 제거하는 데 사용할 수 있습니다.

특정 문자열만 바꾸기

let str = "Gone with The wind"
document.write(str.replace('n', 'N')) // "GoNe with The wind" -> 처음만나는 문자 하나만 치환됨

특정 문자열 바꾸기

'추천 관련글,

string.replace(/특정 문자열/g, “”)

→ 문자열의 모든 특정 문자열이 교체됩니다.

→ ‘g’는 전역 검색을 의미하는 플래그

지정된 문자열에서 대소문자를 구분하지 않고 대체하여 모두 대체

string.replace(/특정 문자열/i, “”)

→ ‘i’는 ‘대소문자 무시’를 의미하는 플래그입니다.

string.replace(/특정 문자열/ig, “”)

→ 대소문자에 관계없이 특정 문자열 교체

문자열 연결

연결할 문자열1.concat(연결할 문자열2)

let text1 = "Hello"
let text2 = "World"
let text3 = text1.concat(text2)
document.write(text3) // HelloWorld

특정 문자로 문자열의 앞면과 뒷면 채우기

string.padStart(기존 문자 앞의 패딩 수, 채울 문자)

let text5="9"
    document.write(text5.padStart(4,"*")) // ***9

string.padEnd (기존 문자, 패딩할 문자를 포함하여 뒷면에 패딩할 문자 수)

let text6="9"
    document.write(text5.padEnd(4,"*")) //9***

2. 웹스토리지 사용방법

(참조) https://www.daleseo.com/js-web-storage/

세션 저장

저장된 데이터는 웹 사이트에서 세션이 끝나면 삭제됩니다.
동일한 웹사이트를 브라우저의 여러 탭이나 창에서 열 때 데이터는 다중 세션 저장소에 서로 별도로 저장 → 각 탭이나 창을 닫을 때 저장된 데이터도 함께 파기됩니다.

로컬 저장소

웹사이트 세션이 종료된 후에도 데이터는 삭제되지 않습니다.
여러 탭 또는 창 간에 데이터 공유 → 탭 또는 창을 닫아도 데이터가 브라우저에 유지됨
동일한 컴퓨터에서 동일한 브라우저를 지속적으로 사용하는 경우에만 로컬 스토리지의 데이터 지속성

→ 따라서 서로 다른 디바이스나 브라우저 간에 데이터를 공유하고 저장해야 하는 경우 클라우드 플랫폼이나 데이터베이스 서버를 사용해야 합니다.

기본 API

localStorage는 window 객체이므로 window 키워드를 생략할 수 있습니다.
웹 스토리지는 기본적으로 키와 값으로 구성된 데이터를 저장할 수 있습니다.
문자 유형(문자열) 데이터 유형만 지원됩니다.

→ 값을 객체로 저장하면 (객체 객체)라는 텍스트 값으로 표현되므로 내부 값을 알 수 없다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

> localStorage.setItem('obj', {a: 1, b: 2})
undefined
> localStorage.getItem('obj')
"(object Object)" // 객체로 저장되어있어서 텍스트 값으로 (object Object)로 출력됨

각 개체에는 개체가 텍스트 값으로 표시되거나 개체가 문자열 값으로 참조할 때 사용되는 toString()이라는 메서드가 있습니다.

(참조) https://medium.com/today-programming/what-object-object-in-javascript-fe55b754e709

→ 웹 저장소 사용 시 위와 같은 문제를 피하기 위해 JSON 형식으로 데이터를 읽고 씁니다.

> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

3.JSON

XML과 JSON 비교

XML 문법

여는 태그와 닫는 태그로 구성되어 있습니다.
커스텀 태그 기반(태그 커스터마이징 및 사용 가능)
환경 설정 파일 생성, 안드로이드 기반 앱 개발 시 뷰포트 구성

예)

     <driver>OracleDriver</driver>

     <username>system</username>

     <password>1234</password>

   </database>

JSON(JavaScript 객체 표기법)

문자 단위 통신(비동기 방식)에서 XML을 대체하는 형식입니다.
AJAX, NoSQL DB 등에서 주로 사용하는 형식(표기법)
배열 객체
예) 페이지에서 더보기 -> 댓글 더보기 클릭 시 URL: 문자 단위(json)가 변경되지 않음

JSON 기본 구조

데이터는 {“key” : “value”} 쌍으로 구성됩니다.
속성(이름, 키, 속성), 값(값, 데이터)
이름을 만들 때 “” 문자는 생략할 수 있습니다.
{}에 데이터 저장
형식) {이름:값, “이름”:값, ‘이름’:값, ~~~}
예) {드라이버:”OracleDriver”, “사용자 이름”:”시스템”, 비밀번호:’1234′, ~~}
로컬 저장소에 쓸 데이터를 JSON 형식으로 직렬화하고 읽은 데이터를 JSON 형식으로 역직렬화하여 원래 데이터를 변경하지 않고 유지할 수 있습니다.

> localStorage.setItem('nums', JSON.stringify((1, 2, 3)))
undefined
> JSON.parse(localStorage.getItem('nums'))
(1, 2, 3)

직렬화(직렬화0

다른 스토리지 환경 등에서 사용할 수 있는 형태로 변환

직렬화 대상 → 프로그램에서 사용되는 개체 또는 데이터 구조

바이트로 변환

stringify 메서드를 사용하여 개체를 문자열 형식으로 변환할 수 있습니다.

var stringHello = JSON.stringify(hello);
console.log(stringHello); //{"a":"hello"}

역직렬화

자바스크립트 객체 형태로 생성 → 직렬화된 파일 역직렬화

parse 메서드를 사용하여 객체를 문자열 유형에서 객체 유형으로 캐스팅할 수 있습니다.

var deserializeHello= JSON.parse(stringHello);
console.log(deserializaeHello); //{a:"hello"}
console.log(typeof deserializeHello); //object