Jieunny의 블로그

➰ 13일차 페어분도 잘 하시는분이라 우리는 코드 리뷰하고, 서로 질문할거 하는 식으로 진행했다. 오늘은 열심히 구현한 계산기 CSS 바꿔서 제출했다. 나도 디자인 쪽에 소질이 있으면 좋을텐데 디자인 하는 건 언제나 너무 어려워.. 내가 하면 컬러도 어색한거 같구.. 참고 디자인 가져와서 비슷하게 구현하는 게 나은 것 같다. 남은 시간에는 전에 하던 유효성 검사 실습 마저 했다. 오늘은 너무 힘들어서 평소보다 쉬는 시간을 더 가졌는데 모니터만 보고 있으니까 눈이 뽑힐거같아..🥹

📣 유효성 검사 ➰ 특정 값은 반드시 입력해야 한다. ➰ 비밀번호는 n 자리 수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 한다. 위와 같은 기능을 '유효성 검사'라고 한다. let inputUsername = document.querySelector('.username'); // username 클래스 요소를 받아온다. let failureMessage = document.querySelector('.failure-message'); // failure-message 클래스 요소를 받아온다. 얘는 hide 클래스가 있어 숨겨져있음. inputUsername.onkeyup = function(){// username 클래스 요소에서 사용자가 키를 눌렀다 뗐을 때 if(isMoreFour !== ..

➰12일차 라이브세션 때 다른 분들 계산기 목업한 거 많이 봤는데 다들 진짜 정성들여 하셔서 나 너무 대충했나 생각했다. 그치만 깔끔한 디자인이 좋은걸.. 내일 구현해서 내는 계산기는 다른 디자인으로 해봐야지 오늘은 딱히 쓸 말이 없다🤨

📣 DOM Document Object Model HTML 요소를 Object처럼 조작할 수 있는 Model이다. -> JS를 사용하면 DOM으로 HTML을 조작할 수 있다. HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다! 📣 HTML에 JS 적용하기 웹 브라우저는 코드 해석 과정에서 요소를 만나면 HTML 해석을 멈추고 요소를 먼저 실행한다. 🚨 요소는 등장과 함께 실행된다 ✔️ 요소 추가하는 방법 1️⃣ 안쪽에 삽입 ➰ HTML 태그를 만나기 전에 요소가 실행되서 HTML태그를 제대로 불러오지 못한다. 2️⃣ 요소 끝나기 전에 삽입 ✔️ HTML 레이아웃을 컴퓨터에게 전달하기 자바스크립트에서 DOM은 document 객체에 구현되어 있다. console.dir 로 DOM 구조를 조회하..

📣 Jest : 자바스크립트에서 사용할 수 있는 테스트 툴 테스팅 라이브러리 여러가지 상황들을 설정하고, 그 상황에 맞는 결과가 나오는지 자동으로 테스트 한다. 📣 JavaScript Koans 을 사용해서 문제를 해결해라. ✔️ expect ➰ expect(n).toBe(기댓값) : n === 기댓값인지 확인한다. ➰ expect(n).toBeTruthy() : n === true 인지 확인한다. ➰ expect(n).toEqual(기댓값) : n === 기댓값인지 확인한다. 🚨 toBe() 와 toEqual() 의 차이점 ➰ toBe() 는 같은 객체를 가리키고 있는지 확인한다. -> 객체의 내용이 같더라도 다른 메모리에 있으면 False ➰ toEqual() 은 객체의 내용이 같은지 확인한다. ✔️..

➰ 9일차 JavaScript Koans 이라고 배우지 않은 부분을 스스로 찾아보고 학습하는 것인데, 코드스테이츠에서 제공하는 테스트 파일이 있어 실습을 시작했다. lexical scope와 closure를 같이 사용하는 문제가 이해가 잘 안되서 다시 차근차근 해봐야겠다. 새로운 페어님이랑 계산기 목업하는 시간이었는데 내가 해결하지 못했던 부분을 위해서 열심히 해주셔서 감사했다. 나도 내성적이고 페어님도 내성적이라 상당히 어색했지만.. 어쩔수 없는 거 같다😂 이번 주말은 크리스마스 이브 + 크리스마스니까 열심히 놀아야지. 다음주도 열심히 하려면 주말에 스트레스 받지말고 푹 쉬어야한다는 걸 점점 깨닫는 중이다..