[Week4/기본/생각] 로그인/회원가입 #6

SooY2 · 2023-11-17T07:14:44Z

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

로그인
- 아이디와 비밀번호 입력후 로그인 버튼을 눌렀을시 성공하면 /mypage/:userId 로 넘어갑니다. (여기서 userId는 로그인 성공시 반환 받은 사용자의 id)
회원가입 이동
- 회원가입을 누르면 /signup으로 이동합니다.

[ 회원가입 페이지 ]

중복체크 버튼
- ID 중복체크를 하지 않은 경우 검정색입니다.
- ID 중복체크 결과 중복인 경우 빨간색입니다.
- ID 중복체크 결과 중복이 아닌 경우 초록색입니다.
회원가입 버튼
- 다음의 경우에 비활성화 됩니다.
- ID, 비밀번호, 닉네임 중 비어있는 input이 있는 경우
- 중복체크를 하지 않은 경우
- 중복체크의 결과가 중복인 경우
- 회원가입 성공시 /login 으로 이동합니다.

[ 마이 페이지 ]

마이 페이지
- /mypage/:userId 의 userId를 이용해 회원 정보를 조회합니다.
- 로그아웃 버튼을 누르면 /login으로 이동합니다.

🌠 심화 과제

[ 로그인 페이지 ]

토스트
- createPortal을 이용합니다.
- 로그인 실패시 response의 message를 동적으로 받아 토스트를 띄웁니다.

[ 회원가입 페이지 ]

비밀번호 확인
- 회원가입 버튼 활성화를 위해서는 비밀번호와 비밀번호 확인 일치 조건까지 만족해야 합니다.
중복체크
- 중복체크 후 ID 값을 변경하면 중복체크가 되지 않은 상태(색은 검정색)로 돌아갑니다.

생각과제

API 통신에 대하여

로딩 / 에러 처리를 하는 방법에는 어떤 것들이 있을까?

패칭 라이브러리란 무엇이고 어떤 것들이 있을까?

패칭 라이브러리를 쓰는 이유는 무엇일까?

✨PR Point

0.

async.await을 정확히 언제 사용하는지, 왜 사용하는지를 아직 잘 모르겠어서 then으로 처리하긴 했는데 공부 해보면서 적용해보겠습니다!!

1. .env

VITE_APP_URL = "서버주소"

2. 로그인

성공 했을 때 /Mypage/${res.data.id}로 이동

const submitLogin=(e)=>{
    axios.post(`${API_URL}/api/v1/members/sign-in`,{
      "username":username,
      "password":password
    }).then(res=>{
      console.log(res.data);
      nav(`/Mypage/${res.data.id}`);
    }).catch(err=>{

    })
  }

3. 회원가입

3-1 중복체크

checkDup 변수를 검사 안했을 때 0, 중복일때 1, 중복 아닐 때 2 로 설정해서 styledComponents에서 색 변경 해주었습니다!!

const DupBtn=styled.button`
  width: 85px;
  height: 35px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 400;
  background-color: ${({ $checkDup }) => $checkDup===0 ? '#000' : ($checkDup===1 ? 'red':'green')};
  color: ${({theme})=>theme.colors.white};

3-2 회원가입 버튼

각 경우가 모두 true이면 활성화 되도록 했습니다!

  //회원가입 버튼 활성화
  useEffect(()=>{
    username&&password&&passwordCheck&&nickname&&(checkDup===2) ? setCanSignup(true): setCanSignup(false);
    console.log(canSignup);
  },[username,password,passwordCheck,nickname,checkDup]);

4. 마이페이지

params로 유저 id 받아와서 해줬습니다!!

const getInfo=()=>{
    const memberId=useParams().userId;

    axios.get(`${API_URL}/api/v1/members/${memberId}`)
    .then(res=>{
      setuserId(res.data.username);
      setNickname(res.data.nickname);
    })
    .catch(err=>{

    })
  }

https://www.notion.so/dosopt/4-49e44beb82e24779b4e3111904a7420c

Yeonseo-Jo

너무너무 수고했습니댜 !!!!

rem 단위 사용하기 연습, commit 더 작게 쪼개서 하는 법을 연습한다면 더 더 좋을것 같아용
갓기 최고🖤

Yeonseo-Jo · 2023-11-21T11:10:15Z

week4/assign1/.env

env는 꼭꼭 gitignore에 추가해주기!!!

헉 따로 추가해야하는거였구나!!!

Yeonseo-Jo · 2023-11-21T11:11:43Z

week4/assign1/src/App.css

+.App{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}


요거 전역에 들어갈 설정인가용 ?! 그러면 globalStyle에 추가해줘도 된답니댜!

App 컴포넌트 안에 있는 애들을 가운데로 오게하고 싶어서 한거예요!! 그래도 globalStyle에 해도 되나여??

Yeonseo-Jo · 2023-11-21T11:12:10Z

week4/assign1/src/App.jsx

+        <Routes>
+          <Route path="/" element={<Login/>}/>
+          <Route path="/signup" element={<Signup/>}/>
+          <Route path="/Mypage/:userId" element={<Mypage/>}/>
+        </Routes>


Router는 Router.tsx/jsx 파일 따로 만들어서 넣어주는걸 추천합니다!

Yeonseo-Jo · 2023-11-21T11:14:18Z

week4/assign1/src/components/Button.jsx

+  width: 100%;
+  height: 40px;
+  border-radius: 10px;
+  border: none;
+  font-size:18px;


px 단위를 쓰는 이유가 있을까요?! width/height, font-size와 같은 반응형 구현이 필요한 부분은 rem을 쓰는걸 추천합니당!!

아 맞다!! 저번에도 한번 추천받아서 생각해두고 있었는데 미처 신경을 못썼댜,,,🥲

Yeonseo-Jo · 2023-11-21T11:14:54Z

week4/assign1/src/components/Button.jsx

+  background-color: ${({ $disabled,theme }) => ($disabled ? theme.colors.mainColor : '#ccc')}; 
+  color: ${({theme})=>theme.colors.white};


theme 사용부터 props로 동적 스타일링까지!! 넘넘 완벽합니당🔥

Yeonseo-Jo · 2023-11-21T11:30:27Z

week4/assign1/src/styles/GlobalStyle.js

+  #root{
+    height: 100vh; //중앙에 오게 하려고 했는데 이렇게 하는게 맞는지,,,


중앙에 오게 하려면 별도의 flex 설정이 필요할것 같네유

Yeonseo-Jo · 2023-11-21T11:30:56Z

week4/assign1/src/styles/common/CommonStyle.js

+  ${props => props.$len&&
+    css`width:200px`};


scpt 단축어 사용해서 props 구조분해할당 하는것도 좋습니다!

헐 $가 scpt단축어였던거군,, 방금빠르게구글링했을땐 잘안나오넹 ,, 멀로 구글링해봐야하지 ,,

scpt.. 굳이네요.. 몰라서 다 직접 쳤는디,,,

Yeonseo-Jo · 2023-11-21T11:32:00Z

week4/assign1/src/pages/Signup.jsx

+  const checkDuplicate=(e)=>{
+    axios.get(`${API_URL}/api/v1/members/check?username=${username}`)
+    .then(res=>{
+      res.data.isExist? setCheckDup(1):setCheckDup(2);


개인적인 의견인데..! 0,1,2도 좋지만 magic number 외에 한 눈에 의미를 알 수 있는 값으로 써줘도 좋을것 같아요!

헉 너무 좋아요!! 섬세한 리뷰.. 감삼둥

Yeonseo-Jo · 2023-11-21T11:32:11Z

week4/assign1/src/pages/Signup.jsx

+    username&&password&&passwordCheck&&nickname&&(checkDup===2) ? setCanSignup(true): setCanSignup(false);
+    console.log(canSignup);
+  },[username,password,passwordCheck,nickname,checkDup]);


굿굿굿!!

Yeonseo-Jo · 2023-11-21T11:34:08Z

week4/assign1/src/pages/Signup.jsx

+  const [username,setUsername]=useState("");
+  const [password,setPassword]=useState("");
+  const [passwordCheck,setPasswordCheck]=useState("");
+  const [nickname,setNickname]=useState("");
+
+  //그외
+  const  [checkDup,setCheckDup]=useState(0);
+  const [canSignup,setCanSignup]=useState(false);


input 정보를 useState로 관리하면 하나 하나 값이 입력될 때마다 setState 함수가 실행 되어서 성능에 좋지 않다고 해요!
지금 구현 한 방식도 좋지만 나중에 1) input value를 ref로 관리하기, 2) 여러개의 input 정보를 하나의 state로 관리하기
등의 성능 향상을 위한 정보들도 찾아보면 더 좋을것 같습니당 !!

nayujin-dev

헤헹 수연이 수고했ㅅ어!!!! 합세도 팟팅

nayujin-dev · 2023-11-21T13:31:28Z

week4/assign1/src/App.css

@@ -0,0 +1,7 @@
+.App{
+  width: 100%;


호옥시 App을 화면 꽉차게 구현하고 싶었던거라면? vw, vh 등을 활용해도 좋을거같아용

nayujin-dev · 2023-11-21T13:31:45Z

week4/assign1/src/App.css

+.App{
+  width: 100%;
+  height: 100%;
+  display: flex;


앗 꽉차는 용도가 아니라 모달처럼 띄우는 용도였던건가?? 머쓱 ㅎ.ㅎ

ㅎㅎㅎ 맞아여 헤헤

nayujin-dev · 2023-11-21T13:37:33Z

week4/assign1/src/App.jsx

+        <Routes>
+          <Route path="/" element={<Login/>}/>
+          <Route path="/signup" element={<Signup/>}/>
+          <Route path="/Mypage/:userId" element={<Mypage/>}/>


url path 구성할때는 소문자로 하는 것이 좋다고 하네용!!
공식 근거를 찾기위해서 영어로도 구글링을해봤으나 ,, 공식 레퍼런스는 아직 찾지 못했슴다 ,, 대신 스택오버플로우 레퍼런스를 총총 ,,
https://stackoverflow.com/questions/13511227/url-structure-lower-case-vs-upper-case

nayujin-dev · 2023-11-21T13:38:45Z

week4/assign1/src/components/Button.jsx

+
+const Button = ({content,onClick,disabled}) => {
+  return (
+    <ButtonSt onClick={onClick} $disabled={disabled}>{content}</ButtonSt>


옹 $이걸 붙인 이유는 그냥 disabled로 작성하면 비활성으로 인식해서 그런건가?? 이런 방법이 있었다니 ,,

syled-component에 보낼 때 $를 붙여서 보내면 dom에는 영향을 미치지 않고 계산하는데에만 쓰인다고 하더라구!!

nayujin-dev · 2023-11-21T13:39:34Z

week4/assign1/src/components/Button.jsx

+
+ &:hover{
+  /* background-color: #f5d6d2; */
+  cursor: pointer;


섬세해요 ,,

nayujin-dev · 2023-11-21T13:47:22Z

week4/assign1/src/pages/Login.jsx

+    margin: 30px 0;
+  }
+
+  .input{


난 금붕어라 이렇게 여러 선택자있을때 헤헤 이해속도가 느려서 헤헹

ㅋㅋㅋㅋㅋㅋㅋ 근데 나중에 보면 어떤건지 찾기 좀 힘들긴 하겠다!! 따로 만들어주는 습관 가져야게써

nayujin-dev · 2023-11-21T13:49:02Z

week4/assign1/src/pages/Mypage.jsx

+const Mypage = () => {
+  const API_URL = import.meta.env.VITE_APP_URL;
+  const nav=useNavigate();
+  const memberId=useParams().userId;


난 보통 이럴때

Suggested change

const memberId=useParams().userId;

const { userId } = useParams();

요로케 가져와서 userId 변수를 활용하는편이얌

옹 이렇게 가져올 수도 있구나!!

nayujin-dev · 2023-11-21T13:50:29Z

week4/assign1/src/pages/Mypage.jsx

+      <Container>
+        <h1>My Page</h1>
+        <section>
+          <img alt='프로필 사진' src='https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F8e%2Fe6%2F82%2F8ee68280783c081cc1ecd7e20342d050.jpg&type=a340'/>


상단에 img를 import시켜서 src={변수명} 이런식으로 하면 깔끔해질거같당!

+글구 나도 맨날깜빡하는데 alt에는 공백대신 -로 작성해주기 ㅎㅎ

nayujin-dev · 2023-11-21T13:53:12Z

week4/assign1/src/pages/Signup.jsx

+              setUsername(e.target.value);
+
+            }}></Input>
+            <DupBtn onClick={checkDuplicate} $checkDup={checkDup}>중복확인</DupBtn>


호옥시 checkDup앞에 $는 어떤 의미인가요옹.. 구글링해보고싶은데 어떤키워드로 해야할지 몰겠엉 헤헤

요약하면 Prop 이름 앞에 $를 붙여 Transient Prop으로 만들면 styled-components는 이 prop을 스타일 계산에만 사용하고, 실제 DOM으로 전달하지 않는다고 해!!
https://velog.io/@sooy2/트러블-슈팅-props에-따라-styled-components에서-스타일-변경할-때-false값-전달하는-경우
저번에 트러블슈팅 기록했던거 벨로그로 옮겨놨어!! 함 봐두 좋을거같오!

nayujin-dev · 2023-11-21T13:55:40Z

week4/assign1/src/styles/common/CommonStyle.js

+  ${props => props.$len&&
+    css`width:200px`};


헐 $가 scpt단축어였던거군,, 방금빠르게구글링했을땐 잘안나오넹 ,, 멀로 구글링해봐야하지 ,,

신수연 added 6 commits November 17, 2023 02:36

init: 초기 세팅

01f97e5

file: 안쓰는 파일 지우기

b836ff6

feat: theme파일 생성

9ffa4b4

feat: 퍼블리싱 완료

e4ee6d1

기본과제 완

6b4f61e

생각과제

8dcf3be

SooY2 added ✨기본✨ 생각🤔 4주차 labels Nov 17, 2023

SooY2 requested review from Yeonseo-Jo and nayujin-dev November 17, 2023 07:14

SooY2 self-assigned this Nov 17, 2023

신수연 added 2 commits November 20, 2023 00:32

오류 수정

7a064c3

fix : 오류 수정

766f6e6

Yeonseo-Jo reviewed Nov 21, 2023

View reviewed changes

nayujin-dev reviewed Nov 21, 2023

View reviewed changes

신수연 added 2 commits November 22, 2023 11:36

fix: env 숨기기

94d1294

fix: 코드리뷰 반영

7a4ebf9

SooY2 force-pushed the week4/assign1 branch from 8e6f86a to 7a4ebf9 Compare November 22, 2023 04:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Week4/기본/생각] 로그인/회원가입 #6

[Week4/기본/생각] 로그인/회원가입 #6

SooY2 commented Nov 17, 2023 •

edited

Loading

Yeonseo-Jo left a comment

Yeonseo-Jo Nov 21, 2023

SooY2 Nov 22, 2023

Yeonseo-Jo Nov 21, 2023

SooY2 Nov 22, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

SooY2 Nov 22, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 22, 2023

Yeonseo-Jo Nov 21, 2023

SooY2 Nov 22, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

nayujin-dev left a comment

nayujin-dev Nov 21, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 22, 2023

nayujin-dev Nov 21, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 22, 2023

nayujin-dev Nov 21, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 22, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 22, 2023

nayujin-dev Nov 21, 2023

nayujin-dev Nov 21, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 22, 2023

nayujin-dev Nov 21, 2023

		background-color: ${({ $disabled,theme }) => ($disabled ? theme.colors.mainColor : '#ccc')};
		color: ${({theme})=>theme.colors.white};

		#root{
		height: 100vh; //중앙에 오게 하려고 했는데 이렇게 하는게 맞는지,,,

	const memberId=useParams().userId;
	const { userId } = useParams();

[Week4/기본/생각] 로그인/회원가입 #6

Are you sure you want to change the base?

[Week4/기본/생각] 로그인/회원가입 #6

Conversation

SooY2 commented Nov 17, 2023 • edited Loading

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

✨PR Point

0.

1. .env

2. 로그인

3. 회원가입

4. 마이페이지

Yeonseo-Jo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nayujin-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SooY2 commented Nov 17, 2023 •

edited

Loading