728x90
1.컨피그 파일 분리
const firbasConfig = {
apiKey: "dlrjsapdlvldkdlzldpdy",
authDomain: "dlrjs-ehapdlsdlfkqslek.com",
projectId: "akwdkdy-dlrjtehdkdlel",
storageBucket: "dlwpdlrjteh.dktlrpTwy.com",
messagingSenderId: "1234567898756",
appId: "1skehahfmrpdlfjgrp-snsanfdlsk.78"
};파이어 베이스를 사용해보면 api키 혹은 컨피그파일이 생성되는데요.
이럴때는 민감한 정보를 숨길 수 있습니다.
파일을 한번 더 깊은 곳에 숨기는 방법을 사용하면 됩니다.
public
|
|_____components
| |
| |____firbaseConfig.js
| |____another.js
| |____main.js
|
|_____styles
|_____routes
|
|____index.html이런식으로 디렉토리 구조가 이루어져있을 때,
가장 먼저 html에 참조를 합니다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<script type="text/javascript" src=".../components/firebaseConfig.js"></script>
<script type="module" src=".../components/main.js"></script>
</body>
</html>그리고사용할 때는
//main.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js";
const app = initializeApp(firebaseConfig);
//(...)
console.log("hide config file");이렇게 전역변수로 선언한 firebaseConfig를 사용하면 됩니다.
2. 비동기 처리 중 중복 등록 버그
만약 유저가 버튼을 누르고 기다려도 아무 반응이 없으면,
또 버튼을 누르게 되는데요.
이전에 들어간 요청과 또 다시 들어간 요청이 중복으로 처리가 되는 일이 발생합니다.
따라서 우리는 이른 UI적으로 막아 줄 수 있습니다.
비동기적 처리가 많아 속도가 느릴때 할 수 있는 방법이 두가지 있습니다.
1.창을 전환하여 버튼을 가리는 방법
2.버튼을 클릭해도 요청이 가지 않도록 하는 방법
아래와 같은 코드가 있다고 할 때,
infoForm.addEventListener('submit', async () => {
//제출 버튼 후 처리될 코드
const payCheck = await payLoad;
//...
}
1번 방법을 사용해 중복요청을 막아보겠습니다.
infoForm.addEventListener('submit', async () => {
closeDisplay();
//제출 버튼 후 처리될 코드
const payCheck = await payLoad;
//...
}만약 위에처럼 비동기코드가 실행되기 전에 창을 닫거나 전환해버린다면 어떻게 될까요?
비동기 코드는 실행되지 못합니다.
따라서 UI적으로 결제가 진행되고 있는 것처럼 보여줄 필요가 있습니다.
infoForm.addEventListener('submit', async () => {
//결제 진행 창
showProgressDisplay();
//...
try {
//제출 버튼 후 처리될 코드
const payCheck = await payLoad;
//애니메이션 시작
//...
} catch (error) {
//...
} finally {
// 애니메이션 종료
}
}마치 새로운 창이 열린 것처럼 진행중임을 보여주는 화면을 보여주고
그 뒤에서는 비동기 처리를 하면 됩니다.
2번 방법도 한번 볼까요?
infoForm.addEventListener('submit', async () => {
//버튼 클릭 불가
payBtn.disabled=true;
//...
try {
//제출 버튼 후 처리될 코드
const payCheck = await payLoad;
//...
//애니메이션 시작
} catch (error) {
//...
} finally {
// 애니메이션 종료
//버튼 클릭 가능
payBtn.disabled = false;
}
}비동기가 처리되는 동안 버튼을 클릭하지 못하게 막고,
요청이 모두 종료되면 다시 버튼을 풀어줍니다.
728x90
'🌐Web Project > Toy project' 카테고리의 다른 글
| [패스트캠퍼스 X 야놀자] 프론트엔드 1기 부트캠프_AZKABAN (0) | 2023.08.18 |
|---|---|
| [패스트캠퍼스 X 야놀자] 프론트엔드 1기 부트캠프_LINE Plus (0) | 2023.07.29 |
