라쿤의 끄적끄적

DataStructure 05 Hash Table (해쉬 테이블) 해쉬 구조 키(key)에 데이터(value)를 저장하는 데이터 구조 해쉬는 key를 가지고 hash 함수를 계산하면 data가 저장되어야 할 위치(되어 있는 위치)가 나옴 배열은 어떤 데이터를 검색하는 경우 전체 데이터를 순회해야함 하지만, hash는 순회할 필요 없이 해당 데이터의 key만 hash 함수로 계산하면 바로 데이터가 저장되어 있는 위치가 나오기 때문에 성능이 엄청 좋음 Python의 딕셔너리(Dictionary) 타입이 해쉬 테이블의 예임 (key - value 구조) 그래서, 파이썬에서는 해쉬를 별도 구현할 이유가 없음 - 딕셔너리 타입을 사용하면 됨 보통 배열로 미리 Hash Table 사이즈 만큼 생성 후에 사용(공간과..

Redux 04 Redux MiddleWare (리덕스 미들웨어) Redux : MiddleWare velopert : Redux MiddleWare 미들웨어가 dispatch 의 앞뒤에 코드를 추가할 수 있게 해줌 dispatch 메소드를 통해 store로 가고 있는 Action을 가로채는 코드 미들웨어가 여러개면 미들웨어가 순차적으로 실행됨 스토어를 만들때, 미들웨어를 설정함 applyMiddleware()함수로 미들웨어들을 묶어서 createStore()함수의 두번째 인자로 넣어줌 디스패치가 호출 될때 실제로 미들웨어를 통과하는 부분 디스패치가 호출 될때 마다 미들웨어에서 action을 인자로 받는 부분이 실행됨 next() : next()가 호출된 곳의 미들웨어 다음에 다른 미들웨어가 있는 경우 ..

DataStructure 04 시간 복잡도 : 알고리즘 복잡도 표현 방법01 하나의 문제를 푸는 알고리즘은 다양할 수 있는데, 다양한 알고리즘 중 어느 알고리즘이 더 좋은지 분석하기 위해서 복잡도를 정의하고 계산함 (성능의 판단 기준) 예) 정수의 절대값 구하기 : 방법01 - 정수값을 제곱하여 루트사용 / 방법02 - 양수는 그대로 , 음수는 -1을 곱해서 출력 -> 둘중 어떤것이 좋은 것인지 알아야 할 필요는 있음 알고리즘 복잡도 계산 항목(요소) 알고리즘의 성능을 판단하는 알고리즘 복잡도에 대한 계산 항목이 존재한다. 시간 복잡도 : 알고리즘 실행 속도 공간 복잡도 : 알고리즘이 사용하는 메모리 사이즈 둘을 비교하자면, 가장 중요한 건 실행 속도이므로 시간 복잡도를 필수적으로 이해하고 계산할 수 있..

DataStructure 03 Linked List (연결 리스트) Linked List 구조 연결 리스트라고도 함 배열은 순차적으로 연속된 공간에 공간 개수를 예약을 해서 데이터를 나열하는 데이터 구조 이러한 배열의 단점을 보완한 데이터 구조가 연결 리스트 임 연결 리스트는 떨어진 곳에 존재하는 데이터를 화살표로 연결해서 관리하는 데이터 구조 연결 리스트의 경우 공간이 연속되지 않고, 공간을 미리 예약을 하지 않고 필요할때 마다 공간을 추가 할수 있음(무한정 데이터를 저장 할 수 있음) C언어에서는 주요한 데이터 구조인데, 파이썬은 list type이 연결 리스트 기능을 모두 지원함 배열은 1개의 공간에 1개의 데이터를 관리하지만, 연결리스트의 경우 배열과 달리 특정한 데이터를 저장하는 경우, 해당 데..

Redux 03 redux 개요 정리 리덕스는 앱에서 사용하는 state, props를 독립적으로 사용하기 위해서 데이터를 처리하는 역할을 함 데이터를 모두 받아 가지고 있기(독립적인 관리를 위해서) 수정 요청있으면 수정하기 필요한 위치에 보내기 리덕스에서 데이터를 가져오는건 useSelector 데이터를 넣어 리덕스에게 수정요청은 dispatch ActionCreator가 데이터를 받아 Action으로 만들고 해당 Action에는 데이터 가공 방식과 해당 데이터가 들어 있다. 이를 dispatch가 받아 전달하여 reducer가 store의 state를 변경함 Component - props(state or function) - Container(ActionCreator - Action - dispat..

Redux 02 React에 Redux 연결하기 01 : react-redux 안쓰고 연결 store를 props로 전달하는 경우 만들어진 store를 props로 전달하여, store를 사용할 수 있게 함 Props 전달 // index.js ReactDOM.render( , document.getElementById("root") ); 전달 받은 Props로 store 활용하기 Store만 컴포넌트에서 가지게 되면 store의 변화에 반응하거나, store에 변화를 줄수 있음 import logo from "./logo.svg"; import "./App.css"; import { useEffect, useState } from "react"; import { addTodo } from "./redu..

DataStructure 02 Queue (큐) 배열과 함께 가장 쉬운 자료구조 중 하나 운영체제, 네트워크 기능에서 많이 쓰임 멀티 태스킹을 위한 프로세스 스케쥴링 방식 구현에 많이 사용됨 (운영체제) 특별히 장단점은 없음 큐의 구조 줄을 서는 행위와 유사함 가장 먼저 넣은 데이터를 가장 먼저 꺼낼 수 있는 구조 (선입 선출) FIFO(First-In, First-Out 첫번째로 들어간게 첫번째로 나옴) 또는 LILO(Last-In, Last-Out 마지막으로 들어간게 마지막으로 나옴) 방식으로 스택과 꺼내는 순서가 반대임 단순히 어떤것을 꺼내라는 명령이 없고, 꺼내라 라는 명령만 있음(자동으로 당겨지니까) 기능 2가지 : 데이터를 넣는것(Enqueue), 데이터를 꺼내는 것(Dequeue) Data ..

DataStructure 01 DataStructure & Algorithm (자료구조와 알고리즘) 자료구조 용어 : 자료구조, 데이터 구조, data structure 대량의 데이터를 효율적으로 관리할 수 있는 데이터의 구조를 의미 코드상에서 효율적으로 데이터를 처리하기 위해, 데이터 특성에 따라, 체계적으로 데이터를 구조화 해야함 어떤 데이터 구조를 사용하느냐에 따라, 코드 효율이 달라짐 효율적 데이터를 관리하는 예 우편번호, 학생 관리(학년, 반, 번호) -> 특정 데이터를 효율적으로 찾을 수 있음 대표적인 자료구조 배열, 스택, 큐, 링크드 리스트, 해쉬 테이블, 힙 등... 알고리즘 용어: 알고리즘, algorithm 어떤 문제를 풀기 위한 절차/ 방법 어떤 문제에 대해, 특정한 입력을 넣으면,..

Redux 01 Redux Basic Component들 간의 정보 전달 과정에서 불편함을 느끼고 contextAPI를 사용하는데 Redux는 해당 context에 있는 전역 데이터를 효과적인 관리하는 라이브러리 임 Redux는 Store라는 독립적인 부분 딱 하나 존재하는데(단일 스토어), 어느 Component에서 store의 state를 변경하면 store에서 연관된 다른 Component를 rerender 시킴 단일 스토어 사용 준비 스토어 만들기 import redux 액션 정의 -> 액션을 사용하는 리듀서 만듦 -> 리듀서들을 합침 -> 최종 합쳐진 리듀서를 인자로 단일 스토어를 만듦 스토어 사용하기 import react-redux connect() 함수를 이용해서 컴포넌트에 연결 Actio..

React 14 JS Array Cheat Sheet React Project : 쇼핑몰 프로젝트 개요 Context API로 상품 리스트와 상품주문의 상태를 공유하고 이를 Hooks를 이용해서 변경하고 사용하는 개발 형태 장바구니에 담기 기능이 있는 쇼핑몰 만들기 기본적인 디자인을 보는 것이 아닌 기능과, 코드 관리에 중점을 둠 기본 컴포넌트 구성 Header : 쇼핑몰 안내 관련 기본적인 Header 형태 Prototypes : 상품이 진열 되는 곳 개별 상품 : video, title, price, description, addButton Order : 장바구니 역할 Prototypes 컴포넌트에서 addButton 클릭시 장바구니로 1개의 수량 씩 추가됨 같은 품목을 중복해서 누르는 경우 장바구니..

React 13 React.createPortal : 요소 보내기 React : Portals 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법 의도하는 실제 DOM Element(부모)에 자식, 후손 요소들을 어디에서 든지 createPortal로 만들어진 Component를 통해 넣을 수 있음 서로 동등한 위치의 A, B Element라도 A에서 작성한 후손 Element를 B의 후손 Element로 들어 갈수 있게 A에서 작성 가능함 다른 곳에서 집어 넣었다고 하더라도 이벤트 버블링은 portal인지 아닌지 상관 없이 부모 Component로(React 기준으로, 실제 DOM 기준이 아니고) 전달 됨 // Modal.jsx : Portal 사용 import ..

React 10 React Component Test 기본적으로 개발을 할때 testing 코드를 먼저 작성하고 개발 코드를 작성 Testing-library/react 기존의 jest testing 함수 말고, 더 다양하게 testing을 하기 위한 함수를 제공하는 라이브러리 CRA 프로젝트인 경우 자체적으로 설치 되어 있음 @testing-library/react testing 작성 예시 구현할 요소와 기능 컴포넌트가 정상적으로 생성된다. "button" 이라고 쓰여진 엘리먼트는 HTMLButtonElement 이다. 버튼을 클릭하면, p 태그 안에 "버튼이 방금 눌렸다"라고 쓰여진다. 버튼을 클릭하기 전에는, p 태그 안에 "버튼이 눌리지 않았다"라고 쓰여진다. 버튼 클릭 5초 후에는, p 태그 안..

React 10 React Testing JavaScript Unit Test 통합테스트에 비해 빠르고 쉽다. 통합테스트를 진행하기 전에 문제를 찾아 낼 수 있다. (단, 통합테스트 성공 보장은 없음) 테스트 코드가 살아있는(동작을 설명하는) 명세가 됨 테스트를 읽고 어떻게 동작하는지도 예측 가능 선 코딩 후, 몰아서 단위테스트가 아니라 TDD를 해야함 단위테스트를 작성하고, 그것에 맞는 코딩을 작성하는 버릇이 필요 함 Jest Javascript testing FrameWork로 CRA에서 기본적으로 제공하는 test 로서 입지를 다져 대중적으로 쓰이고 있음 facebook의 openSource로 가장 핫한 테스트 도구 Easy Setup, Instant Feedback(고친 파일만 빠르게 테스트 다시..

React 12 Life Cycle 도표 React Advanced Optimzing Performance 필요할 때만 render 하여, 최적화 시키는 작업 즉, 불필요한 render를 줄이는 방법 Reconciliation (조정) 대전제 -> 훨씬 효율적으로 Rerender 컨트롤 가능 랜더 전후의 일치 여부를 판단하는 규칙 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 서로 다른 타입의 element를 부모로 하는 Component의 차이 (Unmount, Mount) 같은 컴포넌트()를 render 하지만, 상위 타입이 다르기 때문에 두개는 다르다고 인식 ->..

React 09 컴포넌트 간 통신 하위 컴포넌트 변경 하기 예시 상위 컴포넌트에서 하위 컴포넌트에서 쓰이는 state의 값을 변경 하는 경우 A컴포넌트(버튼) -> B컴포넌트 -> C컴포넌트 -> D컴포넌트 -> E컴포넌트(pros.value) A에 있는 버튼을 클릭해서 E컴포넌트에 있는 value를 변경하는 것 상위 컴포넌트의 state 값을 props로 내려서 변경함 import { useState } from "react"; export default function A() { const [value, setValue] = useState("아직 안바뀜"); return ( E의 값을 바꾸기 ); function click() { setValue("E의 값을 변경"); } } function B({..

React 08 Custom Hooks customHooks : useWindowWidth() 브라우저 창 가로가 변경 되었을 때 변경된 숫자를 받아오는 hook state를 활용해서 재사용 할 수 있는 hook을 만들어 냄 (따로 관리 함) window.innerWidth -> 현재 브라우저의 가로 값을 가져옴 resize event -> resize 함수 실행 (state에 변경된 width값을 지정) -> state 값이 변경되어 return 값이 width를 rerender 함 // useWindowWidth.js import { useEffect, useState } from "react"; export default function useWindowWidth() { const [width, s..