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 등...// 배열은 모든 내용이 한 줄에 작성되면 읽기 어려워질 수 있다.// 각 항..
What I Learned Today커스텀 콜백이란 사용자가 직접 정의한 콜백 함수를 말한다.const button1 = document.querySelector('.button-1')const handleActive = () => { button1.classList.add('is-active')}const handleInactive = () => { button1.classList.remove('is-active')}mouseenter(button1, handleActive)mouseleave(button1, handleInactive)// --------------------------------------------------------------------------click(document...
What I Learned TodayJS에서 이벤트는 어떤 일이 발생했음을 알려준다.사용자가 무언가를 클릭(click)하면 클릭 이벤트가 발생사용자가 키보드의 키(key)를 누르면 키보드 이벤트가 발생이 외에도 다양한 이벤트가 있다.이벤트를 수신하려면 이벤트 리스너가 필요하다.요소에 발생한 이벤트를 수신하기 위해 리스너를 추가할 수 있다.element.addEventListener('type', () => {})// type은 이벤트의 타입을 말한다.// () => {} 함수는 이벤트가 발생할 때 마다 호출된다. 클릭 이벤트클릭 가능한 버튼 요소저런 마크업이 있다고 가정해보자. 버튼을 클릭하면 인터렉션이 동작하도록 하고싶다면const button = document.querySelector('button..
What I Learned Today부정 연산자부정 연산자는 참인 값과 거짓인 값을 뒤집는다.기호는 "!" 를 사용하고 결과는 이렇다.!참 -> 거짓 / !거짓 -> 참부정 연산자를 사용하면 조건이 거짓일 때 실행되도록 할 수 있다.이중 부정은 참을 참으로 변경한다.Boolean() 함수를 대신하여 사용할 수 있다.기호는 "!!" 를 사용하고 결과는 이렇다.!!참 -> 참 / !!거짓 -> 거짓 Undefined는 값이 없음을 나타내는 값이다.무언가 명시적으로 정의되지 않았을 때 값이 없다고 한다.변수를 선언했지만 값을 할당하지 않았을 때 undefined라고 나온다.또한 값을 반환하지 않는 함수가 기본으로 반환하는 값도 undefined다.Null은 빈 상태를 나타내는 값이다.개발자는 명시적으로 값이 ..
What I Learned Today오늘은 객체, 조건문, 객체 비교에 대해 배웠다.JS에는 객체가 존재한다.객체 : 키(key) - 값(value) 쌍을 표현하는 데이터중괄호 안에 key-value 쌍을 작성하여 객체를 생성할 수 있다.// -------------------------------// 객체 타입(Object Types, 복잡)// -------------------------------Object - {}Function - () => {}Array - []// -------------------------------// JavaScript 객체(Object)// -------------------------------// 객체 정의// 객체 리터럴을 사용해 객체 정의 (쉬운 방법)con..
What I Learned Today오늘은 반환문, 호이스팅, 다양한 함수 선언 방법을 배웠다.그리고 실습도 해보았다. JS에서 함수를 실행하면 결과 값을 반환하는데 이때 return 키워드를 사용한다.// -------------------------------// console.log() vs 함수의 return// -------------------------------// return을 하지 않는다면 사용자가 보는 화면에 보여줄 수 없다.// console.log는 단지 개발자가 보기 위함이다.function 곱하기(숫자1, 숫자2) { let 결과값 = 숫자1 * 숫자2; // 계산된 값 // console.log(결과값); // return 결과값;} 스코프와 호이스트스..
What I Learned Today오전에는 JS에서의 주석과 세미콜론, 타입에 대해 배웠다. JS에서의 주석은 한 줄 주석과 여러 줄 주석을 사용한다.// 한 줄 주석/*어려줄주석*/ JS는 세미콜론을 자동으로 삽입(ASI)한다. 따라서 세미콜론을 추가하는 것은 선택이다.하지만 세미콜론을 사용한다면 고려할 사항이 많다.세미콜론을 사용하지 않는다면 단순한 규칙 하나만 기억하면 된다.절대 [, (, ' 으로 줄을 시작하지 말자.[, (, ' 으로 줄을 시작해야 한다면 줄 앞에 세미콜론을 하나 붙여준다.린터(Linter)를 사용하면 더 이상 걱정할 것이 없다. JS의 타입/*JS의 다양한 타입기본(원시, Primitives) 타입(유형)문자열(String) 유형숫자(Number) 유형불리언(Boolean) ..
