본문 바로가기

Frontend

 (290)
[React] Redux toolkit/ Devtools/ Flux 패턴 TodoList 를 Redux toolkit 으로 리팩토링 1. configStore.js const store = configureStore({ reducer: { todos, }, }); 2. modules const todosSlice = createSlice({ name: "todos", initialState, reducers: { addTodo: (state, action) => { return [...state, action.payload]; }, removeTodo: (state, action) => { return state.filter((item) => item.id !== action.payload); }, switchTodo: (state, action) => { return sta..
[React] Redux Toolkit Redux Toolkit 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로, 코드는 더 적게, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것. 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같음. 리덕스 툴킷 설치 명령어 yarn add @reduxjs/toolkit 1. configStore.js 설정 순수 redux configStore.js const rootReducer = combineReducers({ counter, // 리듀서 모음 }); const store = createStore(rootReducer); redux toolkit const store = configureStore({ reducer: { counter: counter, } }) 2. redux too..
TIL 23.06.23 자식요소 overflow: hidden 적용 및 무시하기 문제점 select 를 구현하던 중, 아래와 같이 부모영역에 overflow: hidden 이 걸려있을 때, 자식 요소에서 부분적으로 overflow:hidden 속성을 무시할 수 있는 기능을 구현하는 과정에서 어려움을 겪음. 시도해본 것 1. position: fixed 를 통해 부모요소위로 고정시켜놓았으나, 스크롤을 내릴때 같이 내려가고 올라가는 문제가 발생함. 2. z-index: z-index 값을 줘보았으나 이와 상관없이 overflow:hidden 을 걸면 자식요소가 부모영역을 벗어나지 못했음. 해결방안 : overflow:hidden 이 적용된 Container 아래 중간부모(?) 요소를 하나 더 만들어서 position: relative 를 적용하면 overflow:hidden 이 적용되고..
[Firebase] Firebase 란? Firebase : 구글이 제공하는 서버리스 플랫폼으로 파이어 베이스로 웹 서비스를 개발 할 때 필요한 인프라를 제공한다. 프론트엔드 개발자들은 서버를 따로 관리할 필요없이 웹 애플리케이션을 만들 수 있다. 서버리스 : 서버는 있으나 서버의 인프라 관리를 하지 않아도 되는 것. Firebase 의 주요 서비스들 1. Authentication 사용자 인증, 즉 로그인 및 회원가입을 제공하는 서비스 2. Firestore 문서 중심의 NoSQL 데이터베이스. 3.Storage 파일을 업로드 하고 다운로드하는 드롭박스, 구글드라이브와 같은 서비스로, 파이어 베이스에 바로 업로드 하기에는 용량 제한이 있어서 적합하지 않다.
TIL 23.06.22 스타일 컴포넌트, 인풋값 오류 문제점 React 프로젝트 중, 스타일 컴포넌트를 적용한 후에 인풋 값에 글씨를 입력하면 하나만 입력해도 포커스가 해제되는 현상이 있었다. 시도해본 것 1. 스타일 컴포넌트 내용 수정 스타일에 문제가 있는것인가 싶어서 인풋과 관련한 스타일을 제거하고 시도해봤으나 역시나 안됨. 2. onChange 핸들러가 제대로 동작하는지 검증 onChange 프로퍼티 안에 직접 함수를 작성해보고, 밖으로 빼서 핸들러를 만들어 작성했으나 결과는 역시 같았다. 해결방안 개발자도구 창의 콘솔에서 스타일 컴포넌트들을 컴포넌트밖으로 빼라는 주의 문구가 있었나. 오류가 나는 것은 아니었으나 함수 밖으로 빼서 전역으로 사용했더니, 인풋값에 값 입력이 잘 되었음. 알게된것 스타일 컴포넌트는 App이든 다른 컴포넌트 , 함수안에 있으..
[React] Redux [지역 상태] Local state 란 컴포넌트에서 useState를 이용해 생성한 state 로 범위가 좁다. [전역 상태] Global state 는 컴포넌트에서 생성되지 않으며 중앙관리소에서 생성된다. Redux 란 ? - 전역 상태 관리 라이브러리 - useState를 통해 상태를 관리했을 때 발생하는 불편함을 해소시켜준다. - 리덕스는 중앙 state관리소를 가지고 있으며 모든 state 는 이 곳에서 생성된다. - useState 에서 생성한 state 는 Local state고, Redux 로 생성한 state 는 Global state 이다.
[React] Life Cycle 리액트 컴포넌트는 [mount] -> [update] -> [unmount] 의 과정을 거친다. 1. Mount 컴포넌트가 생성될 때를 말하며, 다음과 같은 메서드가 있다. constructor 컴포넌트가 맨 처음 만들어 질 때 호출 생성자 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 즉 렌더링 하는 메서드 컴포넌트를 DOM에 마운트하기 위해 사용 componentDidMount 컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드 2. Update 컴포넌트가 갱신될 때를 말하며, 다음과 같은 메서드가 있다...
[React] React Hooks 최적화 (React.memo, useCallback, useMemo) [리 렌더링의 조건] 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 변경되었을 때 3. 부모 컴포넌트가 리 렌더링 되었을 때, 자식 컴포넌트는 모두 리 렌더링됨. [최적화] 렌더링이 자주 일어난다는 것은 좋은 것은 아님. 비용이 발생하는 것을 최대한 줄이는 것을 '최적화' 라고 한다. 이런 불필요한 렌더링이 발생하지 않도록 최적화 하는 방법은 다음과 같다. 캐싱(caching) : 사용자들의 요청이 많은 콘텐츠를 별도 서버에 임시저장한 뒤 필요할 때마다 바로바로 데이터를 전송하는 기술. React.memo : 컴포넌트 캐싱 useCallback : 함수를 캐싱 useMemo : 값을 캐싱 1. React.memo 컴포넌트를 React.memo 에 저장해두서, 필요할 ..

티스토리툴바