01_PROJECT30 [ JavaScript ] 회원가입, 로그인 시 빈 문자열 여부 확인하기, user_email == "" 와 !user_email 회원가입이나 로그인 시에 아이디나, 비밀번호 또는 이름을 입력해야 하는 란이 비어있을 때 사용자에게 알려주고 비어있는 곳으로 포커스를 잡아주는 것은 아주 작은 것일 수 있지만 사용자의 입장에서 정말 편리하다고 생각하는 부분이다. 오브젝트 프로젝트 v1에서는 빈 문자열 여부를 확인하는 방법으로 원래는 비교연산자를 사용했었다. if(user_email == ""){ errorDiv.textContent = "이메일을 입력해주세요."; } 그러나 타입안정성을 생각해서 부정연산자를 사용하는 것으로 교체해보았다. 위와 같이 부정연산자인 '!'를 사용하게 되면 빈 문자열 뿐만 아니라 null이나 undefined 같은 Falsy한 값에 대해서도 작동하기 때문에 안전하게 사용할 수 있다. 또한 ==이라는 비교 연산자.. 2023. 7. 29. [ Firebase ] FirebaseError: [code=permission-denied]: Missing or insufficient permissions. 권한 부족 또는 없음 오류 유저가 로그인을 하고 멤버십을 선택할 때, Firestore에서 컬렉션 ' users'에 userId(uid)를 문서명으로 문서마다 유저이메일(email), 유저이름(name), 유저가 선택한 멤버쉽(membership), 유저의 가입날짜(date)를 필드로 넣는 코드를 작성했지만 프로젝트의 시작부터 파이어베이스 에러가 발생했다. FirebaseError: [code=permission-denied]: Missing or insufficient permissions. Firebase의 데이터베이스나 스토리지 등 접근 시에, 사용자에게 필요한 권한이 없거나 부족하여 접근이 거부되었을 때 나타나는 오류이다. 해결방법 Firebase 콘솔에서 해당 프로젝트의 데이터베이스나 스토리지 규칙을 확인하고 권한 설정을.. 2023. 7. 28. [ Firebase ] 파이어베이스 API key를 .env에 넣어서 보호하고 싶었습니다만, 파이어베이스 API key가 노출되지 않도록 주의해야 한다고 하는데 , 과연 API key가 노출되면 어떤 문제점이 있을까? - API key를 통해 파이어베이스 데이터베이스나 저장소에 접근하고 데이터를 읽거나 쓸 수 있어서 데이터가 유출되거나 손상될 수 있다. - 악의적으로 API key를 남용하거나 과도한 요청을 보내서 불필요한 트래픽이 발생하면 서비스 이용에 대한 비용이 증가할 수 있다. -서비스를 부정 사용하는 경우가 발생할 할 수 있어 해당 서비스를 제공하는 데 사용되는 서버나 자원에 대한 과도한 부하를 초래할 수 있다. 바닐라 자바스크립트 프로젝트에서 적용하고 싶었습니다만, 오브젝트 v1도 v2도, 아직은 자바스크립트의 기본기가 더 필요할 것 같다는 생각에 바닐라 자바스크립트로 만든 프로젝트다.. 2023. 7. 28. [ Firebase + JS ] 파이어베이스 9버전에서 달라진 모듈 형식의 라이브러리 가져오기 import firebase from 'firebase/app'; import 'firebase/auth'; const firebaseConfig = { apiKey: 'your-api-key', authDomain: 'your-auth-domain', }; firebase.initializeApp(firebaseConfig); const auth = firebase.auth(); // 이메일과 비밀번호로 사용자 생성 firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { }) .catch((error) => { }); 오브젝트 v1 프로젝트에서는 파이어베이스 8버전을 사용했을 때는 파이어베이스 .. 2023. 7. 27. 프론트엔드에서 결제 시스템을 구축하고 싶어서, 오브젝트 v2 프로젝트에서는 멤버십 선택화면에서 체험판 말고 결제 시스템을 넣어서 구현해 보고 싶었다. 결제 시스템은 보안, 트랜잭션 처리, 결제 데이터 관리 등과 같은 중요한 기능을 포함하고 있어서 프론트엔드만으로는 이런 기능을 다루기가 어렵다고 한다. 그래도 이리저리 서치해본 결과 OKKY에서 조금 희망(?)적인 글을 찾았다. PG사(Payment Gateway 사업자)의 결제를 위해 제공되는 API를 활용하면 구축이 가능하다는. OKKY - 웹 결제시스템(?)을 구축해달라는 요청이 있어서 찾아봤습니다. 기획자님이 탑툰 웹사이트 결제수단 고르는 화면 예시로 보여주면서우리 회사가 운영하는 웹사이트 에서도 결제할 수 있게 해달라고 하시면서결제수단 뭐뭐가능한지 부터 목록을 알려주면 기 okky.kr ***.. 2023. 7. 27. [ JavaScript ] Session Storage와 Local Storage, 어떤 걸 어떻게 쓸까? Session Storage 세션스토리지 - 세션에 대한 유지 기가 동안 데이터를 저장하는 데 사용한다. - 브라우저 탭이나 창을 닫으면 저장된 세션 스토리지의 저장된 데이터가 삭제된다. - 다른 탭이나 창에서는 세션 스토리지에 접근할 수 없다. - 보안적인 측면에서 더 안전한 옵션이지만, 재부팅이나 브라우저 종료 시 데이터가 손실된다. Local Storage 로컬스토리지 - 영구적으로 데이터를 저장하는 데 사용된다. - 사용자가 명시적으로 데이터를 삭제하지 않는 이상, 브라우저를 닫아도 데이터가 유지된다. - 다른 탭이나 창에서도 로컬 스토리지에 접근할 수 있다. - 보안에 주의해야 한다. 로그인 아이디와 같은 중요한 정보는 일시적인 세션에 저장하는 것이 보안적인 측면에 더 안전하다. 로그인 상태를 .. 2023. 7. 27. 이전 1 2 3 4 5 다음
