코드를 위한 기록

10.1 리액트 17새로운 기능 없음수정이 필요한(호환성) 변경 사항을 최소화함 10.1.1 리액트의 점진적인 업그레이드를 위한 일부 컴포넌트 변경업데이트를 위한 업데이트 유의적 버전을 기반으로 주 버전이 릴리즈 된다면 수정된 API, 지원중단된 API를 파악해 대처해야 함리액트 17부터는 두 가지 버전이 공존하는 점진적인 업그레이드가 가능해짐 관리 지점이 많아져 이상적인 방법은 아니지만 버전을 올리기에 부담이 큰 애플리케이션인 경우 고려할만 함 10.1.2 이벤트 위임 방식의 변경document 이벤트 위임에서 div#root 이벤트 위임으로 변경 점진적인 업그레이드 지원,document에 이벤트가 바인딩됨으로써 바닐라js, jquery가 혼재되어 생기는 혼란이 방지하기 위함(이벤트 버블링) 10.1...

tsconfig.json// tsconfig.json{ // 자동 완성 "$schema": "https://json.schemastore.org/tsconfig.json"} compilerOptionstarget: 타입스크립트 변환 목표(= 사용될 환경)lib: esnext 신규기능, dom 브라우저 api 사용할 수 있게 함skipLibCheck: 라이브러리의 d.ts를 검사하지 않음 보안 취약점이 있는 의존성 모듈 덮어쓰기// package.json// npm의 overrides 활용{ "overrides": { "minimatch": "^3.0.5" }} 도커라이즈애플리케이션을 신속하게 구축해 배포할 수 있는 상태로 준비하는 것(도커 이미지 만들기) 이미지: 컨테이너를 만드는 데 사용..

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.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 패턴의 등장장점: 데이터 흐름 추적이 쉽고 코드 이해가 쉬워짐단점: 사용자 인터렉션에 따른 데이터 갱신..

서버 사이드 렌더링까지 지원하는 리액트 애플리케이션을 만드는 데 많은 노력이 필요하며, 리액트 팀에서도 권하지 않음 4.3.1 Next.js란?Vercel에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반 서버 사이드 렌더링 프레임워크PHP의 대용품으로 사용하기 위해 만듦 4.3.2 Next.js 시작하기create-next-app 기반npx create-next-app@latest --ts next.config.js/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, swcMinify: true,}module.exports = nextConfig주석: 자바스크립트 파일에 타입스크립트의 타입 도..

4.1 서버 사이드 렌더링이란4.1.1 싱글 페이지 애플리케이션렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초 페이지(html)에서 데이터를 불러오고 페이지 전환은 자바스크립트와 브라우저의 history.pushState, history.replaceState로 이루어짐최초에 로딩해야 할 자바스크립트 리소스가 크지만 한 번 로딩된 이후에는 서버를 거쳐 리소스를 받아올 일이 적기 때문에 UIUX 측면에서 장점 싱글 페이지 렌더링 방식의 유행과거 PHP, JSP를 기반으로 웹 애플리케이션이 만들어졌을 때는 대부분의 렌더링이 서버 사이드에서 이뤄짐- 자바스크립트는 보조적인 수단이었음 자바스크립트가 다양한 작업을 수행하게 되면서 자바스크립트 모듈화 방안이 논의됨 ..

함수 컴포넌트가 상태를 사용하거나 클래스 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 하기 위해 훅(hook)이 추가됨 3.1.1 useState상태 정의, 상태 관리 리액트에서 렌더링함수 컴포넌트의 return과 클래스 컴포넌트의 render 함수를 실행한 다음실행 결과를 이전의 리액트 트리와 비교해 리렌더링이 필요한 부분만 업데이트 함수 컴포넌트에서 지역 변수로 값을 다룰 때 렌더링되지 않는 이유: 렌더링이 발생될 때마다 함수는 새롭게 실행되고 지역 변수가 항상 초기화되기 때문 useState는 클로저로 구현되어 있음(함수의 실행이 종료된 이후에도 지역변수인 state를 계속 참조)const MyReact = (function () { const global = {} let index = 0..