What I Learned Today삼항 연산자 : if-else 문을 사용하는 조건문을 더 간단하게 작성할 수 있다.삼항 연산자 식은 간단한 조건 처리에는 매우 유용하다.하지만 중첩이 깊어질수록 가독성이 떨어지기 때문에 복잡한 조건은 if-else 문을 사용하는 것이 좋다.// 삼항 연산자의 기본 구조조건 ? 조건이 참인 경우 실행 : 조건이 거짓인 경우 실행// exconst bool = true;// 한 줄 작성bool ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') // 조건이 참입니다.// 여러 줄 작성bool ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') // 더 복잡한 조건const ..
What I Learned TodayGSAP이란?GreenSock Animation Platform의 약자로 웹 애니메이션을 위한 자바스크립트 라이브러리다.먼저 GSAP를 사용하기 위해서는 HTML 파일에 라이브러리를 추가해야한다. GSAP은 CSS 속성, SVG, Canvas 등 거의 모든 것을 애니메이션 할 수 있다. 애니메이션을 만드는 방법// 트윈 애니메이션 : 싱을 애니메이션을 말한다.// 트윈 애니메이션의 메서드 (네 가지 유형)gsap.to("target", vars) // 요소의 현재 상태에서 트윈에 정의된 값까지 애니메이션gsap.from("target", vars) // 지정한 값에서 시작해 요소의 현재 상태로 애니메이션gsap.fromTo("target", vars) // 시작값과 종..
What I Learned Today웹에서 애니메이션을 만드는 방법CSS 트렌지션CSS 애니메이션JS 애니메이션 CSS 트렌지션 : 어떤 속성 값이 다른 값으로 전환될 때 발생한다..element { transition: 속성 지속시간 타이밍함수 지연시간; /* 함축 표현식 */ /* transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay; */} 트렌지션은 속성 값이 변경되면 트리거된다.```css.element { background-color: #42b883; transition: background-color ..
What I Learned Today브라우저의 기본 작동을 방지해야 할 경우에는 어떻게 해야할까.이벤트 객체의 preventDefault() 메서드를 실행해야 한다.이때 브라우저는 이벤트 객체의 defaultPrevented 속성을 true로 바꿔준다.요소.addEventListener('click', (e) => { e.preventDefault() console.log(e.defaultPrevented) // true}) 이벤트 전파는 세가지 단계가 순차적으로 발생한다. (캡쳐링 -> 타겟 -> 버블링)이벤트 버블링 - 자식에서 부모로 올라가는 형태로 이벤트가 전파된다. (window까지)대부분의 이벤트는 버블링으로 처리된다.그래서 이벤트가 있는 요소를 클릭하면 부모의 요소까지 이벤트가 전파된다...
What I Learned Today오늘은 캐러셀 (Carousel)에 대해 실습을 해보았다.캐러셀 : 가로 방향으로 배치된 콘텐츠 목록을 포함한다.캐러셀의 네 가지 요소콘텐츠 영역 (Contents)이전 탐색 버튼 (Previous Button)다음 탐색 버튼 (Next Button)인디케이터 (Indicators, dots) 이전에 배운 것들로 캐러셀을 구현했다.querySelector를 사용해서 각 요소들을 뽑았다.eventListener를 통해 이벤트를 제어했으며getComputedStyle, style, setProperty, getPropertyValue 등을 사용해서 스타일을 설정했다.그리고 다양한 DOM 탐색 기법을 사용하여 요소 간의 연결을 도왔다. 그리고 키보드 접근성을 위해서 sele..
What I Learned Today때로는 요소의 크키, 위치 정보를 알아야 할 때가 있다.또는 문서 요소에서 어디에 위치해있는지 알아야 할 때도 있다.이런 경우 getBoundingClientRect() 메서드를 사용한다.getBoundingClientRect() 메서드는 뷰포트에서 요소까지 거리를 픽셀 단위로 변환해준다.// 이런식으로 사용하면 된다.const DOMRect = 요소.getBoundingClientRect()DOMRect.가져올정보 DOM 탐색 (Traversal)은 인접한 요소에서 하나의 다른 요소를 선택하는 것이다.DOM 탐색의 방법아래로 탐색 (자식 또는 자손 요소)querySelector() - 특정 요소에서 아래쪽 방향으로 탐색querySelectorAll() - 특정 요소에..
What I Learned Today코드가 복잡한 JS에서는 유틸리티 함수를 만들어두면 매우 편하다.// CSS 속성 이름을 전달하면 CSS 스타일 값을 반환해주는 함수function getStyle(element, propertyName, pseudoElement) { const elementStyles = getComputedStyle(element, pseudoElement) const propertyValue = elementStyles.getPropertyValue(propertyName) return propertyValue}// CSS 스타일을 설정하는 함수function setStyle(element, propertyName, propertyValue) { // 요소에 스타일 적용(..
What I Learned Today오늘은 아코디언을 실습해보며 루프를 연습했다.아코디언 : 정보를 펼치거나 숨길 수 있는 UI 컴포넌트다.닫혀있을 땐 헤더만 보이고 열면 내용이 표시된다. 이런 마크업이 있을때 치즈 치즈는 우유에서 유래한 식품으로, 우유 단백질인 카제인을 ..
What I Learned TodayJS에서 루프문을 알지 못한다면 손과 눈은 매우 바쁠것이다.// 루프를 사용하지 않을 때 100번 움직이기function move() { ...}move()move()...move()하지만 루프문을 사용한다면 매우 간단하게 사용할 수 있다. 루프란?명령어를 프로그램 내에서 일정하게 반복해서 실행하는 것을 말한다.루프는 조건이 충족될 때까지 반복하므로 프로그래밍 작업의 효율성을 높인다.while, do while, for 과 같은 다양한 유형의 루프가 있고 각자 고유한 용도가 있다. while 문// 조건이 참일 동안 반복적으로 블록 내부의 코드가 실행된다.// 하지만 조건이 계속 참이면 무한 루프가 되어버린다.while (조건) { ...}// 특정 상황에서 코드를 건..
What I Learned Today오늘은 배열과 배열 메서드에 대해 배우고 실습했다. JS에서 목록을 나타내는 데이터 타입을 배열이라고 한다.배열은 목록과 유사하게 여러 정보를 저장할 수 있는 특별한 객체를 말한다.// 배열을 생성하는 정석적인 방법. (new 호출 생략 가능)const arrayName = new Array("item1", "item2", ...)// 배열을 가장 쉽게 생성하려면 대괄호([])를 사용한다.const arrayName = ["item1", "item2", ...]// 배열은 모든 유효한 JS 값을 포함할 수 있다.// string, number, boolean, object, array 등...// 배열은 모든 내용이 한 줄에 작성되면 읽기 어려워질 수 있다.// 각 항..
