210504-TIL

프론트엔드 기획을 처음으로 맡게 되어 창길님과 함께 갤럭시탭에 그림을 그려가며 와이어프레임을 짜고, 틀을 만들었다. 기초적인 틀을 만드는데에는 시간이 오래 걸리지 않았지만, 로그인 관련한 작동 부분을 구현하는데에 시간이 걸렸다.
전문적인 비밀번호 등을 다루지 않으니 그저 이름과 사진 url정도만 클라이언트에서 기억하면 되겠다 싶었는데, 새로고침하거나 페이지 전환할 때 정보를 어떻게 가지고 있을 지가 문제였다.
구글링을 해본 결과, localStorage라는 기능을 사용할 수 있었다. 웹 브라우저 내에 데이터를 저장하는 기능이라 페이지 전환 또는 새로고침시에도 데이터를 잃지 않는다.
내가 짠 코드 같은 경우는 CORS를 피하기 위해 플라스크 내부에서 서버로 API 요청을 하였기 때문에, 플라스크 서버에서 다시 html파일로 사진 url등의 데이터를 전송하고, 그 url을 전송받지 않았으면 로컬 스토리지에서 받아오는 식으로 코드를 작성했다.

if ("{{first_name}}" == '') { //만약에 플라스크에서 넘어온 정보가 없으면 새로고침한경우
	user_name = localStorage.getItem('user_name')
	sub_name = localStorage.getItem('sub_name')
	user_img_url = localStorage.getItem('user_img_url')
} else {
	user_name = "{{first_name}}"
	sub_name = "{{last_name}}"
	user_img_url = "{{image_192}}"
	localStorage.setItem('user_name',user_name)
	localStorage.setItem('sub_name',sub_name)
	localStorage.setItem('user_img_url',user_img_url)
}

대충의 큰 틀은 잡힌 것 같아 다행이라고 생각한다.