✅ Today I Learned
1.[TIL 210624] 쓰로틀링(Throttling)과 디바운싱(Debouncing) 구현하기
.png)
https://jins-dev.tistory.com/entry/웹프론트엔드에서-쓰로틀링Throttling과-디바운싱Debouncing의-개념리액트에서 구현시 스코프&클로저 문제 해결하기
2.[TIL 210731] 리팩토링 2판 1,2장 요약
1.2 예시 프로그램을 본 소감나는 수백줄짜리 코드를 수정할 때면 먼저 프로그램의 작동 방식을 더 쉽게 파악할 수 있도록 코드를 여러함수와 프로그램 요소로 재구성한다. 구조가 빈약하다면 구조부터 바로잡은 뒤에 기능을 수정하는 편이 작업하기가 훨씬 수월하다.(선: 리팩토
3.[TIL 21805] const assertion
.png)
웹 리뉴얼을 하며 기존 컴포넌트를 수정 및 리팩토링하는 과정에서 기존 'xsmall' | 'small' | 'medium' | 'large'와 같이 사용했던 union 타입 사용을 다음과 같이 변경하였다.이는 p tag 사이즈에 대한 타입이다.타입스크립트 - 배열의 값
4.[TIL 210821] PR 올리기 전 다시한번 체크할 것 (+ git rebase, styled-component 동작원리)
Button 컴포넌트를 추가하는 브랜치에서 Text 컴포넌트에 대한 오류를 발견하여 Text 컴포넌트를 업데이트 해야 한다면, 별도의 브랜치에서 오류를 처리한 뒤 rebase하는 방법을 사용한다.git rebase를 공부하자!되도록 const 값은 변수로 선언하기!Ex
5.[TIL 210823] 🏷️Typescript Handbook에서 새로 알게된 점 1
.png)
자바스크립트는 동적타이핑(dynamic typing) 언어이다. 따라서, 코드를 실행해보아야만 타입 에러가 나는지 등을 확인할 수 있다. 타입스크립트는 정적타이핑(static typing)을 함으로써 자바스크립트 코드를 실행하기 전 타입 유추가 가능하게 해준다.tsc는
6.[TIL 210822] 🏷️Typescript Handbook에서 새로 알게된 점 2
.png)
== null 은 null과 undefined를 모두 체크한다. (== undefined 도 마찬가지) (=== 와는 구분됨)in 객체 속성이 들어있는지 아닌지 여부로 type narrowing이 가능하다.instanceof도 타입가드로 쓰임 (if (x instanc
7.[TIL 210825] 중복 되는 element 코드 리팩터링, 디폴트 값의 의미 구분, css margin collapsing 등
.png)
Clean Code 🧼 1. 중복되는 element 부분 렌더함수로 처리하기 다음은 헤더 컴포넌트의 리턴 부분이다. LeftExtras와 RightExtras는 뒤로가기, 검색버튼, 닫기버튼 등 헤더에 추가적으로 들어갈 수 있는 ReactNode 타입의 prop인
8.[TIL 210823] 코드 리뷰 시 다시 한번 체크할 것
일반적이지 않은 beOutOfBoundary보다 checkIsOutOfBoundary가 더 이해하기 쉽다.onChange는 뭔가 event를 반환할 것으로 착각할 수도 있다. 좀더 명확한 네이밍이 좋을 것같다.
9.[TIL 210826] yarn berry, Fail-fast principle, UnhandledPromiseRejection
.png)
1. Fail-fast principle 예기치 않은 오류가 발생하는 즉시 현재 작업을 중지하는 것. 즉 에러가 나는 경우를 먼저 처리해줌으로써 코드를 더 읽기 쉽게 해준다. (반대는 try catch문과 같은 Fail-silently) 2. yarn berry
10.[html] data-attributes 사용하기
data-attributes data-* 와 같이 생긴 html 속성은 표준, semantic HTML 요소에 추가적인 정보를 저장할 수있게 해준다. 예를들어 div의 size정보를 저장한다고 하자. 자바스크립트와 css에서 data-* 값을 손쉽게 접근할 수 있
11.[React] Image Lazy Loading 구현하기
Image Lazy Loading이란? 이미지 lazy loading은 아직 화면에 보여지지 않은 이미지들은 로딩 시점을 뒤로 미루어 웹 성능을 최적화하는 기법이다. 언제 사용하면 좋을까? 위 이미지는 아이템 리스트이며, 무한스크롤을 통해 아이템을 20개씩 페이지
12.[TIL 220111] requestAnimationFrame(), React.useRef()
오늘은 블로그 첫화면이 너무 심심해서 interactive developer 김종민씨의 강의를 들으며 wave 애니메이션을 추가해보았다. requestAnimationFrame 함수는 WebAPI의 비동기 함수이며, CSS transition으로 처리하기 어려운 애니메
13.[TIL 220112] next.config.js rewrites()
1. next.config.js rewrites() 페이지 요청이 들어온 path를 다른 path로 매핑시켜준다. 즉 /blog 페이지를 홈 경로인 / 로 설정하고 싶다면 next.config.js 파일에 아래와 같이 설정해주면 된다. Refs https://n
14.[TIL 220115] CSS rem과 em의 차이점, WebAPI의 ResizeObserver란?
1. css rem과 em의 차이는 무엇일까? 절대단위와 상대단위 css에서 요소의 크기를 결정하는 단위는 2종류로 구분할 수 있다. 첫째는 다른 요소에 상대적이지 않고 고정된 값을 갖는 절대단위다. Ex) cm, mm, px 등 둘째는 부모 요소의 크기 또는 기본
15.[TIL 220120] (JS) 비동기 loop 병렬로 순차 처리하기, (CSS) :not(), [attribute*=value] Selector, white-space pre vs pre-line vs pre-wrap
JS 비동기 loop 병렬로 순차 처리하기 css :not() https://developer.mozilla.org/en-US/docs/Web/CSS/:not :not()은 CSS 의사 클래스로 ()안에 들어가는 css 선택자와 일치하지 않는 요소를 나타낸다. ex) one, two라는 className 갖는 div를 제외하고 color: gra...
16.[TIL 220127] babel.config.js vs .babelrc의 차이점, 아이템 리스트에서 이벤트 위임 처리
1. babel.config.js vs .babelrc 나는 보통 프로젝트 초기 환경설정을 할 때 이전 나의 프로젝트를 참고하거나 다른 사람의 프로젝트를 참고했다. 그러다보니 어떤 프로젝트는 babel 설정 파일 포맷을 babel.config.js, babel.co