Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

16주차 Assignment - 김무빈 #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

16주차 Assignment - 김무빈 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions kimmubin/kimmubin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
body {
display: flex;
justify-content: center;
gap: 20px;
}
div {
margin: 10px;
}
form {
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
background-image: linear-gradient(
to right,
rgb(209, 209, 209),
rgb(213, 213, 213),
rgb(194, 194, 194)
);
}
138 changes: 138 additions & 0 deletions kimmubin/kimmubin.html
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

script태그 안에 여러 비동기 함수들이 쭉 늘어져 있는데요 then catch체이닝 말고 async/await란 문법으로 더 깔끔하게 짜보는 것도 시도할 법할 것 같아요!

Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요런 기본적은 meta태그 말고도 og태그도 있씁니다.
og태그는 썸네일같은 건데요..링크 공유 할 떄 보이는 친구가 og태그입니당

https://blog.ab180.co/posts/open-graph-as-a-website-preview

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>
<link rel="stylesheet" href="./kimmubin.css" />
</head>
<body>
<form>
<div className="Container">
<h1>회원가입</h1>
<div className="form">
<div>
email: <input type="email" id="signupEmail" required />
</div>
<div>
password:
<input type="password" id="signUpPassword" required />
</div>
<button id="signupButton" type="submit">회원가입</button>
<button type="button">로그인</button>
</div>
</div>
</form>
<form>
<div className="Container">
<h1>로그인</h1>
<div className="form">
<div>
email: <input type="email" id="signInEmail" required />
</div>
<div>
password:
<input type="password" id="signInPassword" required />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

만약 비밀번호가 8글자 이상 16글자 이하다 라는 요구사항이 추가되면 요 input에 어떤 것을 넣어주면 될까요!??

</div>
<button id="signInButton" type="submit">로그인</button>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

버튼의 type의 기본 값이 submit이라 요건 명시적으로 안적어줘도 됩니당

<button type="button">회원가입</button>
</div>
</div>
</form>

<script type="module">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type module을 적어주신 이유가 있을까요~?!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추가로 script파일을 따로 분리 안하신 이유가 있을까요!

import { initializeApp } from 'https://www.gstatic.com/firebasejs/11.0.1/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/11.0.1/firebase-analytics.js';
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
} from 'https://www.gstatic.com/firebasejs/11.0.1/firebase-auth.js';

const firebaseConfig = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요런 중요한 값들 개인토큰이나 서버의 API주소는 보통 환경변수로 주입하기도 한답니다

apiKey: 'AIzaSyCcDXxRDIkqYj8kwy5_5vg9IaTlJO_Y0tM',
authDomain: 'likelion-1bf4b.firebaseapp.com',
projectId: 'likelion-1bf4b',
storageBucket: 'likelion-1bf4b.firebasestorage.app',
messagingSenderId: '987904583081',
appId: '1:987904583081:web:0e43e42be90ffbcfe310b8',
measurementId: 'G-8TRKWX24QJ',
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);

// 회원가입 버튼 클릭
document
.getElementById('signupButton')
.addEventListener('click', (event) => {
event.preventDefault();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

event.preventDefault를 주신 이유가 있을까요오!


const email = document
.getElementById('signupEmail')
.value.trim();
const password =
document.getElementById('signUpPassword').value;

if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('유효한 이메일 주소를 입력하세요.');
return;
}

createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
console.log('회원가입 성공:', user);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(
'회원가입 오류:',
errorCode,
errorMessage
);
alert(
'회원가입 중 오류가 발생했습니다: ' +
errorMessage
);
});
});
document
.getElementById('signInButton')
.addEventListener('click', (event) => {
event.preventDefault();

const email = document
.getElementById('signInEmail')
.value.trim();
const password =
document.getElementById('signInPassword').value;

if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('유효한 이메일 주소를 입력하세요.');
return;
}

signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
console.log('로그인 성공:', user);
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(
'로그인 오류:',
errorCode,
errorMessage
);
alert(
'로그인 중 오류가 발생했습니다: ' + errorMessage
);
});
});
</script>
</body>
</html>