[김창민]week6 #475
[김창민]week6 #475
Conversation
request, response메세지를 해석하는 패널은
https://flykimjiwon.tistory.com/116
오.. 아주아주 좋은 고민을 하셨군요! 👍🏻 1. 링크 클릭 시 이벤트 핸들러 사용이 방법은 사용자가 링크를 클릭할 때 바로 accessToken을 확인하여 조건에 따라 페이지 이동을 결정하는 방식입니다. 이 방법의 단점은, 말씀하신 것처럼 모든 링크에 대해 이벤트 핸들러를 등록해야 하고, 조건에 따라 기본 동작을 방지한 후 적절한 액션을 취해야 한다는 점입니다. 하지만 어떠한 장점이 있느냐면, 페이지에 접근 조차 할 수 없게끔 완벽하게 막을 수 있기 때문에, 이벤트페이지나, 사용자(트래픽)가 많이 몰릴 것 같은 페이지에는 안전장치를 위해 링크 클릭 시 이벤트 핸들러에서 검증 이후에 페이지로 이동할 수 있게 안내해줍니다 또한, 이 방법을 통해 사용자가 권한이 없는 페이지에 접근하는 것을 완벽하게 막을 수 있다는 점은 중요한 보안적 이점을 제공합니다. 이는 특히 이벤트 페이지나 특정 사용자 그룹만을 대상으로 하는 콘텐츠에 매우 유용할 수 있습니다. 사용자 경험을 개선하고, 서버 측 로드를 줄이며, 보안을 강화하는 방법으로서의 장점을 가져가지요. 쓰다보니 길어졌지만, 특정 상황이 아니라면 1번 방식으로 접근하지 않아요 2. 페이지에 접근 후 확인이 방법은 사용자가 회원가입/로그인 페이지에 접근한 후, 페이지 로드 시점에 accessToken을 확인하고 필요한 경우 페이지를 리다이렉트하는 방식이지요. 페이지 로드 시간 동안 사용자가 잠깐 진입 페이지를 볼 수 있으나, 구현이 상대적으로 간단하고 모든 링크에 대해 개별적인 처리를 할 필요가 없습니다. 하지만, 아주 잠깐은 해당 페이지에 진입을 할 수 있으므로, 보안이 중요한 페이지라면 이 방식을 사용하는건 바람직 하지 않을 것 같습니다. (보안이 중요한 페이지는 1번 방식과 2번 방식 모두 사용합니다) 제안하는 방법2번 방식을 제안 드려요! 추가로 무언가를 조금 더 놓고 가자면 import React from 'react';
import { Route, Routes, Navigate, useNavigate } from 'react-router-dom';
const PrivateRoute = ({ children }) => {
const isAuthenticated = /* 로직을 통해 accessToken 존재 여부 확인 */;
return isAuthenticated ? children : <Navigate to="/login" replace />;
};
// 사용 예시
<Routes>
<Route path="/" element={<PrivateRoute><HomePage /></PrivateRoute>} />
<Route path="/login" element={<LoginPage />} />
</Routes>위와 같은 방식으로 private router를 만들어 관리하는게 일반적인 방법이고 제안하는 방법입니다! |
| elements.input.className += ` ${SIGN_INPUT_ERROR_CLASSNAME}`; | ||
| elements.errorMessage.className += ` ${ERROR_MESSAGE_CLASSNAME}`; |
There was a problem hiding this comment.
💬 how about
| elements.input.className += ` ${SIGN_INPUT_ERROR_CLASSNAME}`; | |
| elements.errorMessage.className += ` ${ERROR_MESSAGE_CLASSNAME}`; | |
| elements.input.classList.add(SIGN_INPUT_ERROR_CLASSNAME); | |
| elements.errorMessage.classList.add(ERROR_MESSAGE_CLASSNAME) |
|
|
||
| if (isTestUser) { | ||
| try { | ||
| const response = await fetch("https://bootcai.codeit.kr/api/sign-in", { |
There was a problem hiding this comment.
음.. url이 잘못되어서 뭔가 에러가 뜰 것 같아요
url 체크 한번 부탁드리겠습니다!
There was a problem hiding this comment.
url이 어떻게 잘못된건가요? 잘 모르겠네요 ㅠㅠ
|
|
||
| const signForm = document.querySelector("#form"); | ||
| signForm.addEventListener("submit", submitForm); | ||
| function submitForm(event) { |
There was a problem hiding this comment.
❗submitForm 함수 내에서 validateEmailInput 함수를 동기적으로 호출하고 있습니다.
validateEmailInput 함수는 비동기 함수이므로, await 키워드를 사용하여 비동기 호출을 기다려야 합니다. 현재 구현에서는 validateEmailInput의 결과가 항상 Promise 객체이므로, submitForm 함수도 비동기 함수로 변경하고 await를 사용해야 합니다.
아마 정상적으로 동작하지 않거나 동작했더라도 버그가 일어날 가능성이 매우 높은 함수일 것 같아요
async function submitForm(event) {
event.preventDefault();
const isEmailInputValid = await validateEmailInput(emailInput.value);
const isPasswordInputValid = validatePasswordInput(passwordInput.value);
const isConfirmPasswordInputValid = validateConfirmPasswordInput(confirmPasswordInput.value);
if (isEmailInputValid && isPasswordInputValid && isConfirmPasswordInputValid) {
location.href = "/folder";
}
}There was a problem hiding this comment.
전반적으로, 기능적인 측면에서 코드는 잘 구현되어 있으나, 비동기 처리와 관련된 몇 가지 주의사항과 개선이 필요해보이군요!!
처음으로 해보는 비동기일텐데..너무 고생 많으셨습니다.
비동기가 처음에 접근할 때 얼마나 헷갈리는 개념인지 공감도 됩니다
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
-어찌저찌 코드를 작성하긴 했지만 제가 만든 코드가 제대로 동작하는지 확인하는 방법을 잘 몰라서 헤맸습니다.
페이지가 넘어가긴 하는데, request가 제대로 전해졌는지를 모르겠습니다. 크롬 개발자 콘솔에서 request, response 메시지를 해석하는 방법이 궁금합니다.
https://bootcamp-api.codeit.kr/docs
그리고 위의 링크가 api 사용법을 안내해주는 것 같은데 어떻게 사용해야 하는지 모르겠습니다.
-심화 요구사항이 무슨 말인지 잘 모르겠습니다.
"로그인/회원가입 페이지 접근 시"라는게 화면에 회원가입 페이지에서 로그인 페이지로 넘어갈 때를 이야기하는 건가요?
지정된 아이디로 로그인을 할 때, 토큰을 생성하고, 토큰이 존재할 때만 페이지가 넘어가도록 코드를 짰는데, 문제에서 요구하는 게 이게 아닌 것 같습니다. 하지만 이것 말고는 다른 모델이 떠오르지 않아서 고치질 못했습니다.