내일배움캠프 Spring_7기 본캠프 일정이 시작되었다.
어제 TIL쓰는걸 깜빡해서 오늘은 미리쓰려고 하고있다.
1주차 미니 프로젝트로 웹의 기초를 배워 팀원들을 소개하는 사이트를 만드는 중이다.
화면 구성시 필요한 화면 : Home, Member, Join, News
이렇게 총 4개의 화면 + 멤버의 상세화면을 띄우기로 했다.
내가 맡은 역할은 팀원을 추가하는 부분이다 Join을 눌렀을 경우 Member의 화면에 팀원의 정보를 나타내는 카드가 추가될 수 있도록 하는 역할이다.
4주차 영상인 Firebase를 보지않은 상태로 해당 기능을 만들려고 하다보니
데이터를 저장하지 않고 당장 입력받은 데이터를 가지고 카드를 만드는 방법을 찾아보았다.
SessionStorage라는 것을 발견하였고 이를 바로 적용시켜보았다.
데이터를 다른 페이지로 옮기기 위해서는 통신 부분은 아직 안배웠기에 저장소가 필요할거라 생각을 했다.
우선 이 방식은 데이터베이스를 필요로 하지 않는다 Session Storage라는 기능이 html5에서 자체제공하기 때문이다.
이처럼 input으로 받은 데이터를 세션 스토리지에 저장을 한다.
이러한 코드를 Joinbtn을 클릭하면 작동할 수 있게끔 onclick = "join()" 이라는 이벤트를 걸어주고
이 함수안에 데이터를 저장하고 다른 페이지로 이동할수 있도록 코드를 작성한다.
코드를 이용하여 members.html의 화면으로 바로 이동을 할 수 있도록 만들었다.
그렇게 이동한 mebers.html에서는 name이라는 변수가 없는 상태이기때문에
이런식으로 새로운 name변수에 세션 스토리지의 값을 부여해주었다.
이렇게 콘솔창을 띄우고 조인 버튼을 눌러보았다.
이렇게 세션스토리지의 데이터를 가져올 수 있는것을 확인했고 이걸로 Members의 화면이 로드될때 추가로 만들면 되겠다. 라는 생각을 했다.
하지만 세션 스토리지의 데이터는 개개인의 로컬 개발 환경에서는 창이 닫히게 되면 데이터가 사라지게 된다.
localstorage는 로컬 환경에서 창을 닫아도 데이터를 삭제하지 않으면 사라지지 않는다고 들었는데 그보다 4주차 강의인
Firebase강의를 듣고 데이터베이스에 저장을 해보는 쪽으로 하기로 마음 먹었다.
오늘의 결과는 꽝이었지만 세션 스토리지와 로컬 스토리지라는것을 알게되었다.
이들에 대한 자세한 내용은 따로 정리해야겠다.