분류 전체보기
-
자료구조 ( Tree, Graph, BST, BFS, DFS )Topic/Data Structure 2021. 12. 17. 22:19
Tree Traversal 전위 순회 가장 먼저 루트를 방문하고, 루트에서 시작해 왼쪽 노드부터 먼저 둘러본 뒤, 왼쪽 노드 탐색이 끝나면 오른쪽 노드를 탐색한다. 중위 순회 루트를 가운데에 두고 순회한다. 제일 왼쪽 끝에 있는 노드부터 순회하기 시작해 루트를 기준으로 왼쪽에 있는 노드의 순회가 끝나면 루트를 거쳐 오른쪽에 있는 노드로 이동하여 마저 탐색합니다. 후위 순회 루트를 가장 마지막에 순회한다. 제일 왼쪽 끝에 있는 노드부터 순회하기 시작해 루트를 거치지 않고 오른쪽으로 이동해 순회한 뒤, 제일 마지막에 루트를 방문합니다. BFS / DFS 그래프의 탐색은 하나의 정점에서 시작하여 그래프의 모든 정점들을 한 번씩 방문(탐색)하는 것이 목적이다. BFS: Breadth-First Search, 너..
-
알고리즘, 자료구조, stack, queueTopic/Data Structure 2021. 12. 17. 09:08
자료구조 기초 자료구조: 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것. 대표적인 자료구조 네 가지 Stack, Queue, Tree, Graph 자료구조는 어떤 특정 상황에 놓인 문제를 해결하는데 특화되어있다. 많은 자료구조를 알아두면, 어떤 상황이 닥쳤을 때 적합한 자료구조를 바로 적용하여 해결할 수 있다. Stack (스택) 데이터(data)를 순서대로 쌓는 자료구조다. 금은동 메달을 각각 책상에 쌓는다고 생각해보자 첫번째로 금, 다음은 은,동 순서로 쌓고, 우리가 다시 그 메달을 집을 때 어떤 메달부터 잡아야 할까? 동메달부터 잡고, 은메달, 마지막으로 금메달을 잡을 수 있다. 이러한 방식처럼 가장 먼저 쌓은 메달은 가장 나중에 잡을 수 있는 경우가 스택이다. 스택의 특징은 입력과 출..
-
JSONTopic/JavaScript 2021. 12. 15. 21:34
StringifyJSON JSON: JavaScript Object Notation , 데이터 교환을 위해 만들어진 객체 형태의 포맷 JSON의 탄생 배경 객체를 타입 변환해서 String으로 변환할 경우 객체 내용을 포함하지 않는다. 위의 이유로 객체를 JSON의 형태로 변환하거나, JSON을 객체의 형태로 변환하는 방법을 이용한다. JSON.stringify: Object type을 JSON으로 변환한다. JSON으로 변환된 객체의 타입은 문자열이다. 이 과정을 직렬화 (serialize) 라고 부른다. JSON.parse: JSON을 Object type으로 변환한다. 반대로 JSON.parse로 문자열을 객체의 형태로 만든다. 이 과정은 역직렬화 (deserialize) 라고 부른다. JSON의 ..
-
클래스를 이용한 모듈화, Prototype, 생성자 함수Topic/JavaScript 2021. 12. 13. 21:08
정답을 맞추는게 답이 아니라 끝까지 도전하는 자세가 중요 ! 객체 지향 JavaScript 객체 지향 프로그래밍: OOP, Object-oriented programming 데이터와 기능을 한 곳에 묶어서 처리 / 속성과 메소드가 하나의 "객체" 라는 개념이며 클래스(Class)라고 부른다. 객체 지향이 트렌드지만, 객체 지향이 무조건 좋은건 아니다 ! 하나의 프로그래밍 방법론일뿐, 각 방법론의 장단점을 잘 알고, 상황에 맞는 방법론을 선택하는게 Best! ex) 메모리 관리가 중요하다면 ? -> 메모리를 적게 쓰는 절차지향 사람들과의 협업이 필요하면? -> 코드 이해가 쉬운 객체지향 자바스크립트는 객체지향 언어가 아니라 프로토타입 기반 언어이다! 자바스크립트의 클래스는 프로토타입을 이용해 구현하는 것!..
-
React State & PropsTopic/React | Redux 2021. 12. 3. 20:38
React State & Props Props 컴포넌트의 특성 (property)를 의미한다. 객체 형태로 존재한다. 변하지 않는 외부로부터 전달받은 값 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 함부로 변경될 수 없는 읽기 전용(read-only)객체이다. State 애플리케이션의 "상태" 컴포넌트 내에서 변경될 수 있는 값 State Hook, useState useState를 React에서 불러오는 방법 import { useState } from "react"; useState를 호출하면 배열이 반환된다 ! const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 반환된 배열의 0번째 요소는 state 저장 변수, 1번째 요소는 state 갱신 함수이..
-
리액트, SPA, 리액트 라우터, React RouterTopic/React | Redux 2021. 12. 2. 18:11
React SPA SPA의 등장 배경과 개념 전통적인 웹사이트들은 페이지 이동 시 매번 '페이지 전체'를 불러와야 했다. -> 모든 페이지들은 매번 다시 불러오면 느린 반응성을 갖게 되고, 트래픽 증가와 사용자 경험의 저하를 일으켰다. SPA는 업데이트 시 전체를 다시 불러오지 않고 업데이트가 필요한 부분만 새로 불러온다. 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML요소를 생성해서 화면에 보여주는 방식이 개발되었다. (1990년대 후반에 개발) SPA (Single Page Application) 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사..
-
리액트, 컴포넌트, JSXTopic/React | Redux 2021. 12. 1. 22:12
React 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. React의 3가지 특징 선언형 기존처럼 HTML/CSS/JS로 나눠 적는 것이 아닌, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 컴포넌트 기반 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다 유지보수에 용이 범용성 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용된다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다. JSX란..? JavaScript를 확장한 문법 JSX는 H..
-
고차함수, map, filter, reduceTopic/JavaScript 2021. 11. 30. 21:28
고차 함수 함수를 리턴할 수 있는 함수 고차함수 = 함수를 전달받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화 콜백 함수 다른 함수의 인자로 전달되는 함수 '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두, 용어를 고차 함수로 사용 고차함수 map 하나의 데이터를 다른 데이터로 맵핑(mapping) 할 때 사용 배열의 각 요소가 특정 로직에 의해 다른 요소로 지정(map)된다. 고차함수 filter 조건에 맞는 데이터만 분류(filtering) 할 때 사용 true인 경우만 따로 분류한다. 고차함수 reduce 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용 배열의 각 요소를 특정 로직에 따라 원하는 하나의 형태로 응축한다.