[ToyProject] 점진적 과부하 사이트 - 14

시작하기 전에..

: 일단 아직도 완성이 안됐나?! 라고 내 스스로에 대한 반성으로 시작한다. 하지만, 새해 목표와 같이 매번 실패를 해도 끝에 가서는 완성만 하면 되는거다. 이번엔 5월 7일까지 끝내보자 라는 원대한(?) 계획을 갖고 시작해보자.

현재 진행 상황

• recoil 로 리팩토링 완료
• nestJS 로 User 테이블 작성 작업 진행중
• RDBMS vs NoSQL

  • MySQL로 했을 때 5개의 테이블을 만들어서 처리를 해야하고, 조회가 많은데 매회 조회시에 JOIN문을 엄청 복잡하게 참조해야할 것 같다.

  • NoSQL로 하면 JOIN 문 등의 고민은 없을 것 같다. 또한, 데이터 형식이 명확하지 않아서 NoSQL 방향도 맞는 것 같다.

    결론 : MySQL 선택 ! ⇒ 매번 JOIN문을 쓰는게 걸린다면 Redis로 캐싱을 하면서 수정이 그렇게 자주 이뤄지지 않는 데이터 이므로 수정 됐을 때만 다시 조회를 하는식으로 한다.

**윗 부분은 아직 배우는 중이라 좀더 자세히 알아볼 필요가 있을듯 하다

• 글자수가 많거나, 기타 유저들의 과장된 행동(?) 에 대한 예외 처리가 필요하다(FE쪽) 예를 들어, 무게를 99999999 라고 쳤을 때 아예 그런 숫자를 못치게 하던지, ... 으로 축약하던지 처리를 해야할 듯하다. 지금은 저렇게 치면 그대로 UI가 깨지는 상태.
  (ㅠㅠ)

오늘 진행할 사항

• firebase 걷어내기..
• local 환경에서 현재 nestJS로 돼있는 백엔드를 포트 6000 or 5000으로 돌려서 local 끼리라도 통신 성공시켜보기(아마 이것도 포트넘버가 달라서 cors에러가 생길듯?)

1) 회원가입 기능 : email, password1, password2, nickname 이렇게 입력을 받는다. 이 때, 유효성 검사를 해야한다. 유효성 검사는 프론트엔드에서도 진행하고, 백엔드에서도 따로 진행한다. 더블 체킹을 한다.

• 유효성 검사 규칙
  이메일 : 이메일은 어차피 해당 이메일로 보내서 가입 승인 절차를 밟아야하므로(실제 이메일을 써야하므로) 이메일 형식이기만 하면 되는걸로 하자 (id@domain)
  닉네임 : 딱히 이름을 써야하는게 아니므로 공백(특수문자 + 스페이스바)만 빼고 일단 전부 허용한다. 대신 글자 길이 관련해서는 byte 단위로 지정해서 막자. 아직 이건 못정했다. 영문으로 하든 한글로 하든 제한 byte수는 동일.
  패스워드 : 이것도 제한없이(공백 특수문자랑 스페이스바 빼고) 30자 이내로
• 각각의 검사 메시지 :
  이메일 : 이메일 형식으로 입력해주세요.
  닉네임 : 닉네임에 공백을 넣을 수 없습니다 or 닉네임은 최소 X Byte 이상 Y byte 이하로 입력해주세요
  패스워드 : 패스워드는 최소 X자 이상 Y자 이하로 입력해주세요. 추가로, password1과 password2가 다르다면 : 패스워드 확인에 실패했습니다
• 위의 검사들이 '모두' 통과한 경우에만 GlowBtn 이 Glow하도록(?) 한다.
• 이렇게 해서 glow button 이 on돼서 POST api를 호출 했을 때 성공하면 메인 페이지로 넘어가고, 실패하면 해당 요청을 받아서 모달 팝업을 띄운다.

2) 로그인 기능 : 앞서 설정한 데이터를 바탕으로 로그인 기능을 구현한다. 사실 이부분은 대부분 백엔드 작업이긴 함. 프론트 관점에서는 이메일과 비밀번호 입력을 받아서 로그인 버튼을 누르면 api를 보낸다. 서버로부터 응답이 오면 그 응답을 가지고 성공하면 바로 main 페이지로 보내고, 아니면 그에 맞는 메시지를 모달창에 띄운다.

=> 결론적으로 오늘 기획을 좀 바꿨다. 일단 내가 이 앱을 가지고 운동을 하는게 급선무이고(이 앱의 목표 자체가 사업성 보다는 내가 쓰기 편하지만, 나중에 친구들과 같이 앱을 쓰기 위함임), 그러기 위해서는 MVP 식으로 사소한 부분의 UX는 조금 불편하고, 트렌디하지 않더라도 핵심 기능 측면에서 중요도를 높이는 식으로 가자.

• 로그인 기능(회원가입, 로그아웃, 회원탈퇴 등)
  • 회원가입에 필요한 정보는 id, password, 닉네임으로 한다.
  • 이 때, 각각의 정보를 받을 때(input) '유효성 검사'를 하고, 이건 FE, BE 양쪽에서 더블 체킹한다.
    • id :
      1) 특수문자 및 공백문자(공백 : 스페이스바를 통한 공백 && 공백 특수문자) 사용 불가능
      2) 길이는 최대 30 Byte(영문 30글자, 한글 15글자) && 최소 6byte(한글 3글자, 영어 6글자)
      3) 중복 검사(api)
      4) 욕설 필터링은 추후 작업(advanced)
      ** 유효성 검사 항목은 아래에 비밀번호나 닉네임을 정할 때도 마찬가지지만, submit 버튼을 누를 때 프론트에서 먼저 필터링하고 성공하면 api 호출해서 서버에서 필터링 한다.
      요즘 좀 유행하는? input 창에 치면서 계속해서 체킹하는 UX는 쓰지 않는다. 개인적으로 유저가 빨리 유효성 검사 결과를 알 수 있다는 장점이 있을 수 있지만, 초단위로 검사를
      하면 서버에 부하가 많이가는 작업일 것 같고, 굳이 그 정도의 UX를 제공해야하는 파트라고 생각되지 않음
    • password :
      1) 공백문자(공백 : 스페이스바를 통한 공백 && 공백 특수문자) 사용 불가능
      2) 길이는 최대 30글자 && 최소 6글자 (비밀번호는 byte로 하지 않고, 순수 길이 기준으로 함)
    • 닉네임 :
      1) 특수문자 및 공백문자(공백 : 스페이스바를 통한 공백 && 공백 특수문자) 사용 불가능
      2) 길이는 최대 30 Byte(영문 30글자, 한글 15글자) && 최소 2byte(한글 1글자, 영어 2글자)
      3) 중복검사는 하지 않음(커뮤니티 기능이 들어간다 해도 닉네임 선에서 거를 필요는 없다고 생각한다. 자유롭게 고르도록함. 굳이 구분이 필요하면 id 값이 unique하므로 상관없음
      4) 욕설 필터링은 추후 작업(advanced)
  • 로그인 기능에는 아이디를 입력하고, 비밀번호를 입력하여 login 버튼을 눌러 api 요청 -> response에 따라 성공시 main 페이지로 이동 && 실패시 어떤 정보가 틀렸는지를 말해줌
    • 이 때, 없는 아이디 정보를 입력헀으면 -> "존재하지 않는 아이디 입니다"
    • 아이디는 있는데, 비밀번호가 틀렸다면 -> "비밀번호가 틀렸습니다"
    • 서버 에러(500) -> "잠시후 다시 시도해주세요"
  • 아이디 및 비밀번호 찾기 기능은 지금은 이메일 등의 정보를 받고 있지 않기 때문에 일단은 구현하지 않고 다시 만드는 방식으로 한다. 추후에는 이메일을 통해 가입 인증 메일을 전송하고, 인
    증 번호를 입력해서 가입을 완료하는 식으로 해서 비밀번호 찾기를 이메일과 연동해서 해결하고자 한다. 추가로, 추후에는 구글, 카카오, 네이버, 페이스북 등의 연동 로그인을 구현해서 로그인
    을 더욱 편하게 한다(Advanced).
  • 아이디는 수정할 수 없다. 닉네임은 수정 가능하고, 닉네임 수정과 패스워드 수정은 같은 창에서 관리한다(회원 탈퇴도 맨 밑에 버튼식으로 배치한다). 닉네임 수정을 할 때도 앞서 말한 유효성
    검사를 그대로 적용하며, 대신 닉네임 수정은 회원가입 때처럼 비밀번호, 닉네임이 같은 버튼으로 수정되는게 아니라 닉네임 수정 버튼, 패스워드 수정 버튼이 따로 있는 식으로 만든다.
    • 닉네임 input 창에는 기존 닉네임이 default(placeholder)로 입력돼있다.
      1) 닉네임 input에 이전 닉네임이 그대로 있을 때 수정 버튼을 누르면 '동일한 닉네임으로는 변경할 수 없습니다' 라는 모달창이 뜬다.
      2) 닉네임 input에 기존 닉네임과 다른 닉네임이 타이핑된 상태로 수정 버튼을 누르면 수정 버튼이 정상 작동하고 api를 호출하여 호출 결과에 따른 결과를 모달창으로 보여준다.
      이 때, 호출전에 회원가입 시에 했던 유효성 검사와 마찬가지로 FE쪽에서도 한번 거른다. 즉, FE, BE 더블체킹을 한다. 체크 기준 및 결과는 위에 정리한 부분을 참고
      3) 수정이 완료되면 FE 쪽에서도 이전 닉네임 값이 바뀌므로, 수정을 하자마자 똑같은 input으로 수정을 누르면 1번과 똑같은 상황이 된다.
    • 패스워드도 닉네임과 같은 로직으로 수정이 가능하다. 위에 작성한 패스워드의 유효성 검사 기준을 그대로 따른다.
    • 회원 퇼퇴 버튼은 가장 하단부에 빨간색깔로 '회원 탈퇴' 라고 써있는 식으로 간단한 버튼으로 구현한다.
      1) 회원 탈퇴 버튼을 누른다
      2) 최종 확인 모달창이 뜨고, 예 / 아니오 를 결정할 수 있다.
      3) 예를 누르면 5초 뒤에 메인으로 간다는 표시가 뜨면서 로그아웃 및 실제로 데이터를 삭제하고 메인 페이지로 이동한다. 아니오를 누르면 팝업이 닫힌다.
  • 로그아웃 버튼은 프론트에서는 버튼만 구현하고(메인으로 이동시키는 로직도 포함), 백엔드에서 처리한다. 웹뷰를 모바일에 심는 형태이므로 세션 등의 형태는 좀더 알아봐야할 것 같다(쿠키, 토큰 등등)

추가해야할 부분

• 하단 메뉴바를 만들어서 profile 수정 부분을 넣어야겠다.
  일단 프론트엔드에서는 이 세개의 작업을 이번주 내로 끝낸다! 백엔드는 레포를 따로 팠으므로 해당 레포 쪽에서 칸반보드랑 위키랑 다시 작성하는게 좋겠다. 음,, 아닌가.. 왔다갔다 복잡할라나.. 이건좀 고민해보자

배운점

• http://jsonviewer.stack.hu/ 을 이용하면 데이터를 트리 형태의 차트(?) 형태로 확인할 수 있다.