Today Hailie Learned

CSS 1. 배경화면에 이미지 넣고, 꽉찬 설정으로 하기 background-size: cover; background-size: auto; 2. 바디의 모든 설정 가운데로 설정하기 body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } 3. transform 요소 ✔️ rotate 회전 중심, 원점을 지정하기 transform-origin: 100% ➥ transform 에서 rotate(), skew() 등 회전, 변형 속성 사용하기 전에 설정해야한다. 백분율(%) 0% left 0% top 50% center 100% right 100% bottom ✔️ 이미지 회전 시키기 ..

1. 오디오, 비디오 재생하기 ✔️ html에서 오디오를 연결할 때는 태그를 쓰고 src로 오디오 소스를 지정한다. ✔️ 그리고 이를 플레이 시킬때는 .play()를 사용한다. audio.play(); ✔️ 오디오, 비디오 일시정지 시키기 audio.pause(); 2. 오디오, 비디오 재생 시점 설정하기 audio.currentTime = 0; ➥ 초 단위이고, 0 값인 경우 처음부터 음악을 재생한다. 3. 명시된 클래스 추가, 제거하는 메서드 ✔️ 명시된 클래스 추가하기 샐렉터.classList.add("playing"); ➥ playing이라는 클래스를 추가하기 ✔️ 명시된 클래스 제거하기 샐렉터.classList.remove("playing"); ✔️ 클래스가 있으면 제거하고 false를 반환하고..

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자! 동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. .form-control.invalid input { border-color: red; background: rgb(246, 197, 197); } .form-control.invalid label { color: red; } 결과 입력없이 버튼을 클릭하면 글씨와 인풋창이 css 효과대로 스타일이 변경됩니다. 유저가 바로 인풋에 입력을 하면 원래대로 돌아옵니다. 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

day 1 ~ 7에 맞게 Monday ~ Friday로 나오는 if문은 아래와 같다. const day =3; if(day === 1) { console.log('Monday') } else if(day == 2) { console.log('Tuesday') }else if(day == 3) { console.log('Wednesday') } else if(day == 4) { console.log('Thursday') } else if(day == 5) { console.log('Friday') } // 결과값 'Wednesday' 👇 위의 예시를 switch로 바꾸어보자! const day = 3; switch(day) { case 1: console.log('Monday'); case 2: cons..

토이 프로젝트에서 더미 데이트를 작성했습니다. 더미데이터는 배열 안의 객체의 나열로 만들었습니다. 지금은 id의 숫자를 기준으로 오름차순으로 화면에 나타나는데, 저는 내림차순으로 화면에 나오게 하고 싶었습니다. 실습 const arr = [{p:1},{p:2},{p:3},{p:4},{p:5}] arr.sort((f,s) => { const idF = f.p; const idS = s.p; if(idF > idS) { return -1; } if(idF < idS) { return 1; } return 0; } ) 결과 [ { p: 5 }, { p: 4 }, { p: 3 }, { p: 2 }, { p: 1 } ] 실제 코드 function Data({ data, setData }) { // dummydat..

fontawesome 의 공식 문서를 참고했습니다. 👇리액트에서 fontawesome 사용하기👇 https://fontawesome.com/docs/web/use-with/react/ 1. 각종 패키지를 install 을 해줍니다. npm i --save @fortawesome/fontawesome-svg-core # Free icons styles npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons # Pro icons styles npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-sv..

배열.find()는 반복문이지만, 원하는 것을 찾으면 (return이 true) 찾아준다. (첫번째만!!) let cities = ['seoul', 'busan', 'incheon', 'ulsan', 'jeju']; let city = 'jeju'; let chars = 4; let chars3 = 7; let match = cities.find(item => { if(city === item) return true; }); console.log(match); // 결과값 // 'jeju' let match2 = cities.find(item => { if(item.length === chars) return true }) console.log(match2) // 결과값 // 'jeju' let matc..

let user = {name: 'Mike', age: 30}; let {name, age} = user; console.log(name); // 'Mike' console.log(age); // 30 위 식에서 let {name, age} = user; 는 let name = user.name; let age = user.age; 와 같다. ⭐️순서를 바꾸어도 동일하게 작동한다. (배열 구조분해와 다른점)⭐️ let user = {name: 'Mike', age: 30}; let {age, name} = user; console.log(name); // 'Mike' console.log(age); // 30 ⭐️프로퍼티의 키 값을 무조건 동일하게 사용할 필요없다. ⭐️ ⭐️⭐️변수 이름을 바꿀 수 있다..

JSON이란? JSON은 JavaScript Object Notation의 줄임말로, 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가정할 때, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적으로 읽을 수 있는 형태여야 한다. 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다. JavaScript에서 객체를 문자열로 변환하기위해 메서드(message.toString())나 형변환(String(message))을 시도하면, [object Object] ..

1. reduce 사용하기 // For large data, it's better to use reduce. Supose arr has a large data in this case: const arr = [1, 5, 3, 5, 2]; const max = arr.reduce((a, b) => { return Math.max(a, b) }); // console.log(max); // 5 2. Math.max.apply 사용하기 // For arrays with relatively few elements you can use apply: const arr = [1, 5, 3, 5, 2]; const max = Math.max.apply(null, arr); //console.log(max); //5 3...