[6주차] 강태이/ 로그인 및 회원가입 기능 구현 #86
Conversation
kangtayie
commented
May 20, 2025
kangtayie
commented
- axios로 로그인, 회원가입 요청 처리 구현
- jsx 파일들 -> tsx 로 바꾸고 필요한 수정사항들 수정
- 아이디 로그인 중복 방지 구현
- 서버에 오류가 발생할 때 오류 메세지 출력.
yezzan9
left a comment
yezzan9
left a comment
There was a problem hiding this comment.
6주차 과제도 수고하셨습니다!!
몇가지 코멘트 남겨드렸으니 확인 후 태이님 생각도 공유해주세요🙌
| function Home(){ | ||
| const navigate =useNavigate(); | ||
|
|
||
| const buttonStyle = { | ||
| width: "200px", | ||
| padding: "10px 0", | ||
| margin: "20px auto", | ||
| display: "block", | ||
| backgroundColor: "#ddd", | ||
| border: "none", | ||
| borderRadius: "30px", | ||
| fontSize: "1.1rem", | ||
| fontWeight: "600", | ||
| }; | ||
|
|
||
| const titleStyle = { | ||
| fontSize: "2rem", | ||
| fontWeight: "700", | ||
| marginBottom: "40px", | ||
| }; | ||
|
|
||
| return( | ||
| <div style={{textAlign:"center"}}> | ||
| <h1 style={titleStyle}>Tayie's TODO</h1> | ||
| <button style={buttonStyle} onClick={() => navigate("/login")}>로그인</button> | ||
| <button style={buttonStyle} onClick={() => navigate("/signup")}>회원가입</button> | ||
| </div> | ||
| ); | ||
| } |
| const StyledInput = styled.input` | ||
| width: 500px; | ||
| padding: 14px; | ||
| border-radius: 0px; | ||
| margin-bottom: 8px; | ||
| ` | ||
|
|
||
| const StyledButton = styled.button` | ||
| background-color: black; | ||
| color: white; | ||
| width: 532px; | ||
| padding: 9px; | ||
| border: none; | ||
| border-radius: 0px; | ||
| margin-bottom: 8px; | ||
| ` |
There was a problem hiding this comment.
Input과 Button은 기존에 구현했던 컴포넌트를 재사용하도록 수정하면 좋을 것 같아요 !!
const StyledButton = styled(Button)`
// 이하 생략
이렇게 하면 Button태그에 정의되어있는 스타일을 그대로 상속받은 채 추가로 스타일을 설정할 수 있어요 !!
There was a problem hiding this comment.
해당 파일에서 styled-components를 사용하지 않고 스타일 객체를 사용하신 이유가 있을까용?-?
스타일 형식은 하나로 통일하는 것이 좋을 것 같아요 !!
src/component/SignupPage.tsx
Outdated
| const res = await axios.get<{ username: string}[]>(`http://localhost:3000/users?username=${username}`); | ||
| console.log("GET /users?username= 응답:", res.data); | ||
|
|
||
| if(res.data.length > 0){ | ||
| setErrorMsg("이미 존재하는 아이디입니다!"); | ||
| return; | ||
| } | ||
| await axios.post("http://localhost:3000/users", { |
There was a problem hiding this comment.
현재 http://localhost:3000까지 포함해서 작성해주셨는데, 이렇게 로컬 주소가 하드코딩되어 있으면 실제 서비스 배포 시에도 로컬 서버로 요청하게 되어 문제가 발생할 수 있어요💦
앞의 로컬호스트 도메인을 제거하고 도메인 뒷부분만 /users?username=${username} 이렇게 작성해주시면 도메인이 달라져도 의도하신 대로 동작하게 할 수 있어요 !!
예를 들어 배포 도메인이 leets.com인 경우에
배포 사이트에서는 leets.com/users?username=${username}로, 로컬에서 테스트할 때는 localhost:3000/users?username=${username}로 동작한답니다🙌
src/component/SignupPage.tsx
Outdated
| navigate("/login"); | ||
| } catch(error){ | ||
| console.error("회원가입 오류: error"); | ||
| setErrorMsg("**서버 오류가 발생했습니다!** "); |
|
그리고 PR템플릿을 이용하여 구현한 부분에 대해 좀 더 자세히 작성해주시면 좋을 것 같아요 👀 |
2 participants
