Computer Science 40

WPF cefSharp HTML 파일에서 C# 코드 불러오기

WPF에서 크로미움을 띄울 수 있게끔 해주는 오픈 소스가 있습니다. 이것을 사용한 이유는 Paypal 결제 연동 때문에 사용을 해보았습니다. https://github.com/cefsharp/CefSharp cefsharp/CefSharp .NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework - cefsharp/CefSharp github.com https://developer.paypal.com/ PayPal Developer Documentation - PayPal Developer developer.paypal.com 문제는 Paypal 결제 연동은 원(KRW)을 지원하지 않기 때문에, WPF C# 코드의 총금액을 달러로..

React Code Splitting(코드 분할)

Code Splitting에 대하여 기록하고자 합니다. 해석을 해보면 코드 분할입니다. 보통 리액트 앱은 Webpack이라는 도구를 이용하여 하나의 파일로 번들링(Bundle)을 하는데요. 이 Bundle을 웹 페이지에 포함시켜 처음에 전체 앱을 한 번에 로드합니다. Client-Side-Rendering이라고 하며 단점으로는 서비스 규모가 커지면 번들 파일도 마찬가지로 커집니다. 번들된 파일이 크다면, 클라이언트 측에서 번들된 파일을 한 번에 실행하기 때문에 앱 초기 구동 속도가 Server-Side-Rendering보다 느립니다. 사실 개인 프로젝트 정도로는 딱히 느리다는 체감이 들진 않습니다. 무튼 이것을 해결하기 위한 하나의 방법으로 리액트에서 코드 분할을 지원합니다. 번들된 파일을 분할해서 로드..

자바스크립트 Chapter 30 Inheritance, Polymorphism and Code Reuse

자바스크립트 핵심 컨셉 33가지 Chapter 30 Inheritance, Polymorphism and Code Reuse 상속, 다형성 그리고 코드 재사용에 대하여 알아보겠습니다. 자바스크립트는 프로토타입 기반 언어입니다. 그래서 다른 언어와 다르게 상속을 프로토타입으로 구현하는데 이 부분이 중요한지 지속적으로 다루고 있습니다. 2019/05/06 - [Computer Science/JavaScript] - 자바스크립트 Chapter 14 Factories and Classes 자바스크립트 Chapter 14 Factories and Classes 자바스크립트 핵심 컨셉 33가지 Chapter 14 Factories and Classes 이번 장에서는 Factories와 Classes를 살펴보자. 자..

React 페이지 전환 시 스크롤 복원

React Router의 Link을 사용해서 페이지를 이동했을 때 SPA이다 보니까 스크롤이 이전 페이지에서 중간에 멈췄으면 다음 페이지에서 중간에서 시작하는 점의 문제가 있었습니다. 아무래도 유저의 입장에서는 스크롤이 위에서 시작했을 때 위로 올릴 필요가 없으니까 편합니다. 친절하게도 React Router는 이 점에 대해서 제공하고 있었습니다. https://reacttraining.com/react-router/web/guides/scroll-restoration React Router: Declarative Routing for React Learn once, Route Anywhere reacttraining.com 16.8 릴리즈 이후 훅스 사용을 권장하여 훅스의 예제도 있습니다. const ..

자바스크립트 자료구조 그래프(Graph)

그래프(Graph)에 대해 알아보자. 그래프는 두 가지로 나눠진다. 방향 그래프(Directed Graph) 무방향 그래프(Undirected Graph) 위의 사진의 방향성이 없는 그래프를 의미한다. 그래프에선 노드를 정점(Vertex)이라고도 하고 정점을 이어주는 것을 간선(Edge)이라 한다. 차수(Degree)란 하나의 정점에 닿는 간선의 수를 의미하고 간선을 한 번만 통해 갈 수 있으면 인접(Adjacent)하다고 한다. 그래프를 인접 리스트(Adjacency List), 인접 행렬(Adjacency Matrix)로 구현 할 수 있다. 인접 리스트를 활용하여 간단한 그래프를 구현해보자. class Graph { constructor() { this.AdjacencyList = new Map();..

자바스크립트 알고리즘 선형 탐색(Linear Search), 이진 탐색(Binaray Search)

선형 탐색과 이진 탐색 알고리즘에 대해 알아보자. 선형 탐색(Linear Search) 찾으려고 하는 것을 처음부터 하나하나 탐색을 하고 찾으려고 하는 값과 일치하면 멈춘다. function linearSearch(arr, find) { for (let i = 0; i < arr.length; i++) { if (arr[i] === find) return `탐색(find)의 값이 들어있는 배열의 인덱스는 ${i}`; } return; } linearSearch([4, 5, 2, 1, 9], 9) // '탐색(find)의 값이 들어있는 배열의 인덱스는 4' 이진 탐색(Binaray Search) 시작과 끝의 값을 더하여 2로 나눈 중간값부터 탐색을 한다. 탐색하는 값과 중간 값을 비교를 한 후 작으면 왼쪽..

자바스크립트 알고리즘 선택 정렬(Selection Sort)

선택 정렬(Selection Sort) 선택한 값을 최소 요소로 선택하고 선택한 값보다 작은 요소가 있다면 그 값과 스왑 한다. 예를 들면, [4, 3, 5, 1] [1, 3, 5, 4] [1, 3, 4, 5] for 중첩 구문으로 min으로 지정한 값을 배열의 끝까지 비교를 하여 제일 작은 수를 찾아낸 후 temp라는 임시 변수를 생성하여 값을 스왑 한다. function selectionSort(arr, length = arr.length) { for (let i = 0; i < length; i++) { let min = i; for (let j = i + 1; j < length; j++) { if (arr[min] > arr[j]) { min = j; } } if (i !== min) { let..

자바스크립트 알고리즘 삽입 정렬(Insertion Sort)

삽입 정렬(Insertion Sort) 배열의 두 번째부터 시작하고, temp라는 변수를 만들어서 값을 임시로 저장을 하고, 저장한 임시의 값보다 0번째 인덱스 값이 크다면 스왑 해준다. 예를 들면, array[0] = 4, array[1] = 1 temp = array[1] array[1] = array[0] array[0] = array[1] array[0] = 1, array[1] = 4 for문 중첩 구문 및 조건을 생각하기가 난이도 있는거 같다. function insertionSort(array, length = array.length) { for (let i = 1; i < length; i++) { let temp = array[i]; let j; for (j = i - 1; j > -1 ..

자바스크립트 알고리즘 버블 정렬(Bubble Sort)

버블 정렬(Bubble Sort) 배열의 두 수를 연속적으로 비교하여 위치를 바꾸어 정렬하고 시간 복잡도 O(n^2)인 알고리즘이다. [6, 5, 3] 을 예를 들면, [5, 6, 3] [5, 3, 6] 다시 처음부터 비교 [3, 5, 6] function bubbleSort(arr, length = arr.length) { while (length) { for (let i = 0; i < arr.length; i++) { if (arr[i] > arr[i + 1]) { let swap = arr[i]; arr[i] = arr[i + 1]; arr[i + 1] = swap; } } length--; } return arr; } console.log(bubbleSort([5,2,3,6,8])) // [2,..

자바스크립트 알고리즘 합병 정렬(Merge Sort)

합병 정렬(Merge Sort) 알아보자. 분할 정복(divide and conquer) 알고리즘 활용한 알고리즘이다. 재귀적으로 배열을 쪼갠 후 값을 비교하여 정렬한다. 개인적으로 퀵 정렬보다 난이도가 있다고 생각한다. 2019/06/16 - [Computer Science/Algorithm, Data Structure] - 자바스크립트 알고리즘 퀵 정렬(Quick Sort) 자바스크립트 알고리즘 퀵 정렬(Quick Sort) Quick Sort(퀵 정렬)에 대하여 알아보자. 병합 정렬(Merge Sort) 및 힙 정렬(Heap Sort)보다 빠르게 수행되는 큰 데이터 세트의 효율적인 정렬 알고리즘이다. 배열의 임의의 기준 값을 pivot, 피벗보다 작으면 왼.. jeongw00.tistory.com ..