JavaScript(8)

1. String 객체의 메소드

✅문자열 추출

charAt(인덱스번호)

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

 

substring(시작인덱스번호, 마지막인덱스번호+1)

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

 

slice(시작인덱스번호, 마지막인덱스번호+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()) // 전부 소문자 치환

 

toUpperCase()

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" -> 처음만나는 문자 하나만 치환됨

 

특정 문자열 모두 치환

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

→ 문자열에서 특정문자열이 다 치환됨

→ ‘g’는 Global Search(전역탐색) 를 의미하는 플래그

 

특정 문자열 대소문자 구분없이 치환, 모두치환

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

→ ‘i’는 ‘ignore case’를 의미하는 플래그

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

→ 대소문자 구분없이 특정 문자열 모두 치환

 

✅문자열 연결

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

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

 

✅특정 문자로 문자열 앞, 뒤 채우기

문자열.padStart(기존 문자 포함 앞쪽에 채울 갯수, 채울문자)

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

 

문자열.padEnd(기존 문자 포함 뒷쪽에 채울 갯수, 채울문자)

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

 

2. 웹 스토리지(web storage) 사용법

[참고] https://www.daleseo.com/js-web-storage/

✅세션 스토리지(sessionStorage)

• 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐
• 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장 → 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸

 

✅로컬 스토리지(localStorage)

• 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음
• 여러 탭이나 창 간에 데이터가 서로 공유됨 → 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있음
• 로컬 스토리지의 데이터 영속성(persistence)은 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당됨

→ 따라서 다른 기기나 브라우저 간에 데이터가 공유되고 영속되야 한다면 클라우드(Cloud) 플랫폼이나 데이터베이스(DB) 서버를 사용해야함

 

✅기본 API

• localStorage는 window객체 이므로 window 키워드 생략 가능
• 웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있음
• 문자형(string) 데이터 타입만 지원함 → 객체로 값을 저장하면 [object Object]의 텍스트 값으로 표현되기 때문에 내부 값을 알 수 없음

// 키에 데이터 쓰기
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]로 출력됨

⭐모든 object 는 toString() 이라는 메소드를 가지고 있는데 이 메소드는 object 가 텍스트 값으로 표현될 때나 문자열 값으로 예상되는 방식으로 object 가 참조할 때 사용됩니다.

[참고] https://medium.com/오늘의-프로그래밍/자바스크립트에서-object-object-가-대체-뭘까-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문법

• 여는태그와 닫는태그로 구성
• custom tag(사용자 정의 태그) 기반 (태그를 커스텀해서 사용할 수 있음)
• 환경설정 파일 작성, 안드로이드 기반 앱개발시 View단 구성

예) <database>

     <driver>OracleDriver</driver>

     <username>system</username>

     <password>1234</password>

   </database>

 

JSON (JavaScript Object Notation)

• 문자단위 통신(비동기식 방식)에서 XML를 대체하는 포맷이다
• AJAX, NoSQL DB등에서 주로 사용하는 포맷(표기법)
• 배열을 객체화
• 예) 페이지의 더 보기 -> 댓글 더 보기를 누른다고해서 url이 변하지는 않음 : 문자단위(json)

 

✅JSON 기본 구조

• {“키” : “값”} 쌍으로 데이터가 구성되어 있다
• 속성(name, key, property), 값(value, data)
• name구성시 "" 기호는 생략가능하다
• {}안에 데이터를 저장한다
• 형식) {name:value, "name":value, 'name':value, ~~~}
• 예) {driver:"OracleDriver", "username":"system", password:'1234', ~~}
• 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고, 읽은 데이터를 JSON 형태로 역직렬화(deserialization)해주면 원본의 데이터를 그대로 얻을 수 있음

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

 

직렬화(serialization0

다른 저장 환경 등에서도 사용할 수 있는 형태로 바꾸어 주는 것

직렬화의 대상 → 어떤 프로그램 상에서 사용하고 있는 Object나 데이터 구조임

바이트 형태로 바꾸는 것

stringify 메소드를 활용하면 객체를 string 형태로 만들 수 있음

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

 

역직렬화(deserialization)

JavaScript의 객체 형태로 만듦 → 직렬화한 파일을 역직렬화 시킴

parse 메소드를 사용하면 string형태의 객체를 객체형태로 만들 수 있음

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