분류 전체보기111 [ Firebase ] getAuth(app)와 getFirestore(app)는 전역에 쓸까, 지역에 쓸 1. 전역 const firebaseConfig = { ... }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); 전역에서 사용하는 경우, Firestore 인스턴스를 한번만 얻어와서 모든 컴포넌트 또는 함수에 사용한다. 인스턴스를 여러 번 생성하지 않고 하나의 인스턴스를 재사용하여 성능을 최적화할 수 있고, 여러 곳에서 Firestore에 접근해야 할 경우 반복된 코드를 쓰지 않기에 코드를 간결하게 할 수 있다. 2. 지역 각 컴포넌트나 함수 내에서 필요한 시점에 Firestore 인스턴스를 얻어온다. 프로젝트의 구조를 모듈화하여 관리하고자 할 때 유용하다. 어떤 방법을 .. 2023. 8. 1. [ JavaScript ] sessionStorage에 여러 아이템 저장하기, 객체를 세션스토리지에 저장하기 여러 아이템을 sessionStorage에 저장하고 싶다면 아래와 같은 방법을 이용할 수 있다. 키 하나에 모두 저장하기 const data = { updateName: name, updateURL: url, updateKey: key }; sessionStorage.setItem('userData', JSON.stringify(data)); 여러 아이템을 data라는 객체에 저장하고 JSON.stringify() 함수를 사용해 객체를 문자열로 변환시켜 userData 키에 저장할 수 있다. sessionStorage에는 아래와 같이 담긴다. 그런 다음 가져올 때는 JSON.parse() 함수를 사용해 문자열을 다시 객체로 변환합니다. const data = JSON.parse(sessionStorage.. 2023. 8. 1. [ JavaScript ] JS에서 src속성 추가 / 변경하기, setAttribute와 src JS에서 이미지의 src를 속성을 설정하거나 변경하는 법은 아래와 같이 두 가지가 있다. proImg.setAttribute('src',imgUrl); setAttribute(속성명,속성값) 메서드를 활용해서 쓰거나 직접적으로 src를 사용해서 속성에 접근할 수도 있다. proImg.src = imgUrl; 다만, setAttribute()메서드는 모든 브라우저에서 일관된 방식으로 동작하지만 src는 구형 브라우저의 호환성을 고려해야 한다. 구형 브라우저의 호환성을 고려해야 할 때는 setAtttribute()가 더 안전할 수 있다. 그렇지만 src는 현재 사용되는 대부분의 브라우저에서는 문제없이 작동되고 직관적이고 더 간결하게 쓸 수 있다는 장점이 있다. 2023. 7. 31. [ JavaScript ] innerText와 textContent에 대하여 innerText CSS스타일이 적용된 텍스트만 반환합니다. innerText는 많이 사용되지만 표준은 아닙니다. 또한, innerText 사용 시 레이아웃 시스템의 일부 정보가 필요하고 눈으로 보기엔 미미할 수 있지만 이는 분명히 성능이 저하되는 것을 볼 수 있습니다. 이에 대해서 자세한 설명이 있는 링크를 아래에 첨부합니다. kelly norton: innerText vs. textContent Why does innerText require layout? I ended with that question in my previous post about layout thrashing. Just to recap briefly, there are very common patterns of use in the.. 2023. 7. 29. [ 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 19 다음
