욕심도 참 많아

이미지 파일을 파일 시스템으로 서비스에 업로드할때,화면이 하얗게 브라우저 크래시가 되는 문제가 있었다.이때 1개의 사이즈가 40mb짜리 bmp확장자 사진 60장을 사용하여,동시에 많은 메모리가 로드 되도록 하여 해당 문제원인을 발견하였다.JavaScript에서 파일을 업로드하고 처리할 때 힙 메모리가 사용한다.특히 이미지 파일의 경우 다음과 같은 과정에서 메모리를 사용한다:파일 로딩파일을 FileReader나 URL.createObjectURL()로 읽을 때이미지 데이터를 JavaScript 객체로 변환할 때JavaScript는 브라우저나 Node.js 환경에서 사용할 수 있는 힙 메모리에 제한이 있는데, 특히 브라우저에서는 이 제한이 더 엄격하다.해당 메모리에 대한 제한때문에 문제가 생긴것으로 파악하였..

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

저번 글에 이어서, 오늘은 react-hook-form을 사용할때 놓칠수 있는 점들과, 여러가지 팁에 대해서 다뤄보겠습니다. watch / useWatch 1. watch watch는 useForm 훅에서 반환되는 함수 중 하나로, 지정된 폼 필드의 현재 값을 반환하여 줍니다. 폼 필드의 값 변화를 실시간으로 관찰 할 수 있으며, 특정 필드 또는 전체 폼의 값을 얻을 수 있습니다. => 주로 폼 컴포넌트 내에서 사용되며, 해당 컴포넌트의 리렌더링 범위에 영향을 줍니다. 즉, watch를 사용하는 컴포넌트는 관찰하는 필드 값이 변경 될 때마다 리렌더링 됩니다. 2. useWatch useWatch는 리훅폼에서 제공하는 별도의 훅으로, watch와 유사하게 폼 필드의 값 변화를 관찰합니다. 하지만 useWa..

근 1년만에 기술 블로그 업로드 입니다!.! 오늘은 사용자로부터 데이터를 수집하는데에 큰 도움을 주는 라이브러리인 react-hook-form 에 대한 글을 작성해 보았습니다. react-hook-form(이하 리훅폼이라 칭하겠습니다!)이 없다면, 저희는 간단한 회원가입을 구현함에 있어서도 하나하나 state를 선언하고, state를 validate하기위한 함수들, 에러를 위한 state등 너무 많은 기능들을 직접 구현해야 합니다. 또한, 귀찮은 것과 별개로 모든 값이 state로 연결되어 있기에 하나의 값이 변할때 마다 여러 자식 컴포넌트 들에서 리렌더링이 계속해서 발생하게 됩니다. 리훅폼을 공식 docs에 나와있는 여러개의 단어-문장으로 표현하자면 DX 폼을 구축할 때 개발자들에게 완벽한 경험을 제공..

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

MUI 에서 지원하는 styled을 사용한다. 원래 사용하던 Styled-Component 처럼 많은 이점이 있는데, 1. 컴포넌트의 이름을 새로 지정할 수 있고 , Style Override를 지원 해준다. 2. 편한 조건부 스타일링이 가능해진다. (Ex: createTheme) 우선 @mui/system 혹은 @mui/material 에서 import 해온다. import * as React from 'react'; import { styled } from '@mui/system'; const MyComponent = styled('div')({ color: 'darkslategray', backgroundColor: 'aliceblue', padding: 8, borderRadius: 4, }); ..

방학 동안 계절학기는 듣기 싫고, 학점은 채워야 했던 언럭키 4학년(3학년1학기까지 한뒤 군복무를 하러 갔지만, 갔다와 보니 학적상 4학년이 되어 있었다)은 6학점을 받으며 실무 경험을 채울 수 있는, 현장실습을 택하게 되었다. 성격상 연구원 같은곳에서 공부는 못할것 같았고,,,, 본래 관심있던 웹개발쪽의 실무경험을 쌓고 싶어 관련 회사쪽에 지원하게 되었다. 하지만 현장실습 지원은 한번에 한개 밖에 하지 못하였고, 1개를 넣고 떨어져서 아예 현장실습 못하면 어쩌지,,, 그냥 계절 아무거나 들을껄,,, 하는 걱정에 시달리게 되었다. 결과적으로는 1개의 기업에서 떨어지고, 2번째로 지원하게 되었던 스타트업에 합격했다! 회사 위치도 집에서 가까웠고, 출근도 8~10시 사이에 유동적으로 할 수 있어서 잠이 많은..