strawberry fields

API, REST API, RESTful API 등등 여기저기서 줍줍하여 들어보긴 했지만, 명확하게 이거이거에요 라고 설명하기 어려웠던 부분이에요 (저에겐^^) 🍎 API란? '한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법' 이라고 할 수 있죠 Application Programming Interface의 약자인데 풀어써도 어려운게 함정.. 손님-점원-요리사로 많이들 비유하시는데, 손님이 자리에 앉아서 점원에게 주문을 하면 점원은 주문내역을 요리사에게 전달하죠? 요리가 끝나면 점원이 다시 손님에게 음식을 가져다 주고요. 이럴 때 중간 매개체 역할을 하는 점원이 'API'라고 할 수 있습니다. 즉 손님과 요리사를 서버라고 한다면 API는 중간에서 양쪽 서버를 연결해 주는거죠 🍎 REST란?..

HTTP Method란 클라이언트가 서버로 요청을 보내는 방법인데요, 쉽게 풀어서 이야기 하자면 유저가 어떤 홈페이지로 이동하기 위해 URL을 주소창에 작성하고 엔터를 누르면 페이지로 이동합니다. 로그인을 위해 아이디와 패스워드를 입력하고 엔터를 치면 다음 페이지로 넘어가는 것처럼요. 이럴 때 서버 내부에서는 클라이언트의 요청에 응답하기 위해 처리를 해주어야 하는데, GET과 POST가 그 중 하나라고 할 수 있습니다. 🍏 GET 과 POST의 차이점 - 단어의 뜻 그대로 GET은 가져오다, POST는 제출하다, 발송하다의 개념으로 받아들이면 조금 쉽습니다. 즉 GET은 말 그대로 우리가 필요한 정보를 얻기위해 무언가를 가져오는(GET) 상황과 유사하고, POST는 우리가 어떤 서류나 문서를 제출/ 수행..

제목을 간단 명료하게 쓰기도 어려운.. "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)가 있다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저정된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러개의 세션 스토리지에 데어티가 서로 격리 되어 자장되며 각 탭이..