전체 글 (115) 썸네일형 리스트형 Redux Toolkit - Redux Toolkit Redux 표준 방식으로 만들어졌으며, 아래와 같이 세 가지 문제를 해결하기 위해 만들어졌다. 1) 기존 Redux Store 구성이 너무 복잡하다. 2) Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. 3) Redux에는 너무 많은 상용구 코드가 필요하다. - 주요 API 1. configureStore() : Store를 구성하는 API로 Slice Reducer를 자동으로 결합하고, 제공하는 모든 Redux MiddleWare, redux-thunk, Redux DevTools Extension을 사용할 수 있다. 2. createSlice() : Reducer 함수의 객체, Slice 이름, 초기 상태 값을 받아들이고 해당 Action 생성자와 A.. localStorage, sessionStorage Web Storage 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다. 개발자 도구(F12)에 Application 탭에 들어가면 Storage를 확인할 수 있다. 이 두 Storage는 같은 API를 가지며, key-value는 반드시 문자열이어야 한다. 쿠키와는 다르게 Web Storage 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 그 이상의 Web Storage 객체를 저장할 수 있도록 해준다. 쿠키와 또 다른 점은 서버가 HTTP Header를 통해 Storage 객체를 조작할 수 없다는 점이다. Web Storage 객체 .. TIL - 9 - Keyword Redux Toolkit / thunk / extra reducer / for in / dotenv 코드 정리가 필요했다. API 호출도 맞지 않는 위치에서 호출하여 createAsyncThunk를 이용하여, Redux 쪽에서 API를 요청하는 방법으로 하여 지저분한 코드를 정리하였다. for문으로 로직을 구현하였을 때, 비동기 처리가 제대로 되지 않았는데 for in 문으로 수정하니 문제없이 잘 작동이 되었다. CRA에는 dotenv가 default로 설치가 되어있다. 그리고 네이밍 방법도 달랐다. 앞에 반드시 REACT_APP_을 붙여줘야 된다. Redux Toolkit 정리가 필요하다. - 오늘 하루 느낀 점 4번째 기업과제에서는 나름 중요한 역할을 맡아서 재미있었다. Redux .. TIL - 8 - Keyword React Query / Redux Toolkit / localStorage / Caching Redux Toolkit을 이용하여 상태 관리를 하였지만 공식 문서와 유튜브, 블로그 여기저기 보면서 정신없이 했기 때문에 추후에 포스팅 예정 Local Storage를 이용하여 Caching을 구현하였는데, Cache Storage를 이용했어야 했나.. 그래도 Local Storage는 영구적이라 브라우저를 닫으면 소멸되는 Cache Storage보다는 안정적이라 선택하였다. 이것도 포스팅 예정 Caching 작업을 처음엔 React Query로 하였다가 (그럴 거면 차라리 RTK Query로 하지..) 다시 직접 구현하는 방향으로.. - 오늘 하루 느낀 점 이번 기업 과제에서는 챌린지 할 .. TIL - 7 - Keyword React / localStorage / 검색 기능 // 검색 시 보여줄 List 만드는 함수 const handleSearchClick = () => { const targetForestLists = JSON.parse(localStorage.getItem("myForestLists")); const selectType = currentSelectRef.current.value; const searchInput = searchInputRef.current.value.trim(); const searchMyForestLists = targetForestLists.filter((elem) => { return elem[selectType].includes(searchInput); }); .. 생명 주기(Life Cycle) - 생명 주기 (Life Cycle) : React는 Component 기반의 View를 중심으로 한 Library이다. 그러다 보니 각각의 Component에는 생명 주기가 존재한다. Component의 수명은 보통 Page에서 Rendering 되기 전인 준비 과정에서 시작하여 Page에서 사라질 때 끝이 난다. - 생명 주기 (Life Cycle) 유형 : 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 총 3개로 나뉜다. - Mount : DOM이 생성되고 웹 브라우저 상에서 나타나는 것 - Update : 뜻 그대로 DOM이 업데이트 되는 경우인데, 아래와 같은 상황에서 발생. 1) props가 바뀔 때 2) state가 바뀔 때 3) 상위 Component가 .. TIL - 6 - Keyword React / localStorage / useRef - Quiz 정리 Q1. React의 개념과 장점, 그리고 컴포넌트란 무엇인가요? A1. 페이스북에서 만든 UI를 만들기 위한 JavaScript 기반 라이브러리입니다. 장점으로는 사용자와의 인터렉션을 UI로 쉽게 구현이 가능하고, 대규모의 복잡한 동적 웹페이지를 관리할 수 있습니다. Virtual DOM을 사용하여 불필요한 렌더링을 줄임으로써 성능을 향상 시킵니다. 또한, 컴포넌트별로 나눠서 개발하기 때문에 모듈화를 할 수 있고 유지 보수가 쉽습니다. SSR, CSR 모두 가능하고 라이브러리다보니 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란 UI를 구성하는 개별 단위입니다. 페이지는 컴포넌트의 조합인 느낌으로 이해하면 좋습니다... 스코프(Scope) - 스코프 (Scope) : 선언한 상수나 변수들의 허용된 영역, 접근할 수 있는 범위 - Scope Type : 스코프 타입은 크게 두 가지로 나뉜다. 1. Global Scope : 어디서든 접근할 수 있는 변수들이 있는 범위 (전역 변수) 2. Local Scope : 해당 지역 범위에서만 접근할 수 있는 변수들이 있는 범위 (지역 변수), Local Scope는 또 아래와 같이 나뉜다. 1) Function Scope : function로 선언한 함수 지역변수로 어떠한 변수(var, let, const)도 외부에서 접근 불가능, Arrow function은 Block scope이다. 2) Block Scope : {} 안이 scope로 적용되며 If 문, for 문, while 문, try / c.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음
