전체 글 (8) 썸네일형 리스트형 소플의 처음만난 리액트! 웹 개발자로 취업에 성공했습니다! 하지만 실력은 처참해요.... 업무시간에 테스트 해보고, 적용하고, 집에와서 스터디하고, 다음날 또 적용하고, 테스트해보고 하나씩 하나씩 차근 차근... 항상 마음은 조급해지지만! 그럴수록 차분히 해야겠죠? 시니어 개발자분께서 리액트를 사용하셔서 리액트 공부를 시작하려 했는데! 때마침 좋은 기회로 '소플의 처음만난 리액트'를 접하게 되었습니다 :) 리액트는 페이스북에서 개발되어서 요즘에 정말 방대하게 사용하고 있는 것 같습니다. 그만큼 여러 자료를 찾아볼 수 있지만... 초보인 저에겐 많은 만큼 무엇부터 해야하는지...? 갈 길이 먼데 앞이 캄캄해지는 순간이였어요... 그런데 목차만 보아도 딱 순서대로 촥촥 정리가 되어있는 기분이 들었습니다! 강의와 미니프로젝트까지 역시.. useEffect useEffect useEffect란? : 어떤 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사라질 때) 코드를 실행시킬 수 있다. useEffect는 (콜백함수, 배열)을 인자로 갖는다. : 콜백함수로 실행될 코드를 작성할 수 있다. : 배열은 dependency Array라고하며, 생략할 수 있다. : 배열이 생략되는 경우 Mount, Update, Unmount 상황 모두 코드가 실행된다. : 배열에 요소를 갖는 경우 Mount와 배열 요소의 값이 변할 때 코드가 실행된다. : useEffect ( ( ) => { 실행될 코드 } ) ; : useEffect ( ( ) => { 실행될 코드 } , [ dependency Array] ) ; impor.. useState useState state란? 컴포넌트의 상태를 말한다. fruits라는 state가 있다면 apple, banana, grape, orange 등을 가질 수 있다. javascript의 변수가 아닌 useState를 사용하는 이유 : react에서 컴포넌트 상태에 따라 UI를 다시 구성한다. 변수는 변경되어도 컴포넌트에 영향을 주지 않는다. 하지만 useState는 UI가 다시 렌더링 된다. 즉, 값이 변함에 따라 화면이 값을 참조하여 다시 그려지는 경우 useState를 사용할 수 있다. import { useState } from 'react' ; 로 사용을 알린다. useState 선언 const [ state, setState ] = useState(value); useState는 위와 같이 선.. Javascript Blob Blob Javascript 네이티브 형태가 아닌 데이터를 이용할 수 있게 한다. 파일을 Blob에 기반한 인터페이스로 이용한다? Blob 만들기 Blob( ) 매개변수로 제공한 배열의 모든 데이터를 합친 새로운 Blob 객체를 반환한다. const blobImage = new Blob( 배열 , {type : '타입'}); Blob 속성 Blob.prototype.size - 객체가 담은 데이터의 바이트 단위의 사이즈 Blob.prototype.type - 객체가 담은 데이터의 MIME 유형을 나타내는 문자열. 유형을 알 수 없는 경우 빈 문자열을 반환한다. Blob 메서드 Blob.prototype.arrayBuffer() - Blob의 전체 내용을 이진 데이터로 담은 ArrayBuffer로 이행하는.. IndexedDB 예제 IndexedDB 종합 예제 코드펜 예제 See the Pen IndexedDB Sample by shinhs9423 (@shinhs9423) on CodePen. IndexedDB 예제 분석 IndexedDB 사용하기 let db; // DB를 전역에서 사용하기 위한 변수 const DBRequest = indexedDB.open('DataBaseName',1); // 식별자 = indexedDB.open('DB이름', 버전); // 버전으로 addEventListener('upgradeneeded',function(event){ });를 실행시킬 수 있다. // 브라우저가 리로드 되면서 버전을 확인하고, 버전이 같지 않을때 실행된다. DBRequest.addEventListener('success',.. IndexedDB IndexedDB Web Browser Storage이다. Transaction Database를 사용하며, Key : Value 로 데이터를 관리한다. Transaction Model을 따르며, 모든 변경은 Transaction 안에서 일어난다. Transaction내에서 오류가 생긴다면 모든 변경사항을 폐기하고, 이전 상태로 돌아간다. same-origin policy를 따른다. ( http 와 https 는 다른 indexedDB를 이용한다.) IndexedDB 구조 Database > Object Store > Object 의 구조를 갖는다. Object 를 Object Store로 그룹화한다. Object Store를 DataBase로 그룹화한다. IndexedDB 요소 Database Data.. Web Browser Storage Web Browser Storage란? 개발자도구 > Application 에서 확인할 수 있다. DataBase를 서버에 두지 않고 웹브라우저가 제공하는 공간에 구축한다. Web Browser Storage 종류 Local Storage, Session Storage, IndexedDB 등 다양한 종류가 있다. Storage의 특징을 파악하고, 사용하는 것이 좋다. Storage의 특징 Cookie LocalStorage IndexedDB 저장공간 적음 약 5mb 브라우저와 사용자 환경에 따라 차이가 있다. 네트워크 서버와 통신한다 포함하지 않는다 포함하지 않는다 데이터 타입 문자열 문자열 제한받지 않음 (blob을 이용한다) 동작방법 동기 동기 비동기 난이도 쉬움 쉬움 어려움 데이터베이스(DataBase) 데이터베이스(DataBase) 데이터베이스(DB : DataBase)는 데이터(Data)가 그룹화 되어 저장된 집합체라고 생각할 수 있다. 자료 중복을 없애고 구조화하여, 효율적인 처리를 위해 DB를 사용한다. 데이터관리(CRUD) 데이터를 관리하는 CRUD Create (생성) : 데이터 저장 > 새로운 데이터를 추가할 수 있어야 한다. Read (읽기) : 데이터 인출 > 저장된 데이터를 사용할 수 있어야 한다. Update (갱신) : 데이터 수정 > 저장된 데이터를 가공(재사용/수정)할 수 있어야 한다. Delete (삭제) : 데이터 삭제 > 저장된 데이터를 삭제할 수 있어야 한다. 데이터관리시스템(DBMS : DataBase Management System) DB를 조작하는 소프트웨어를 'DB.. 이전 1 다음
