본문 바로가기
  • soldonii's devlog

자바스크립트110

리액트 1 *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. create-react-app create-react-app은 개발자가 다른 것들은 신경쓰지 않고, 오로지 개발에만 집중할 수 있도록 기본적인 모듈들이 포함된 패키지이다. 이를 통해 새로운 프로젝트 폴더를 생성하면, 여러가지 폴더가 생성된다. # src 폴더 : react app과 관련된 모든 코드들이 들어있는 공간이다. 앱을 개발하면서 필요한 파일들을 저장하는 곳이라 보면 된다. # public 폴더 : create-react-app 패키지에는 bab.. 2019. 11. 20.
리액트의 탄생배경과 핵심 개념 *Udemy의"Complete React Developer in 2020"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 리액트의 탄생 배경 리액트의 등장 이전에도 프론트엔드 단에 수 많은 라이브러리/프레임워크가 존재했다.(jQuery, Vue.js, Angular.js 등) 제이쿼리의 경우, 여러 종류의 웹브라우저들마다 자바스크립트를 불러오는 방식이 달라 어려웠던 점을 해결해주었다. 브라우저들 간에 통일성을 가지도록 도와주면서 큰 인기를 끌었었다. 시간이 흐르면서 web app의 크기가 커지자, 자바스크립트 파일이 넘쳐나면서 통제가 어려워졌고, 이를 효율적으로 관리하기 .. 2019. 11. 20.
동적 프로그래밍 - 메모이제이션(Memoization) *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) DYNAMIC PRGRAMMING is.. an optimization technique. dynamic programming = divide and conquer + memoization 언제 Dynamic Programming을 적용할지에 대한 Cheatsheet 1. Can be divided into subproblem? 2. Recursive Solution 3. Are ther repetitive subpr.. 2019. 11. 7.
자바스크립트 검색 알고리즘 3 : Depth First Search *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. Depth First Search(DFS) Breadth First Search(BFS)가 각 level에서 좌 → 우로 돌면서 탐색했다면, Depth First Search(DFS)는 가장 아래쪽 level까지 내려갔다가 끝에 다다르면 가장 가까운 조상으로 거슬러 올라간 뒤 탐색하지 않은 다른 자식 노드, 즉 형제 노드들을 탐색하는 방식이다. 글로는 설명이 어렵고 아래 사진이 이해하기에 직빵이다. DFS의 경우.. 2019. 11. 7.
자바스크립트 검색 알고리즘 2 : Breadth First Search *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) Array, Hash Table, Queue, Stack, Linked List에서 Traversing하는 방법은 앞선 글들에서 정리해보았다. 그런데 Graph와 Tree에서는 Traversing을 어떻게 할 수 있을까? 이 자료구조형에서 Traversing을 하고, 원하는 값을 찾을 때 사용하는 알고리즘이 바로 Breadth First Search(BFS), Depth First Search(DFS)이다. 결론부터 .. 2019. 11. 7.
자바스크립트 검색 알고리즘 1 : Linear Search, Binary Search *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 앞서 정렬 알고리즘에 대해서 살펴봤다면, 이번에는 모든 노드들을 traversing하면서 검색하는 알고리즘에 대해서 살펴보자. 검색은 실생활에서 아주 많이 사용되는 기능이기 때문에 잘 살펴보자. 1. Linear Search 가장 단순하지만, 동시에 가장 비효율적인 검색 알고리즘이다. 단순히 list를 특정 값을 찾을 때까지 loop over하는 작업이다. 검색을 시작하자마자 찾게 되는 Best Case에서는 O(1).. 2019. 11. 7.
자바스크립트 정렬 알고리즘 9 : 활용 사례 *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 언제 어떤 정렬 알고리즘을 사용하면 좋을지, 간단한 예시로 알아보자. 아래 대답은 Andrei의 의견이며 정답은 아닐 수 있다. //#1 - Sort 10 schools around your house by distance: insertion sort input된 dataset의 크기가 무척 작기 때문에 Insertion Sort가 가장 빠르고, 공간복잡도도 효율적이다. //#2 - eBay sorts listings.. 2019. 11. 5.
자바스크립트 정렬 알고리즘 8 : Radix Sort, Counting Sort *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 여태껏 배운 Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort는 모두 comparison, 즉 element들 간의 비교를 통해 정렬을 하는 알고리즘이었다. 이들 정렬 알고리즘의 경우, 시간복잡도에서 최선은 O(n log n)이었는데, 이를 더 개선시킬 수는 없을까? 이를 개선시키는 것은 수학적으로 불가능하다고 한다. 그러나 element 간의 비.. 2019. 11. 5.
자바스크립트 정렬 알고리즘 7 : 언제, 어떤 정렬 알고리즘을 사용해야 할까? *Udemy의 "Master the Coding Interview : Data Structures + Algorithms" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) # Insertion Sort(삽입 정렬) 1) dataset의 크기가 작을 때 2) dataset이 거의 정렬이 되어 있을 때 # Merge Sort(합병 정렬) 1) dataset이 아주 방대한 크기인데 내 컴퓨터 메모리의 외부에서 정렬을 수행할 수 있을 경우, Merge Sort의 유일한 단점인 공간복잡도 문제가 해결될 수 있으므로 사용하기에 최적인 상황이다. 2) dataset의 정확도가 의심되거나, 적절한 p.. 2019. 11. 4.