20220823-TIL

JIWON LEE·2022년 8월 23일
0

시간은 유한하다. 우선하자. 그리고 변하자 효율적으로.

Lodash?

util함수를 제공해주는 js 라이브러리

넘블 사전 공부할 것

  • API Fetching
  • Suspense
  • History API
  • Shallow Routing
  • 우아하게 비동기 처리 (참고자료)
  • offset, limit 페이지네이션
  • react에서 정렬

마이크로프론트엔드

작은 부분으로 나누어서 개발한다 그리고 통합한다.
작은 부분개발시 다른언어여도 제한이 없다.
세부적인 내용은 어렵다. 나중에 이해하자.
읽어볼 것

명령형과 선언형의 차이에 대하여

출처
jquery가 명령형 react는 선언형으로 프로그래밍 방식이 변화하였다고 한다.
그 말을 이해하지 못해 다음과 같은 개념을 찾아보았다.

명령형은 how를 기술하고 선언형은 what을 기술한다.
따라서 선언형은 how를 추상화해야한다.

Optional chaining

x?.foo?.bar?.baz;

null 이나 undefined 체크를 할 필요가 없는 문법 !

hooks

리액트를 공부하다보면 정말 많이 듣는 말 , 처음배울 때 많이 사용한 훅
대표적으로 useState가 기억이 난다.
훅은 간단하게 리액트에서 함수형 프로그래밍을 가능하게 한 도구라고 생각하면 될 것 같다. 기존 클래스 기반 프로그래밍을 더욱 간단하게 상태를 다루도록, 해주는 등
유용하게 변화한 기술 ..

useMemo()

메모이제이션 기술이다.
컴포넌트 호출시 이미 수행된 함수라면 그 값을 저장하고 두번째 인자로 의존성 배열을 제공하고 해당 값이 변화한다면 다시 함수를 수행하는 등
리액트의 대표적 훅중 하나이다.

마이그레이션

한 운영환경에서 좀 더 나은 운영환경으로 이동하는 것

대수적효과(Algebraic Effects)

코드조각을 감싸는 맥락으로 책임을 분리하는 방식
cf) 객체지향의 의존성주입(DI), 의존성 역전(IoC)와 유사

필요한함수는 선언적으로 선언하고 부모나 런타임이 수행
토스 컨퍼런스 중

콜백함수

js에서 함수는 일급객체임으로 매개변수로 사용이 가능하다.
예전에는 비동기 처리를 위해 콜백함수를 사용하였지만
콜백지옥과 같은 코드가독성을 해치는 요인때문에 현재는 다른 방법을 사용해서 비동기 처리를 한다.

Promise

Promise또한 js에서 비동기처리를 수행할 때 사용되는 방법이다.
Promise 객체 생성을 통해서 쓰이고 콜백함수는 resolve(), reject()라는 두가지 매개변수 함수를 가진다.

그리고 then(), catch()를 통해서 각각 resolve() - 성공 일때 값을 전해받고, reject() - 실패 시 처리가 가능하다.

Promise는 대기, 이행, 실패 3가지의 상태를 가진다.
Promise도 then()지옥을 맞을 수 있다.

async await

가장 나중에 나온 비동기처리 방식
await 변수는 async함수 안에 있어야 한다.
비동기 처리 코드 앞에 await 을 붙여야한다.
비동기 처리 코드는 Promise객체를 반환하여야 한다.

에러처리는
try() catch()구문을 통해서 실행한다.

async xxx function(){
	try{
    	await Promise객체를 반환하는 함수
        // 비동기 값 사용.
    } catch(error) {
    	// 에러처리
    }
}

try...catch 에러 핸들링

try{

} catch(error){
	// error 핸들링
}

동기적으로 실행된다. try문에 error가 발생하지 않는다면 catch 부분은 실행되지 않는다.

History API

SPA에서는 주소가 변하지 않는다.
브라우저에서 제공하는 주소 API를 사용해서 주소까지 변경되게 구현해보자
이 API는 history 객체를 활용한다.

바로 history.pushState()history.replaceState()이다.
pushState()는 뒤로가기가 활성화되지만 후자는 아니다.
인자별로 데이터 및 주소변경이 가능하다.
출처

Shallow routing

요건 개발하면서 공부해야할 듯..

웹팩

웹팩은 자바스크립트 모듈 번들러이다.
번들링이란 묶는다는 것을 의미한다.
정확히는 모듈들의 의존성을 파악하여 그룹화 시켜주는 작업이다.

번들러의 종류는 많다. ex) parcel(파셀), Rollup, Browserify
하지만 웹팩이 짱인 것 같다. 그래서 인기가 제일 많다.
자세한건...

번들러의 장점은

  • 네트워크 병목현상 해결.
  • 모듈 단위 코딩
  • 다양한 서드파티 기능 이용(Babel-loader) 출처

코드분할

코드 분할은 번들이 거대해짐으로 로드 시간이 길어짐을 막아주는 것이다.
코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것이라고 생각하면 된다. Webpack과 같은 번들러가 지원하는 기능이다.

코드 분할은 앱이 "지연 로딩"하게 도와주고 좋은 사용자 경험을 준다.
동적 import()는 공식문서에서 말하는 코드 분할을 도입하는 가장 좋은 방법이다.

// 동적 import() 예시

//Before
import { add } from './math';

console.log(add(16, 26));

//After
import("./math").then(math => {
	console.log(math.add(16, 26));
});

React.lazy

React.lazy 함수를 사용한다면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있다.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

React.lazy는 Suspense와 함께 사용된다. (Loading 화면 같은 것들을 구현할 때)
React.lazy는 동적 import()를 호출하는 함수를 인자로 가진다.
이 함수는 React컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환하여야 한다.

lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 한다.
React.lazy는 현재 default exports만 지원한다...
출처

fallback

대비책이라는 뜻. Suspense props중 하나.

Route-based code splitting

앱에 코드 분할을 어느 곳에 도입할지 결정하는 것은 조금 까다롭다.
보통 그래서 라우트에 도입하는 것이 좋다.

default exports vs named exports

하나를 export할때는 default exports,
여러가지를 export할때는 named exports 이다.

default는 원하는 이름으로 import해서 사용이 가능하다.
하지만 named export는 import시 다른이름으로 사용하려면 as를 써야한다.

좋은 글

profile
포기잘하는 프론트엔드 개발자

0개의 댓글