strawberry fields

자바스크립트로 DatePicker 만드는 과제를 하면서 혼자 굉장히 어려움을 겪었는데(?),, 리액트에서는 DatePicker 라이브러리를 사용할 수 있다! good 🕊️ 아래는 공식사이트인데, 조금만 공부해도 손 쉽게 깔끔한 DatePicker를 가져올 수 있음 ! https://reactdatepicker.com/#example-external-form React Datepicker crafted by HackerOne reactdatepicker.com 📝 설치하기 설치는 npm으로 해준다. 설치 후에 package.json 파일을 열어 설치가 잘 되었는지 확인해주기 npm install react-datepicker --save 📝 사용하기 사용법은 정말 간단하다. 공식 사이트를 참고하여 작업하면..

리액트로 무언가를 만들다보니 반복적인 코드가 꽤나 많이 나왔고, 이 코드를 계속 나열하다보니 왕왕초보인 내가 봐도 굉장히 길고 보기만해도 현기증나는^^,, 단순 반복의 코드들이 작성 되어 있었다. 이럴때 자바스크립트 map() 함수를 사용하면 컴포넌트를 더 효율적으로 관리할 수 있다 📝 자바스크립트 배열의 map() 함수 map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 함수이다. 즉, callbackFunction을 실행한 결과를 이용해 새로운 배열을 만들어 낸다. 예제코드 var numbers = [1, 4, 9]; var doubles = numbers.map(function (num) { return num * 2; }); // dou..

♦️ filter는 해석 그대로 걸러주는 역할을 하는 함수이다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하며, 자바스크립트에서 filter는 배열에 사용한다. ✏️ filter란? let array = [3, 5, 1, 11, 0, 15, 'happy']; let result = array.filter((value) => value value..

♦️ 어떤 배열에 있는 모든 요소들의 값을 변경하여 새로운 배열을 써야 할 때가 있다. 이 때 루프를 사용하여 배열에 대해 수동으로 반벅을 처리하는 대신, Array.map() 메소드를 사용하면 된다. 예를 들어 아래와 같은 배열 요소가 있을 때, 각 요소에 3을 곱한 값을 출력한다고 하면 for 루프를 사용하려 할 것이다. 그런데 map() 함수를 사용하면 for 루프를 사용하지 않고도 동일한 결과를 얻어서 출력할 수 있다. let arr = [4, 5, 6, 7]; ✏️ for 루프를 사용한 배열 반복 for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] * 3; } console.log(arr); // [12, 15, 18, 21]; ✏️ map() 함수..

WebStorage란? 데이터를 어딘가에 저장해야 할 때 사용하는 WebStorage. 보통 데이터베이스 서버나 클라우드에 저장하는 경우가 많지만, 저장해야 할 데이터가 별로 중요하지 않거나 유실 되어 상관 없는 데이터일 때 브라우저상에 데이터를 저장한다. 이를 WebStorage 라고 한다. 로컬 스토리지 vs. 세션 스토리지 웹스토리지에는 로컬 스토리지(LocalStorage)와 세션스토리지(sessionStorage)가 있다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저정된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러개의 세션 스토리지에 데어티가 서로 격리 되어 자장되며 각 탭이..