2023-04-26 TIL

[JSON] parse

참고 문서

drf로 백엔드와 프론트엔드를 만들어서 소통하고, jwt로 토큰을 발급받아서 로그인 정보를 내 로컬 스트리지에 저장한다.

이 때, javascript에서 내 로컬에 있는 토큰을 들고 와 토큰 내의 특정 정보를 프론트에 띄우고 싶다!

// api.js
// response를 json 형식으로 바꿔주기
const response_json = await response.json()

// response에서 빼온 토큰 저장
localStorage.setItem("access", response_json.access)
localStorage.setItem("refresh", response_json.refresh)

// 토큰 해석을 걸치는 과정(jwt.io와 동일하다고 보면 됨!!)
const base64Url = response_json.access.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
	return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));

// 해석 된 정보를 payload에 저장
localStorage.setItem("payload", jsonPayload)
}

근데, 이 과정을 통해서 로컬 스토리지에 토큰 해석본을 저장해도, object형식이 아닌 json의 str형식으로 저장된다!

이러면 원하는 정보를 뽑아올 수가 없음.

이럴 때 사용하는 게 parse다!

// index.js
window.onload = () => {
	// localStorage에서 payload(토큰 정보) 들고옴
    const payload = localStorage.getItem("payload")
    // payload를 parse 해 줌
    const payload_parse = JSON.parse(payload)
	
    // html의 id랑 연결해서 정보를 띄울 수 있게 함
    const intro = document.getElementById("intro")
    intro.innerText = payload_parse.email
}

JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.

문서의 말을 쉽게 풀어쓰자면, json 문자열을 object로 변형시켜 쓰기 쉽게 바꿔주는 역할이라고 생각하면 됨!

더 간단하게 말하면, " "나 ' '를 떼준다고 생각하면 된다.

[Python] 문자열(str)의 sep, end

sep

sep(seperator) : 사이에 구분자를 넣어 출력한다.

print('Y','O','U', sep='!')

>>>Y!O!U

출력되는 사이사이에 sep에 들어가는 게 끼워져서 출력된다고 생각하면 쉽다!

end

end : 해당 문자열 가장 마지막에 붙이고 그걸 뒤의 출력값과 붙여 출력

print('i am', end=' not ')
print('happy')

>>>i am not happy

[Python] 패킹 언패킹 *

참고 블로그