프론트엔드 개발23 JWT를 어디에 저장해야 할까? (feat. 쿠키) JWT(Json Web Token)를 어디에 저장해야 사용자 로그인을 유지하면서도 안전할까? 이전에 프로젝트를 진행하면서 토큰을 로컬 스토리지에 저장하고 자동 로그인과 로그인 유지를 구현했었다. 그런데 로컬스토리지는 브라우저 콘솔에서도 window.localStorage를 입력하면 바로 접근이 가능하다. 공격자가 마음만 먹으면 인증 정보를 탈취하여 서버에 요청을 보낼수 있는 것이다. 앱에 사용자 민감 정보나 구매 등의 로직이 있다면 더 곤란하다. 그렇다고 보안을 위해서 인증 토큰을 앱 내부에서만 관리하면 자동 로그인과 로그인 유지를 포기해야 된다. 사용자 경험에 좋지 않다. 그래서 서버에서 내려준 JWT를 안전하게 관리하면서 사용자 경험도 보장할 수 있을까에 대한 고민을 하게 됐다. 브라우저를 끄고 다시.. 2022. 9. 21. 구글 시트 API를 활용하여 프로모션 신청자 접수하기 적용 배경 이 프로젝트는 프로모션 랜딩 페이지를 만들게 되면서 시작되었습니다. 사용자들이 방문하여 아직 출시되지 않은 제품을 소개하고 사전 예약을 신청할 수 있는 웹페이지인데요. 이를 위해서는 사용자들에게 사전 예약 정보를 받아서 해당 데이터를 저장하는 기능이 필요했습니다. 기존에 사용하는 서버와 DB를 떠나서 가능한 "가볍게" 구현하고자 했는데요. 아래와 같은 요구조건이 있었기 때문입니다. 1. 예상 사전예약 신청자 수가 1천명 미만으로 예상한다는 점 2. 프로모션 진행기간이 3개월 가량으로 단기간 진행된다는 점 3. 개발자 외에 누구나 신청자 현황을 바로 확인할 수 있으면 좋다는 점 요구조건을 고려하여 구글 시트 API를 활용하는 것이 좋겠다고 판단했습니다. 서버 개발 공수가 별도로 들어가지 않고 클.. 2022. 6. 18. 변수와 데이터 타입 (기본형 VS 참조형) 변수란 변경 가능한 데이터가 담길 수 있는 컨테이너다. 여기서 데이터는 string, number, object 등 어떤 자바스크립트 데이터 타입이든 될 수 있다. 변수 선언하기 ES6 이전에는 변수를 선언하려면 var 키워드를 사용해야만 했는데 ES6에서 let, const가 도입되었다. var, let으로 정의된 변수 이름은 camelCase로, const로 정의된 정수 이름은 대문자로 작성하는 관례가 있다. var, let, const를 비교하면 아래 표와 같다. 키워드 스코프 호이스팅 재할당 가능 여부 재선언 가능 여부 var 펑션 스코프 O O O let 블락 스코프 X O X const 블락 스코프 X X X 그렇다면 세 가지 키워드 중에서 뭘 사용해야 할까? 보통 가능한 const를 사용하고.. 2022. 6. 18. 리액트와 리덕스에서 불변성 (Immutability) 이 글은 리액트에서 "불변성을 유지하라"는 말에서부터 시작하게 되었다. 불변성은 무엇인가부터, 리액트와 리덕스에서 불변성을 유지하는 것, 불변성을 유지하며 상태를 업데이트하는 것까지 살펴보고자 한다. 불변성이란? 불변성(Immutanility)은 리액트, 리덕스, 자바스크립트 등지에서 등장하곤 하는 개념이다. 극단적으로 얘기하자면 현재의 변수들을 유지하는 것이 아니라 지속적으로 새로운 값들을 만들어내고 이전 값을 대체하는 것을 의미한다. 몇몇 언어에서는 가변값을 아예 지원하지 않는다. (Erlang, ML 등) 자바스크립트에서 기본형 데이터인 숫자, 문자열, boolean, null, undefined, Symbol은 모두 불변값이다. 참조형 데이터는 기본적으로 가변값이며, Object.definePro.. 2022. 6. 18. 이전 1 2 3 4 5 6 다음
