본문 바로가기

분류 전체보기

(95)
Redux Toolkit redux-toolkit (RTK) - redux 개발팀에서 2020년에 release한 라이브러리이고, 비동기통신에 필요한 thunk 미들웨어를 내장하고 있다. - redux 작업을 단순화하고, 실수를 방지하며 redux앱을 만들기 쉽게 해줌 - immer library를 내장 - redux devtools extension을 기본으로 제공 주요 기능 - configureStore - createAction - createReducer - createSlice - createAsyncThunk configureStore - cerateStore 함수를 wrapping 한 함수로 configureStore를 제공한다. - 기존에 reducer 함수를 합치는 과정을 진행하고, redux-thunk 및 re..
JavaScript 일급 객체 (first class citizen) 일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. (출처 : 위키) 쉽게 말해 특정 언어에서 객체를 값으로 취급하는 것을 말한다. ✅ 자바스크립트에서는 함수가 일급객체이다. 아래와 같은 조건을 만족하는 객체는 일급객체를 의미한다. 1. 변수나 상수에 저장 및 할당할 수 있어야 한다. let fruits = function(){ return "apple"; } console.log(fruits); 2. 파라미터(객체의 인자)로 전달할 수 있어야 한다. let fruits = function(){ let apple = 10; return apple; } let bo..
디바운스(Debounce)와 스로틀(Throttle) 알아보기 기술면접을 준비하면서 디바운스와, 스로틀을 알게 되었다. 아직 프로젝트에 직접 적용해보지 않았지만 미리 어떤 건지 익혀두기 위해 정리해두려 한다. 디바운스, 스로틀은? - DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트를 제어하는 방법이다. 디바운스와 스로틀을 비교해보자면, 디바운스는 아무리 많은 이벤트가 발생해도 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때, 마지막 한 번만 해당 이벤트를 발생시킨다. 스로틀은 일정한 시간이 지날 때마다 해당 이벤트를 발생시키고, 아래 링크에서 디바운스와 스로틀의 차이를 확인할 수 있다. The Difference Between Throttling, Debouncing, and Neither ... code..
자바스크립트의 원시값(Primitive Type)과 참조값(Reference Type) 자바스크립트는 원시타입과 참조타입 두가지의 자료형이 제공된다. 원시 타입 - null, undefined, string, number, boolean, symbol 참조 타입 - Array, Object, Function 원시 타입 데이터는? - 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터의 값을 보관한다. - 원시 타입 자료형은 모두 변수 선언, 초기화, 할당시 값이 저장된 메모리 영역에 직접적으로 접근한다, 즉 변수에 새 값이 할당 될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻이다. - 변수에 새로운 값을 할당하면 변수가 참조하는 메모리 공간의 주소가 바뀌게된다. - 값을 복사 참조 타입 데이터는? - 자바스크립트는 객체의 메모리를 직접 조작하지..
배열에서 최솟값 찾기 | JS - Math.min() let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { return Math.min(...arr); //spread연산자 사용 } //1 - func.apply(thisArg, [argsArray]) - Math.min.apply() let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { return Math.min.apply(null, arr); } //1 - arr[0]을 기준으로 for문 돌리기 let arr = [5, 7, 1, 3, 2, 9, 11]; function solution(arr) { let min=arr[0]; for(let i=0; i
Heroku로 react 프로젝트 배포하기 (json-server 포함) json-server가 프로덕션 전용이 아닌 것을 알지만, 백엔드 서버가 없기 때문에.. 프로젝트 배포 시 json-server도 같이 배포하기 위해 여러 배포 서비스를 찾아봤다. 그전에 가장 쉽게 접근 가능한 gh-pages으로 배포해봤는데 역시나 json-server는 배포되지 않았다.. 그래서 이번에는 heroku를 사용해보았다. 1. json-server가 없는 경우 / 정적사이트 배포 create-react-app으로 만들어진 react 프로젝트 배포 방법을 찾았다. heroku settings 탭에서 BuilPack 에 mars/create-react-app build pack을 추가해주어야 배포 후 정상 작동한다. (아래 링크 주소를 복붙 하면 된다.) mars/create-react-app..
[React] 다크모드, 라이트모드 만들기 | useContext ⏩ 포트폴리오를 제작하면서 예전부터 구현해보고 싶었던 다크 모드/라이트 모드를 구현해보려 한다. 찾다보니 이미 npm dark mode 라이브러리가 있었지만, 직접 구현해보고 싶어서 해당 라이브러리는 사용하지 않았다. 가장 먼저 toggle button이 필요해서 material-ui 에서 이미 제작된 toggle 액션이 가능한 버튼을 가져왔고 색상이나 크기는 커스텀하여 작성해뒀다. //기능 구현 전 / Toggle component import React, { useState } from "react"; import { withStyles } from "@material-ui/core/styles"; import FormControlLabel from "@material-ui/core/FormContr..
[React - Project] movie | Issue & Solution 🎬 tmdb API를 활용하여 영화 추천 사이트 Movie movie4e8f82.netlify.app 📚 Stack - React - styled-components - react-icons - react-responsive - react-router-dom - Redux-thunk - 배포 : netlify 📚 구조 & 기능 - 오늘의 영화 Top 10 추천 - 선택한 장르별 영화 Top 20 추천 - 영화 선택 저장 - 선택순, 추천순, 인기순 정렬 📚 Problem & Solution ▶ 구현시 고민한 부분 1. GenreList Component - 체크박스 기능 컴포넌트 작성 시 고민한 부분 function GenreListComponent({ data }) { const dispatch = u..