일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 리덕스
- 코딩초보
- SasS
- 비동기
- git
- redux
- 참조자료형
- 타입스크립트
- useEffect
- 코딩공부
- 프론트엔드
- TypeScript
- JavaScript
- CSS
- Vue3
- 코린이
- 코딩독학
- 사용하는 이유
- http
- react
- 리액트 네이티브
- React Native
- 자바스크립트
- 깃
- react-router
- async
- html기초
- 리액트
- scss
- 코딩기초
- Today
- Total
목록전체 글 (96)
맨 땅에 프론트엔드 개발자 되기

Redux 미들웨어(Middleware) 회사에서 처음으로 Redux 미들웨어를 이용해서 프로젝트를 만들 일이 생겨 기존에 미들웨어로 작성된 프로젝트를 보는데 아무리 봐도 코드 구조가 이해가 안 돼서 한참을 눈이 빠지게 들여다봤다. Redux 미들웨어가 무엇인지, 왜 사용하는지에 대한 개념은 전혀 어렵지가 않은데, 실제로 코드를 구성하려고 보면, 코드가 다 Split 되어 있고, 여러 파일들이 구조적으로 분할되어 엮여있다보니 아예 모르는 상태에서 처음 파악하기에는 이해가 되지 않았다. Redux를 사용할 줄 안다는 기본 가정 하에, Redux는 store, action, reducer의 구조로 이루어져 있고, 단일 store에 전역 상태를 관리하고, action 에 담겨진 명령어로 reducer에 원하는..

Lodash https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com npm i lodash lodash는 자바스크립트 패키지 중 가장 인기있는 패키지들 중 하나로 정말 많이 사용된다. 주로 array 자료형을 다루기 위해 자바스크립트에서 기본적으로 제공하지 않는 method..

React의 state 변경 비동기 처리 React 에서 상태 변경을 할 때 setState 혹은 useState Hook을 써서 변경하면 상태 변경 동작은 비동기로 처리된다. (동기/비동기의 차이점을 알아야 밑에 내용이 이해가 가능하다.) React가 상태 변경을 비동기로 처리하는 이유는 효율성 때문이다. 리액트는 상태가 변경될 때마다 재렌더링을 일으키도록 설계되었는데, 만약 한꺼번에 너무 많은 state가 변경될 경우 일일이 재렌더링을 일으킨다면 너무 비효율적이기 때문에 state 값이 변경될 때 React 내부 로직 기준에 따라 한번에 state 변경을 취합해서 재렌더링을 일으킨다. 그리고 그 취합은 16ms 단위로 이루어진다고 한다. 여러 개 State 변경 에러 해결하기 아래 예제는 input ..

React 에서 props 의 개념에 대해 익숙해졌다면, 부모 컴포넌트의 state 와 함수를 가져다 쓰는 것이 어렵지 않을 것이다. 그러나 만약 자식 컴포넌트의 함수를 부모 컴포넌트에서 사용해야 한다면 어떻게 할까? 자식 컴포넌트의 함수를 부모 컴포넌트로 옮기거나, 자식 컴포넌트와 부모 컴포넌트 최상단에 함수를 선언하거나, 커스텀 Hook 을 만들 수도 있을 것이다. 만약 정말 자식 컴포넌트에서 부모 컴포넌트로의 역방향 흐름을 만들어야 할 경우에는 리액트에서 제공하는 Hook 을 이용할 수 있다. useImperativeHandle useImperativeHandle 은 자식 컴포넌트에 ref 를 선언하여 자식 컴포넌트 내부에 접근을 가능하게 해주는 방법이다. 자식 컴포넌트를 forwardRef로 감싸..

회사에서 페이지네이션 기능을 구현할 일이 생겼다. 직접 기능을 만들면 좋겠지만, 생각보다 너무 어려웠다. 그래서 찾아보니 리액트 라이브러리 중 react-paginate를 이용해서 페이지네이션을 구현할 수 있다는 것을 찾았다. https://www.npmjs.com/package/react-paginate react-paginate A ReactJS component that creates a pagination.. Latest version: 8.1.3, last published: 2 months ago. Start using react-paginate in your project by running `npm i react-paginate`. There are 422 other projects in ..

React와 setInterval의 관계 리액트는 상태값이 변하면 재렌더링을 한다. 그래서 리액트에서 상태라는 개념에 대해 알고 있어야 앞으로의 내용이 이해가 가능하다. 아래 예제는 1초에 한번씩 count의 숫자를 1씩 증가시켜서 렌더링을 하도록 만드는 것이다. 문법적으로는 잘 동작하는 코드처럼 보이지만, 리액트에서는 상태값이 변화될 때 마다 재렌더링이 되기 때문에 setInterval 함수가 여러번 다시 실행되어 에러가 난다. 나의 경우에는 숫자가 변하는 속도가 갈수록 빨라졌다. (setInterval이 여러 번 실행되어 중첩된 것으로 추정) import { useState } from "react"; export default function Example() { let [count, setCoun..