Front End/Javascript (53) 썸네일형 리스트형 [JavaScript] localforage를 이용한 CRUD(저장/읽기/수정/삭제) html> lang="en"> type="hidden" id="id" value="0" /> type="text" id="comment" placeholder="저장할 내용을 입력하세요" /> onclick="updateComment()" id="btn">저장하기 onclick="resetComment()" id="resetBtn">취소하기 id="comments"> [JavaScript] localStorage를 이용한 CRUD(저장/읽기/수정/삭제) 로컬 저장소를 이용하여 데이터를 저장하고/ 읽어보고/수정하고/삭제하고를 수행행 보겠습니다.데이터는 계속 유지가 됩니다. 브라우져를 다시 열어도 다른 부라우져를 써도 내일도 모레도 계속 유지 됩니다. html> lang="en"> type="hidden" id="id" value="0" /> type="text" id="comment" placeholder="저장할 내용을 입력하세요" /> onclick="updateComment()" id="btn">저장하기 onclick="resetComment()" id="resetBtn">취소하기 id="comments"> 초기화면입니다. 내용을 입력하고 "저장하기"버튼을 누르면 저장이 됩니다. "수정" 버튼을 누르면 폼에.. [JavaScript] 웹 스토리지(localStorage, sessionStorage) 사용해 보기 웹 스토리지 객체(web storage object)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다.웹 스토리지 객체(web storage object)는 브라우저 내에 키/값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요? 그 이유는 다음과 같습니다.쿠키는 네트워크 요청 시 서버로 전송되지만 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 그렇기 때문에 쿠키보다 더 많.. [JavaScript] localforage 사용해 보기 브라우저에서 데이터를 저장하는 방법에는 여러가지가 존재 합니다. 쿠키, 웹 storage, indexedDB 등을 이용하는 방법입니다.사용자의 컴퓨터에 구조화된 방식으로 데이터를 저장할 수 있는 Web SQL Database API (내부적으로는 SQLite 데이터베이스 엔진을 기반으로 함)는 2009년 4월에 도입되었으며 2010년 11월에 폐기되었습니다. 하지만 웹 storage는 문자열만 처리되고 느리며 Blob(대형 이진 객체, Binary Large Object)를 처리할 수 없습니다. 또한 indexedDB와 WebSQL은 그 API가 복잡하여 배워 사용하기가 쉽지 않습니다. 그리고 모든 브라우져가 지원하지도 않습니다. 그래서 모질라 에서는 로컬포리지(localForage)라 부르는 라이브러.. [JavaScript] SPA/MPA & SSR/CSR SPA (Single Page Application) : 1개의 페이지로 구성된 ApplicationMPA(Multiple Page Application) : 여러개의 페이지로 구성된 Application SSR(Server Side Application) : 서버가 랜더링을 담당 CSR(Client Side Rendering) : 클라이언트가 렌더링을 담당 MPA는 SSR 방식을 사용하고 SPA는 CSR 방식을 사용 MPA(Multiple Page Application)는 각 페이지별로 HTML문서가 따로 존재하여, 페이지를 이동할 때마다 새로운 html 페이지를 서버로 부터 새로 받아와서 매번 새로 렌더링하는 전통적인 웹페이지 구성 방식입니다. SPA(Single Page Application)는 .. [JavaScript] Axios 사용해 보기 Axios AxiosPromise based HTTP client for the browser and node.js Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.axios-http.com 시작하기 | Axios Docs 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그.. [JavaScript] Fetch API 사용해보기 fatch() 함수가 어떤 역활을 하는지 알아보기 전에 일단 예제 하나를 만들어 보고 시작 하겠습니다. 다음은 fatch()를 이용하여 이미지를 받아 화면에 표시한 예제 입니다. html> lang="ko"> src="" class="img" /> href='https://www.pexels.com/ko-kr/photo/669015/'>Pexels Septimiu Lupea님의 사진 F12키를 눌러 개발자 모드의 console 창을 열어 확인한 내용입니다. 이미지 하단에 다운로드하는 링크를 달아보겠습니다.위 html 파일을 수정합니다. html> lang="ko"> src="" class="img" />.. [JavaScript] JSON-SERVER 사용해 보기 json-server란?JSON Server는 JSON 파일을 이용해 모의용 RESTful API 서버 및 DB를 구축할 수 있는 도구입니다.백엔드 API 서버나 DB가 준비되지 않은 상황에서도 프로토타입을 개발하거나 테스트때 사용하면 유용합니다. https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.3, last pu.. 이전 1 2 3 4 ··· 7 다음
