개발하는SM

useEffect 는 useState 외에 가장 중요한 리액트 훅이다. 따라서 반드시 확실하게 이해하고 넘어가야 한다. 아래와 같이 dependencies 배열 없이 첫번째 인자로 함수만 넘겨줬을 경우, 컴포넌트가 다시 실행될 때마다 해당 함수가 수행된다. 아래 useEffect() 는 모든 컴포넌트 렌더링 주기 이후에 실행되기 때문이다. ( + 컴포넌트가 처음 마운트 된 때 포함 ) 그렇다면, 두번째 인자로 빈 배열 Dependencies 를 넘겨줬을 경우는? 해당 Login 컴포넌트가 처음으로 마운트되고 렌더링 될 때만 실행된다. 두번째 인자로 특정 값을 넘겨줬을 경우는? 해당 State 가 변경될 때마다 "EFFECT RUNNING" 로그가 찍힌다. 아래 예시에서는 Password Key Strok..

일반적으로 부모 -> 자식으로 props 를 통해 데이터를 전달 할 수 있는데, 자식 -> 부모로 데이터를 전달하는 방법은 없을까? 부모에서 자식 컴포넌트 를 호출할 때 함수를 전달하고, 자식 컴포넌트에서 props 를 통해 전달받은 함수를 호출하면서 파라미터로 데이터를 전달할 수 있다. 이런 개념이 Lifting State Up 개념이고, React 에서 매우 자주 사용되는 구조이다.

React is a Javascript library for building user interfaces - 리액트는 기존 기술들보다 좀 더 간단히 사용자 인터페이스를 구축할 수 있도록 돕는다. - React is all about Component What is Component? - 사용자 인터페이스의 모든 것은 결국 Component 로 만들어져 있다. - HTML, CSS 과 어떤 로직을 위한 Javascript 의 결합 Why Components? - Reusability - Seperation of Concerns How is a component Built? - HTML + CSS + Javascript - Declarative Approach : 항상 목표 상태를 정의하는 것이 중요함. -..

Spread & Rest Operater - Spread 연산자와 Rest 연산자는 같은 구문을 사용함 : ... - Spread Operator 는 배열에서 요소들을 가져오거나 객체에서 속성들을 가져옴. - Spread Operator 는 기본적으로 1 depth 까지만 Deep Copy 를 수행함. - 참고 : https://hanamon.kr/javascript-shallow-copy-deep-copy/ - Rest Operator 는 Deconstructuring 과 관련된 문법으로, 아래와 같이 사용됨. JS Array Functions - 차세대 자바스크립트는 아니지만, 다음과 같은 javascript Array 함수가 있음. - 아래 링크를 통해 사용법 참조. 다음 페이지는 어레이 프로토타입..

Maria DB 데이터베이스 엔진으로 생성한 AWS RDS 를 Intellij DB Navigator 를 사용하여 로컬에서 연결하려고 하니 계속 아래와 같이 오류가 발생했다. AWS RDS 의 Inbound 보안 그룹과 관련된 연결 오류라고 생각하고, 계속 보안그룹 설정만 건드렸었다.. 결론적으로, Maria DB 와 MySQL 드라이버 관련 문제였다. MariaDB Connector 드라이버를 별도로 설치하여 DB Navigator 에서 Custom 으로 연결을 설정해주니 잘 되었다. https://downloads.mariadb.com/Connectors/java/connector-java-2.7.3/ Connectors/java/connector-java-2.7.3/ - MariaDB downloa..

https://www.acmicpc.net/problem/2042 2042번: 구간 합 구하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)과 M(1 ≤ M ≤ 10,000), K(1 ≤ K ≤ 10,000) 가 주어진다. M은 수의 변경이 일어나는 횟수이고, K는 구간의 합을 구하는 횟수이다. 그리고 둘째 줄부터 N+1번째 줄 www.acmicpc.net Segment Tree 를 활용하여 풀 수 있는 문제 2021.08.22 - [Algorithm - 이론] - [트리] 세그먼트 트리 - 부분 합 효율적으로 구하기 [트리] 세그먼트 트리 - 부분 합 효율적으로 구하기 여러 개의 데이터가 연속적으로 존재할 때, 특정한 범위의 데이터 합을 가장 빠르고 간단하게 구할 수 있는 자료구조 예시 데..

여러 개의 데이터가 연속적으로 존재할 때, 특정한 범위의 데이터 합을 가장 빠르고 간단하게 구할 수 있는 자료구조 예시 데이터 : A[] = {1,9,3,8,4,5,5,9,10,3,4,5}; 위와 같이 단순 배열을 사용해 특정 구간의 합을 선형적으로 구할 경우, (1~10) 범위의 데이터 합을 구하려면 원소 하나씩 접근하여 더해줘야 함. 따라서 O(10). 특정 구간에 포함되는 데이터의 개수가 N개일 경우 O(N) 이 된다. 하지만, 세그먼트 트리 구조를 이용해 구한다면, O(logN) 의 시간복잡도로 구할 수 있다. 세그먼트 트리는 아래와 같은 절차대로 활용할 수 있다. 1. 구간 합 트리(Segment Tree) 생성 구간 합 트리의 각 Node 에는 각각 위 예시 데이터 배열의 구간 합을 저장한다...

Union-Find - Disjoint Set( 서로소 집합 자료구조 ) 을 표현하기 위해 사용하는 알고리즘 - 아래 3가지 연산을 이용하여 Disjoint Set 을 표현한다. Union-Find 연산 1. make-set(x) 초기화, 인자 x 를 원소로 가지는 새로운 집합을 만든다. 2. union(x, y) 합연산, x가 속한 집합과 y 가 속한 집합을 합한다. 3. find(x) 탐색. x가 속한 집합의 대표 값(루트 값) 을 찾는다. x가 어떤 집합에 속해있는지 확인하는 연산 Union-Find 의 기본적인 구현 /*make-set(x)*/ int parent[MAX_SIZE]; for(int i=0; i