스파르타코딩클럽 내일배움캠프 75일차

오늘 일과 간단 요약

1. 스크럼
2. 기획 회의 + 디자이너님과 회의
3. 로그인/회원가입 유효성 검사 수정

 

 

 

 

 

 

 

기획 회의 ~ing

나는 일주일이 좀 넘으면 기획 회의를 안해도 될 줄 알았다. 늘 그렇듯 그건 나만의 착각이었음을...ㅋㅋㅋㅋ

분명히 오전 스크럼을 할 때까지만 하더라도 정할 게 더는 남아있지 않다고 생각했었다. 그런데 그게 아니었다.

 

오전에는진행 상황을 서로 공유하고, 오늘 어떤 기능을 개발할 것인지를 이야기 나누었었다.

그런데 디자이너님이 글쓰기 페이지 와이어프레임을 짜주시면서 여러가지 체크해야 할게 많아졌다.

 

글 쓰기 페이지

• 여행전/여행후 카테고리 추가

추가기능

• 전체공개/비공개
• 게시글 CRUD 완료 후에 피시버전에서 해시태그 아래와 같은 형식으로 구현하는 방향 고려

모달 라이브러리 필요한 부분

 ✅ 어떤 라이브러리를 사용할 것인지는 레이아웃이 완성된 후에 회의

• 헤더
  • 회원가입 시 확인 alert창 (뜨고 로그인 모달로 넘어가거나 다시 메인 페이지로)
  • 비밀번호 재설정 ⇒ 이메일 전송 시 확인 alert창
• 글쓰기
  • 장소 삭제(confirm)
  • 리뷰 삭제(confirm)
  • 게시글 등록(confirm)
  • 헤더 사진 등록(alert)
• 디테일페이지
  • 삭제 확인 confirm창
  • 삭제 되었다는 alret
  • 취소 했다는 alret
  • 수정 되었다는 alret
• 유저페이지
  • 닉네임 변경 확인 창 (confirm)
  • 삭제 확인 confirm창
  • 삭제 되었다는 alret

 

 

이건 우리 조 노션에 작성한 오늘 자 회의록을 그대로 옮겨온 것이다.

우선 가장 큰 게 바뀌었다. 글 쓰기 페이지에서 카테고리를 나눈 것. 기존에는 카테고리를 나누지 않고 단순하게 여행 코스를 짜는 걸로만 생각했는데 우리 프로젝트의 타켓층이 누구인가 생각해보면서 나누게 되었다.

 

단순히 장소와 장소에 대해 간단한 정보를 적으면서 여행 가기전에 코스를 짜볼 사람들.

그리고 또 여행을 코스대로 다녀온 뒤에 그 여행에 대한 자신의 리뷰를 간단하게 덧붙일 사람들.

이렇게 두 가지 경우가 나뉘게 되면서 애초에 글을 작성할 때 여행 전/ 여행후 카테고리를 나누는 게 나을 것 같다는 생각이 들었다.

 

이 프로젝트에서 타켓층이 짧게 국내 여행을 할 사람들이 아니라 최소 1박 2일 이상 여행 다니면서 코스를 짜야 할 사람들과, 우리나라로 여행을 오는 외국인들이라고 생각했기 때문이다.

사실 외국인 대상이 맞지 않나 하는 의견이 있었는데 그러면 영어로 프로젝트를 해야 하는 단점도 있고,

다국어 기능을 넣어야 하나 하는 생각도 들었는데 일일히 우리가 정하기도 어렵고 그냥 크롬의 번역 기능을 쓰기로 했다.

 

그리고 디자이너님과 회의하면서 느낀 건데 지금까지 프로젝트를 진행하면서 한번도 타켓층이나 유저를 생각해본 적이 없다는 점이다. 단순히 기능 구현에 중점을 두고 프로젝트를 했다는 생각이 든다.

그냥 연습 프로젝트가 아닌 실제로 유저들이 사용했을 때 어떤 방식이 좋을지 생각해봤어야 하는데, 최종 프로젝트가 되어서야 생각하는 중이다 (ㅋㅋㅋㅋ)

 

여튼 다 적지는 않았지만 이외에도 여러 이야기가 오갔는데, 그러다 보니 정작 기능 구현할 시간은 별로 없었다.

오전에 스크럼 하고 잠깐 기능 개발하다가 오후에 4시쯤부터는 계속 회의를 진행했던 것 같다.

정말...뭐 하나 확실하게 정하기 어려운 것 같다. + 디자인도 생각해야 하니 그런 듯...

 

 

 

 

 

 

로그인/회원가입 유효성 검사

그래서 회의 하는 시간을 제외하고 원래는 유효성 검사를 추가한 뒤에 카카오 소셜 로그인까지 시도해보려고 했는데 TIL 작성하고 다시 한번 시도해봐야겠다.

 

아무튼 오늘의 목표는 유효성 검사 추가여서 일단은 유효성 검사를 수정하는 걸로.

이전에 내가 작성한 코드는 에러 메세지가 그냥 모달창 위에 뜨면서 이메일 유효성 검사이든, 비밀번호 유효성 검사이든 상관 없이 전부 위쪽에 뜨는 형식이었다.

이걸 이메일인 경우와 비밀번호인 경우로 나눴다.

 

그리고 이전에 그냥 썼었던 정규 표현식을 이용했다.

 

const loginvalidationCheck = () => {
    const emailRegex =
      /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

    ...
    
    } else if (!emailRegex.test(email)) {
      setError("");
      setEmailError("이메일 형식이 아닙니다.");
      setPWError("");
      return;
    } 
    
    ...
  };

여기 보면 이메일 유효성 검사를 정규 표현식으로 구현해봤다.

 

좀 긴데 이런 형식으로 나눌 수 있다.

• [^<>()\[\].,;:\s@"]+  : @ 앞에는 특수 문자를 제외한 한 개 이상의 문자를 넣을 수 있다
• \. : 점(.)을 포함해도 된다
• +)*)  : 두번째 중괄호 뒤에 + 가 있기 때문에 . 뒤에 특수문자를 제외한 한글자 이상이 와야 한다
  • test@test.com (O)
  • test.test@test.com (O)
• @ : 한개 이상 있을 때 유효하다
• ([^<>()[\].,;:\s@"]+\.)  : 특수문자가 없고 . 이 한개 포함되어야 한다
• [^<>()[\].,;:\s@"]{2,} : 특수 문자가 아닌 문자가 2개 이상 있어야 한다

 

이런 식으로 너무 복잡하지만....정규식 구글링 해가면서 구현해봤다.

좀 긴가 싶었는데 맨 처음에 그냥 indexof('@') 형식으로 @가 있을 때 유효성 검사 통과하는 것만으로는 안된다고 생각해서 그냥 이대로 유효성 검사를 수정했다.

 

 

비밀번호 유효성 검사는 회원가입 할 때만 해도 되서 회원가입 유효성 검사 함수에 추가해주었다.

const registerValidationCheck = () => {
    const pwRegex = /^[A-Za-z0-9]{8,15}$/;

    loginvalidationCheck();
    if (!pwRegex.test(pw)) {
      setPWError(
        "비밀번호는 영문 대소문자, 숫자를 혼합하여 8~15자로 입력해주세요."
      );
      return;
    } 
    
    ...
    
  };

여기서는 영문 대소문자, 숫자를 합쳐서 8~15글자로 비밀번호를 제한했다.

처음에 작성할 때는 그냥 비밀번호가 6글자가 되지 않으면 유효성 검사를 통과하지 않는다고 작성했는데,

다른 웹페이지들과 비슷한 형식으로 정규 표현식을 만들어두었다.

 

이전에는 단순하게 인풋창에 적지 않았을 때 만 구분하면서 유효성 검사를 진행했었는데,

이전에 다른 조들이 진행했던 프로젝트들이나 튜터님이 유효성 검사에 대해 말씀하셨던 게 생각나서 아예 정규 표현식을 써보자는 마음에서 써봤는데 나름 잘 구현된것 같아서 다행이다.

 

좀더 예쁘게 구현이 안되나 싶은데 이건 디자이너님이 우리 프로젝트 전체 레이아웃을 짜주시면 그 때 변경해야겠다.

우선은 여기까지 하고 error 메세지 css만 쪼금 수정한 다음에 PR 날리고 머지했다.

 

 

 

 

 

 

 

 

짧은 일기

매일매일 새로운 고민이 생기고 그 고민 관련된 결정을 해야 하는게 되게 신기한 과정 같다.

단순히 프로젝트 기획을 하는게 아니라 유저가 어떤 식으로 해야 편할지를 고민해보고, 디자인도 생각해서 뭐가 더 예쁜지 고민해보고 등등...오늘도 타켓층에 관련되어 생각하다가 카테고리 분류라는 새로운 기능이 생기고

 

개인적으로 유효성 검사 관련해서 새로운 것들도 추가하고 등등...

최종 프로젝트라 그런지 생각보다 굉장히 바쁘고 할게 많다 ㅋㅋ 개인 기능 + 기획 까지 생각하니까 은근 머리가 복잡하다.

내일도 체크헤야 할 부분도 많고 피드백 받고 피드백 드려야 할 것도 많다. 내일도 힘내야지...!