13일차 TIL 210318

1. 알고리즘문제… 풀면서 깨달은 것들

어떻게 하면 컴퓨터처럼 생각할까?

  • Number.prototype.toFixed() 몇번째 자리수까지 출력하는 메소드
  • 문자열 안에 있는 숫자 확인하기 typeof 로는 불가능하다. let = ‘0123456789’ includes로 확인하기
  • 너무 머리를 많이썼더니 머리가 너무아팠다. 1시간 정도 고민해보고 안되면 다음 문제로 넘어가거나, 좀 쉰다음에 돌아오기
  • 코드를 한줄 한줄 분석해보자. 예시를 대입해서 생각하기
  • let newStr = str.replace(regexp|substr, newSubstr|function) regexp : 정규식 객체 또는 리터럴. 일치되는 항목은 newSubstr 또는 지정된 함수가 반환 한 값으로 대최딘다. substr : newSubStr로 대체 될 stirng 오직 첫번째 일치되는 문자열만 교체된다.
  • 침착히 생각하고 오류없는지? 다시한번 확인해보고 테스트 및 콘솔창돌려보기🎧
  • 1시간 이상 고민하면 코드를 싹 다 지우고 처음부터 다시했는데 그러지말고 어느정도 완성이 된 코드는 보관해놓자. 후에 수정할때 비교대조가 필요하다.
  • 🎖continue 의 중요성
  • 이중 반복문/ /0번쨰의 0번째 / 1번쨰의 0번쨰 / 0번쨰의 1번쨰 / 0번째의 1번째 / 0번쨰의 2번쨰 / 1번쨰의 2번째…가 필요할때
for(let j=0; j<longest; j++){
  for(let k=0; k<arr.length; k++){
    if(arr[k][j] !== undefined){
      str += arr[k][j]...
  • str.repeat(count); :문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다.

2. DOM 🐠

  • Document Obejct Model : HTML 에 접근하여 Object 처럼 html을 조작 할 수 있는 model
  • 자바스크립트의 DOM 은 document 객체에 구현되어 있다.
  • console.dir(document.body) DOM 구조를 조회하기 위해서 유용함.

3. DOM 의 CRUD

  • CREATE : let tweetDiv = document.creatElement('div') : element 만들기
  • APPEND : document.body.append(tweetDiv) : html에 새로운 div 추가
  • READ : const oneTweet = document.querySelector('.tweet') : tweet을 클래스로 가진 모둔 html 엘리먼트 조회가능
    • 이 방법도 동일하다. const getOneTweet = document.getElementById('container')
    • 🦋HTML 엘리먼트들은 배열과 유사하게 for 문을 사용할 수 있다. 이런 ‘배열 아닌 배열’을 유사배열, 배열형 객체 등 이라고 부른다.
  • UPDATE : tweetDiv.textContent = 'dev'// console.log(tweetDiv) //<div>dev</div>
    • 클래스 지정 tweetDiv.classList.add('tweet') console.log(tweetDiv) //<div class="tweet">dev</div>
    • element.setAttribute( 'attributename', 'attributevalue' ) : 선택한 요소의 속성값 정하기
  • DELETE : tweetDiv.remove()
    • 컨테이너의 모든 자식 엘리먼트 지우기 document.querySelector('#container').innerHTML = '';
    • BUT innerHTML은 보안상 문제를 가지고있어 best방법은 아니다.
    • removeChild 는 자식 엘리먼트를 지정해서 삭제한다. 모두 삭제하기 위해서 while 문을 사용할 수 있다.
const container = document.querySelector('#container');
while (container.firstChild) { // 제목은 남기도록 하려면 while(container.children.length >1) { container.removeChild(container.lastChild)
  container.removeChild(container.firstChild);
}
  • querySelectAll 해온 엘리먼트들을 유사배열에서 배열로 변경하는 법
    • Array.from()
    • Array.slice()
    • 스프레드 연산자

Updated: