후니의 개발 기록

이번 스프린트 작업 중에 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..

클론 과제를 제작하는 중 eslint와 prettier이 충돌했습니다.eslint와 prettier를 충돌이 날 경우 방지할 수 있는 방법에 대해 공부해 보았습니다.Line 43:5: Expected no linebreak before this expression Missing semicolonTL:DR💡eslint와 prettier 충돌이 발생했을 때 해결할 수 있는 방법은 크게 2가지입니다. 1. eslint-config-prettier로 prettier formatting과 관련된 lint 규칙들을 제거합니다. 2. eslint-plugin-prettier로 eslint 내에 prettier의 formatting규칙을 eslint 규칙안에 있게 합니다. 1. eslint-config-prettier..

TILFrontend Master 수업에서 Queue를 typescript로 구현된 코드에서 Generic이 활용되었습니다.Generic에 대해 더 깊게 공부해 보았습니다.1. 타입스크립트에서 만약 class를 통해 instance를 형성할 때 generic type을 정해주지 않으면 unknown으로 해석한다. 2. 타입스크립트에서 재귀적으로 type을 설정할 수 있다.type QNode = { value: T; next?: QNode; }; 3. generic을 활용해서 아래와 같은 타입을 만들고 할당하게되면 generic안에 꼭 값을 넣어주어야 한다. generic안에 꼭 값을 넣어주어야 한다.함수나 class의 경우 는 아래와 같이 사용가능하다함수의 넣는 인자로 인해 결과가 나온다 4. funct..