[항해99] TIL 사전과제 스터디 D-19

오늘의 결실

• 어쩌면 스파르타 첫주에 하게 될 로그인 기능의 거의 모든 것의 뼈대를 구현했다.
• 또 그 뼈대 코드를 내 나름대로 최선을 다해 a-z까지 다 설명했다.
• 사실 이 부분에서 뭔가 괜한 짓을 했나 생각이 들기도 한다. (팀원분들이 좋으신분들이라 다행이지 이 행동은 내 뼈대코드가 좋을수록 영향력을 선사하게 되고 그러면 백엔드분들의 그동안의 코드를 무시하게 되는 결과로 이어질 수 있는것 또한 분명한 사실이기 때문이다.)
• 사실 어떻게 보면 그 설명의 과정에서 제일 로그인에대해 배운사람은 나일 것이다. 나의 이득을 취하고 더더욱 이기적이었나 생각이 들기도 한다.
• 다시금 생각하게 된다. 오늘의 이게 “미움받을 용기”가 맞았는지.. 답은 언제나 “모르겠다”이지만 다음에는 좀 더 성숙하고 성장하기를 바라며 적어본다.
• 근데 사실 주저리 주저리 이렇게 썼지만 뼈대를 완성하고 제일 먼저 드는 감정은 “해냈다”였다…

그럼에도

• 항상 코드이든 하루의 일과이든 마무리를 하고나면 아쉬움과 후회가 오기는 한다.
• 이때는 이랬으면 그때는 그랬으면 하고는 말이다.
• (나는 여린마음동호회 회원을 넘어서 간부급은 되는 것 같다.)
• 하지만 이런 나의 성격이 마냥 싫지만은 않다.
• 이런 생각을 하면서 발전도 있는거니까
• (근데 이 글을 쓰면서도 후회하고 있기는 한다… 나도 내가 피곤하다..)

그래서

• 예전 드라마중에 <달의연인 보보경심 려> 라는 드라마가 있었다.
• 보지는 않았지만 제목은 상당히 인상적이었는데 제목의 의미는
• "매 순간마다 한 걸음 걸음마다 살얼음판을 걷듯 두려워해야 돼." 이다.
• (참 나도 중2병적일 수도 있지만) 이 문구에서 나는 많은 가르침을 받는다.
• 나는 굳이 의미를 부여하는데 내가 붙인 의미는
• 사람의 아주 기본적이고 단순한 한 걸음 조차 조심하라는 것이고 이 한 걸음은 사람의 ‘생각’으로 치환된다.
• 따라서 나에게서 파생되어 반환되는 나의 생각 → 말 → 가치관 → 행동 을 항상 갈고 닦아야 한다는 의미이다.
• 어떻게 보면 뭘 그렇게 까지 피곤하게 사는가 하는 생각이 들 수 있지만 나는 이런 내가 싫지만은 않다…(이런거 쓰는거 부끄러)
• 항상 명심하자 무의식의 생각에서부터 바뀌어야 말이 바뀌고 가치관이 바뀌고 행동이 바뀌고 진정으로 건강하고 행복한 내가 될 수 있다.

---

login 기능(프론트엔드 + 백엔드) 정리

로그인

1. html에서 input에 id값을 주고 비밀번호에도 같은 방식으로 input에 id값을 준다.
2. 로그인 버튼을 누르면 jquery를 이용해서 값을 script에서 받는다.
3. if문을 이용해서 “”인지 체크하고 비어있으면 .text와 .focus를 이용해 “아이디를 입력해주세요”라는 문구를 띄우고 사용자가 아이디를 입력하기 쉽게 클릭된 상태로 둔다.
4. ajax를 이용해 POST형태로 위에서 받은 input값들을 넘겨주고 통신이 성공하면success로 cookie를 받는데 $.cookie("mytoken", response["token"], { path: "/" }) 를 이용해 / 페이지에 cookie로 token을 저장하고 window.location.href = "/"; 를 이용해 / 페이지로 이동시킨다.

회원가입

1. 회원가입 버튼을 누르면 jquery를 이용해서 값을 script에서 받는다.
2. 이때 아이디 옆에는 중복체크버튼을 만들어서 onclick으로 중복검사를 한다.
3. 중복검사는 아무것도 입력안되었을때랑 맞는 양식을 검사한다.
4. 맞는양식인지는 정규표현식을 사용한다.
5. var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/; 는 일단 정규표현식으로 정리하면 ^문자열의 시작이 (?=) 맨 앞쪽에서 a부터z사이이거나 A부터Z사이의 문자이며 내용에는 영어, 숫자, _ , . 이 들어 갈 수 있고 2글자에서 10글자 사시여야 한다는 뜻이다.
6. 이 정규표현식에는 test라는 메서드가 있는데. regExp.test(asValue) 이면 asValue는 regExp의 규정에 맞는지 확인하여 맞으면 true를 다르면 false를 반환한다.
7. 이 방법으로 함수에서 if문을 통해 고객의 아이디의 양식이 우리가 정규표현식으로 맞춘 양식과 같은지 테스트한다.
8. 회원가입 버튼을 누르면 서버와 api통신을 해서 username을 주고 백엔드로부터 중복이 있으면 response[”exists”]를 없으면 html에서 아이디에 is-success클래스를 jquery로 준다.

특이한점

• 로그인과 회원가입의 input창을 공유해서 쓴다.
  • 코드를 줄이기 위함이겠지만 클론할때는 상당히 복잡해지게 만드는 요소