201224_TIL

🍎 오늘 한 것

---

✔️ 회원가입 유효성 검사
회원 가입 창을 만들어, 아이디와 비밀번호를 원하는 형식(8자리 이상, 특수문자/숫자/영문 포함 등)에 맞춰 입력하는 경우에만 회원가입이 완료되고, 아닌 경우에는 피드백을 해주는 유효성 검사 페이지를 만들었다. 조건은 특정한 형식을 만족시켜야 했기 때문에 정규표현식을 이용해 작성했다. 다시 입력하라고 피드백을 주는 부분은 classList.add와 classList.remove 를 이용해 피드백용 스타일이 적용된 클래스를 추가했다가 제거하는 식으로 작성했다.

✔️ twittler 실시간 업로드
원래는 하드코딩으로 html에서 하나하나 입력하는 식으로 게시글들을 작성해뒀어서 실제로는 아무것도 실행되지 않는 목업파일에 불과했다. 오늘은 객체 형식의 데이터를 이용해 게시글을 만드는 방법, 그리고 내가 작성한 글을 실시간으로 업로드하는 방법 두 가지를 배워 웹 페이지에 숨을(?) 불어넣어 줬다. 지금은 새로고침하면 기존 데이터가 다 사라져버리고 아무것도 없는 페이지로 돌아가버리는데, 주말동안 Web Storage에 대해서도 공부해서 이 점을 개선해 봐야겠다!! 아 좋아요 싫어요 버튼 만드는걸 깜빡해서 이부분도 추가해야겠다

 

🍎 기억할 것

---

✔️ CSS에서 변수 사용하기
정의 : --main-color: black;             // -- 사용
접근 : color: var(--main-color);      // var() 사용

✔️ Moment.js
Moment.js는 Javascript에서 날짜나 시간을 다루는 데 유용하게 쓰인다. 트위틀러에서 현재 시간을 표시하는 부분에서 사용했는데, 그냥 date메서드를 사용하면 시간이 지저분하게 나오는 것 같아 'YYYY-MM-DD hh:mm:ss' 형식으로 깔끔하게 바꿔주려고 moment.js 중 format이라는 메서드를 쓰게 되었다. 사용방법은 아래와 같다!

 let now = new Date();       // 현재시간 가져오기
 created_at : moment(now).format('YYYY-MM-DD hh:mm:ss')       // 시간 표현 형식 변경

✔️ GlobalEventHandlers
키보드나 마우스 입력을 Javascript가 인식하게 해주는 EventHandler들 중 keydown, onkeyup, onchange, onclick, onmousedown, onmouseup 등에 대해 배웠다. 키보드 관련 이벤트 중 '사용자가 키보드의 키를 눌렀을 때'는 onKeydown'을,
사용자가 키보드의 키를 눌렀다가 땠을 때'는 onKeyup을 이용한다는 걸 기억하자!

 

🍎 더 공부할 것

---

✔️ CSS 전처리기
CSS 문서 작성할 때 중첩되는 부분이 많은데, 이런 중첩된 CSS를 간결하게 표현하는 데 도움을 주는 'CSS 전처리기(
CSS Preprocessor)'라는 것이 있다. 대표적으로는 Sass, Less, Stylus가 있는데, 이 중 가장 많이 쓰이는 Sass에 대해 먼저 알아보고, 하나씩 추가로 알아보도록 해야겠다.

✔️ onclick, addEventListener의 차이점
✔️ Web Storage, Local Storage

 

 

✏️ 수업 끝나고 오랜만에 본가에 가서 여유롭게 맛있는 것도 먹고 리프레시 하고 왔다 ㅎㅎ 역시 주기적으로 머리를 식혀줘야해🤤다시 주말부터 힘내서 더 공부할 것에 적어두고 못찾아봤던 것들도 정리하고, 트위틀러도 마저 완성해야겠다!!