💡 1/8 - CSS(animation), JS(~함수)

[막혔던 것]

실습하면서 막혔던 것들을 정리했다.

1. animation 실습 - 웹 페이지 크기 상관없이 가장 자리를 무한히 움직이는 공 만들기
🤮 뷰포트 기준으로 만드는데 @keyframes에서 transform을 어떻게 설정해야 할 지 모르겠다.
=> 4면을 나눠서 이동해야하기 때문에 "0%(100%), 25%, 50%, 75%"로 구분점을 잡고 출발점에서는 transform: translate(0, 0);으로 시작!
뷰포트 안에서 움직이는 것이라서 100vw, 100vh(뷰포트 100%)를 기준으로 잡고 이동, 화면을 넘어가는 것은 단위가 다르기 때문에 calc()함수로 계산 했다.
ex) transform: translate(calc(100vw - 100px), calc(100vh - 100px));
✔ calc() 사용 시, 연산자 앞뒤로 스페이스가 있어야 하는 것 같다.

2. animation 실습 - 글자 움직이기
🤮 글자가 화면 안으로 들어오면서 줄 수가 변경되어야 하는데 한 뭉텅이로 들어옴 ㅠ
=> 처음에는 @keyframes에 시작점과 끝점의 위치만 지정해주고 width를 설정해주지 않아서 한 뭉탱이로 나타났던 것이다!
구간별로 width를 지정해줬더니 스르륵 들어왔다.
위치 지정은 transform: translate((n)vh, 0), margin-left: (n)% 둘 다 가능했다.

📍 CSS(transition & animation)

[📝 학습한 내용 요약]

• Transition
  : 요소의 전환(시작과 끝) 효과를 지정하는 (단축)속성
  transition: property duration(필수) triming-function delay

  [Tip]

   transition이 먹는 효과가 있고, 아닌 효과가 있음
   opacity: 0;은 transition 적용 가능해서 서서히 사라짐
   하지만 visibility: hidden;, display: none;은 transition 적용 안됨

• Animation
  @keyframes
  • ease(기본값)
  • linear : 등속 운동
  • ease-in
  • ease-out : 점점 빨라짐?

transition vs animation

• transition
  • 전환될 스타일을 지정할 수 있음
  • hover나 onClick같은 "이벤트"에 의해 발생
• animation
  • 중간 스텝을 지정해 보다 세밀한 스타일 전환 가능
  • 시작, 반복, 정지 동작 가능
  • @keyframes 로 이루어짐

📍 JS(~함수)

자바스크립트는 첫 수업이었어서 표기법부터 자료형, 변수, 연산자, 함수 순으로 수업이 이루어졌다.
이전에 여러번 학습한 경험이 있지만 가장 기초가 되는 부분이라 다시 한번 내용을 복습한다 생각하고 열심히 수업을 들었다.
여기에는 좀 더 기억하고 싶은 내용만 추려서 작성할 예정이다.

[📝 학습한 내용 요약]

• 표기법

  • HTML, CSS : kebab-case, snake_case
  • JS : camelCase(변수, 함수), PascalCase(클래스, 생성자)

• 자료형(Data Type)

  • undefined, null 둘 다 값이 없지만, null은 "의도적"으로 비워둔 것
  • Array는 index가 있어서 순서가 있지만, Object는 순서가 없고 key 이름으로 선택 및 구분 가능
  • 명시적 형변환: 자동 형변환에 의존하지 않고 개발자가 직접 형 변환을 시키는 것!
  ex) `String()` 문자로 변환, `Number()` 숫자로 변환

• 변수(Argument)
  var 사용하지 않는 이유

  • var는 재선언 가능 - 맨 마지막 선언으로 덮여짐(중복 발생)
  • 변수가 {블록 단위}에서 끝나는 것이 아니라, 자기 맘대로 전역으로 돌아다니고 영향력을 행사 -> 의도치 않은 문제 발생!

const는 선언과 동시에 초기화 해줘야 한다. 그렇지 않으면 오류 발생!

• 연산자(Operator)

  • **(거듭제곱) ex) 2 ** 3 = 8, 3 ** 3 = 27
  • 비교 연산자(||, &&, !)
  • - || (OR) : 첫 번째 ture를 발견하는 즉시 평가를 멈춤 return true
  • - &&(AND) : 첫 번째 false를 발견하는 즉시 평가를 멈춤 return false

  따라서,
  || (OR 연산자는 true 일 확률이 높은 조건을 앞쪽에 배치)
  && (AND 연산자는 false일 확률이 높은 조건을 앞쪽에 배치)

• 함수(Function)
  : 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

이제 대표적인 프론트엔드의 프로그래밍 언어인 자바스크립트에 들어가게 되었다.
앞으로 기초를 탄탄히 쌓아서 자바스크립트를 잘 하는 개발자가 되고싶다

💡 1/10 - JS(조건문, 반복문)

이날은 조건문, 반복문, 내장 메소드, 내장 객체와 객체 생성 방법에 대해 배웠다.
내장 메소드 중 자주 쓰는것들도 있었지만 익숙하지 않은 메소드들도 있었다. 특히 실습문제에서 .filter() 메소드로 두 배열의 동일한 요소를 가지는 배열과, 서로 다른 요소만 가지는 배열을 만드는 문제에서 좀 헤맸었다.

💡 1/12 - JS(DOM)

DOM 조작을 통해 브라우저에 나타나는 동작과 기능을 제어하는 것에 대해 학습했다.
전에 공부할 때 사실 전혀 이해를 못했던 부분인데, 무슨 역할인지 이번 기회에 알게되어서 재미있게 수업을 들을 수 있었다.(잘하는건 별개임;)

HTMLCollection 객체와 NodeList 객체의 차이

• HTMLCollection
  : 요소들로만 이루어진 것

  • 태그 요소만 포함
  • 자식 요소 노드에 접근할 때, 인덱스 방식과 namedItem 메소드 방식 사용
  • 동적이다. DOM을 다루면서 새로운 요소가 추가됐을 때, 해당 요소도 가져올 수 있다.
  • 실제 배열은 아니지만, 배열과 유사한 객체 (반복문 사용 가능)

• NodeList
  : 요소 + 텍스트 값으로 이루어진 것

  • 태그와 텍스트 노드 등을 모두 포함
  • 인덱스로만 접근 가능
  • 새로 추가된 요소를 가져올 수 없다.(요소 추가할 경우 HTMLCollection 사용해야 함)
  • 배열 형태로 쓸 수 있다.(NodeList만의 메소드 .forEach() 등이 있음)