항해99 7기 3일차 TIL[Enter로 로그인-Enter키 이벤트, 1일 1로그 100일 완성 it지식]

2022년 5월 11일 항해 3일차.

오늘도 컴퓨터 앞에 앉아서 강의를 시청하고,

담당한 기능 코드를 짰으며 스터디 조원들과 계획을 조율해봤다.

 

오전에는 조원들이 지금까지 짠 코드를 리뷰해보는 시간을 가졌다.

내가 담당한 로그인, 회원가입 기능에 대한 설명,

static폴더에 css, js폴더를 추가로 만들어서 정리하고 html에 링크를 다는 법,

파비콘, 오지태그 다는 법을 조원들에게 설명해줬다.

사실 나도 배우고 있는 입장이어서 이해하기 쉽게 조원들에게 설명해주진 못했지만

jwt 토큰을 활용해서 로그인한 사람만 글을 작성하도록 해야하는 한 조원은 내 설명에 감사함을 표해줬다.

(뿌듯함과 동시에 더 노력해야겠다는 생각이...)

 

---

내가 코드를 리뷰하면서 한 조원이 엔터키를 통해서 로그인이 될수있도록 해보면 좋을 것 같다는 의견을 제시해줬다. 이 부분은 영상에서 가르쳐준적이 없기에 당황했지만 개발자들에겐 구글이 있으니까!

 

구글링 결과

js / jQuery를 사용하여 엔터키(Enter)로 버튼을 누르는 이벤트

를 확인할 수 있었다.

일단 html에서 <form></form>으로 아이디, 패스워드를 감싸주고

action="/"을 통해 엔터를 치면 메인페이지로 이동할 수 있게 해줬다. 그리고 js작성을 위해 id를 만들어주고,

<form action="/" id="login_form">
  <div class="content">
    <div class="field has-addons">
      <div class="control has-icons-left" style="width: 100%">
        <input
          id="input-username"
          class="input"
          type="text"
          placeholder="아이디"
        />
        <span class="icon is-small is-left"
          ><i class="fa fa-user"></i
        ></span>
      </div>
      <div id="btn-check-dup" class="control"></div>
    </div>
    <p id="help-id-login" class="help is-danger"></p>
    <div class="field">
      <div class="control has-icons-left">
        <input
          id="input-password"
          class="input"
          type="password"
          placeholder="비밀번호"
        />
        <span class="icon is-small is-left"
          ><i class="fa fa-lock"></i
        ></span>
      </div>
    </div>
    <p id="help-password-login" class="help is-danger"></p>
  </div>
</form>

 

js에서 keyCode === 13. 즉 엔터를 누르면 로그인 function sign_in()이 불러오도록 했다.

$(document).ready(function () {
    $('#login_form').on("keypress", function (e) {
        if (e.keyCode === 13) {
            sign_in();
        }
    });
})

 

네이버 등 포털을 이용할때 엔터를 치면 바로 로그인 되는 기능을 당연하게 여겼다.

이런 기능 구현을 keycode로 하는건지는 몰랐었는데 조원의 조언으로 keycode를 알수있게 됐다!

8 <백스페이스>키 9 <Tab>키 12 <Clear>키 13 <Enter>키 16 <Shift>키 17 <Ctrl>키 18 <Menu>키 19 <Pause>키 20 <Caps Lock>키 27 <Esc>키 32 <스페이스바>키 33 <Page Up>키 34 <Page Down>키 35 <End>키 36 <Home>키 37 <왼쪽 화살표>키 38 <위쪽 화살표>키 39 <오른쪽 화살표>키 40 <아래쪽 화살표>키 41 <Select>키 42 <Print Screen>키 43 <Execute>키 44 <Snapshot>키 45 <Ins>키 46 <Del>키 47 <Help>키 144 <Nun Lock>키

위는 keycode의 번호다. 나중에 또 접할 기회가 되면 찾아봐야지.

 

---

오늘의 브렌치다.

어제는 엄청난 지하철 노선도였는데 오늘은 브렌치를 메인에 병합하고 정리하면서 많이 줄일수있게 됐다.

앞으로 병합하고 다쓴 브렌치는 정리하는 습관을 들여야겠다.

 

---

오늘 항해99에서 보내준 '1일 1로그 100일 완성 it지식' 이라는 책을 받아볼 수 있었다. 

내일부터 9시 전에 이 책을 읽어봐야겠다.

100개의 주제를 다루고 있으니 하루 3~4개의 주제씩 읽는다면 한달만에 다 읽을수 있겠지?

(항상 계획은 거창하다🤫)