삶도 재입학이 되나요? - mysetting

3:26 5/30

velog.io

mobile screenshot relative

3:26

velog.io

mobile screenshot

삶도 재입학이 되나요?
https://velog.io/@dongha1992

글과 코드와 사람에 관해 생각합니다.

저작도구: velog

최종 피드 수집: 2024-04-09 22:16

전체 (58)

2M

성능 최적화 (1)

이미지 레이지 로딩
이미지와 동영상이 랜딩 화면에 나오는 웹페이지가 있다고 가정하자. 웹 브라우저가 이미지와 동영상을 어떻게 가져오는지 먼저 살펴보면
용량이 큰 영상을 펜딩걸고 이미지를 먼저 다운로드 받는 것을 확인할 수 있다.

000

3M

React Testing (2)

들어가며
이제는 해보자 통합테스트!
예제
로그인 기능이 있는 앱을 테스트한다고 가정하자. 앱은 아래와 같은 구조로 되어있다.
// index
<AppProviders>
<App />
</AppProviders>
// A

000

3M

React Testing (1)

들어가며
이제는 작성하자 테스트 코드!
기본 예제
테스트 코드를 작성할 때 보통 React Testing Library나 Jest 를 사용한다. 아무 의심 없이 라이브러리에서 제공하는 메서드를 사용해서 테스트 코드를 작성했는데 이

000

3M

HTTP (2)

HTTP 메서드
API URL
1. 설계
가장 중요한 것은 리소스 식별
리소스의 의미
'회원'이라는 개념 자체가 리소스
회원이라는 리소스만 식별하면 된다.
회원 리소스를 URI에 맵핑
리소스와 행위를 분리
리소스는 명사, 행위는

000

3M

HTTP (1)

인터넷 네트워크
인터넷 통신
1. IP(인터넷 프로토콜)
지정한 IP 주소에 데이터를 전달
패킷(Packet)이라는 통신 단위로 데이터를 전달
패킷에는 출발지IP, 목적지IP, 등이 들어있음
IP 프로토콜의 한계
비연결성 : 패킷

000

4M

우선순위 큐

신춘 시즌이 끝나 다시 개발로 돌아왔다...!
Heap
피라미드 모양으로 쌓아 올린 더미
항상 가장 위에 있는 것을 우선 꺼내는 구조
부모 노드는 자식 노드보다 우선순위가 높음
힙은 트리 기반 자료구조다. 힙은 크게 두 가지로

000

1y

Browser api 테스트하기

들어가며
당장 사용할 일은 없겠지만, 테스트를 하다보면 Browser api를 테스트해야 하는 경우도 있다. 예를들어 geolocation도 있을 수 있고 뭐 기타등등.. 하지만 이러한 api는 jsdom에서 지원하지 않기 때문에

000

1y

MSW로 모킹 테스트 with testing-library

들어가며
이번에 과제하면서 MSW 를 처음 써봤다. 신기방기하다... MSW를 실무에서 써본 적이 없어 얼마나 도움이 될지는 모르겠지만 좋은 기술인 것은 확실하니 배워보자. MSW과 테스트 코드의 세계로...
예제
간단한 회원가입

000

1y

useContext 최적화

들어가며
useContext를 안 쓰다가 컴파운드로 컴포넌트를 만들면서 종종 사용하기 시작했다. context api는 친숙하지 않고 전체 렌더링 이슈 있어서 뭔가 찝찝했는데 이번 기회에 context를 최적화 해보장!
예제
위와

000

1y

useMemo with comparator

들어가며
예제
위와 같은 검색 앱이 있다고 가정하자. List Item에 hover를 하면 highlight가 되면서 리렌더링이 일어난다.
List Item 컴포넌트는 여러 props를 받고 있고 그 중 index와 hover된

001

1y

useMemo with performance tab

들어가며
useCallback, useMemo를 쓰면 매번 이 상황에서 써야 하는 게 맞나 라는 생각이 들었다. 이제는 확실히 언제 써야하는지를 판단해보자!!
예제
검색 앱이 있다고 가정하자. 기능은 세 가지다.
input에 v

000

1y

Eager Loading

들어가며
Lazy import 를 제대로 쓴 경험이 없어 이번에 제대로 배워보려고 한다. 가자 !!!
Lazy import
Lazy import란 component가 딱 필요한 순간에 import 하여 불필요하게 모든 compon

000

1y

Render as You Fetch

들어가며
Render as You Fetch에 대해 쓰다가 suspense 예제를 조금 추가했는데, 갑자기 힘이 들어서 두 개로 나눠서 작성한다...
waterfall 방식의 문제점
위와 같은 앱이 있다고 해보자. 버튼을 누르

000

1y

Data Fetch 와 Cache

들어가며
데이터 fetch 관련해서 react-query가 cache를 해주니, 딱히 구현할 필요는 없지만 난 캐시를 좋아하니까 react-query 없이도 어떻게 데이터 fetch 시 캐시를 할 수 있을지 구현해보자!
예제
예제

000

1y

Suspense

들어가며
이번 18에 추가된 suspense이 그렇게 핫하다고 하는데, 무엇이 그렇게 핫한지 알아보장!
Suspense
위처럼 무언가 정보를 fetching해서 UI에 보여주는 앱이 있다고 가정하자. PokemonInfo는 부모로

000

1y

Props Pattern

들어가며
특정 컴포넌트에 props를 overriding 해줘야 하는 경우, props collections 라는 패턴을 사용한다. 디자인 패턴을 배우면 좋은 것이, 전에는 그냥 '아 그 props 몽땅 전개연산자로 넘기는 거'라

000

1y

Compound Pattern

들어가며
요새 컴포넌트 패턴을 공부하는데 어렵다. 왜 어렵냐면 그간 써왔던 방법이 아니라, 익숙하지 않은 느낌...? children으로 렌더링을 하다 보니까 내부적으로 돌아가는 게 한 번에 확 이해가 되지 않는 것도 있다.
그

000

1y

useEffect , useLayoutEffect

들어가며
리액트는 하면 할수록 어려운 거 같다.
상황에 따라 달리 해야할 것이 많고 (가령, 메모이제이션의 경우 무분별하게 useCallback, useMemo 사용은 메모리 잡아 먹으니까 비용이 큰 함수에만 적용해야 한다고 하

000

1y

짱짱한 컴포넌트를 만들자

개발하다 종종 보있던 에러인데, 무언가 요청을 하고 페이지 이동을 하게 되면 state를 업데이트를 하려고 보니 컴포넌트는 언마운트 되어서 발생한 문제다.실무하면서도 몇 번 보았고 메모리 릭을 유발하니 useEffect clea

000

1y

useEffect과 useCallback

데이터 패칭과 useCallback, useEffect
위와 같은 앱이 있다.
포켓몬 이름의 버튼을 누르면 버튼 value에 해당하는 포켓몬 정보가 렌더 된다.
input의 입력이 없거나 초기 상태면 특정한 text를 리턴한다.

000