Front-End: Web (163) 썸네일형 리스트형 forwardRef 사용법 (+여러 ref들 전달하기) 공부하게된 계기 커스텀 훅인 useInput을 사용하여 인풋을 관리하니 편하긴 하지만, value가 달라질 때마다 인풋 컴포넌트를 포함한 대부분의 모든 컴포넌트들이 리렌더링된다. 왜냐하면 로그인 페이지에서 header, body, footer로 나뉘는데 email, password 인풋의 value들을 header, body, footer를 묶어주는 로그인페이지 컴포넌트에서 관리하기 때문이다. header에서는 memo를 사용해서 리렌더링이 안되지만, body와 footer 그리고 modal, modal background는 인풋값을 입력할 때마다 리렌더링된다. 만약에 이 인풋들을 useInput으로 관리하지 않고 useRef로 관리하게 된다면, 로그인 버튼을 눌렀을 때만 useRef.current.va.. React Query: Optimistic Updates Optimistic Updates란 사용자의 동작으로 useMutation을 실행할 때, mutate가 실행되고 다시 useQuery를 실행해서 데이터를 받아오기까지 시간이 걸린다. 그런데 이 시간동안 웹 화면상에서는 변화가 없으니 유저들은 변화가 있기 짧은 시간동안 기다리게 된다. 이 불편함을 없애기 위해 사용되는 것이 react query의 Optimistic Updates다. 왜 이름이 Optimistic(낙관적인) Updates냐 하면, state를 optimistically(낙관적으로)하게 업데이트하기 때문이다. 즉, 무조건 성공했다고 가정하고 state 값을 변화시켜버린다. 그래서 낙관적인 업데이트다. 하지만 업데이트가 실패할 가능성도 있다. 그래서 실패한 경우에는 변경되기 이전의 데이터를 다.. 절대 경로 설정하기 (craco + typescript + storybook) craco + typescript 1. craco 설치 yarn add @craco/craco yarn add craco-alias -D 2. craco.config.js 세팅 const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", tsConfigPath: "tsconfig.paths.json", }, }, ], }; 3. tsconfig.json 세팅 { ..., "extends": "./tsconfig.paths.json" } 4. tsconfig.paths.json 세팅 { "compilerOptions": { "baseUrl": .. 스토리북에 폰트 적용하기 스토리북 공식 홈페이지에 의하면, preview-head.html 파일을 만들고, html 태그를 추가하라고 설명하고 있다. 1. preview-head.html 을 추가한다. 2. 태그로 폰트를 가져오고, 폰트를 적용시켜준다. 3. 적용 확인하기 before after 끝! axios interceptors 원래 각 api마다 headers에 accessToken을 일일히 작성해주었는데, 스마일게이트에서 코드 리뷰 피드백을 받던 중 axios의 interceptors를 알게 되어서 interceptors를 사용하여 axios 코드를 리팩토링하였다. interceptors를 사용하면 공통적으로 넣을 내용을 한꺼번에 적용할 수 있으므로 코드의 양을 줄일 수 있다. - interceptors를 활용하여 변경한 코드 import axios from "axios"; const baseURL = process.env.REACT_APP_BASE_URL; const accessToken = localStorage.getItem("accessToken"); const clientApi = axios.create({ base.. [js] Map이란? Map Map 은 객체 형태다. key-value 쌍과, 키의 삽입 순서를 기억한다. 모든 값을 키로 사용할 수 있다. (그냥 객체는 String, Symbol만 가능) 키는 unique한 값이다. for...of 루프를 돌면 [key, value] 로 이뤄진 배열을 반환한다. 삽입된 순서대로 반복한다. (set을 한 순서대로) 키 동일성은 SameValueZero를 기반으로 한다. 0 ≠ -0 Nan === Nan 객체 vs 맵 둘이 유사하다. 맵은 아이템 수를 size 로 쉽게 가져올 수 있지만, 객체는 일일히 봐야함 맵은 순회가능(iterator)하므로 for…of문 사용 가능하지만, 객체는 아니다. 맵이 객체보다 성능이 더 좋다. (키-값 쌍이 빈번하게 추가/제거되는 상황에 최적화되어 있음) 메서.. 특정 동작 시, useQuery하기 검색 원인 어떤 버튼을 클릭했을 때 method가 GET인 API를 useQuery로 실행하고 싶었다. 해결법 useState를 이용해서 useQuery의 옵션 중에서 enabled를 state값으로 주고, 어떤 동작을 했을 때 setState를 true로 바꾼다. 추가로, 이렇게 하면 enabled가 계속 true로 남아있기 때문에 GET 요청을 계속해서 하게 된다. 따라서 해당 요청이 성공했을 시에 state값을 다시 false로 바꾸는 코드까지 작성해주었다. // MessageText.tsx const MessageText = () => { const [fetchInvite, setFetchInvite] = useState(false); useAcceptInvite(link, fetchInvite,.. [React] 엘리먼트 리스트에 key가 왜 필요해? key 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 attribute. **React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다.** 자식에 대한 재귀적 처리 React는 기본적으로 기존 트리와 이후 트리의 자식들을 동시에 보고, 차이점이 있으면 DOM을 변경한다. 예로 들어서 자식의 끝에 엘리먼트를 추가하면 변경은 잘 작동한다. first second first second third React는 두 트리에서 first 가 일치하는 것을 확인하고, second가 일치하는 것을 확인한다. 그리고 마지막을 third를 트리에 추가한다. 문제점 하지만 위와 같이 단순히 리스트 맨 아래에 추가하면 괜찮지만, 리스트 맨 앞에 엘리먼트를 추가하는 경우에는 성능이 좋지 않다. 예를 들면 .. 이전 1 2 3 4 5 6 ··· 21 다음
