201224_TIL

🎄🎄🎄오늘은 크리스마스이브라서 6시칼퇴^>^

 

🎄오늘 한 일

 ✔️ 유효성검사(validation check) 이해 및 간단한 MVP 만들기

• 간단한 회원가입 UI 만들기 ( 원래모양 -> 마켓컬리참고 -> figma 목업 -> UI HTML 완성)
  --
• 유효성 검증 함수 만들기 ( moreThanLength, onlyNumberAndEnglish, strongPassword, isSamePassword)
  --
• HTML Element를 가져와서 이벤트핸들러함수와 연결하기 ( onclick, onchange, onkeydown, onkeyup )
  --
• 유효성 확인 결과에 맞는 함수 실행 ( 유효성 통과 시 valid class 추가하여 유효상태표시, 실패 시 invalid class 추가하여 상태표시)
  --

✔️ Twittler 만들기 1단계

• 트윗객체들이 담겨있는 DATA 배열을 기존에 만들어 놓은 UI에 맞게 화면에 출력하기 
  - function createElWithClass( tag, ...arg ) : tag를 받아 arg에 해당하는 class를 추가한 elment를 반환하는 함수 작성
  - function bindEach( parent, ...childs) : child 엘리먼트들을 받아서 parent 엘리먼트의 자식으로 만드는 함수 작성
  - function makeTweetElWithData ( data ) : 트윗DATA 중 하나의 트윗 객체정보를 받아서
                                                         해당 트윗의 Tweet 엘리먼트(하나의 트윗세트)를 만들어 반환하는 함수
  - function getAllTweet ( tweets )  : 트윗DATA 묶음을 받아서 각각 makeTweetElWithData( ) 해주고 합쳐진
                                               트윗리스트를 반환해주는 함수
• input 값들을 채워 Tweet 버튼을 누르면 새로운 트윗이 생성되도록 하기
  -makeNewTweet( ) : input값들을 newTweet 객체를 만들어 할당해주고 트윗DATA에 해당 객체 push 하기
  -registerBtn.onclick = makeNewTweet; 으로 버튼클릭 시 새로운 트윗객체가 만들어져 트위DATA에 들어가도록 함