공부하자

요즘따라 부트캠프 광고가 ㅈㄴ 맣ㄴ이 뜬다 궁금해서 들어가봤는데 프론트엔드 주요 습득 개념? 이런 걸 써놨더라구 pre fetching lazy loading optimistic update 테스팅 기법 이런 것들 내가 그냥 공부해서 기록해두면 좋을 것 같아서 적는다 가성비 부트캠프 ㅋㅋ ㅎ Prefetching(react-query) - 데이터가 실제로 필요하기 전에 사전에 데이터를 가져오고 캐시에 저장하는 프로세스! 데이터를 미리 가져와 필요할 때 데이터를 즉시 사용할 수 있도록 하여 애플리케이션의 응답성과 사용자 경험을 개선하는 것 lazy loading - 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것 이것도 역시 사용자 경험 개선 optimistic update - 요청을..

https://www.acmicpc.net/problem/14889 14889번: 스타트와 링크 예제 2의 경우에 (1, 3, 6), (2, 4, 5)로 팀을 나누면 되고, 예제 3의 경우에는 (1, 2, 4, 5), (3, 6, 7, 8)로 팀을 나누면 된다. www.acmicpc.net 문제 정리 팀의 능력치 : 팀에 속한 모든 쌍의 능력치 Sij의 합 = Sij + Sji 두 팀의 능력치 차이의 최솟값을 구하기 생각 모든 경우의 수를 구해야 하긴 하는데… 1. 팀 구성 방식 - 중복이 허용되지 않으니까 순열로 구해야 하긴 함! 한 팀에 속하면 visited로 방문 표시를 하면서 방문한 팀이 n/2될 때 까지 방문하고! 이런 식 2. 팀의 능력치 비교 - 표에서 그대로 가져오는데 두 팀의 능력치 차를..

이어지는글 https://5ffthewall.tistory.com/73 [React] 리액트 recoil 예제 만들어 사용해보기 이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewa 5ffthewall.tistory.com recoil 예제까지 만들면서 recoil에 대한 공부를 했다. 이젠 context API로 상태 관리를 했던 내 코드를 recoil로 변경해 볼 것이다. recoil을 선택한 이유 recoil은 클라이언트의 상태를 관..

이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context 5ffthewall.tistory.com recoil의 개념을 담은 글이다! 개념에서 더 나아가 간단한 예제를 만들어 사용법에 익숙해지고자 한다. Recoil을 사용하여 간단한 할 일 목록 애플리케이션 만들기 0. 예제 파일 생성 npm create-reac..

https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통 5ffthewall.tistory.com 전 글에서 말했다 싶이 context API로 상태 관리를 했을 때 문제점에 대한 해결 방안으로 1. useMemo 사용하기 2. Dispatch provider와 Dispatch consumer 분리 가 있었다. 하지만 내부..

https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 5ffthewall.tistory.com 위 글과 같이 context API로 전역 상태를 관리하는 코드를 작성한 적이 있다. 하지만 이 코드에는 문제점이 있는데 바로 Provider의 상태가 변했을때 이를 구독하고 있는 컴포넌트의 경우 일제히 리렌더링이 일어난다는 문제이다. 하위 컴포넌트의 개수가 많아지거나 프로젝트의 규모가 커지면 불필요한 리렌더링이 많아지면서 ..

https://www.acmicpc.net/problem/15686 15686번: 치킨 배달 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸 www.acmicpc.net 문제 정리 주어진 도시 정보에서 M개의 치킨집만 남기는데 치킨집과 집 사이의 총 거리가 가장 적게 되도록 M개를 골라서 도시의 치킨 거리의 최솟값을 구하면 됨! (각 집과 치킨집 사이의 거리의 총 합이 최소가 되는) 생각 브루트포스로 모든 M개를 골랐을 때마다 거리를 다 구해놓고 그 중 min을 구함! 근데 M개를 고르는 로직은 어떻게 하지? 모든 경우의 수를 구한다고 하면 ..

https://www.acmicpc.net/problem/3085 3085번: 사탕 게임 예제 3의 경우 4번 행의 Y와 C를 바꾸면 사탕 네 개를 먹을 수 있다. www.acmicpc.net 문제 정리 문자가 들어있는 보드 값이 주어지면 위치를 서로 바꿔 같은 행이나 열을 만들면 사탕을 먹을 수 있다. 먹을 수 있는 최대 사탕의 개수를 구하는 문제 생각 음... 근데 이동만 하면 3의 배수로 사탕이 없어지는 거 아닌가? 아닌가 문제 이해를 잘못했나... -> 먹으면 그 다음은 이동을 못하나봐 문제 이해!!!! 그냥 딱 한 번만 바꿨을 때 최대의 사탕을 구하면 된다! 상하좌우 4방향을 전부 검사할 것인지, 두 방향만 고정해서 반복되는 경우를 줄일 것인지 선택을 해야된다 그냥 중복되는 경우를 줄이기 위해 ..

https://www.acmicpc.net/problem/2798 2798번: 블랙잭 첫째 줄에 카드의 개수 N(3 ≤ N ≤ 100)과 M(10 ≤ M ≤ 300,000)이 주어진다. 둘째 줄에는 카드에 쓰여 있는 수가 주어지며, 이 값은 100,000을 넘지 않는 양의 정수이다. 합이 M을 넘지 않는 카드 3장 www.acmicpc.net 알고리즘 스터디 하는 친구가 가져온 문제가 백트래킹 문제들인데 브루트 포스 개념조차 기억이 안 나서... ㅠㅠ 개념 리마인드 겸 브루트 포스 문제의 대명사인 블랙잭 문제를 다시 풀어보고자 한다 브루트 포스의 종류 순차 탐색 - 선형 구조를 순차적으로 탐색 DFS(깊이 우선 탐색) - 비선형구조를 점점 더 깊게 깊이를 우선적으로 탐색하는 방법 BFS(너비 우선 탐색)..

Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 있다. Props Drilling Problem을 해결하기 위해 생김! 컴포넌트 트리에서 Context라는 거대한 공통 조상을 만들고 그 Context로 부터 데이터를 제공을 받는 방식이다. 별도의 Store을 가지고 있는 FLUX와 비슷한 느낌이 있어서 최근에는 복잡한 문법을 가지고 만들어야 하는 Redux보다는 React의 기본 기능인 Context API를 쓰겠다는 움직임이 생기고 있다고 한다. Context API의 핵심 개념 Context: Context는 React 컴포넌트..