strawberry fields

제목을 간단 명료하게 쓰기도 어려운.. "img src 가 아직 없을 때 화면 비워 놓기" .. 이미지 파일을 업로드 하는 코드를 구현하였는데 파일을 선택하기 전 상태일 때 아래와 같은 그림이 계속 떠 있었다. 이미지가 에러 뜰 때 자주봤던 그림인 것 같아서 너무 거슬렸당.. 어떻게 지우지? 해서 여러 방법을 찾아보았다. 아직 코딩 초보초보인 나는 이런거 찾는데도 2시간 정도를 허비한다.. ^^ .. JavaScript 코드로 img src = "" 빈칸일 때 어쩌구 저쩌구 이런 방법도 있는듯 했는데 스택오버플로우에서 정말 명쾌한 방법을 찾아냈다 img[src=""] { display: none; } 너무 짧고 간단하고 복잡하지 않게 단 한줄의 코드로 보기 싫었던 쬐그만 이미지를 지워주기 완료! 헤헤

자바스크립트로 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..

useRoutes() may be used only in the context of a component. 오류를 직역하자면.. 'useRoutes'는 로 감싸야 한다는 뜻 import { Route, Routes } from "react-router-dom"; import Issue from "./pages/Issue"; function App() { return ( ); } 처음에 오류가 났던 코드이고 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Issue from "./pages/Issue"; function App() { return ( ); } import에 'BrowserRouter as Ro..

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

♦️ 코딩테스트를 조금씩 풀다보니 for each 에 대해 알면 좋을 것 같아서 공부해 보았다. for each는 for 문과 마찬가지로 반복적인 기능을 수행할 때 사용한다. 하지만 for문 처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다. forEach 기본적인 forEach 사용법은 아래와 같다. const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.forEach(function(element) { console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); arr 객체의 요소들이 callback 함수에 의해 순서대로 호출되는 모습 ! for문에 비해 조금 더 깔끔하..

♦️ 어떤 배열에 있는 모든 요소들의 값을 변경하여 새로운 배열을 써야 할 때가 있다. 이 때 루프를 사용하여 배열에 대해 수동으로 반벅을 처리하는 대신, 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)가 있다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저정된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러개의 세션 스토리지에 데어티가 서로 격리 되어 자장되며 각 탭이..

가변적으로 변하는 페이지나 반응형 사이트를 만들 때, width/ height 값을 주기 까다로운 경우에 사용하면 좋은 calc() 함수 calc() 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다 ! 전체 너비를 3등분 하고 싶은 경우 전체 너비에서 중간 60px만 띄우고 싶은 경우 위 경우 말고도 사칙연산을 이용하여 width, height, font-size, margin, padding 등등으 값을 조정하거나 각도, 수치, 변형등에도 사용할 수 있다 calc() 함수의 특징 🍞 사칙연산과 마찬가지로 곱하기, 나누기가 먼저 연산된다. 🍞 +와 - 연산자는 좌우에 공백이 있어야 한다. calc (50% -8px)은 백분율 값과 음수로 해석하여 유효하지 않음 🍞 *와 / 연산자는 공백을 ..

지난주 코딩테스를 풀다가 공부하게 된 split() 함수 (tmi..) .split() 은 문자열을 분할하는 메서드이다 아래 세가지 문법으로 사용할 수 있는데, separator에는 분할의 기준을 넣고(예를 들면 쉼표 등등) limit에는 최대 분할 개수를 정하여 넣는다. separator/limit은 모두 필수사항이 아님 ✔️ split() ✔️ split(separator) ✔️ split(separator, limit) 예제를 확인해 볼게요 1. 파라미터를 입력하지 않을 경우 파라미터로 아무것도 전달하지 않으면 문자열 전체를 하나의 배열에 담아서 리턴한다 이때 배열의 길이는 1이다 2. separator = " " (빈배열)로 입력할 경우 문자열을 잘라서 각각 잘라진 조각들을 배열에 저장하여 리턴한..