We_Are_6Jo 프로젝트 하면서 기억에 남는 것들

 

여기서 아직까지
기억에 남는 것을 기술하고 있습니다.

 

 

 form 기본 기능 방지 및 리셋 

// form에서 초기화하려면 form에 접근...
const form = document.getElementById("detailCommentReviewWrap");

function sendReview(e) {
  // 제출 버튼 클릭시 발생하는 기능 방지
  e.preventDefault();
  
  // form에서 제출클릭시 입력 버튼 초기화하기
  form.reset();

 

저는 이때당시 form에서 기본 동작방지하고 초기화시키는지 잘 몰랐습니다. 그런데 이번 이것을 다시 돌아봄으로써 명확하게 하게 되었습니다. 

 

---

 로컬스토리지  & 세션 스토리지 다루기 

 

 로컬 스토리지와 세션 스토리지는 무엇인가? 

질문: 로컬 스토리지란?   세션 스토리지와  같이 HTML5에서 추가된 웹 저장소입니다.   질문: 로컬 스토리지의 특징은       -  키 - 밸류 형태을 지닙니다.        -  로컬 스토리지는 사용자가 데이터를 지우지 않는 이상 브라우저에 남아있습니다.        - 브라우저단에 저장되기에  비밀번호와 같은 중요 정보는 저장하면 탈취당합니다.  질문: 그러면 세션 스토리지와 로컬 스토리지의 차이점은?  세션 스토리지는  윈도우나 브라우저 탭을 닫으면 내부 데이터가 날아가지만, 로컬 스토리지는 앞에서 말했던 것처럼 사용자가 데이터를 지우지 않는 이상 브라우저에 남아 있습니다.   질문: 로컬 스토리지나 세션스토리지의 공통점은 무엇일까요?    - 로컬 스토리지와 세션 스토리지에서 사용하는 메서드가 동일합니다.      -  둘다 HTML5에 추가된 웹 저장소입니다.      질문: 로컬 스토리지와 세션 스토리지는 언제 사용할까요?     로그인 예를 들을때, 지속적으로 로그인 되어야 할때 로컬스토리지를 이용하고, 임시 로그인 되어야 할때 세션 스토리지를      사용합니다.

 

우리는 로컬 스토리지를 이용하였는데  데이터를  어떻게 저장하고 / 어떻게 불러오는가?

// 로컬스토리지는 말했다시피 키 - 값은 반드시 문자열 이어야 합니다. 
// 입력한 값 ReviewList를 JSON 객체의 stringify 메서드를 통해 문자열로 반환합니다.
window.localStorage.setItem(id, JSON.stringify(ReviewList));

// 다음은 로컬 스토리지에서 데이터를 가져오는 것입니다.
// JSON 객체의 parse 메서드를 통해 js 객체로 가져옵니다. 
let ReviewList = JSON.parse(window.localStorage.getItem(id));

---

 

 

 

 

 

제일로 아쉬운 부분은 어딘가요 라 하면
아마 API 키입니다. 

 

우리는 이때당시 API 키를 보관하는 방법을 알고 있지 않았습니다. 그래서 이렇게 API 키가 노출 되었습니다.  

노출된 것이 만약  사용자 개인정보가 보관되어있는 데이터베이스의 서버의 URL이라면  대참사라는 생각을 하니  깝깝하였습니다.  그런 느낌이 들은 후 저는  React의 .env 를 이용합니다. 

 

.env 파일이란? 

 

env는 React에서 여러분의  API 키 , 서버 URL 을  관리할때 사용하는 키입니다.  .gitignore에 등록해놓으면 안 올라가서 이번처럼 탈취당하지 않죠?  

 

 

 

 

작성 중입니다.............