8.1 ESLint를 활용한 정적 코드 분석정적 코드 분석: 코드 실행과 별개로 버그를 야기할 수 있는 코드를 찾아내어 수정하는 것 ESLint가 코드를 분석하는 방법1. 자바스크립트 코드를 문자열로 읽음2. 파서로 자바스크립트 코드를 구조화3. 구조화한 트리(AST. Abstract Syntax Tree)를 기준으로 각종 규칙과 대조 → espree 사용4. 규칙을 위반한 코드를 알리거나 수정(report, fix) ex. no-debugger 규칙module.exports = { meta: { type: 'problem', docs: { // 문서화 정보 description: 'Disallow the use of "debugger"', recommended: true,..
macOS v105 기준 7.2 요소 탭스타일요소와 관련된 스타일 정보(+선언된 파일)계산됨CSS 적용 결괏값레이아웃CSS 그리드, 레이아웃 관련 정보이벤트 리스너현재 요소에 부착된 이벤트 리스너(버블링으로 발생하는 상위 요소의 이벤트 포함)DOM 중단점중단점 위치- 중단점을 설정하면 브라우저가 렌더링을 중단하고 해당 요소 변경을 일으킨 소스코드를 보여줌속성해당 요소가 가지고 있는 모든 속성값접근성스크린리더기 등이 활용하는 값 7.3 소스 탭중단점을 생성하여 소스코드를 오염시키지 않고 디버깅할 수 있음사용 중인 라이브러리에 버그가 있는지 확인할 때, 소스코드의 작동을 확인하고 싶을 때 유용감시디버깅 시점의 특정 변수값을 알고 싶을 때 해당 변수의 정보중단점소스 탭에서 추가한 모든 중단점범위현재 중단점에서..
[리액트 딥다이브] 6 리액트 개발 도구로 디버깅하기
6.1 리액트 개발 도구란?리액트 애플리케이션 디버깅을 위한 리액트 개발 도구 react-dev-tools 6.2 리액트 개발 도구 설치사용 방법은 여러가지가 있지만 웹 개발에서는 확장 프로그램을 사용하는 것이 가장 편리- 크롬- 파이어폭스- 엣지 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지인 경우, 리액트로 개발된 페이지가 아닌 경우리액트 개발 도구가 정상적으로 접근할 수 있는 경우 6.3 리액트 개발 도구 활용하기6.3.1 Components컴포넌트 트리, 컴포넌트에 대한 자세한 정보(props, hooks 등) 컴포넌트명(압축 도구로 인해 난수화될 수 있어 개발 모드에서 제한적으로 참고)익명 함수인 경우 Anonymous, _default, _c3, _c5 등 컴포넌트 특정이 어려움- 기..
5.2.4 상태 관리 라이브러리Recoil최소 상태 개념 Atom 제시 애플리케이션 최상단에 RecoilRoot로 스토어(Context)를 생성값이 변경되면 이를 참조(구독)하고 있는 하위 컴포넌트에 알림atom은 식별자가 될 유일한 key와 초기값 default를 받음useRecoilValue(useRecoilValueLoadable) 외부의 값을 구독해 렌더링을 강제로 일으킴(forceUpdate) 동시성 렌더링, 서버 컴포넌트, Streaming SSR 등이 지원되기 전까지는 1.0.0을 릴리즈하지 않을 것이라 함 메타팀에서 개발하기 때문에 리액트 업데이트(기능)에 잘 대응할 것이라는 기대초기 버전이기 때문에 불안정하다는 우려-> 2025.01 지원 종료 JotaiRecoil atom 모델에 영감받..
5.1 상태 관리는 왜 필요한가?상태: 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값- UI: 상호 작용이 가능한 모든 요소의 현재 값(다크/라이트 모드, input, 알림창 노출 여부)- URL: 브라우저에서 관리되는 상태값(route params, query)- form: loading, submit, disabled, validation- 서버에서 가져온 값(API 요청) 5.1.1 리액트 상태 관리의 역사기존에 사용되던 MVC 패턴은 모델과 뷰가 많아질수록 복잡도가 증가함→ 상태 변화 추적이 어려움 페이스북 팀은 양방향 데이터 바인딩을 원인으로 봄단방향 데이터 흐름을 제안 Flux 패턴의 등장장점: 데이터 흐름 추적이 쉽고 코드 이해가 쉬워짐단점: 사용자 인터렉션에 따른 데이터 갱신..