디바운싱은 프로그래밍에서 많이 사용되는 개념으로, 주로 이벤트가 너무 빈번하게 발생하는 것을 최소화하기 위해 사용한다.자주 일어나는 이벤트를 감당하지 않고 일정 시간동안 이벤트가 일어나지 않으면 마지막 이벤트만 처리하는 방식이다.예를 들어, 사용자가 입력창에 글자를 입

React Query React Query는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술로 데이터 가져오기, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 상태 관리 라이브러리이다. DB에서 가져온 데이터를 클라이언트에

1) 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처는 웹 애플리케이션의 복잡한 UI를 재사용 가능한 단위로 분할하는 방식을 말한다. 컴포넌트는 자체적으로 상태와 속성을 가지고 있으며, 독립적으로 작동한다. 각 컴포넌트는 특정 기능이나 UI의 한 부분을 책임진다.컴포넌

fatal: Need to specify how to reconcile divergent branches.git pull을 하려고 하니 fatal: Need to specify how to reconcile divergent branches. 오류가 발생했다.직역하자면

Git Stash는 새로운 브랜치에서 저장하기 전에 다른 브랜치로 이동할 때 사용한다.즉, 공식적으로 커밋하고 싶지는 않은데 다른 브랜치로 이동해야 할 때 사용한다.수정한 것을 커밋하지 않은 채로 다른 브랜치로 이동하려고 하면아래와 같은 에러 메시지가 발생하고, 다른

antialiasing 적용 전검은색 배경에서 흰색 텍스트를 사용하면 텍스트가 실제 보이는 것보다 더 두꺼워 보인다.브라우저에서 사용되는 antialiasing으로 인해 텍스트가 굵게 표시되는데,이는 일반적으로 텍스트가 검은색 바탕에 흰색일 수록 반전되어 더 두꺼워 보

git stash: 하던 작업을 임시로 저장해두고 싶을 때 사용하는 명령어어떤 작업을 하던 중에 다른 요청이 들어와 하던 작업을 멈추고 잠시 브랜치를 변경해야 할 때, 아직 완료하지 않은 일을 commit하는 것은 껄끄럽기 때문에 git stash라는 명령어를 사용한다

main branch 내려받기 보통 main branch에는 기본적인 환경세팅을 마친 작업 파일이 담겨져 있다. main branch 파일을 내려받아 각자 맡은 영역을 자신만의 branch를 만들어 작업을 수행하게 된다. [repo_url] repository 주소

React-Native에서 스토리지를 다루기 위해 사용하는 두 가지 라이브러리에 대해서 정리해보려고 한다. 바로 Async-storage와 Encrypted-storage이다. 스토리지(Storage)를 왜 써야 하는지, 또 어떤 데이터를 넣어야 하며, redux와는

앱을 다시 실행할 때, 토큰이 있으면 자동 로그인이 되도록 코드를 구현하는 과정에서 useEffect 내에서는 async/await 구문을 사용하지 못 한다는 것을 알게 되었다. 따라서 아래와 같은 코드는 사용할 수 없다. useEffect 내에서 async/a

1. Zulu JDK 다운로드 https://www.azul.com/downloads/?version=java-11-lts&os=macos&architecture=arm-64-bit&package=jdk Azul Systems 홈페이지에 가면 Arm Architect

프로젝트 폴더에서 pod install을 했더니 다음과 같은 에러를 직면하게 되었다.(...중략)이 메시지는 Xcode의 xcrun 도구가 iphones SDK를 찾지 못한다는 것을 나타낸다.이 문제는 주로 시스템이 Xcode의 위치를 제대로 인식하지 못할 때 발생한다

React Native를 시작하며 Android Studio, Emulator, X-Code 등 다양한 프로그램을 설치하게 되었고, 여러 가지 프로그램의 환경 설정을 하다가 중간에 경로 꼬임 등의 문제가 생기는 것을 방지하기 위해서 현재 Mac의 기본 설정을 저장해 두

Prettier는 크게 3가지 방법으로 설정할 수 있다.첫 번째 방법은 Prettier 명령어를 실행할 때 커맨드 라인 옵션으로 넘기는 방법이다. 일회성 설정을 할 때는 간편하게 쓸 수 있지만, 설정할 항목이 많아지면 오히려 작성하기 어렵고 오타가 날 확률이 높다.Co

SassComponent에서 utils를 불러올 때 보통 @import './styles/utils'; 형태로 불러오는데 프로젝트의 규모가 커질 수록 디렉토리의 구조가 깊어져서(예를 들면 src/component/somefeature/ThisComponent.scss)

useNavigate() useNavigate()는 리액트 라우터에서 페이지를 이동할 때 사용된다. 개발을 하다 보면 페이지를 이동할 때 특정 값을 이동하는 페이지에 전달해야 하는 경우가 생기는데, 이때 navigate() 함수를 사용하면 원하는 값을 전달할 수 있다

일급 객체(First-class Object) 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 일급 객체의 특성은 다음과

Refs 리액트의 Ref는 references의 줄임말로, 리액트 컴포넌트에서 DOM 노드를 직접적으로 참조하고 상호작용할 수 있게 해준다. 예를 들어 Input 박스에 포커스를 맞추는 기능 같은 것이 가장 대표적인 활용 방법이다. 특히 Ref가 컴포넌트 내에서 특정

메모이제이션(Memoization) 컴퓨터 프로그램이 동일한 계산을 반복적으로 해야할 때, 이전에 계산한 값을 메모리에 저장하여 중복 계산을 제거함으로써 전체적인 실행 속도를 빠르게 해주는 기법 React.memo React.memo는 고차 컴포넌트(Higher Or

리액트 최적화를 위해서는 렌더링되는 부분을 제대로 이해해야 한다. class 함수는 render 부분이 리렌더링되고, 함수 컴포넌트는 전체가 리렌더링이 된다. 아래 예제에서 버튼을 클릭했을 때 변하는 state는 없어도 class는 리렌더링이 된다. 리액트는 Props와 State를 변경하게 되면 보통 리렌더링이 일어난다. 바꾸는 State가 없어도 s...