[TIL] 2022년 2월 3주차

 

• 코드는 깃헙에 올리므로 여기서는 공부한 내용을 요약하는 식으로 정리합니다. 

 

 

 

2월 14일

• javascript 공부를 시작했다. 너무 예전에 공부해서 잘 기억이 안나는데 자바스크립트는 중요하다. 이번에도 열심히하자.
• 배열, for 문, 함수를 을 for(... of ...), forEach()과 람다식으로 간단하고 다양하게 표현하는 것을 공부했다.
• 배열의 메소드[ .push(), .pop(), .unshift(), .shift(), .splice(), .reverse(), .sort(), .join(), .slice(), .indexof() ] 를 공부했다.
• 기억해둘 것
  • 1. `${ }` 안에 변수를 사칙연산할 때, + 는 문자열 결합으로 인식하므로 number 타입으로 바꿔줘야 하지만, 나머지 연산자는 number 타입으로 자동형변환된다.
  • 2. 클릭시 function 을 작동시키기고자 할 때는 태그에 get 등으로 접근한 것을 변수에 담고, 변수.addEventListner('click', function() => {...}); 을 사용한다.
  • 3. 배열명.sort() 메소드는 배열의 요소가 숫자라고 하더라도 숫자를 문자열로 변환한 후 오름차순으로 정렬하므로, 숫자 오름차순으로 정렬하고자 할 때는 sort(function(a,b) {return a-b;}) 처럼 사용해야한다.
  • 4. indexof() 는 처음으로 같은 value 값의 index 만을 반환하는데, 모든 value 의 값을 찾고자 할 때는 반복문을 함께 써야한다.

 

 

 

2월 15일

• javascript 의 배열명.map() 메소드를 여러 메소드와 결합하고, 람다식 등으로 다양하게 표현하는 것을 공부했다. 
• Array.from() 로 배열로 바꾸는 방법과, 배열로 바꿔서 바로 매핑하는 방법을 공부했다.
• 전달받은 모든 인수로 배열을 만들어내는 Array.of() 와,
• 판별함수의 조건에 만족하는 배열요소를 리턴하는 배열명.find() 함수를 공부했다.
• 판변함수의 조건에 만족하는 모든 배열요소를 새로운 배열로 리턴하는 배열명.filter() 함수를 공부했다. 실무에서 자주 사용되니 많이 연습해두자.
• 기억해둘 것
  • 1. == 와 === 의 차이는 데이터 타입까지 같은지 여부이다.
  • 2. .map() 메소드는 반복문을 돌면서 배열의 요소들을 1대 1로 짝지어 새로운 배열을 만들어주는 것이다.
  • 3. 숫자타입을 더했는데 결과가 이상하다면 Number() 을 항상 생각해내자
  • 4. indexOf() 는 배열에서 찾을 요소와 일치하는 배열요소를 리턴하는 한편, ES6 에서 새로 도입된 findIndex() 메소드는 원하는 판별함수의 조건에 만족하는 배열요소를 리턴해주는 것이 인상적이다.
  • 5. .some() 은 배열에서 판별함수의 조건에 만족하는 배열요소가 존재한다면 true를, 없으면 false 를 리턴한다.
  • 반대로 .every() 는 배열에서 하나라도 판별함수의 조건에 만족하지 못하면 false 를, 모두 만족하면 true 를 리턴한다.
• 에러 기록
• 2022.02.15 - [에러잡기] - [에러잡기] TypeError: undefined is not iterable (cannot read property symbol(symbol.iterator))

[에러잡기] TypeError: undefined is not iterable (cannot read property symbol(symbol.iterator))

 

 

 

 

2월 16일

• 기억해둘 것
  • 1. 오늘도 javascript 에서 숫자연산은 타입을 조심해야하는 것을 다시 느꼈다. Number() 을 적절히 잘 사용하자.
  • 특히, .toLocaleString('en') 으로 3자리마다 콤마를 찍어준 숫자를 연산할 때 콤마를 제거하는 과정이 꼭 필요하다.
  • 두 가지 방법이 있는데 replace() 를 이용하는 방법, split() 과 join() 을 결합하는 방법이 있다.
  • 2. 태그에 내용물이 존재하는 것과 화면에 보이는 것은 별개이다. 보여줄 내용물이 존재하면서 경우에 따라 보이게 할 수도, 보이지 않게 할 수도 있기 때문이다. 그럴때는 잡아온 태그에 .style.display="none"; 또는 .style.display="block"; 을 사용하면 되는데, display 를 none 한다는 것은 내용물이 존재하지만 안보여주는 상태로 만드는 것이다. 
  • 3. <input type="number"> 에 이벤트를 줄때는 'click'이 아니고 'change'를 사용한다.
• 추가로 중요한 내용을 따로 글로 작성했다.
• 2022.02.18 - [분류 전체보기] - [JavaScript] 동일한 id 속성을 여러개 준다고?

[JavaScript] 동일한 id 속성을 여러개 준다고?

 

• 2022.02.18 - [분류 전체보기] - [JavaScript] 여러 자식 태그를 포함하는 태그에 이벤트로 함수 호출하기

[JavaScript] 여러 자식 태그를 포함하는 태그에 이벤트로 함수 호출하기

 

 

 

 

2월 17일

• new Date() 날짜함수에서 get 과 set 날짜함수로 필요한 정보만 가져오거나 대 사용하는 것을 공부했다.
• 함수 안에서 함수를 부름으로써 무한반복이 가능한데, 이것을 setTimeout() 또는 setInterval()과 결합해 시계를 만들었다.
• 같은 원리로 1초씩 줄어드는 타이머도 만들었는데, 타이머를 중지하는 기능, 재시작하는 기능, 리셋하는 기능도 만들어 보았다. (키포인트는 초단위의 시간설정을 어떻게 하느냐이다!) 
• 기억해둘 것
  • 1. 현재 요일명을 가리키는 index 는 0부터 6이고, 일요일부터 토요일을 의미한다.
  • 마찬가지로 현재 월의 index 도 0부터 11까지여서, 변수에 담을 때 +1 하는 것을 잊지말자.
  • 2. 함수를 setInterval() 로 호출한 것는 clearInterval() 로 제거를 하고, setTimeout() 로 호출한 것은 clearTimeout() 으로 제거할 수 있다.
  • 3. 타이머를 새로 만들때는, 먼저 이전에 만들었던 타이머를 완전히 제거하고 다시 새로 만들어야한다. (그렇지 않으면 타이머의 속도가 변한다.)
  • 4. alert() 와 달리 confirm() 을 사용하면 확인/취소 버튼이 나오는데, 확인은 true 를, 취소는 false 를 리턴한다.
  • 5. 버튼 태그를 비활성화하고자 한다면 태그를 잡아온 변수.disabled = true; 를 하면 버튼은 그대로 화면에 유지되지만 버튼의 기능은 없어진다. 
• 추가로 중요한 내용을 따로 글로 작성했다.

•  2022.02.20 - [분류 전체보기] - [JavaScript] for 반복문에서 in 으로 key 가져오는 예제!

[JavaScript] for 반복문에서 in 으로 key 가져오는 예제!

 

• 에러 기록
• 2022.02.20 - [에러잡기] - [JavaScript_에러잡기] RangeError: Maximum call stack size exceeded

[JavaScript_에러잡기] RangeError: Maximum call stack size exceeded

 

 

 

 

2월 18일

 

• encodeURI() 및 decodeURI() 를 사용해 인코딩 및 디코드 하는 것을 공부했다.
• Math 객체와 관련된 메소드[abs(), ceil(), floor(), max(), min(), round(), trunc(), sign(), random(), Number(), parseInt(), parseFloat()..] 를 공부했다.
• 자바에서처럼 에러를 try_catch_finally 구문으로 대처할 수 있다.
• 체크박스의 사용법과 주요한 속성들(name, length, checked, value) 에 대해 공부했다.
• 카카오 주소검색을 활용해서 주소 검색기능을 만들어보았다.
• 기억해둘 것
  • 1. checkbox 는 배열의 개념이 필요해서 getElementById() 가 아니라, getElementsByName() 을 통해 제어한다.
  • 그래서 같은 name 을 주어야 하는 것이다!!!
  • 오늘 꼭 기억해야 할 것은 체크박스나 라디오를 다룰 때는 꼭 같은 name 을 주어야 한다는 것이다.!! 이것만 기억해두자.

 

 

 

2월 19-20일

• 평일에 밀린 복습이 많아서 이번 주말에는 복습만 했다.