최적화 (Optimization)웹 서비스 단에서 최적화할 수 있는 사항들은 간단히 아래 요소들이 있다.서버의 응답 속도 개선 (Backend 측)이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선 (Frontend 측)불필요한 네트워크 요청 줄이기 (Frontend 측) React APP 최적화이번 글에서는 React 웹 프론트 단에서 성능을 최적화할 수 있는 방법에 대해 알아보고자 한다. 먼저, 리액트에서 컴포넌트가 랜더링 되는 상황에 대해 알고 있어야 한다.컴포넌트 내 Staet 변경컴포넌트 내 Props 변경부모 컴포넌트 변경 시 자식 컴포넌트도 재랜더링됨 위 랜더링되는 상황을 인지하면서, 불필요한 로직(함수 재생성, 랜더링)을 줄일 수 있는 방법은 아래와 같다.컴포넌트 내부의 불필요한 연산 방..
React Context리액트에서 Context란,컴포넌트 간의 데이터를 전달하는 방법 중 하나이다.기존 Props로 전달하는 방식의 단점을 해결할 수 있다. Props 전달 방식의 단점Props는 부모 -> 자식 컴포넌트로만 데이터를 전달할 수 있다.더 자세히 말하면, 바로 밑에 있는 자식 컴포넌트로만 props를 전달할 수 있다.App -> ChildB로 전달하기 위해서는 단계별로 Props를 전달해야 한다. 이러한 불편한 점을 Context를 사용하여 바로 Props를 전달할 수 있다. createContextTodoContext라는 React Context를 만들어, 객체, 함수 등을 전달할 수 있다.// 부모 컴포넌트에 있으면, 재랜더링 될 때마다 생성됨 -> 외부에서 관리하기export con..
Utility TypesTypescript utility types are built-in types that enable you to transform and manipulate existing types in various ways타입스크립트의 유틸리티 타입은 기존 타입을 조작(변형)해서 새로운 타입을 만드는 것을 지원한다.interface Todo { title: string; description: string;} Partial utility typetakes an existing type and makes all its properties optionalPartial 타입은 모든 속성을 Optional 하게 존재하는 타입으로 만들어준다.interface Todo { title: strin..
How to handle Error with TypescriptJS에서는 어떤 값이든 에러로 던질 수 있다. (하하하. 어려워)그러나 Typescript에서 JS와 동일하게 에러를 처리하려고 하면 아래와 같이 에러가 뜬다.[typescript] Object is of type 'unknown'.ts(2571) (error object) 기존에는 error가 any 타입이었기 때문에, 자바스크립트와 같이 사용해도 ts error가 발생하지 않았다.하지만, ts v4.4부터 error의 object가 unknown 타입으로 정의되어서 에러가 발생한다. Sol_1) any 타입(async () => { try { await axios.get('/user/12345'); // axios 라이브러리 ..
