본문 바로가기

Programming/JavaScript

[JavaScript] 리액트에 indexedDB 사용하기 일전에 사이드프로젝트를 진행하면서 로컬스토리지와 세션스토리지 그리고 쿠키를 이용했었고지금도 회사업무를 진행하면서 세션과 로컬스토리지, 쿠키를 이용하고있습니다. 하지만.... 사이드프로젝트를 진행할 당시 뭔가... 뭔가가 부족했었는데...요즘이야 백, 프론트 상관없이 올포지션을 다 다룰수 있어야하지만... 난 아직도 부족하기 때문에백엔드 프로젝트를 혼자서 구현하기가 아직도 버거워요. 그러다가 문득 찾은 것이 indexedDB!!! 이름 그대로 DB이다! mdn web docs 에서는 이렇게 설명하고 있습니다. IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다.. 더보기
[JavaScript] 배열이란?? 1. 배열의 정의 JavaScrtip 에서의 배열(Array)이란 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다. JavaScript 에서 배열의 특징은 다음과 같습니다. 배열(array)요소의 타입은 고정되어 있지 않으므로 같은 배열 안에 있는 배열의 요소들의 타입이 다를 수 있습니다. (ex: [string, string, Number, bool, ...]) 배열 요소의 인덱스가 연속적이지 않아도 되며, 그에 따라 특정 배열 요소가 비어 있을 수도 있습니다. JavaScript에서 배열은 Array 객체로 다뤄집니다. 2. 배열의 생성 JavaScript에서 배.. 더보기
[JavaScript]JS의 Number 속성 소수점 제어 JavaScript에서 Number를 제어하다보면 소수점이 나오는 경우가 있는데 이 때 간단하게 해당하는 소수점을 제어 할 수 있는 객체가 있습니다. - Math 사용 Math.ceil(Number) // 소수점 올림. 정수 반환 Math.floor(Number) // 소수점 버림. 정수 반환 Math.round(Number) // 소수점 반올림. 정수 반환 위와같은 객체를 활용하여 JavaScript의 소수점을 제어할 수 있습니다. - Math.ceil(Number) 사용 먼저 소수점을 올리는 예제를 보겠습니다. const a = 5; const b = 3; const c = 6; const d = 5; console.log(a/b); // 결과 : 1.6666666666666667 console.lo.. 더보기
[JavaScript]Front로 가기위한 나만을 위한 JS 기초다지기-데이터 타입 해당 post 는 모던 자바스크립트 Deep Dive 책에 있는 내용을 인용한 post 입니다. 모던 자바스크립트 Deep Dive / 위키북스 이웅모 지음 숫자 타입 C나 JAVA의 경우 정수(소수점 이하가 없는 숫자), 실수(소수점 이하가 있는 숫자)가 구분되어서 int, long, float, double 등과 같이 다양한 숫자 타입을 제공합니다. 하지만 JavaScript의 경우 독특하게 하나의 숫자타입만 존재합니다. ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따릅니다. 즉 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않습니다. var integer = 10; // 정수 var double = 10.12; // 실수 .. 더보기
[React]React 프로젝트 git에 배포 시 Link _blank React Project 배포 시 react-router-dom React로 포트폴리오를 만들고 git에 배포할 때 react-router-dom 을 사용했을 경우 배포 전 처리할 부분이 아주 약간(?)있었습니다. react-router-dom 내의 기능인 Link 를 통하여 해당 프로젝트의 화면 이동을 구현했다면 BrowserRouter 에 basename={process.env.PUBLIC_URL} 을 추가해야 배포 후 화면이동이 정상적으로 이루어지는 것을 구글링을 통해 알아냈습니다. 혼자서 무턱대고 프로젝트를 진행했다보니 원리도 제대로 파익을 못한 상태로 진행해서 이 부분에 대해서도 상당한 삽질(?)을 거쳐 알아냈습니다… 대충 위의 코드처럼 Route 에 path가 Link 와 일치하는 경우 ele.. 더보기
[JavaScript]변수에 할당 된 데이터 타입 조회 방법 JavaScript 데이터 타입 조회 방법 typeof “조회할 변수명” // 변수에 할당된 값 데이터 타입 체크 방법 var abc; console.log(typeof abc); // undefined; abc = 10; console.log(typeof abc); // number; abc = 'Hello'; console.log(typeof abc); // string; abc = true; console.log(typeof abc); // boolean; abc = null; console.log(typeof abc); // object; abc = Symbol(); console.log(typeof abc); // symbol; abc = {}; console.log(typeof abc); //.. 더보기
[JavaScript]github.io(깃허브를 이용한 페이지)에 카카오맵 API 사용하기 안녕하세요. 사진찍는 초보개발자입니다. 오늘은 간단하게 카카오 API를 이용하여 웹 페이지에 카카오 맵을 띄우는 방법을 소개하겠습니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 먼저 위의 링크로 접속하여 로그인을 해줍니다. (다음 혹은 카카오 계정) 로그인 후 상단의 내 애플리케이션 메뉴로 접속하면 위의 사진과 같은 페이지로 이동합니다. 해당 페이지에서 '애플리케이션 추가하기' 를 눌러줍니다. 해당 팝업에 앱 이름과 사업자명을 입력해준 후(개인 포트폴리용이라 저는 사진과 같이 입력했습니.. 더보기
[이미지 슬라이드] 이미지슬라이드 만들기 See the Pen 포토갤러리 옆 이스토어 by 김기태 (@kkt9102) on CodePen. 라이브러리 이용안하고 일단 인터넷도 찾아보고 기억나는거 다 써봐서... 기본적으로 보이는 이미지에 해당하는 dots 색도 넣어야하고 setTime도 적용해야하고 아직 미흡하다... 더보기

티스토리툴바