220416

🌽KEEP

• console.log를 이용한 Todo List 만들기
  

  • 설명을 듣기 전에 강의 예제를 미리 혼자 만들어 보았다. 조건문과 반복문에 익숙해지는 좋은 기회인 듯.

  • 나는 배열 안의 데이터를 인덱스와 함께 출력할 때

            for (const [key, value] of Object.entries(todoArr)) {
    
             console.log(`${key}: ${value}`);
    
             }

    단순한 for문은 이전에도 써봐서 새롭게 for ... of문과 Object.entries()를 썼는데,

            for (let i = 0; i < todoArr.length; i++) {
    
             console.log(`${i}: ${todoArr[i]}`;
    
             }

    그냥 for문을 쓰면 이렇게 된다. 한눈에 이해하기에는 for문이 단순해서 더 나은 것 같다.

  • deleteNum 부분이 숫자가 아니면 delete가 되지 않는 코드를 짜지 않았다!

            deleteNum = parseInt(prompt("Enter index of todo to remove"));
    
             if (!isNaN(deleteNum)) {
             todoArr.splice(deleteNum, 1);
             console.log("Todo removed");
    
             } else {
             console.log("That's not an Index!");
             }

    parseInt를 써서 숫자인지 판별한 뒤, NaN이 아닐 때만 delete를 진행하려면 이렇게 짜면 될 듯.

• Landing page 만들기

  • 처음으로 CSS에 전역 변수를 선언해서 만들었다. 항상 콘솔창을 볼 때마다 이게 뭐지 싶었던 :root에 속성을 지정한 다음, font-family: var(--body-font); 같은 형태로 적용하면 된다. 한 번 저장해 놓고 템플릿처럼 쓰면 좋을 것 같다.
  • VSCode Emmet으로 class를 여러 개 넣고 싶을 때는 온점으로 구분한다. div.red.yellow라고 입력하면 <div class="red yellow"></div>가 자동 생성된다.
  • font awesome 아이콘이 자꾸 깨져서 참고 영상에 나온대로 Remix icon을 써보았다. 세상에는 정말 좋은 라이브러리들이 많다는 걸 느꼈다.
  • CSS 작성할 때 부분별로 주석처리해서 구분하면 한결 보기 편할 듯.
  • Flex box에 row-gap이라는 속성이 있었다! 말 그대로 row끼리의 간격을 조절할 수 있다. 요소에 margin이나 padding 부여할 필요가 없겠군.
  • 영상에 텍스트에 그래디언트를 넣는 방법이 나오는데, 구글링을 해보니 background-clip: text를 지정해서 배경을 텍스트에만 적용시킨 후 텍스트 색상을 투명으로 바꿔서 배경만 보이도록 만드는 원리였다. 그런데 왜 -webkit-background-clip 속성이 없으면 제대로 적용이 안 되는지는 좀 더 찾아봐야할 듯하다. 이게 없으면 크롬, 사파리, 삼성 인터넷 등에서는 적용이 안 되는 건가?

🌽TRY

• 내비게이션 바가 있는 상태에서 postion: sticky를 쓸 때는 top 잘 확인하기
  • 내비게이션 바에 가려져서 sticky가 적용 안 된 것처럼 보이는 바람에 한 시간 동안 헤매지 말기...^^