Today Hailie Learned

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자! 동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. .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...

🤔nvm이란? nvm(Node Version Manager)= Node.js 를 설치하는 툴이자, Node.js의 다양한 버전을 관리하는 프로그램 (Node.js의 다양한 버전을 쉽게 설치할 수 있다. ) nvm을 왜 쓰지? OS에 특정 버젼의 Node.js 를 설치하면, 여러 버전의 Node.js 를 설치해야 할 경우에 대응을 할 수가 없게 된다. 그렇기 때문에 먼저 nvm 을 설치하고, 설치한 nvm 을 통하여 원하는 특정 버젼의 Node.js 를 원하는 조건에 따라 복수로 설치하는 방법이 나중을 위해서는 더 좋은 방법이 된다. ⭕️ nvm 설치 후 ➝ Node.js 설치 후➝ npm 설치! 🤔npm이란? npm(Node Package Manager) = Node.js 로 개발된 프로그램을(npm 패..

Node는 무엇일까? JavaScript의 런타임이다. 우리는 JavaScript을 따로 설치하지 않는다. 대신 일정한 사양을 갖추어야 한다. ECMAScript 사양을 갖추면 브라우저가 JavaScript를 실행한다! 오랫동안 브라우저는 JavaScript를 작성하고 실행할 수 있는 유일한 장소였다. 그래서 JavaScript는 웹 애플리케이션에 적합하다. Node는 브라우저 밖에서 작동되는 JavaScript의 실행 환경이다. 이제 JavaScript 코드를 브라우저를 열지 않고, 심지어 브라우저가 없어도 실행할 수 있다. (그렇다고 똑같은 일을 할 수 있는 건 아니다. ) (-> 브라우저가 없으면 문서 객체 모델을 쓸 수 없고, 사용자의 입력, 이벤트 등을 사용할 수 없다. ) 그래도 Node는 정..