목표 Valina.js, React.js, Vue.js 중 적절한 라이브러리 탐색할 예정입니다. 노드를 그리고 에지를 연결하기 쉬운 방식이 무엇일지 알아낼 계획입니다. 회고 Vue.js와 React.js 등 상태를 관리하기 쉬운 라이브러리를 사용하는 것이 적당하다고 생각했습니다. 각 노드들을 상태로 두고 에지에 대한 정보와 다음 노드들을 관리하기에 적절하다고 판단했기 때문입니다. div태그를 사용해서 노드를 그리기는 쉬웠지만 아무리도 에지를 곡선으로 그리기에는 css를 가지고만 그리기는 힘들다고 생각했습니다. 그러던 와중 유튜브에서 Interactive Developers라는 분의 동영상을 접해 코드를 한번 따라서 작성해보고 Canvas api를 사용하면 에지를 그릴 수 있다는 결론에 도달했습니다. 따라..

목표 Valina.js, React.js, Vue.js 중 적절한 라이브러리 탐색할 예정입니다. 노드를 그리고 에지를 연결하기 쉬운 방식이 무엇일지 알아낼 계획입니다.

interface(이하 인터페이스)는 자바에서 사용하는 것과 같이 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 합니다. 자바스크립트는 타입 체크를 하지 않기 때문에 일관된 구조를 만들기 까다롭지만 타입 스크립트의 인터페이스를 사용함으로써 일관된 구조를 구현할 수 있다는 것이 장점입니다. 이번 글에서는 React를 활용하여 어떻게 인터페이스를 사용할 수 있는지를 보여드릴 예정입니다. 원을 만들어주는 컴포넌트 제작하기 반지름이 50px이고 인자로 1. 배경 색과 2. 테두리 색을 받아 원을 그리는 컴포넌트를 만들어보겠습니다. styled-components를 통해 간단한 css를 작성해보겠습니다. const Container = styled.div` width: 100px; he..

위 에러는 html에 타입 스크립트 파일(.ts)을 바로 지정해줘서 나타나는 에러입니다. 따라서 타입 스크립트 파일을 tsc를 통해 컴파일한 자바 스크립트 파일을 연결해주어야 오류가 나지 않습니다. tsc 커멘드는 타입 스크립트를 global로 설치해야 사용 가능합니다. npm install -g typescript 이후 tsc App.ts와 같이 html에 연결할 타입 스크립트 파일을 tsc 명령어를 통해 컴파일 한후 위와 같이 연결해주면 오류가 더이상 나지 않습니다. 참고한 글 https://stackoverflow.com/questions/45341090/refused-to-execute-script-from-ts-because-its-mime-type-video-vnd-dlna-mpe Refuse..

목표 - 웹에서 시각적인 방향 그래프를 보여주기 위한 지식 습득 계획 회차 목표 세부내용 1회차 Valina.js, React.js, Vue.js 중 적절한 라이브러리 탐색 Valina.js, React.js와 Vue.js의 지식을 고루 습득 2회차 그래프를 그리기 위한 객체 설계 그래프의 vertex와 edge를 구성 3회차 그래프의 동작을 보여주기 위한 시각화 설계 색, 애니메이션, 곡선 edge 등 4회차 간단한 그래프 알고리즘 시각화 DFS 시각화 해보기 5회차 간단한 그래프 알고리즘 시각화 BFS 시각화 해보기 6회차 Github Page를 통해 배포해보기 관련 내용을 포스팅 세부 계획 - 토이프로젝트를 위한 최소한의 지식만 습득할 예정 - 그래프를 그리면서 알게된 내용 포스팅

배열 요소에 접근하는 방법 1. 대괄호( [ ] ) 기본적인 배열의 요소의 접근은 배열의 이름 오른쪽에 대괄호를 치면 됩니다. int a[3] = {1, 2, 3}; printf("%d\n", a[0]); 하지만 이런 방법 외에도 포인터를 통해 배열 요소에 접근할 수 있습니다. 2. 포인터 변수의 역참조 연산자( * ) 기본적으로 배열의 이름은 그 자체로 해당 배열의 시작 주소와 같습니다. 다만 이 시작 주소로부터 특정 배열에 접근할 때는 고려할 사항이 있습니다. 우선 배열은 다차원 배열이 될 수 있고, 차원 수에 따라 역참조 연산자( * )를 몇번 붙여야 하는지 알 수 있습니다. 예를 들어 다음과 같이 1차원 배열이 있다고 해보겠습니다. int arr[5] = {1, 2, 3, 4, 5}; int *p..

값에 대한 swap C언어에서 함수로 값을 넘길때는 call by value기 때문에 모든 값이 복사되어 넘어갑니다. #include void swapValue(int *a, int *b) { int temp = *a; *a = *b; *b = temp; } int main() { int num, num2; num = 1; num2 = 2; swapValue(&num, &num2); printf("%d %d\n", num, num2); } 따라서 함수를 통해 두 변수의 값을 바꿔주기 위해서는 1. 주소를 복사해서 인자로 넘긴다. 2. 주소에 접근(* 연산자)해서 직접 값을 바꿔준다. 라는 두가지 단계를 통해 값에 대한 swap을 구현할 수 있었습니다. 주소에 대한 swap #include int main..

함수 포인터 함수는 전역 스코프에 선언하고, 다른 함수에서 호출해서 사용할 수 있습니다. 이때 함수는 메모리 영역중, code 영역에 함수 정의가 저장됩니다. 이때 함수의 이름은 함수 정의가 있는 메모리의 시작 위치, 즉 주소입니다. 따라서 함수명도 포인터 변수에 넣어서 사용할 수 있는데, 그것이 함수 포인터입니다. 함수 포인터 사용법 #include int sum(int x, int y) { return x + y; } int main() { int (*fp)(int, int); fp = sum; int res = fp(10, 20); printf("%d\n", res); } 함수 포인터의 선언은 좀 복잡하게 생겼습니다. 함수 포인터의 이름이 괄호 안에 들어가있는 형태입니다. 괄호를 제거하면, 주소를 ..

Dangling Pointer Dangling Pointer는 직역하면 매달린 포인터입니다. 마치 전연인을 잊지 못하고 매달리는 누군가의 모습을 생각해보면 좋겠습니다. 이미 그 사람은 마음이 떴는데 말입니다. #include #include int main() { int *a = (int *)malloc(sizeof(int)); *a = 50; int *b = a; free(a); *b = 50; } 위 코드는 Dangling Pointer를 잘 보여주는 예시입니다. a의 주소를 b가 가지고 있지만 free 해버린 주소에 b로 접근하여 새로운 값을 할당하려 하면 오류가 발생합니다. 이렇게 이미 free 함수를 통해 해제한 메모리에 대한 주소를 가지고있는 포인터를 Dangling Pointer라고 합니다...

큰 수의 법칙 큰 수의 법칙(The low of large numbers)은 확률 변수 $Z_1, Z_2, \cdots$가 어떤 실수 b로 수렴한다고 할때 만약 $\forall \varepsilon > 0$ 라면 $\displaystyle\lim_{n \to \infty} P(|Z_n - b| < \varepsilon) = 1$ 을 만족한다고 하고 $Z_n \overset{p}{\longrightarrow} b$ 라고 표기합니다. $\varepsilon$의 값이 큰 경우 $Z_n$이 lower ~ upper 범위 내에서 존재할 확률은 굉장히 적지만 $\varepsilon$의 값이 계속해서 작아지면 $Z_n$이 lower ~ upper 범위 내에서 존재할 확률은 계속해서 커지고 결국 1에 수렴하게 됩니다...