js/node - 비동기 1
2021. 10. 15. 19:32
SE Bootcamp 내용 정리
JS/Node – 비동기 비동기 쉽게 이해하기 햄버거 주문을 예로 들어 생각해보자 햄버거 가게에서 손님들이 햄버거를 주문하려고 왔다. 그런데 먼저 주문한 A가 주문한 햄버거를 받을 때까지 그 뒤에 있는 B가 햄버거를 주문조차 할 수 없다고 생각해보자 → “blocking”(하나의 작업이 끝날 때까지 이어지는 작업을 막는 것) 손님 B는 손님 A가 주문한 햄버거가 나오고 나서야 원하는 햄버거를 주문할 수 있다. 즉 손님 A의 햄버거 주문 완료 시점과 손님 B의 햄버거 주문 시작 지점이 같다 → “동기적(synchronous)” 이다(완료 시점과 시작 시점이 같은 상황) 효율적인 햄버거 가게 운영을 위해 커피 주문 과정을 다음과 같이 변경해 보자 * 햄버거 주문이 blocking 되지 않고, 언제든지 주문을..
자료구조/알고리즘 - 자료구조 기초 2(Graph, Tree Search Algorithm)
2021. 10. 13. 19:12
SE Bootcamp 내용 정리
Graph, Tree Search Algorithm Tree traversal(트리 순회) 특정 목적을 위해 트리의 모든 노드를 “한번씩” 방문하는 것 ex) 1부터 10까지의 정수로 이루어진 트리에서 5라는 숫자를 찾기 위해 모든 노드를 방문 → 트리 순회 트리 구조는 계층적 구조를 가지므로 모든 노드를 순회하는 방법도 3가지가 존재 (단, 노드 조회하는 순서는 항상 왼쪽→ 오른쪽 방향) 전위 순회(Preorder) 루트에서 시작해서 왼쪽의 노드들을 순차적으로 둘러본 후, 왼쪽의 노드 탐색이 끝나면 오른쪽 노드를 탐색 → 왼쪽으로 가면서 위에서부터 순차적으로 왼쪽의 노드를 탐색함 중위 순회(Inorder) 루트를 가운데에 두고 순회함. 제일 왼쪽 끝에 있는 노드부터 순회하기 시작하여, 루트를 기준으로 ..
버블(거품) 정렬 알고리즘
2021. 10. 13. 18:52
알고리즘 연습
버블 정렬(bubble sort) 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 출력(리턴)하는 구조의 버블 정렬을 구현 해보자 버블 정렬 알고리즘은 아래와 같습니다. 1. 첫 번째 요소가 두 번째 요소보다 크면, 두 요소의 위치를 바꿈 2. 두 번째 요소와 세 번째 요소보다 크면, 두 요소의 위치를 바꿈 3. 1, 2를 마지막까지 반복합니다. (마지막에서 두 번째 요소와 마지막 요소를 비교) 4. 1~3의 과정을 한 번 거치게 되면, 가장 큰 요소가 배열의 마지막으로 밀려남(마지막 인덱스에 위치) 5. 1~3의 과정을 첫 요소부터 다시 반복 6. 5를 통해 두 번째로 큰 요소가 배열의 마지막 바로 두 번째로 밀려남(마지막 인덱스 -1에 위치) 7. 1~3의 과정을 총 n번(배열의 크기) 반복..
자료구조/알고리즘 - 자료구조 기초(Stack, Queue, Graph, Tree, BST)
2021. 10. 11. 19:57
SE Bootcamp 내용 정리
자료구조 학습 목표 * 자료구조란? * Stack, Queue, Tree, Graph 자료 구조 - 알고리즘 문제에서 Stack, Queue 자료 구조를 배열로 흉내내기 - 각 자료구조의 개념과 구조 파악 - 알고리즘 문제에 맞는 자료구조 적용 * 트리 및 그래프의 탐색 기법 이해 - Binary Search Tree - BFS 와 DFS의 개념과 알고리즘 적용 * 자료 구조를 활용한 알고리즘 문제 접근 자료 구조 소개 자료 구조란? 여러 데이터들의 묶음을 저장하고 사용하는 방법을 정의한 것 → 필요에 따라 데이터의 특징을 잘 파악하여 체계적으로 정리하여 저장해 둬야 한다 → 데이터를 효율적으로 다룰 수 있는 여러 방법들을 모아 “자료 구조” 라 한다 가장 많이 쓰이는 자료 구조 → Stack, Queu..
자료구조/알고리즘 - 재귀
2021. 10. 11. 19:44
SE Bootcamp 내용 정리
학습 내용 * 재귀의 의미, 자바스크립트에서 재귀 호출 * 언제 재귀를 사용해야 하는가 * 재귀적 사고 연습을 통해 재귀함수를 base case와 resursive case로 나눠 작성하기 * Tree 구조에 재귀 함수를 사용해야 하는 이유 이해 - 실생활에 사용되는 유용한 Tree 구조 - 깊이를 알 수 없는 Tree 구조에 재귀 함수를 이용하여 모두 순회하기 재귀의 이해 - 다르게 생각하기 하나의 문제를 해결하기 위해 다양한 방식으로 생각하는 능력을 기르는 것 문제를 쪼개어 생각하는 방법 어떤 문제를 해결할 때, 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법 → 재귀(recursion) ex) 자연수로 이루어진 리스트(배열)를 입력받고, 리스트의 합을 리턴하는 함수 `arrS..
JS/Node - 객체 지향 JavaScript
2021. 10. 5. 16:36
SE Bootcamp 내용 정리
JS/Node - 객체 지향 JavaScript 객체 지향 프로그래밍(OOP; Object-oriented programming)은 데이터와 기능을 한 곳에 모아 처리하는 것. 속성과 메소드가 하나의 “객체” 라는 개념에 포함되고 자바스크립트의 타입은 object와는 다른 것이다. → 클래스(Class)라고 부른다 학습 목표 * 클래스와 인스턴스 - new 키워드 사용법 - class 키워드 사용법 * 객체 지향 프로그래밍의 특징 - 캡슐화 - 상속 - 추상화 - 다형성 * JavaScript에서 객체 지향 프로그래밍 구현 - ProtoType에 대한 이해 * 객체 지향 프로그래밍의 상속(inheritance) - 상속 관계를 가진 현실 세계의 모델을 코드로 작성하기 - 클래스 상속의 원리 - Proto..
React - 보충학습 2: states, Component Life Cycle
2021. 10. 1. 16:53
SE Bootcamp 내용 정리
노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 2 function 컴포넌트 -> class 컴포넌트로 바꿔서 작성 why? 편한 function 컴포넌트 나두고 class 컴포넌트라는 걸 씀? -> class 컴포넌트가 가진 state를 활용하기 위함이다 state는 객체(Object) : 컴포넌트의 데이터(가변적)를 넣는 공간이라 보면 된다 class 컴포넌트는 return 을 바로 갖지 못한다 대신 render 함수를 사용해서 활용 리액트는 자동적으로 모든 class 컴포넌트의 render 함수를 실행한다 //기존의 function 컴포넌트 -> class 컴포넌트로 전환해서 작성 class App extends React.Component{ // React cla..
React - 보충 학습 1: 부모/자식 컴포넌트, map 메소드, props
2021. 9. 30. 18:19
SE Bootcamp 내용 정리
노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 * 부모/자식 컴포넌트 * map 메소드를 활용한 동적인 컴포넌트 처리 * props 가 동작하는 과정 * props 에 대한 검증 방법 * 전체 코드 내용 정리(현재까지의 App 컴포넌트) 부모/자식 컴포넌트 부모 컴포넌트인 App 에서 자식 컴포넌트인 Food 에 props를 전달 부모 컴포넌트에서 자식 컴포넌트를 호출?하면서 전달할 props를 설정해 준다 function App() { return ( {foodILike.map(eachFood => { //부모 컴포넌트인 App 에서 자식 컴포넌트인 Food에 props를 전달 return //동적으로 작동하도록 map 메서드를 사용 // Food에 name, pic..