정렬

인정합 두 원소를 검사하여 정렬하는 방법n^2의 시간 복잡도로 상당히 느리지만 코드가 단순해서 자주 사용한다.

4일 전
·
0개의 댓글

Throttling과 Debouncing

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않게하는 프로그래밍 기법계속해서 호출되는 함수들 중 마지막 함수만 호출하도록 하는 프로그래밍 기법

6일 전
·
0개의 댓글

Modal

웹 서비스에서는 화면전환이 아닌 팝업을 통해서 새로운 창을 열어야할 때 Modal을 이용한다.

2020년 6월 30일
·
0개의 댓글

Infinity Scrolling과 이미지 Lazy Loading

사용자가 보고 있는 브라우저 화면의 크기는 제한되어있다. 그러므로 보이지도 않는 콘텐츠를 미리 렌더링할 필요가 없다. 이를 위해 콘텐츠의 일부분을 로딩하고 나머지는 스크롤이 끝까지 내려왔을 때 로딩한다. 이것을 Inifnity Scrolling이라고 한다.스크롤이 끝까

2020년 6월 30일
·
0개의 댓글

DNS

클라이언트가 인터넷에 연결된 기기를 식별하기 위해 기기들이 가지고 있는 유일한 번호를 IP주소라고 한다.사이트에 접속하기 위해서는 해당 사이트에 대한 정보를 갖고 있는 서버의 주소 IP를 알아야한다. 무수히 많은 사이트의 IP를 알아내기란 쉽지 않다.DNS 서버는 도메

2020년 6월 26일
·
0개의 댓글

Redux-Saga #2

call을 이용해서 비동기함수를 호출한다면 동기적으로 함수가 종료되고 반환할 때까지 기다려야한다. 하지만 호출 중간에 우발적으로 일어나는 다른 액션 또한 동작하기를 원한다면 fork을 이용해야한다.결합되어있는 fork들의 부모는 결합된 모든 fork들이 종료 된 뒤에

2020년 6월 26일
·
0개의 댓글

Redux-Saga #1

Redux-Saga는 비동기 데이터처리, 에러 핸들링 과 테스트를 좀 더 쉽고 효율적으로 관리하기 위해 사용되는 Redux middleware이다.https://redux-saga.js.org/logo/0800/Redux-Saga-Logo-Landscape.p

2020년 6월 26일
·
0개의 댓글

Immer

React 컴포넌트의 state를 변경해야 할 땐, 무조건 불변성을 유지해야한다.업데이트 하는 과정에서 기존의 객체의 값을 직접 수정하면 안된다.객체 구조가 깊어질수록 불변성을 유지하면서 수정하기가 어렵다.immer는 불변성을 유지해주는 라이브러리입니다. produce

2020년 6월 23일
·
0개의 댓글

Redux #2

기존 방식으로 Redux를 사용하는 경우 mapStateToProps를 이용해서 props내 state를 정의하고, connect를 이용해서 props를 바인딩하는 복잡한 행동을 해야한다.하지만 react-redux의 useSelector와 useDispatch라는 h

2020년 6월 23일
·
0개의 댓글
post-thumbnail

Redux #1

상위 컴포넌트로부터 하위 컴포넌트까지의 상태값의 효율적인 전달을 위해서 Context Api를 사용한다. 하지만 앱의 규모가 커지면 커질수록 컴포넌트의 개수와 데이터 개수가 늘어남에 따라 코드도 복잡해지고 길어진다. 이를 해결하기 위해 상태값을 중앙화 시켜 유지관리하기

2020년 6월 23일
·
0개의 댓글
post-thumbnail

Context API

주로 어플리케이션에서 전역적으로 데이터가 사용되야 할 때 사용한다. 여러 컴포넌트를 거쳐서 값을 전달하는 것이 아니라 Context를 통해서 원하는 값이나 함수를 전달할 수 있따.Context는 createContext 함수를 사용해서 만들며, 함수를 호출하면 Prov

2020년 6월 23일
·
0개의 댓글

Hook #3

컴포넌트를 작성하다 DOM을 직접 다루어야 하는 경우나 렌더링 이후 업데이트 된 상태를 바로 조회해야할 경우 useRef를 사용한다.이 변수를 사용하여 다음과 같은 값을 관리한다.setTimeout, setInterval을 통해서 만들어진 id외부 라이브러리를 사용하여

2020년 6월 22일
·
0개의 댓글

Hook #2

자바스크립트의 6가지 타입 중 객체를 제외한 원시 값들은 참조 값이 아닌 값 자체를 새로 할당한다. 따라서 값이 변경되면 서로 다른 값을 가지게 된다.반면 참조 타입인 객체는 하나의 값이 변경되면 다란 하나의 값도 동일하게 변경된다. 또한, 참조 타입은 동일 참조 값이

2020년 6월 22일
·
0개의 댓글

Render Props

컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지 않다.컴포넌트 안에서 사용된 행위를 다른 컴포넌트에서 재사용하려면 render prop

2020년 6월 22일
·
0개의 댓글

Hook #1

React의 클래스형 컴포넌트는 재사용 가능한 행동을 붙이기 위해서 render props와 HOC와 같은 패턴을 사용해왔다. 하지만 이런 패턴을 사용할 때 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게한다. Hook은 계층 변화 없이 상태관련 로직을 재

2020년 6월 19일
·
0개의 댓글

Composition

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없다. 이러한 컴포넌트에서는 childeren prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달한다.흔하지 않지만 컴포넌트에 여러 개의 구멍이 필요할 수도 있습니다. 이런 경우에는 children 대

2020년 6월 19일
·
0개의 댓글
post-thumbnail

CDN

서버에서 멀리 떨어져있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술로써 서버 자체를 여러곳에 두고 이용자가 요청했을 때 제일 근접한 서버에서 처리함으로써 지연되는 시간을 줄여준다. 이 과정에서 여러곳에 캐시 서버를 분산해서 한개의 서버가 죽더라도 다른 서버에서

2020년 6월 19일
·
0개의 댓글

이벤트 핸들링

React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다.DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될 때

2020년 6월 19일
·
0개의 댓글

클래스형 컴포넌트

클래스형 컴포넌트에서는 render() 메서드가 있어야한다. render() 메서드에서 렌더링하고 싶은 JSX를 반환한다. defaultProps를 사용하여 props의 default 값을 설정한다.this 키워드를 사용하려면 생성자 함수 안에 super(props)를

2020년 6월 18일
·
0개의 댓글

컴포넌트와 Props

Component는 UI가 어떻게 보여야하는지 정의하는 React element를 output으로 하는 함수. 함수형과 클래스로 정의할 수 있음.React가 사용자 정의 컴포넌트로 작성한 element를 발견하면 JSX attribute와 자식을 해당 Component

2020년 6월 18일
·
0개의 댓글