후니의 개발 기록

이번 정비스프린트에 React 18로 버전업을 진행하였다.React 18로 되면서 실제 업무에서 활용될 수 있는 훅스를 정리하고 공부하기 위해 글을 작성했다.1. useDeferredValue💡useDeferredValue는 특정 ui의 업데이트를 지연시킬 수 있다. 사용법const deferredValue = useDeferredValue(value) 2. 실제 예시export default function App() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); return ( Search albums: setQuery(e.target.value)} /> ); } query는 기본 stat..

이번 스프린트 작업 중에 useRef를 사용하면서 ref를 통해 언제 DOM 요소에 접근하는지에 대해 명확한 이해가 되지 않았었습니다. 먼저 React의 동작을 크게 두 단계로 나누어 설명해보겠습니다. 렌더링 단계 (Rendering Phase) 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다. 이 단계에서는 Virtual DOM을 구성하고, 컴포넌트의 업데이트 여부를 판단합니다. 커밋 단계 (Commit Phase) 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다. 💡 만약 렌더링 단계에 dom에 접근한다면 ? 첫 렌더링 시 DOM 생성 전: 실제 dom이 아직 생성되지 않았기에 ref.current의 값은 null이 됩니다. 업데이트 중 DOM 변경 전: 렌..

vscode refactor기능 쉽게 사용하는 법 한 번에 좋은 코드를 작성하긴 어렵다.그래서 리펙터링을 해야 한다. vscode에서 리펙터링을 안전하고 빠르게 도와주면더 즐겁게 ..행복하게 리펙터링 할 수 있지 않을까?위를 쉽게 해주는 2가지 팁을 공유한다.1. 변수명 바꾸기 (F2)vscode에서 쉽게 변수명을 바꾸는 방법이 있다. 바꾸고 싶은 변수명을 드래그한다.F2키를 누른다.원하는 변수명을 입력하고 변경한다.최종 2. 전구 클릭하기! (전구 클릭으로 rafactor쉽게 키기)vscode refactoring 단축키는 mac의 경우 shift + option + r OR cmd + .이다.해당 단축키를 사용해도 좋지만.드래그 후 노란 전구를 클릭하자! 다음 함수 안에 부분을 새로운 함수로 추출해 ..

가장 쉽게 create react app 번들 사이즈 확인하는방법 1. 배경평소 create-react-app(cra)로 제작된 프로젝트의 번들 사이즈를 확인할 때 webpack-bundle-analyzer를 활용했다. 위 패키지를 활용하기 위해선 webpack 설정을 건드려야 했다.이로 인해 eject를 하거나, 또는 react-app-rewired, craco와 같은 라이브러리를 사용했어야만 했다. 최근 create-react-app 공식 문서를 확인해 본 결과webpack 설정 필요 없이 아주 간단하게! 번들 사이즈를 확인할 수 있는 방법이 있었다. 바로 source-map-explorer를 활용하면 된다. 2. 예시 check-bundle-size라는 앱을 만든다.npx create-react-a..

cypress intercept로 유연하게 api테스트 하기1.문제점const prevPage = 5; const nextPage = 6; cy.intercept( `/search/issues?q=repo%3Acypress-io%2Fcypress+is%3Aissue&per_page=5&page=${nextPage}&sort=created`, { fixture: `searchIssuesResponses/cypress.json`, } ).as("getNextPage"); cy.intercept( `/search/issues?q=repo%3Acypress-io%2Fcypress+is%3Aissue&per_page=5&page=${prevPage}&sort=created`, { fixture: `searchIs..

1. 타입스크립트의 template literal를 사용하면 다양한 타입을 만들수 있다.type T4Numbers = `${number}${number}${number}${number}`; type T3Numbers = `${number}${number}${number}`; type T2Numbers = `${number}${number}`; const n:T4Numbers ="123" //Type '"123"' is not assignable to type '`${number}${number}${number}${number}`'. typescript는 아직 regex를 활용한 타입 추론을 지원해 주고 있지 않고 있다.https://github.com/microsoft/TypeScript/issues/4..

[TIS] react event의 stopPropagation이 예상한 대로 작동하지 않는다. (React 이벤트 위임, 캡처링과 버블링)1.문제점💡React 컴포넌트에 event를 등록했을때 stopPropagation이 예상한 대로 작동하지 않았다. 테이블 내에서 날짜를 드래그해서 선택되는것은 테이블전체(Container)에 mousedown이벤트가 사용되어 작동한다. 💡이때 테이블전체(Container)에 등록한mousedown 핸들러의 경우 ref를 활용해 실제 dom에 등록하였다.즉 이는 날짜를 입력할 수 없는날에도 mousedown이 작동되어 시간이 입력되었다. 이벤트 버블링을 활용하면 문제를 해결할 수 있을것 같아 다음과 같은 계획을 세웠다. (1) NotAvailableDate컴포넌트에서 ..

* 선택자의 font 속성이 적용되지 않는다. reset css사용시 주의해야할 점 1.문제점💡 * 전역 선택자의 폰트속성이 적용되지 않음현재 토이프로젝트(가제: 타임투밋) 작업에 있다.전체 디자인이 Roboto로 되어있기에 전역 스타일에 Rotobo를 적용했다.const global = css` @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { box-sizing: border-box; color: black; font-family: "Roboto", sans-serif; } 그렇지만 적용되지 않았다.무엇이 문제 였을까? 2.원인💡reset css의 font 속성 우선수위가 전역으로 지..