Junvely 개발일기

React query 리액트에서 상태 관리 라이브러리 중 하나로, 강력한 비동기 상태 관리를 지원한다. 리액트 쿼리의 기능은 다음과 같다. Backend agnostic: 백엔드에 종속되지 않음 Dedicated Devtools: 전용 개발 도구 Auto Caching: 자동 캐싱 Auto Refetching: 자동 재요청 Window Focus Refetching: 창 포커스 시 자동 재요청 Polling/Realtime Queries: 폴링/실시간 쿼리 Parallel Queries: 병렬 쿼리 Dependent Queries: 의존성 있는 쿼리 Mutations API: 뮤테이션 APIAutomatic Garbage Collection: 자동 쓰레기 수집 Paginated/Cursor Queries..

Rounting이란? : Rounting : 경로 선택, 경로 결정 : 해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것, 즉 해당 경로의 페이지로 이동하는 것을 의미한다. 1. 일반적인 Routing 서버에 URL로 새로운 페이지 전체(html, css, js, img 등)를 요청해서 응답 받은 새 페이지를 업데이트 한다. 2. React Router = CSR(Client Side Routing) 서버에 URL로 새로운 페이지를 요청하는 것이 아니라 페이지는 유지하되, Application에서 업데이트가 필요한 부분만, 경로에 해당하는 컴포넌트만 부분적으로 업데이트하고, 부분적으로 네트워크 통신(fetch 등)하여 JSON 형..

리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 : 부모 -> 자식 컴포넌트로 props를 계속해서 내려주면, 불필요한 컴포넌트에도 전달되어야 하고, 부모 컴포넌트가 리렌더링 시 자식 컴포넌트도 리렌더링 된다. 어디서 props을 내려주는지, 디버깅이 힘들다 등의 단점이 있다. 2) useContext 등 context API의 위험성 : 전역 State의 provider가 한개라도 변경되면, props을 받는 모든 하위 컴포넌트 전체가 리렌더링 된다. => context API vs 리덕스 공부 3) 따라서 Global st..

CRA에서 eject없이 SCSS사용하기 1. sass 설치 => scss를 css로 변환해 주는 라이브러리 yarn add node-sass 2. styles 폴더 생성, 내부에 scss폴더 생성 후 scss파일 생성 3.터미널 에서 사용시, package.json에서 script에 "sass"명령어를 추가해 주어야 한다. => 이 때는 map파일도 같이 생성되어 원하지 않을 경우 따로 map파일이 생성되지 않도록 설정할 필요가 있다. "sass": "sass --watch src/styles/scss:src/styles/css" yarn run sass => watch 시작 익스텐션 사용시 : liveSass 경로 설정 => /src/styles/css 폴더에 css파일이 생성되도록 설정 3. wat..

1. 동기와 비동기의 이해 자바스크립트는 동기적 언어이며, Single Thread 언어다. 자바스크립트는 hoisting이 된 이후부터, 코드를 한줄씩 스크립팅하여 순차적으로 실행된다. 여기서 자바스크립트는 Single Thread 언어이기 때문에 하나의 Thread만 존재하며, 하나의 stack이 존재한다. 이 말의 뜻은, 하나의 Call stack에 쌓인 환경정보를 기반으로 컨텍스트를 생성하고 코드를 실행시키기 때문에 LIFO에 의해 순차적으로 순서가 보장된다는 것이며, 즉 자바스크립트 엔진 자체만으로는 멀티쓰레딩이 불가능 하다는 것이다. 현재 task가 종료되기 전까지 다른 task가 실행될 수 없다는 것을 의미하기도 한다. 💡 자바스크립트는 Single Thread 언어인데, 어떻게 비동기 처리..

💡리마인드 - 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. - 그 객체 안에는 3가지가 존재한다. ✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings 상황에 따라 달라지는 this this는 실행 컨텍스트가 생성될 때 결정된다. 이 말을 this를 bind한다(=묶는다) 라고도 한다. 다시 말하면 this는 함수를 호출할 때 결정된다. 1. 전역 에서의 this 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)를 가리킨다. 런타임 환경? 여러분들이 javascript로 만들어놓은 프로그램이 구동중인 환경을 말하죠. 우리는 node 파일이름.js로 vscode 상에서 구동하고 있으니 n..