FrontEnd
![[React] Deep Dive 모던 리액트(17) Recoil 살펴보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKjWb2%2FbtsC85idlK4%2FY5fHCTV1c9CBC7FgByEeh1%2Fimg.png)
[React] Deep Dive 모던 리액트(17) Recoil 살펴보기
저번글까지 전역 상태관리들을 직접 만들어 보았다. 이번에는 리액트 생태계에서 인기있는 라이브러리들에 대해 알아보자. Recoil과 Jotail는 Context과 Provider , 훅을 기반으로 가능한 작은 상태를 효율적으로 관리하는 데 초점을 맞추고 있다. Zustand는 리덕스처럼 하나의 큰 스토어를 기반으로 상태를 관리한다. Recil , Jotail과는 다르게 이 하나의 큰 스토어는 Context가 아니라 스토어가 가지는 클로저를 기반으로 생성되며 이 스토어의 상태가 변경되면 이 상태를 구독하는 컴포넌트에 전파한다. Recoil 리액트를 만든 페이스북에서 만든 상태 관리 라이브러리이다. 훅의 개념으로 상태 관리를 시작한 최초의 라이브러리들중 하나이며 Atom을 처음 리액트 생태계에서 보였다. 20..
![[JS] 주사위 고르기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FedbtRx%2FbtsC4EshYzU%2FgrhfsnAXoFBp6QVpE9Bif1%2Fimg.png)
[JS] 주사위 고르기
DFS(완전탐색) + 조합 + Map 자료형 을 조합해서 풀었다. https://school.programmers.co.kr/learn/courses/30/lessons/258709 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음에는 단순하게 완전탐색 + 조합을 활용해서 해결해보려 했다. 조합을 활용해서 모든 주사위 눈의 경우의수를 얻어낸 후 해당 주사위 조합마다 완전탐색을 활용하여 cnt를 계산했다. 하지만 이방식의 경우 이 문제를 풀 수 없다. 최대 주사위가 10개이므로 6 * 10 (완전탐색) * 10C5 의 시간복잡도가 만들어져 해결을 할 수 ..
![[JS] n+1 카드게임](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fm3StQ%2FbtsC8SinZa4%2FCIXukTR5OkD4H6Ari4YmRK%2Fimg.png)
[JS] n+1 카드게임
https://school.programmers.co.kr/learn/courses/30/lessons/258707 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2024 카카오 인턴 문제로 추가된 따끈따끈한 문제로 구현능력을 보는 문제같았다. 제한사항을 보면 알겠지만 케이스가 널널한 편이다. 우선 문제를 해결하기 전에 n+1을 만들기 위해선 항상 수가 쌍으로 존재한다는 생각을 해야한다. 테스트 케이스들에서 n이 12로 고정되었는데 n+1인 13을 만들기 위해서는 (1,12) (2,11) (3,10) ... 이런식으로 두 수로 n+1을 만들기 위해서는 한..
![[React] Deep Dive 모던 리액트(16) 훅을 통한 전역상태관리 구현](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoTP5m%2FbtsCSBQkhRe%2FNsjTVjpRw42v3YwOhSub3k%2Fimg.png)
[React] Deep Dive 모던 리액트(16) 훅을 통한 전역상태관리 구현
이전 글에서 소개했듯이 정말 오랜 기간동안 리액트 애플리케이션의 상태관리는 리덕스에 의존했다. 심지어 일부 개발자들은 리액트 + 리액트를 하나의 프레임워크 정도로 생각할 정도였다. 하지만 지금은 Context API , useReducer , useState의 등장으로 리덕스 외의 다른 상태관리 라이브러리를 선택하는 경우가 많아졌다고 한다. ( 리덕스가 조금 수고스럽긴 하다) useState 해당 훅의 등장으로 리액트에서는 여러 컴포넌트에 걸쳐 동일한 인터페이스의 상태를 생성하고 관리할 수 있다. 아래와 같은 훅이 있다고 생각해보자. const useCounter = () => { const [counter, setCounter] = React.useState(0); function increase() ..
[JS] 네트워크
유니온 파인드를 사용해서 해결했다. https://school.programmers.co.kr/learn/courses/30/lessons/43162 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제가 조금은 독특하게 주어졌다. 서로 이어져 있는것을 그래프 형태도 아니고 한번에 map으로 주어진 것도 아닌 형태로 주어졌다. 문제를 처음 딱 보자마자 union-find를 활용해서 네트워크에 맞는 컴퓨터들을 합쳐주면 되겠다! 라 생각을 했다. set의 개수를 구하는 방법은 마지막에 틀릴 수 있다는 게 유니온-파인드를 쓴다면 조금 조심해야 할 부분이다. 왜냐..
![[React] Deep Dive 모던 리액트(15) 리액트와 상태관리 라이브러리 역사](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdSujKR%2FbtsCZ6gLMou%2FihOMWVQutKdOH0PXp8xSPk%2Fimg.png)
[React] Deep Dive 모던 리액트(15) 리액트와 상태관리 라이브러리 역사
보통 상태관리라고 하면 많은 개발자들이 리덕스를 떠올릴 것이고 최근에 페이스북에서 만들어진 Recoil과 같은 라이브러리를 생각하곤 한다. 하지만 왜 상태관리가 필요하고 어떤 방식으로 전역상태 관리가 이루어지는지 간과하는 경우가 많다. 상태관리 ? 그렇다면 상태관리란 무엇일까? 흔히 웹 애플리케이션을 개발하는 경우 이야기 하는 상태는 어떠한 의미를 가진 값을 의미한다. UI 기본적으로 웹 어플리케이션에서 상태는 상호작용이 가능한 모든 요소의 현재 값을 의미하므로 다크/라이트 모드 , input , 모달 등등 많은 종류의 상태가 존재한다. URL 브라우저에서 관리되고 있는 상태값으로 URL에도 참고할 수 있는 상태가 존재할 수 있다. FORM 로딩중,제출이되었는지 , 접근가능한지 등등 모든 것이 상태이다...