gggimmin 개발 블로그 gggimmin 개발 블로그

Throttling & Debouncing 이란? 짧은 시간 간격으로 연속해서 이벤트가 발생할 때 과도한 이벤트 핸들러 호출을 방지하는 기법이 바로 쓰로틀링과 디바운싱이다. Throttling 의 예시 이미지 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것이다. 주로 사용되는 예 : 무한 스크롤 Debouncing 의 예시 이미지 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간(delay)이 경과한 후에 한 번만 호출되도록 하는 것. 주로 사용되는 예 : 입력값 실시간 검색, 화면 resize 이벤트 메모리 누수 (Memory Leak)란? 필요하지 않은 ..

다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용했다. 하지만 Redux-thunk, Redux-Saga 에는 다음과 같은 문제가 존재했는데 1. 보일러 플레이트 : 코드량이 너무 많다. 2. 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. ( 규격화 문제 ) 반면, React Query는 많은 강점을 가지고 있다. ( 쉽고, 책임에서 자유롭다 ) 1. 보일러 플레이트를 만들다가 오류가 날 일이 없다. 2. 내가 만든 부분이 아니기에 잘못이 일어난들 내 잘못이 아니다. 3. 사용방법이 기존 Redux-Thunk 대비 너무 쉽고 직관적이다. ✅ 리액트 쿼리의 주요 키워드 3가지 🚩 Query - ..

Vite 로 개인 프로젝트를 진행하던 도중 [plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. 위와 같은 에러를 만났다. 처음엔 무엇이 문제인지 한참헤메다가 구글링을 통해 알아낸 것은 Vite는 기본적으로 .js 파일 내에서 JSX 구문 사용을 허용하지 않기 때문이다. https://stackoverflow.com/questions/74620427/how-to-configure-vite-to-all..

리덕스 미들웨어란? 리덕스에서 dispatch를 하면 action이 reducer로 전달되고, reducer는 새로운 state를 반환한다. 근데 미들웨어를 사용해 이 과정의 중간에 우리가 하고 싶은 작업을 넣을 수 있다. ex) counter 프로그램에서 +1 버튼을 클릭시, 3초를 기다렸다가 +1이 구현되도록하기. 보통 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해 사용하는 것이 대부분이고, 그 중에서도 많이 사용하는 리덕스 미들웨어가 바로 Redux-thunk 라는 것이다. thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체) ReduxToolKit 에서는 cre..

axios는 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다. 우선 axios를 통해 서버 통신 실습을 하기 위해 axios, json-server 환경을 설치해보도록 하자. yarn add axios yarn add json-server 설치 확인은 package.json 에서 확인 가능하다. 다음으로 임의의 db.json 파일을 생성해 json-server에서 확인해보도록 하자. ( db.json 은 루트 경로에 파일 생성 ) // db.json { "todos": [ { "id": "2", "title": "스프링 공부하기", "contents": "인강 열심히 들어보기!!", "isDone": tr..

Vite는 프론트엔드 개발을 위한 하나의 툴이다. Vite는 6가지의 장점을 내세우는데, 1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공. 2. 번개처럼 빠른 HMR : 앱 크기에 상관없는 Hot Module Replacement(HMR) 언제나 빠르게 작동. 3. 풍부한 기능 : 추가적인 모듈 설치 없이 TypeScript, JSX, CSS 등 사용가능. 4. 최적화된 빌드 : 웹앱 및 라이브러리 빌드 최적화를 위한 기본 설정 제공. 5. 범용 플러그인 : 개발 서버 및 빌드 과정 모두 사용 가능한 Rollup 플러그인 인터페이스 제공. 6. 완전한 유형의 API : 유연하게 작성된 API는 TypeScript 역시 완벽하게 지원. 내가 느끼기에 가장 좋았던 부분은..

📌 프로젝트 소개 프로젝트 명 : What's your Music (너의 뮤직은?) 배포 도메인 : https://www.whats-your-music.store/ 개발 기간 : 2024.02.07 ~ 2024.02.14 (7일) 프로젝트 소개 : What's your Music 은 음악을 좋아하는 사람들의 정보 교환 및 음악 추천을 위한 커뮤니티이다. 프로젝트 목표 : 팝, 클래식, 재즈 등 카테고리 별로 음악 정보 및 추천 음악을 유저들이 직접 올릴 수 있는 서비스이다. 🚦 Project Rules 개발 환경 Environment : Visual Studio Code, Git, GitHub Language : JavaScript Framework : React Library : Redux, react..

JSON 이란? 1.개념 : JSON = JavaScript Object Notation / 자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식 2. 구조 : 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다. { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIde..