뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

이번에 web-worker를 사용할 일이 생겨서 web-worker에 대해 간단히 정리를 해보려고 한다. 우리 프로젝트의 경우, CSV 파일로 바꿔서 다운로드 할 수 있도록 만드는 경우에 사용하고 있다. Web worker란? Web worker는 Javascript 기반의 기술이며 주로 웹 브라우저 환경에서 사용된다. 이는 멀티스레딩을 지원하기 위한 기술로 별도의 백그라운드에서 실행되며, 메인 스레드와 별개로 작업이 이루어진다. Javascript를 사용하는 사람들이라면 Single-thread에 대해 많이 들어봤을 것이다. V8 엔진에는 스택이 있는데, 여기서 LIFO 방식으로 하나씩 쌓이고 또 실행이 된다. 그러다보니 만약 많은 양의 데이터나 복잡한 로직을 사용하게 된다면 하나씩 처리되어야 하는 스..

특별히 서버단을 사용하지 않을 예정이고, 중요한 내용을 담고 있지 않다면 로컬스토리지를 이용하는 것도 좋은 방법 중 하나이다. 로컬 스토리지를 어떻게 이용하여 저장, 불러오기, 삭제를 할 수 있는지 알아보자. LocalStorage에 저장하기 localStorage.setItem('이름', JSON.stringify(..)) example for React) useEffect(() => { localStorage.setItem('my-data', JSON.stringify(data)) }) 위와 같이 하면 LocalStorage에 저장 할 수 있다. '이름' 이라고 적힌 부분은 LocalStorage에 저장하고 싶은 이름을 적으면 되고, 저장하고 싶은 데이터는 JSON.stringify를 통해서 저장 하..

UUID 나는 Javascript(or Typescript)를 기준으로 작업을 하고 있다. id를 줄 때는 항상 unique하게 사용하여야한다는 것을 알 것이다. 그러다보니 보통 uuid를 설치해서 아래와 같이 사용하곤 했다. import { v4 as uuid } from 'uuid' uuid는 MAC 주소와 현재 날짜 및 시간의 조합을 사용하여 생성되며 가능한 조합 수가 2의 128승으로 굉장히 많은 수이기 때문에 수년 동안 매초 수조 개의 ID를 생성하지 않는 한 똑같은 ID를 나타내기 거의 불가능하다고 한다. 그래서 이런 uuid를 설치해서 사용하게 되는데, 어쨋든 이런 것이 node_modules의 사이즈를 크게 만든다. 그래서 uuid를 설치하지 않고 unique ID를 사용 할 방법을 찾았는..

최근에 맡아본 업무 중 하나가 파일을 업로드하고 다운로드 할 수 있는 기능을 만드는 것이었다. 원래 어려운 것이 아닐 수 있으나... 적어도 나에게는 생각보다 복잡한 과정을 거쳐야 했으므로 정리를 해두고 싶은 생각이 들었다. 그리고 이런 것들을 이해 할 수 있는 이론 지식을 가져야겠다는 마음도 함께 생겼다. 나에게 주어진 옵션은 이러했다. 1. 파일은 어떤 종류의 확장자던지 올릴 수 있어야한다. 2. 업로드 하는 파일의 크기는 50MB를 넘어가서는 안된다. 3. 파일 이름 + 파일크기가 나와야하고, 파일 크기는 사이즈에 따라서 convert되어야 한다. 4. 드래그앤드롭으로 파일을 넣을 수 있어야한다. 나는 이런 옵션을 가지고 개발을 시작했다. (** 추가 : 파일업로드, 다운로드에 초점을 맞추므로 UI..

일반적으로 많은 회사에서 redux, mobx를 사용하는 얘기는 들었다. 나 또한 Redux, mobx는 경험이 있지만 Recoil은 얘기만 들어봤지 사용해보진 않았는데 그래서 documentation을 따라해보면서 알아가보려고 한다. 나는 머리가 좋지 않다. 그래서 하나하나 잘 따져가면서 공부를 해야한다. redux를 익힐 때 고생했던 경험을 살려... 이번에는 redux를 익혔을 때의 순서를 지켜가면서 공부를 해봐야겠다 About Recoil 우선 각 상태관리 라이브러리들의 architecture 에 대해서 머리에 그림을 그려야 한다. Redux의 경우, Flux architecture를 기반으로 했고, mobX의 경우 Proxy, Context API는 context를 기반으로 했다. 그렇다면 R..

타입스크립트를 사용 할 일이 없었다. 그런데 생겨버렸다...! 그래서 미리 좀 공부를 하려고 한다. 자바스크립트에 타입스크립트를 적용하는 건 그나마 좀 이해가 되는 부분인데, 리액트 그것도 리덕스에 타입스크립트를 적용하고 있자니 뭔가... 편한 듯 불편한 듯... 리덕스가 타입스크립트를 편하게 쓰도록 만들어놓은게 아닌가? 라는 생각이 들었다. 그렇다면... 리액트 리덕스 타입스크립트! 시작해보자!! 우선 내가 만든 것은 아주 간단하다! input 태그에 api에 맞는 텍스트를 넣으면 단순히 호출해주는 것을 만들었다. 우선 전체적인 폴더 트리, 그리고 리덕스의 폴더트리를 보자면 아래와 같다. 자, 리덕스를 시작해보자! 우선 actions 폴더에서 타입을 만들어볼 것이다. // src > redux > a..

많은 프론트엔드 공부를 하는 분들이 초반에는 html, css, javascript 위주로 공부를 하다가, 나중에는 데이터를 다루게 되는 공부를 하게 된다. 그런데 이 때 백엔드 지식이 아직 준비되어있지 않은 경우 데이터를 어디서 사용해야할지 고민하게 된다. 주로 APIs를 불러와서 사용하는 경우가 있는데, 이 외에 서버처럼 사용하는 경우 또한 연습을 할 수 있으면 좋을 것이다! 이렇게 백엔드 지식 없이 백엔드를 사용하여 프론트엔드를 연습해 볼 수 있는 것이 바로 json-server 이다. ref: https://www.npmjs.com/package/json-server 우선 CRA를 통해서 리액트를 설치해준다. 그리고 json-server와 concurrently를 설치해준다. yarn add js..

요 며칠 리덕스의 사용으로 인해 혼자서 고군분투 하고 있었다. 대충 큰 그림도 그려지고 Todo-list, counter 증감과 같은 정도는 해낼 수 있을 것 같은데 이 정도 레벨에서 사용하자니 "무려" redux를 사용하기에 무척이나 아깝게 느껴졌다. 이를 더 충분히 활용하지 못하는 느낌이 들었다. 과거에 redux-toolkit에 대해서 잠깐 보긴 했지만 당장 이것을 아는 것보다 원래의 Redux를 잘 아는 것이 더 중요하다고 생각하여 패스한적이 있다. 그러나 어차피 글로벌한 state 관리를 해야한다면 그리고 무조건 Redux를 사용해야 한다면 가능한 간편한 방법으로 사용하는 편이 효율적일 것이다. 그렇게 redux-tookit을 다시 찾아보게 되었다. toolkit에 관한 것은 유튜브와 공식문서..