FE개발 공부 시작: 23년 4월 10일

Throttling 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 => 주로 사용되는 예: 무한스크롤 Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것 => 주로 사용되는 예: 입력값 실시간 검색, 화면 resize 이벤트 메모리 누수(Memory Leak) 필요하지 않은 메모리를 계속 점유하고 있는 현상. 리액트로 만든 SPA 웹사이트는 페이지 이동 전에 setTimeout 으로 인해 타이머가 동작중인 상태에서 clearTimeout을 안해주고 페이지 이동 시 컴포넌트는 언마운트..

청크&사가(기존) -> 리액트 쿼리(요새 많이 쓰는듯) 리액트 쿼리는 모듈 건드리지 않고 함. 보일러 플레이트 만들다가 오류날 일이 없음 리액트 쿼리의 사용방법이 thunk 대비 쉽고 직관적임 키워드 Query: 어떤 데이터에 대한 요청 Mutation: 어떤 데이터를 변경 Query Invalidation: Query를 invalidation. 즉, 무효화 시킨다 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있어요. 그렇기 때문에 최신 상태가 아닐 수 있습니다. 그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 하겠죠. 이런 과정을 React Query에서는 알아서 해준답니다 준비 yarn add axios yarn add json-server db.json파일 ..

반복되는 로직이나 중복되는 코드를 우리만의 훅, 즉 커스텀 훅을 통해서 관리할 수 있다. 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅을 말함❗ 보통 src 폴더에 hooks 라는 폴더를 생성해서 커스텀 훅들을 보관. 커스텀 훅을 만들때 이름은 내 마음대로 해도 상관이 없으나, 파일의 이름 앞에 use 라는 키워드를 붙여줘야 함. (src/hooks/useInput.js) import { useState } from 'react'; const useInput = () => { // 2. value는 useState로 관리하고, // state const [value, setValue] = useState(''); // 3. 핸들러 로직도 구현합니다. // handler const hand..

서버와의 통신을 위해 미들웨어 사용. 가장 많이 사용되는 리덕스 미들웨어는 Redux-thunk청크와 saga사가. thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해줍니다. 즉, dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것 dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체) 구현 순서 thunk 함수를 만들기: createAsyncThunk reduxToolkit 내장 API creatSlice의 extraReducer에 thunk 등록 dispatch(thunk 함수) 하기 테스트 사용법 (src/redux/modules/counterSlice.js) import { createAsyncThu..

http를 이용해서 서버와 통신하기 위해 사용하는 패키지 https://axios-http.com/kr/docs/req_config 요청 Config | Axios Docs 요청 Config 다음은 요청을 만드는 데 사용할 수 있는 config 옵션들 입니다. 오직 url만 필수입니다. method를 지정하지 않으면 GET방식이 기본값 입니다. { url: '/user', method: 'get', baseURL: 'https://some-domain. axios-http.com 설치 yarn add axios 테스트용 json-server랑 사용할거면 https://console-log.tistory.com/149 환경변수 적용 환경변수 적용할 땐 대신 서버를 껐다켜야 반영됨. 깃헙에 올리면 안됨 (...

아주 간단한 DB와 API 서버를 생성해주는 패키지. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함. 설치 yarn add json-server 사용법 1. 구글에서 npm jsonserver 구글링 ㄱ https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 3 months ago. Start using json..

리덕스 데브툴스 개발툴 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있음 설치 redux devTools 구글링하면 나오는 크롬 웹스토어(구글 웹스토어 플러그인) 클릭 ㄱㄱ https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 브라우저 주소창 옆에 Redux DevTools아이콘 클릭해..

모듈 파일에서 리덕스를 더 편하게 쓰기 위함 ! redux toolkit 구글링하면 공식사이트 나옴 설치 yarn add @reduxjs/toolkit or 리덕스 설치할때 툴킷 같이 설치해버리기 yarn add react-redux @reduxjs/toolkit 사용법 createSlice() 슬라이스로 리듀서를 한번에 만든다. 이제 Action Value와 Action Creator를 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐짐 (src/redux/modules/counterSlice.js) import { createSlice } from '@reduxjs/toolkit'; // 초기 상태값(state) const initialState..

JSON방식으로 데이터 교환 JSON.stringify() 자바스크립트 객체 → JSON 문자열 변환 undefined, function, Symbol은 지원이 안돼서 null로 들어감 스트링기파이 스트링화시킨다 문자열로 바꾼다 parse() JSON 문자열 → 자바스크립트 객체 변환 서버에서 클라이언트로 줄 때 JSON형식으로 줌 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 JS 객체로 변환할 때 사용 JSON Placeholder 가짜서버(=페이크서버, 모킹서버) 테스트용 구글에 jsonplaceholder검색 - Guide탭 들어가기 - MyJson서버탭에서 내꺼 만들어볼 수도 있음 (App.js) App펑션 안에서 작성 useEffect를 사용해서 컴포넌트..

비동기 프로그래밍을 만나게 되는 경우 서버 통신으로 어떤 값을 얻어온다 setTimeout, addEventListner한다 콜백함수 => 즉, 제어권이 넘어가게 되는 경우 동기적 방식 : 순차적 실행 Promise 객체에 담기는 주요 상태정보 대기(pending) 상태 이행(fulfilled) 상태 거부(rejected) 상태 Promise 객체 핸들링 방법 then ~ catch (ES6) axios로 받게 되면 response.data로 데이터 확인할 수 있음 정상인 경우 then, finally 실행 오류인 경우 catch, finally 실행 // http://api.naver.com/weather/today 로 요청을 한다고 가정합시다. axios.get('http://api.naver.com..