-
[React] Component Life Cycle / 컴포넌트 생명주기Frontend 2019. 8. 17. 15:28
컴포넌트 생명주기 모든 리액트 컴포넌트는 여러 종류의 Life Cycle Method를 가진다. Life Cycle이란 컴포넌트가 생성되어 소멸될 때까지의 일련의 과정들을 일컫는다. 이러한 Life Cycle 안에서 특정 시점에 코드가 호출되도록 설정할 수 있는데, 이 때 사용되는 메소드를 Life Cycle Method라고 한다. 1. Render() 다른 life cycle method는 상황에 따라 사용할 수도, 사용 안할 수도 있는 선택사항이지만 render 메소드는 모든 클래스 컴포넌트에서 반드시 있어야 하는 필수사항이다. render는() 보통 JSX를 사용하여 사용자가 작성한 엘리먼트들을 DOM 노드로 변환해준다. class App extends React.Component { render(..
-
[JS/Asynchronous] Async / Await 다루기Frontend 2019. 8. 10. 23:48
Promise에 이어서 오늘은 Async/Await에 대해서 정리해보려고 한다. Async/Await Async/await은 ES8에서 새롭게 도입되었다. async/await은 promise를 좀 더 이해하기 쉽게 사용하기 위해서 탄생하였다. 그러니까 promise와 전혀 다른 별개의 개념이 아니라 promise를 간단하게 사용하기 위한 문법인 것이다. 그래서 async/await은 기존에 우리가 알던 promise 구문보다 훨씬 간단한 구조로 되어있다. function makeWordPlural (word) { return new Promise((resolve, reject) => { setTimeout(() => { word += "'s "; resolve(word); }, 1000); }); } ..
-
[JS/Asynchronous] Promise / Promise.all(), Promise.race() 정리Frontend 2019. 8. 10. 17:07
저번에 event loop 포스팅에서 언급했듯이 싱글 스레드 언어인 자바스크립트는 한 번에 한 가지 일 밖에 못한다. 그래서 모든 작업을 동기로 처리하면 데이터를 받아와서 화면에 렌더링할 때 데이터 받아오는 작업을 완료하기 전까지는 렌더링을 할 수 없기 때문에 화면이 블록(block)되어 버린다. 그래서 비동기란 것이 생겨났다. 비동기란 일종의 예약 시스템이다. 작업을 동기(Synchronous)로 처리하게 되면 어떤 작업이 끝날 때까지 다음 작업을 진행할 수 없지만 비동기(Asynchronous)로 처리하게 되면 이야기가 달라진다. 어떤 요청을 보내서 응답이 올 때까지 기다려야되는 작업이나 사전에 지정한 시간을 기다려야하는 작업들을 예약을 걸어놓고 지금 당장 처리할 수 있는 작업들을 진행하는 것이다. ..
-
[JS/OOP] 자바스크립트와 객체지향 프로그래밍(Object Oriented Programming) / 캡슐화(Encapsulation), 추상화(Abstraction), 상속(Inheritance) 개념 정리Frontend 2019. 7. 21. 16:23
객체지향 프로그래밍(Object Oriented Programming) 객체지향 프로그래밍이란 어떤 동작이나 로직보다는 객체를 중심으로 프로그래밍을 하는 일종의 새로운 패러다임이다. 여기서 객체란 우리가 모델링하고자 하는 대상과 관련된 모든 정보와 데이터, 코드, 동작, 기능들을 담을 수 있다. 그러니까 객체지향 프로그래밍이란 간단하게 말해서 우리가 어떤 프로그램을 새로 만들려고 할 때 어떤 방식으로 프로그램을 구성하고 조립할 것인지에 대한 이론적인 개념이다. 어떤 식으로 프로그램을 만드느냐는 순전히 개발자의 창의력과 아이디어에 달려있다. 그러니까 우리가 객체지향 프로그래밍에서 주로 사용되는 프로토타입이나 클래스 등이 어떤 식으로 기능하는지는 공부할 수 있지만 객체지향 프로그래밍 자체를 어떻게 하는지는 ..
-
[JS/Sorting] 병합 정렬(Merge Sort)과 분할 정복 전략(Divide and Conquer) 개념에 대하여Frontend 2019. 7. 21. 11:49
Merge Sort 병합 정렬 혹은 합병 정렬이라고 불리는 Merge Sort는 데이터들을 잘게 쪼갠 다음에 하나로 합치는 과정에서 정렬하는 방법이다. 요즘은 데이터를 USB같은 장치로 저장하는 것이 일반적이었으나 아주 옛날에는 테이프를 이용해서 저장했다. 테이프 드라이브에 저장된 데이터를 정렬하는 일은 매우 어려운 일이었다. 왜냐면 테이프 드라이브는 항상 데이터를 처음부터 순차적으로 읽어야 한다는 특징이 있기 때문이다. 이러한 테이프 드라이브의 문제점 때문에 병합 정렬 알고리즘이 탄생하였다. 병합 정렬은 위의 그림처럼 데이터를 절반씩 쪼개는 divide 작업을 먼저 하는데 이 작업은 데이터가 하나만 남을 때까지 반복한다. 그 후에 하나씩 쪼개진 데이터를 정렬을 하면서 다시 그룹화한다. 이런 과정은 아래..
-
[JS/Sorting] 버블 정렬, 삽입 정렬, 선택 정렬 자바스크립트로 구현하기 (Bubble Sort, Insertion Sort, Selection Sort in JavaScript)Frontend 2019. 7. 20. 23:47
Sorting Algorithm 무작위로 섞여있는 데이터를 어떤 기준에 맞춰 정렬하는 알고리즘은 여러 가지가 있다. 정렬 알고리즘은 다양한 경우에 매우 유용하게 사용된다. 각종 데이터 목록을 정리하고 싶을 때 분포도의 중위값을 알아내고 싶을 때 데이터에서 중복값을 잡아내고 싶을 때 이진 탐색을 하고 싶을 때 사실 내가 공부하는 자바스크립트에 sort()라는 메소드가 이미 존재하듯이, 모든 프로그래밍 언어에는 자체적인 정렬 메소드가 있다. 그럼에도 불구하고 우리가 정렬 알고리즘을 배워야하는 이유는 시스템 정렬이 항상 좋은 퍼포먼스를 보장하지 않기 때문이다. 또한 내가 가진 데이터베이스의 양이나 상황에 따라 어떤 정렬을 사용하는 것이 좋을지 달라지기 때문에 우리는 기본적으로 유명한 정렬 알고리즘들은 반드시 ..
-
[자료 구조] Data Structure - (3) Tree / Binary Search TreeComputer Science 2019. 7. 14. 13:45
Tree 트리(Tree)는 이름 그대로 나무를 거꾸로 뒤집어 놓은듯한 형태이다. 자료구조가 하나의 뿌리에서 뻗어나가는 형상을 하고 있다. 트리 구조는 우리 일상에서 흔히 볼 수 있는 계층적인 구조(Hierarchical Structure)를 컴퓨터에서 표현한 구조이다. 한 가족의 족보나 회사의 조직도 등이 바로 트리 구조이다. 족보같은 경우 조상으로부터 자식, 자식의 자식, 자식의 자식의 자식 형태로 이루어져있기 때문이다. 컴퓨터의 파일 시스템이나 웹 페이지의 DOM 구조도 트리 구조이다. 트리 구조는 대개 위 그림과 같은 구조이다. 트리의 각 요소들은 Node라고 부르고 가장 상위의 노드를 Root Node라고 부른다. 반대로 최하위 노드는 Leaf Node 혹은 Terminal Node라고 한다. L..
-
[자료 구조] Data Structure - (2) Hash TableComputer Science 2019. 7. 11. 19:13
오늘은 자료 구조 중에서 매우 중요한 것들 중 하나인 Hash Table(해시테이블) 자료 구조에 대해서 정리해보려고 한다. 만약에 다음과 같은 친구들의 이름과 전화번호 리스트가 있다고 해보자. 1 Alice 010-1234-**** 2 Sam 010-1357-**** 3 Mike 010-1248-**** ... ... 10 Harry 010-9876-**** 이제 친구들의 이름, 전화번호 데이터를 어디엔가 저장해뒀다가 전화번호가 필요할 때마다 친구들의 이름을 입력해서 전화번호 데이터를 찾으려고 한다. 이 때 친구들의 전화번호를 가장 빠르게 찾기 위한 방법 중 하나가 바로 해시 테이블이다. 해시 테이블을 구성하는 데는 해시 함수(Hash function)라는 것이 필수적이다. 해시 함수는 친구 이름과 같..
-
[자료 구조] Data Structure - (1) Stack / Queue / Linked ListComputer Science 2019. 7. 8. 15:54
자료 구조는 코딩과는 별로 상관없는 것처럼 보일 수도 있겠지만 사실 프로그래밍에 있어서 매우 중요한 부분을 차지한다. 내가 어떠한 프로그램을 구현할 때, 혹은 어떤 알고리즘 문제를 해결하거나 새로운 로직을 만들어야할 때 데이터들을 어떤 구조로 저장하느냐에 따라서 프로그램의 효율성이나 성능 면에서 차이가 날 수 있기 때문이다. 따라서 오늘은 자료 구조 중에서 가장 기본적인 3가지를 간단하게 정리해보려고 한다. Stack (스택) Stack은 자료를 한 줄로 블록을 쌓듯이 추가하는 형태의 자료 구조이다. Stack의 맨 위에 자료를 추가하는 것을 우리는 push라고 하고 반대로 맨 위의 자료를 하나씩 제거하는 것을 우리는 pop이라고 한다. 위 그림처럼 스택은 어느 한 곳에 블록처럼 자료가 쌓이기 때문에 스..
-
[JS/ES2015] 자바스크립트 ES2015(ES6) 문법 정리(2) - Rest Parameter / Spread Operator / DestructuringFrontend 2019. 7. 6. 13:40
바닐라코딩 부트캠프 프렙 과정을 끝마치고 본과정으로 들어가기 전 일주일 동안의 휴식 기간이 있었는데, 정말 최선을 다해(!) 열심히(!) 놀았다. ㅋㅋㅋ 이제 다음주 월요일에 부트캠프 시작하고 열심히 달려야하니까 오늘부터 슬슬 그동안 공부했던거 읽어보면서 기억을 되살려보려고 한다... 오늘은 프렙 과정에서 배웠던 내용들 중에서 아직 정리를 못한 Rest Parameter, Spread Operator와 Destructuring에 대해서 정리를 해보려고 한다. 1. Rest Parameter (나머지 인자들) Rest Parameter는 나머지 인자들, 혹은 여분의 인자들이라는 뜻이다. 함수를 정의할 때 마지막 인자 앞에 ...을 붙이면 해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만든다. func..