Firebase - Channel을 Redux Store에 등록하기(4)
Redux Global State Glabal state 각각의 컴포넌트는 setState 또는 useState 훅을 이용하여 state를 가지게 된다. 이렇게 해서 생성된 state는 UI 렌더링에 사용되며 컴포넌트에 붙어있게 되며 컴포넌트가 언마운트되면 state 데이터는 사라지게...
Firebase - Channel 추가하기(3)
채널 스키마 구성하기 채널 기능 여기서 채널은 쉽게 말해서 채팅룸을 의미한다. 채널을 만들면 유저는 채널 내에서 채팅을 할 수 있다. 채널 스키마(Schema) 설정 채널을 저장하기 위해 먼저 스키마를 설정한다. 채널...
Firebase - User Login(2)
Login 기능 추가하기 firebase.auth()를 통해서 간단하게 유저를 생성할 수 있었다. 마찬가지로 로그인 기능을 간단하게 구현할 수 있다. 먼저 Form에 handleSubmit함수를 달아준다. // Login.jsx <Form onSubmit={handleSubmit}>// input tags</Form> handleSubmit을 작성한다. //...
Firebase - User Register(1)
firebase setup firebase를 웹 프로젝트에서 사용할 수 있도록 셋팅한다. Add Firebase to your JavaScript project User 생성하기 - register firebase authentication을 통해서 이메일과 비밀번호 인증절차를 가지는 유저등록 - 로그인 시스템을...
useEffect의 infinite loop에서 탈출하기
React Render는 언제 발생할까? 리액트 컴포넌트는 state와 props의 데이터를 통해서 UI를 구성한다. 따라서 state, props의 값이 바뀌면 Re-render가 발생한다. state가 변경하면 UI업데이트가 이루어지고 리렌더링이 발생하기 때무네 useState가 반환하는 State 업데이트...
React의 Dynamic Routing
Basic Routing <BrowserRouter> <Route path="/" exact component={Home} /> <Route path="/profile/:id" component={Profile} /> <Route path="product" component={Product} /> </BrowserRouter> // path="/profile/:id" 를 통해서 이름이 id인 url parameter 선언 URL Parameters Profile 컴포넌트에서...
redux-saga를 이용한 Counter 만들기
Goal redux와 redux-saga를 이용하여 간단한 Counter 웹을 만들어 봄으로써 redux-saga에 대한 이해를 높인다. redux-saga는 무엇이고 언제 사용할까? redux-saga redux-saga repo redux-saga는 redux 미들웨어 중 하나. (redux와 함께 쓰인다.) 리액트가 API...
Leetcode[1]⭐ - 1025. Divisor Game, 1221. Split a String in Balanced Strings, 104. Maximum Depth of Binary Tree
1025. Divisor Game 1025. Divisor Game Keyword: Dynamic Programming Base Factor: n이 2일 때, True. n이 3일 때, False. ==> 2를 넘겨 받은 사람이 Win. 3을 넘겨 받은 사람은 Loose...
Alogrithm[7]:⭐⭐ - Dijkstra’s algorithm(Shortest Path)
Dijkstra’s algorithm Dijkstra’s algorithm an algorithm for finding the shortest paths between nodes in a graph, which may represent, for example, road networks. source node s에서 다른 nodes로 가는 shortest...
Data-Structure[0] - Priority Queue와 Heap
Priority Queue(우선순위 큐) Priority queue Queue와 비슷하지만 각각의 요소가 “priority”를 가지고 있다. Abstact Data Type이다. Methods Priorty ADT는 다음의 Method를 지원한다. P.add(k,v): priority가 k고 값이 v인 요소를 insert한다. P.min(): k가...
Alogrithm[6]:⭐⭐ - Greedy Method(Coin Change Problem, Fractional Kanpsack Problem)
Greedy Method(또는 Greedy Algorithm) Greedy algorithm A greedy algorithm is any algorithm that follows the problem-solving heuristic of making the locally optimal choice at each stage. 탐욕 알고리즘은 최적해를 계산할...
Alogrithm[5]:⭐⭐ - Graph Traversals(DFS and BFS)
Graph Traversal(그래프 순회) 그래프의 모든 vertices와 edges(또는 nodes와 branches)를 검사함으로써 그래프를 탐색하는 과정 또는 절차. 대표적인 알고리즘으로 DFS(깊이우선탐색)와 BFS(너비우선탐색)가 있다. Graph Traversal의 활용 그래프의 Reachablity에 대한 문제에 활용. u에서 v로가는...
Leetcode[0]:⭐ - 704. Binary Search
704. Binary Search Pointers 문제를 해결하기 위해서는 세 가지 인덱스 변수가 필요하다. left: 왼쪽 경계를 나타내는 인덱스 변수. Inclusive right: 오른쪽 경계를 나타내는 인덱스 변수. Inclusive mid: target과 비교대상이 되는...
Alogrithm[4]:⭐ - Linear Search, Binary Search
Searching Algorithm(검색 알고리즘) Sequence안에 특정 target value가 있는지 없는지 알기 위한 검색 알고리즘. search: if target in data: return True else: return False Unsorted, Sorted 어떤 검색 알고리즘을 사용할 것인지...
Alogrithm[3]:⭐ - Merge Sort, Quick Sort.
Divide and Conquer One of an algorithmic design pattern that use recursion 세 가지 단계로 이루어져 있다. Divide: input size를 한 개 이상의 기준에 따라 나눈다.(Ex. 한 개의 Set를 두...