본문 바로가기

Programming/13. Book16

모던 리액트 Deep Dive - 12장 웹사이트와 성능 웹사이트에 기대하는 사항 웹사이트 방문 목적 달성 달성 시간 최소 개인정보 누출 등 보안 철저 개발자들이 성능에 크게 관심을 갖지 않는 이유 개발자의 기기가 평균 기기보다 성능이 뛰어나다. 성능 개선 작업은 쉽지 않고, 눈에 띄는 성능 향상을 기대하기 어렵다. 핵심 웹 지표 Core Web Vital LCP (Large Contentful Paint) FID (First Input Delay) CLS (Cumulative Layout Shift) TTFB (Time To First Byte) FCP (First Contentful Paint) LCP 페이지가 처음으로 로드를 시작한 시점 ~ 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는데 걸리는 시간 사용자의 기기가 노출하는 뷰.. 2024. 3. 3.
리팩터링 - 7장 Chapter 07. 캡슐화 ✏️ 레코드 캡슐화하기 배경 대부분의 프로그래밍 언어는 데이터 레코드를 표현하는 구조를 제공한다. 이 구조에는 장, 단점이 있는데, 데이터를 직관적인 방식으로 묶을 수 있어서 의미 있는 단위로 전달할 수 있게 해준다는 장점이 있다. 계산해서 얻을 수 있는 값과 그렇지 않은 값을 명확히 저장해야 하는 단점이 있다. e.g.) { start: 1, end: 5, length: 5 } → 값의 범위에 해당하는 length는 연산 값일 수 있다. 이에 가변 데이터를 저장하는 용도로는 레코드보다 객체가 나을 수 있다. 객체를 사용하면 어떻게 저장했는지를 숨긴 채 각각의 값을 메서드로 제공할 수 있다. 레코드 구조는 두 가지로 구분할 수 있다. 필드 이름을 노출하는 형태 (필드를 외부로.. 2024. 3. 2.
리팩터링 - 12장 Chapter 12. 상속 다루기 ✏️ 메서드 올리기 배경 메서드 올리기를 적용하기 가장 쉬운 상황은 메서드들의 본문 코드가 똑같을 때다. 이럴 땐 그냥 복사 - 붙여넣기면 끝이다. 보통 메서드 올리기를 적용하려면 선행 단계가 필요하다. e.g. 서로 다른 두 클래스의 두 메서드를 같은 메서드로 만들기 각각의 함수를 매개변수화한 후 메서드를 상속 계층의 위로 올리기 절차 같은 동작의 메서드인지 확인한다. 메서드 안에서 호출하는 다른 메서드와 참조하는 필드들을 슈퍼클래스에서도 호출하고 참조할 수 있는지 확인한다. 함수 선언 바꾸기로 슈퍼클래스에서 사용하고 싶은 형태로 통일한다. 서브클래스 중 하나의 메서드를 제거한다. 모든 서브클래스의 메서드가 없어질 때까지 하나씩 제거한다. 예시 Before // 코드 .. 2024. 3. 2.
리팩터링 - 11장 Chapter 11. API 리팩터링 ✏️ 질의 함수와 변경 함수 분리하기 배경 우리는 외부에서 관찰할 수 있는 겉보기 부수효과(Observable Side Effect)가 전혀 없이 값을 반환해주는 함수를 추구해야 한다. 순수 함수: 같은 입력에 대해서 같은 결과를 반환하며 함수의 바깥 영역에 side effect를 초래하지 않는 함수 겉보기 부수효과가 있는 함수와 없는 함수는 명확히 구분하는 것이 좋은데, 이를 위한 한 가지 방법은 ‘질의 함수(읽기 함수)는 모든 부수효과가 없어야 한다’ 는 규칙을 따르는 것이다. 이를 명령-질의 분리라 한다. 명령-질의 분리 원칙 - 어떤 메서드는 명령을 실행(부작용을 생성하는 어떤 작업을 함)하거나 질의에 대답(어떤 값 반환)할 수 있으며, 두 작업을 모두하면 안.. 2024. 3. 2.
리팩터링 - 10장 Chapter 10. 조건부 로직 간소화 ✏️ 조건문 분해하기 배경 복잡한 조건부 로직은 프로그램을 복잡하게 만든다. 다양한 조건, 그에 따라 동작도 다양한 코드를 작성하면 순식간에 꽤 긴 함수가 탄생한다. 거대한 코드 블록이 주어지면 코드를 부위별로 분해한 다음 각각 의도를 살린 이름의 함수 호출로 바꿔주자. 이렇게 하면 해당 조건이 무엇인지 강조하고, 그래서 무엇을 분기했는지 명확해진다. 절차 조건식과 그 조건식에 딸린 조건절 각각을 함수로 추출한다. 예시 Before // 함수 내용 : 여름 기간 여부에 따라 할인율이 달라지는 함수 // 목표: 조건식을 별도 함수로 추출해 조건문 정리하기 if (!aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.s.. 2024. 3. 2.
리팩터링 - 8, 9장 Chapter 08. 기능 이동 ✏️ 함수 옮기기 배경 좋은 소프트웨어 설계의 핵심은 모듈화가 얼마나 잘 되어 있느냐이다. 이를 모듈성(modularity)라고 한다. 모듈성: 프로그램의 어딘가를 수정하려 할 때 해당 기능과 깊이 관련된 작은 일부만 이해해도 가능하게 해주는 능력. 모듈성을 높이려면 서로 연관된 요소들을 함께 묶고, 요소 사이의 연결 관계를 쉽게 찾고 이해할 수 있도록 해야 한다. 독립적으로 고유한 가치가 있는 함수는 분리하고, 관련이 있는 함수끼리는 묶어준다. 이를 결정하기 위해서는 대상 함수의 컨택스트(해당 함수가 호출하는 함수는 무엇이 있는지, 사용하는 데이터가 무엇인지)를 살펴본다. 절차 선택한 함수가 현재 컨택스트에서 사용중인 모든 요소를 살펴본다. 그리고 이 중 함께 옮길만한 .. 2024. 3. 2.
리팩터링 - 5, 6장 Chapter 05. 리팩터링 카탈로그 보는 법 ❗️ 리팩터링 설명 형식 이름 리팩토링 용어 지칭 개요 리팩터링의 핵심 개념을 간략히 표현 개념도 + 코드 예시 배경 해당 기법이 왜 필요한지, 또는 적용하면 안되는 상황이 어떤건지에 대해 설명 절차 리팩터링 과정을 단계별로 제시 예시 리팩터링 실제 적용 예시 & 효과 Chapter 06. 기본적인 리팩터링 ✏️ 함수 추출하기 배경 코드 조각을 찾아 무슨 일을 하는지 파악한 다음, 독립된 함수로 추출하고 목적에 맞는 이름을 붙인다. 이렇게 했을 때 함수 이름만으로 목적을 빠르게 파악할 수 있고, 본문 코드에 크게 신경쓰지 않아도 되기 때문이다. 이 방식으로 여러 짧은 함수가 만들어져 호출량의 증가로 성능 저하가 있다고 생각할 수 있지만, 함수가 짧으면 캐싱.. 2024. 3. 2.
리팩터링 - 2장 Chapter 02. 리팩터링 원칙 💡 리팩터링의 정의 ✏️ 리팩터링 [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 동작을 보존하는 작은 단계들을 거쳐 코드를 수정하고 이러한 단계들을 순차적으로 연결하여 변화를 만들어 내는 일 리팩터링하는 동안에는 코드가 항상 정상 작동하기 때문에 전체 작업이 끝나지 않았더라도 언제든 멈출 수 있다 성능 최적화와 비슷하다. 둘 다 코드를 변경하지만 리팩터링의 목적은 코드를 이해하고 수정하기 쉽게 만드는 것이기 때문에 성능이 좋아질 수도, 나빠질 수도 있는 반면, 성능 최적화는 오로지 속도 개선에만 신경을 쓴다 🎩 두 개의 모자 기능을 추가할 때는 기존 코드를 건드리지 않고 새 기능을 추가하기만 한다 리팩.. 2024. 3. 2.
모던 리액트 Deep Dive - 11장 Next.js 13과 리액트 18 app directory의 등장 13 버전 이전 페이지 _document: 페이지에서 쓰이는 html, body 태그 수정, SSR 시 style 주입 _app: 페이지 초기화 용도 13 버전 layout.js: 주소별 공통 UI 포함 / 웹 페이지 시작에 필요한 공통 코드 삽입 children을 props로 받아 렌더링 page.js: 리액트 컴포넌트 노출 error.js: 공통 에러 컴포넌트 에러 바운더리는 클라이언트에서만 작동 (client component) 루트 에러 처리는 global-error.js로 not-found.js: 404 페이지 렌더링 서버 컴포넌트 loading.js: Suspense 기반으로 컴포넌트 불러오는 중임을 나타냄 route.js: h.. 2024. 3. 2.
모던 리액트 Deep Dive - 10장 리액트 17 버전 살펴보기 리액트 16 모듈은 promise로 lazy하게 불러와서 호환성 유지 17 내부에서 16 모듈을 렌더링 하나의 웹 사이트에 16, 17버전이 공존하는 방식 이벤트 위임 방식의 변경 click 이벤트에 일반 핸들러가 아닌 ref로 제어하게 되면 click이 아닌 noop라는 핸들러 추가 하지만 동일하게 동작하는데, 그 이유는 이벤트 타입당 하나의 핸들러를 루트에 부착하는 이벤트 위임 방식을 사용하기 때문이다. 16까지는 document에 연결했지만, 17부터는 리액트 컴포넌트 최상단 트리로 변경됐다. document에 이벤트가 부착되면 이벤트 전파를 막을 수 없게 돼 이벤트 버블링에 혼선이 생기기 때문이다. 그래서 16에서는 document - 루트 사이에 stopPropagat.. 2024. 3. 2.
모던 리액트 Deep Dive - 5장 상태 관리는 왜 필요한가? 웹 애플리케이션에서의 상태 분류 UI: 상호 작용이 가능한 모든 요소의 현재 값 URL: 브라우저에서 관리되고 있는 상태값 폼: loading, submit, disabled, validation 등 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값 리액트 상태 관리의 역사 Flux 패턴이 나오게 된 배경 상태의 변화를 추적하기 어렵게 하는 것은 양방향 데이터 바인딩 뷰가 모델을, 모델이 뷰를 변경하는 방식 페이스북은 이러한 문제를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 제안했다. Flux 패턴 액션 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킨 데이터 액션 타입과 데이터를 디스패처로 보낸다. 디스패쳐 액션을 스토어로 보내는 역할 콜백.. 2024. 3. 2.
모던 리액트 Deep Dive - 4장 SSR이란? SPA 렌더링, 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식 최초에 서버에서 최소한의 데이터를 불러온 이후 이미 가지고 있는 JS 리소스와 브라우저 API 기반으로 동작 최초 첫 페이지에 데이터를 불러온 후 페이지 전환은 history.pushState, replaceState로 이뤄진다. body에는 아무런 내용이 없다. 스택의 종류 LAMP Linux, Apache, MySQL, PHP/Python JAM JS, API, Markup MEAN MongoDB, Express.js, Angular.js, Node.js 새로운 패러다임의 웹서비스를 향한 요구 웹페이지를 불러오는데 필요한 부분을 사용자에게 전가해도 기기나 환경의 발전으로 괜찮을거라 생각 그.. 2024. 3. 2.
반응형

티스토리툴바