Judaeng
🍒What I did today(오늘 한 일) 본문
✅회원가입 유효성 검사
회원 가입 창을 만들어, 아이디와 비밀번호를 원하는 형식(8자리 이상, 특수문자/숫자/영문 포함)등에 제한을 두어 입력하는 경우에만 회원가입이 완료되고, 아닌 경우에는 x표시를 해주는 유효성 검사 페이지를 만들었다. 조건은 특정한 형식을 만들어줘야 되기 때문에 정규표현식을 이용해 작성했다. 다시 입력하라고 해주는 부분은 classList.add와 class.List.remove를 이용해 다시 입력하라고 해주는 부분을 적용했다.
버튼 부분은 hover를 사용해 깜빡깜빡 할 수 있게 css도 만져 보았다.
✅twittler 함수 작성
하드코딩으로 HTML에서 하나하나 입력하는 식으로 게시글들을 작성해서 실제로는 뼈대만 있는 목업 파일이었다.
오늘부터는 객체 형식의 데이터를 이용해 게시글을 만드는 방법, 그리고 내가 작성한 글을 실시간으로 업로드하는 방법 두 가지를 배워 웹 페이지에 힘을 주었다. 지금은 새로고침하면 기존 데이터가 다 사라지고 아무것도 없는 페이지로 돌아가는데, 내일 Web Storage에 대해 공부하고 이 점을 개선할 것이다.
그리고 트위터를 그대로 구현해보고 싶어서 내가 즐겨보는 블로그 주인의 클론 코딩 css를 가져와서 사용했다. (솔직하게 쓰는 것이니까!)
그리고 좋아요 버튼과 싫어요 버튼을 만드는 과정까지 구현해보려 한다.
✅Youtube보면서 트위터 클론 코딩 보기
예전에 보던 유튜버 분의 트위터 클론 코딩을 보면서 이해를 해보려고 봤다. 하지만 거의 비슷하지만 여기는 firebase라는 서버를 사용해서 만드는 중급자 트위터 클론 코딩이었다. 그래도 많은 도움이 된 것 같다. 앞으로 사용하게 될 로컬 스토리지에 대해서 약간 개념(?) 구조를 생각하게 되는 시간이었다.
🍒Remember(기억할 것)
✅addEventListener vs onclick 차이점
onclick
이런식으로 trigger라는 아이디를 가진 객체를 찾아 클릭시 이벤트를 발생 시키는 방식입니다.
비슷한 메서드로 onmouseover(), onkeydown() 등등이 있을 것입니다.
document.getElementById('trigger').onclick = () => {
alert('hello!');
}addEventListener
1. 여러 개의 이벤트를 overwrite할 수 있다.
2. 작성 중에 bubbling, capturing을 설정할 수 있다.
3. 여러개의 이벤트 타입들을 쉽게 바인딩 할 수 있다.
그럼 둘의 차이점은 무엇일까? 검색을 해보았다.
"onclick()으로 얻을 수 있는 장점이 물론 있겠지만 addEventListener()를 사용해서 얻는 장점에 비하면 너무 적을 것 같다" 라는 답변이 가장 인상적이었던 것 같다.
그리고 브라우저 호환성과 필요성의 문제도 둘 사이에 존재하기 때문에 궁금하면 검색해보는 게 제일 좋은 방법인 것 같다. 참고자료 : 여기어때!
✅GlobalEventHandlers
키보드나 마우스 입력을 Javascript가 인식하게 해주는 EventHandler들 중 keydown, onkeyup, onchange, onclick, onmousedown, onmouseup 등 종류가 있다는 것을 알게 되었다. 바로 검색해서 조금씩 알아보았다.
onchange는 생각보다 질문이 있었던 것 같은데 나는 이 개념을 요소(element)에 변화가 생겼을 때 실행되는 이벤트라고 생각한다. ex) select box
키보드 관련 이벤트 중 '사용자가 키보드의 키를 눌렀을 때'는 onKeydown'을,
사용자가 키보드의 키를 눌렀다가 땠을 때'는 onKeyup을 이용한다.
✅CSS 변수 사용하기
정의 : --main-color: black; // -- 사용
접근 : color: var(--main-color); // var() 사용
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
:root {
--my-color-1: red;
}
.f1 {
color: var( --my-color-1 );
}
</style>
</head>
<body>
<h1 class="f1">Hello World</h1>
</body>
</html>변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있다. 만약 어느 곳에서나 사용하고 싶다하면 :root 이렇게 정의해준다.
🍒More Study
✅Moment.js
✅Web Storage, Local Storage
2021-02-04
오늘 유효성 검사를 맛보기로 배우고 바로 Twittler 만들기로 넘어가니까 멘탈이 갑자기 유리가 되었다;
생각보다 회원가입 유효성 검사에 집중을 많이했고, 그 상태로 계속 억지로 Twittler를 만들려고 하니까 힘들었던 것 같다.😥
진짜 휴식 취하거나 기분을 전환하는 것은 진짜 중요하다고 느낀 날인 것 같다.
오늘은 진짜 학교 과제를 제출하듯이 코드를 짜고 DOM의 대한 기본 개념조차 안쓰고 코딩했던 것 같다.
오늘은 휴식하고 내일부터는 다시 열심히 해야지!👍
'Daily > TIL(Today I Leared)' 카테고리의 다른 글
| 🍒What I did today(오늘 한 일) (0) | 2021.02.08 |
|---|---|
| 🍒What I did today(오늘 한 일) (0) | 2021.02.08 |
| 🍒What I did today(오늘 한 일) (2) | 2021.02.05 |
| 🍒What I did today(오늘 한 일) (0) | 2021.02.02 |
| 🍒What I did today(오늘 한 일) (0) | 2021.02.01 |