TIL
1.SVG
🍊 학습 목적 triplus 프로젝트를 진행했을 때, 지도의 마커를 표시해주기 위해 처음에는 kakao api의 Marker 메소드를 사용하여 png 파일로 마커를 생성했었다. 하지만, 이미지가 느리게 뜨는 문제가 있었고, 이를 해결하기 위해 overlay메소드를
2.프론트엔드 성능 최적화
이미지 로딩
3.번들러 웹팩 바벨
리액트 cra 웹팩웹팩 lazy-loading??lazy-loading 정리번들러는 의존성이 있는 모듈(특정 기능을 갖는 작은 코드 단위)들을 하나의 파일로 통합시켜주는 도구복잡한 애플리케이션을 개발할 때 모든 변수의 이름을 기억하지 않는 이상 변수가 중복되는 문제가
4.AWS 배포 정리
EC2란 아마존 웹 서비스에서 제공하는 클라우드 컴퓨팅 서비스AWS EC2 인스턴스를 생성한다는 것은 AMI를 토대로 운영체제, CPU, RAM 혹은 런타임 등이 구성된 컴퓨터를 빌리는 것.EC2 인스턴스를 사용하면 데이터베이스와 관련해서 자동으로 관리를 담당하는 부분
5.성능 최적화
성능 최적화 (https://ui.toast.com/fe-guide/ko_PERFORMANCE웹 페이지가 로딩될 때 DOMContentLoaded, load 이벤트가 발생하며, 각 이벤트가 발생하는 시점으로 성능을 측정하게 된다.이 모델에서 DOMContent
6.[TypeScript] Section1 시작하기
정적타입 언어는 컴파일 시에 변수의 타입이 결정되는 언어를 의미한다.장점타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 높음컴파일 시에 미리 타입을 결정하기 때문에 실행속도가 빠름단점매번 코드 작성시 변수형을 결정해줘야 하는 번거로움이 있음동적타입 언
7.[TS] Section2 기본 & 타입
타입스크립트에서는 타입 표기가 없는 경우, 타입 정보를 제공하기 위해서 타입을 유추한다.ES6의 템플릿 문자열도 지원한다.물론 객체 타입은 중첩 객체에 대해서도 생성할 수 있다.따라서 객체 타입 안에 객체 타입이 있다고 말할 수 있다.
8.[React] Context API / useReducer
React 공식문서
9.[TS] Section3 컴파일러 및 구성
dd
10.프로그래밍 패러다임
프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 방식input data를 받아들여 가공해 output data를 만들어내고 출력하는 구조의 프로그래밍 방식.즉, 문제를 어떻게(how) 해결할 것인지를 설명하는 프로그래밍 방식.데이터와 기능(함수)으
11.intersectionObserver API
타겟 요소와 root 요소 사이의 intersection 변화를 비동기적으로 관찰하는 방법페이지 스크롤 시 이미지를 Lazy-loading(지연 로딩)할 때Infinite scrolling(무한 스크롤)을 통해 스크롤할 때 새로운 콘텐츠를 불러올 때광고의 수익을 계산하
12.[TS] Section5 Class Interface
typescript class
13.[TS] Section6 고급 타입
인터섹션 타입을 이용해 “여러 경우에 모두 해당”하는 타입을 표현할 수 있다.A & B 타입의 값은 A 타입에도, B 타입에도 할당 가능해야 한다. 만약 A와 B 모두 객체 타입이라면 A & B 타입의 객체는 A와 B 타입 각각에 정의된 속성 모두를 가져야 한다.typ
14.[TS] Section7 제네릭
제네릭
15.[TS] Section8 데코레이터
퍼스트 클래스 데코레이터
16.[TS] Section 9 Dom 요소 선택 및 OOP 렌더링
Dom 요소 선택
17.[SCSS] SCSS 정리
SCSS 세팅
18.[TS] Section14 React.js & Typescript
useState 초기값이 없는 경우 다음과 같이 타입을 지정할 수 있다. 아래의 경우는 null 혹은 AuthUser 타입을 가진다는 것을 의미 하지만, 위와 같이 설정하게 되면 null 타입 또한 허용되기 때문에, as를 이용하는 것이 좋다. 아래와 같이 as를
19.[React] HOC 고차 컴포넌트
HOC는 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.예제1 고차 컴포넌트예제2 React 고차 컴포넌트 튜토리얼
20.[TS + React] defaultProps
Property 'header' is missing in type '{}' but required in type 'HeaderProps'.참고 SFC 타입 선언에 & { defaultProps: Partial } 에러 처리
21.[test] 테스트
한번 작성된 테스트 코드는 영원히 유지보수 해야한다. => clean code테스트 코드에서는 내부 구현사항을 테스트하면 안된다.재사용성을 높이기 (테스트 유틸리티)배포용 코드와 철저히 분리테스트코드를 통한 문서화 => 테스트코드는 문서화의 효과도 있다모든 테스트 코드
22.[jest]
🍉 jest 시작하기 변경할 때마다 모든 test 실행 commit되지 않은 파일만 test 실행 🍉 기본 테스트 작성 >- 예제) calculator.js describe : 관련있는 테스트끼리 묶음. beforeEach : 각각의 테스트가 실해오디기 전에