전체 글

Promise

Promise는 비동기적인 코드를 처리할 때, 도움이 되는 개념이다. 콜백 지옥 맨 처음, Promise라는 개념이 없었을 때는 비동기 흐름을 callback 함수를 이용하여 제어했다. callback 함수를 많이 쓰면 쓰게 될수록, 코드가 복잡해지고 가독성이 떨어지는 단점이 있다. 이를 '콜백 지옥'이라고 한다. 아래 코드는 주식을 구매하는 코드를 구현해본 것이다. 보통의 코드는 동기적으로 실행된다. 그래서 콜백 함수를 덕지덕지 써야할 일이 없다. 우리는 콜백 지옥을 체험해보기 위해, 코드의 각 단계가 비동기적으로 실행된다고 생각해보자. 예를 들어 주식의 가격을 가져오는 코드가 비동기적으로 실행되고, 그 다음 주식의 가격을 달러에서 원화로 나타내는 코드가 비동기적으로 실행되고.. 이렇게 비동기적으로 실..

state와 props

state와 props는 리액트에서 가장 흔히 쓰이는 개념이다. 둘 다 사용하기에 그리 어려운 개념은 아니다. 하지만 둘 다 비슷한 동작을 하는 것 같으면서도, 다른 역할을 가지고 있어 조금 헷갈릴 수도 있다. 컴포넌트는 어떤 로우 데이터(raw data)를 HTML로 변환해주는 역할을 한다. 바로 이 HTML에 전달되는 데이터에는, state와 props가 있다. 컴포넌트의 render() 함수의 인풋값으로 state + props가 쓰이므로, 각 데이터 유형이 무엇을 나타내는 지 알 필요가 있다. 공통점 props와 state는 모두 일반 자바스크립트 객체이다. props와 state는 변경되었을 때 렌더링을 업데이트한다. props와 state는 결정론적(deterministic)이다. 같은 인풋을..

Javascript와 객체 지향 프로그래밍

객체 지향 프로그래밍 객체 지향 프로그래밍(OOP, Object-Oriented-Programming)이란, 프로그래밍을 작성하고자하는 일종의 패러다임이다. 지금 우리가 간단한 코드들을 작성할 때 사용하는 방식을 절차적 프로그래밍이라고 한다. 아주 간단한 코드를 짜는 데는 적합하지만 코드가 커지면서 문제점이 발생한다. 과거에 객체 지향 프로그래밍이 없었을 때에도, 개발자들이 코드를 짜면서 프로그램의 덩치가 커지게 되어 여러가지 유지 보수나 관리 상에서의 문제들이 많이 발생하게 되었다. 대표적인 문제점이 바로 변수에 관한 문제이다. 보통 절차적 프로그래밍에서의 변수는 일반적으로 전역 변수로 관리하게 된다. 프로그램이 점점 커질 수록 여러가지의 동작에서 하나의 변수명을 공유해서 쓰는 등의 문제들이 발생하고,..

Tree - 깊이 우선 탐색, 너비 우선 탐색, Binary Search Tree

Tree Tree 자료 구조는 대표적인 비선형 구조의 자료 구조이다. 비선형 자료구조란, 선형 구조가 아니라는 뜻. 선형 구조란, 자료 구조를 구성하는 데이터가 연속적으로 나열되어 있는 구조이다. 배열, 큐, 스택, 연결 리스트 등이 모두 해당된다. 반면, 트리는 비선형 구조이다. 이름에서 알 수 있듯이, 자료가 하나의 root에서 시작해 가지치듯이 쭉쭉 확장되는 자료 구조이다. 대표적인 자료구조로 족보를 들 수가 있다. Tree에 쓰이는 용어들도 족보(가계도)와 같은 용어가 많이 쓰인다. 그리고 윈도우의 파일 시스템도 대표적인 트리 구조의 예다. 트리 구조는 상하 관계가 명확하기 때문에, 계층 구조를 구현하는 데 적합하다. Tree 자료 구조는 기본적인 용어들이 많다. 우선 가장 맨 위에 있는 노드를 ..

Hash Table - Hash Table과 충돌, 충돌 해결 기법

해싱(Hashing) 해쉬 브라운(Hash Brown)이라는 음식이 있다. 감자를 잘게 다져서 모양을 잡아 튀긴 음식이다. 맥도날드의 맥모닝 세트에도 있는 음식인데, 술 안주로도 아주 좋다. 어쨌든 이 해쉬 브라운은, 감자를 해쉬(hash)하여 만들어졌다. 기존의 감자의 형체를 알아볼 수 없도록 다져놓은 것이다. 마찬가지로 프로그래밍에서 해싱(hashing)이란, 어떤 특정 값을 받아서 고정된 길이의 새로운 값을 도출해 주는 것이다. 이 때 새로운 값을 해쉬 값이라고 하며, 이러한 기능을 하는 함수를 해쉬 함수(hash function)라고 한다. 그리고 해쉬 함수를 이용해 자료를 저장하는 자료구조를 바로 해쉬 테이블이라고 한다. 해쉬 테이블(Hash Table) 해쉬 테이블은 해쉬 함수로 변환 된 값을..

Stack, Queue, Linked List - 자료 구조와 Big O 표기법

프로그래밍을 배우다보면은 생각지도 못한 배울 것들을 만나게 된다. 특히 점점 심화된 개념을 배우면 배울수록, 코드를 어떻게 짜야할 지 넓은 관점에서 생각하게 한다. 처음 프로그래밍을 배웠을 때는, if문과 for문만 있으면 세상 모든 문제를 다 풀수만 있을 것 같았다. 물론 지금도 for문과 if문을 엄청 자주 쓰지만, 사실 중요한건 단순히 문제를 해결하느냐가 아니고 어떤 방식으로 문제를 해결하느냐가 중요한 것같다. 그런 관점에서 자료구조의 개념은, 문제를 조금 더 넓은 시각에서 볼 수 있게 해주는 것 같다. 각각의 장단점을 가진 여러 자료구조를 문제 해결방식의 하나로 쓰면서, 어떤 코드가 조금 더 효율적일까를 고민하게 만들어준다. 따라서 자료구조는 조금 더 전문적인 프로그래밍 지식을 원한다면, 꼭 알아..

prototype - prototype 체인, Behavier Delegation(작동 위임)

이전 글: prototype - prototype, instance와 __proto__의 상관관계 https://tadactadac.tistory.com/entry/prototype prototype - prototype, instance와 __proto__의 상관관계 자바스크립트는 프로토타입 기반 언어이다. 프로토타입이 엄청 중요하다는 얘기다. 여타 클래스 기반의 언어들은 '상속'이라는 개념을 사용하는 것에 비해, 자바스크립트는 '상속'이 이루어지 tadactadac.tistory.com 프로토타입 체인 스코프에 스코프 체인이 있듯이, 프로토타입에도 프로토타입 체인이라는 것이 있다. const Cup = function (use) { this.use = use; }; Cup.prototype.getUs..

prototype - prototype, instance와 __proto__의 상관관계

자바스크립트는 프로토타입 기반 언어이다. 프로토타입이 엄청 중요하다는 얘기다. 여타 클래스 기반의 언어들은 '상속'이라는 개념을 사용하는 것에 비해, 자바스크립트는 '상속'이 이루어지지는 않는다. 대신 프로토타입으로 상속 비스무리한 것을 할 수가 있다. 프로토타입은 자바스크립트라는 언어를 이해하는데 가장 기본이 되는 개념이다. 자바스크립트를 잘 아는 사람이라면 기본적으로 알아야할 심화 개념 중 하나(프로토타입, 클로저, 비동기 등)이므로, JS를 잘 알고 싶은 사람이라면 배워두는 것이 좋다. prototype 모든 함수에는 프로토타입이라고 하는 프로퍼티가 있다. anyFunc라는 함수를 하나 만들고, 함수의 prototype 프로퍼티를 출력했더니 어떤 객체 하나를 출력했다. 뭔가 이상한 점이 하나 있었다..