욕심도 참 많아

크롬 익스텐션을 개발하며, 사용자의 데이터를 어떻게 관리하면 좋을지 고민하다가 Indexed DB에 대하여 공부하게 되었다. Indexed DB는 LocalStorage보다 많은 용량의 데이터를 브라우저에 영구적으로 저장하는 방법이다.또한컴퓨터 재부팅브라우저 종료 후 재실행인터넷 끊김이런 경우에도 사용자가 브라우저 데이터/캐시를 직접 삭제하지 않는 이상 사용자 데이터를 장기 보관하기 매우 적합하며, JS에서 사용하는 객체 형식 그대로 저장할 수 있다. 사용방법 1. DB open 요청 및 Object Storage사용const request = indexedDB.open("DatabaseName", version);request.onerror = (event) => { console.error("Dat..

Babel은 JS 트랜스파일러 입니다. 트랜스 파일러 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환해주는 얘 Babel은 주로 최신 JS (ES6 이상)을 구형 브라우저에서도 동작할 수 있도록 ES5 같은 이전 버전의 JS로 변환하는 데 사용됩니다. 또한, React의 JSX같은 문법도 JS로 변환해 줍니다. const add = (a, b) => a + b; ES6 에서 도입된 화살표 함수 이기에 Babel을 사용하면 var add = function(a, b) { return a + b; }; 이렇게 변환 된다. const element = Hello, world!; 같은 JSX는 const element = React.createElement('h1', null, 'Hello, world!..

env 파일이란?? db 관련 데이터 , api key등 외부에 노출되면 안되는 값들을 관리하기 위하여 관련 변수들을 저장해두는 파일이다. 이때 dotenv패키지가 필요하다. 프로젝트의 최상위 루트에 파일을 만들게 된다. CRA (Create React App) 에서의 환경 변수 사용법 cra 에서는 내부적으로 dotenv를 지원해 줌으로써, node js 환경처럼 설치를 따로 안해줘도 된다. 사용 방식은 프로젝트 루트 디렉토리에서 .env 파일을 생성. .env 파일에 변수를 추가해준다. 예를 들어, REACT_APP_API_KEY=abcdefg와 같이 작성한다. 변수 이름은 REACT_APP_으로 시작해야 합니다.(필수!!!!!!) 프로젝트에서 변수를 사용할 파일에서 process.env.REACT_..

Vite란?? Vite는 프론트엔드 프레인워크로, ES 모듈을 기반으로한 개발서버와 빌드 도구를 제공한다. 경량화된 개발 도구로, CRA 같이 React 프로젝트를 생성하고 구성하는데 사용된다. (기존 webpack, rollup, parcel 과 같은 bundler 이다) 기존의 Webpack Webpack은 모든 모듈을 번들링하여 하나의 파일로 만들고, 이 파일을 로딩할때까지 브라우저에서 지연시간이 발생한다. 반면 vite는 es 모듈 시스템을 통하여 필요모듈만 빌드하고, 빌드된 모듈은 브라우저에 바로 로딩된다. Why Use Vite?? CRA대신 Vite를 쓰는 이유는 다음과 같다. 빠른 빌드 시간: Vite는 빠른 빌드 시간을 제공합니다. 이는 Vite가 빠르게 재구성되는 ESM(ES Modul..

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. Fetch에 비해 별도의 설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다. 나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, axios.create 를 사용해 주었다 import axios from "axios"; const api = axios.create({ baseURL: "~~", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다! import api fro..

짧지만 기억에 오래 남을 것 같은, 나의 2번째 인턴이 끝났다. 방학을 그냥 허투루 보내기는 싫었고, 이런 저런 방학동안 할 수 있는 인턴 프로그램을 찾던 도중 '그룹바이' 라는 단체에서 스타트업과 대학생 개발자들을 연결하여주는 프로그램에 지원하여 붙게 되었다!! 우선 회사 서비스의 어드민 페이지만 작업하기로 되었었지만 운이 좋게도 회사의 주 서비스도 작업할 수 있게 되었다!!! 어드민 페이지도 쫄렸지만,,,, 주요 서비스에 직접 작업하는것은 더 떨렸다 처음 어드민 페이지 작업은 서비스의 데이터를 쉽게 추출하고, 수정하는 등의 CRUD 작업 위주로만 이루어졌다. 진짜 정말 퍼블리싱 제외하고 파이어베이스 스토리지에서 데이터만 주고 받고 수정하고 지우고 가지고 놀다보니 Promise 와 async/await..

회사에서 gif 파일을 메인화면에 띄워줄 필요가 있었는데, 그냥 gif링크를 올리는 것은 언제 gif가 없어질 지 모르고, 링크가 바뀔 수 도 있으니 Base64 파일형식으로 firebase storage에 저장하고자 하였다. if (newSeason.img) { const response = await fetch(newSeason.img); const blob = await response.blob(); const base64 = await new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => { const base64data = reader.result;..

회사에서 firebase database에서 데이터들을 받아오고 화면에 띄우는 작업을 하는 도중, 전체 데이터가 안받아져 오는 에러를 발견했다. 코드상 문제는 없었다고 생각해서 계속 고쳐봤는데도 똑같은 문제가 발생해서 서칭을 해보니 js 에서 map 은 그 자체로 체이닝을 할 수 없고 , map 이후에 코드를 실행하려면 Promise.all 을 사용해 줘야 한다는 것을 발견했다. Promise.all(arr.map(data)=>{ ~~~~~~~~ ).then(()=>{ ~~~~ }) } 이런식으로 map 을 한번에 Promise.all() Scope 로 감싸주면 , map에서 여러번 반복되는 데이터를 한꺼번에 모아서 할수있어진다! 하지만 이 방식은 map 의 새로운 원소들은 끝나는 순서대로 리턴되기에, ..