Code Playground

< h1 > Code Playground </ h1 >

오늘은 Typescript, Redux hooks를 사용하여 간단한 React Todo List를 만들어보려고 한다. 예전에 connect라는 Redux 라이브러리의 Higher order component를 사용해 Redux 프로젝트를 몇 번 만들어봤었다. 그 때는 connect로 연결된 container component에서 비즈니스 로직 정의를 하고 presentational component에서 container로부터 전달받은 state를 렌더해주는 구조였다. 그러다보니 매 번 connect로 container와 component를 연결해주는 과정이 약간 번거로웠다. 게다가 action과 reducer를 매번 생성하는 것도 아주 귀찮은 일이었다. 그래서 오늘은 connect를 사용하는 방식보다 훨..

대화 상대방이 텍스트를 입력 중일 경우 상대방 화면에 표시해주는 기능을 처음으로 구현해보았는데 별거 아닌 기능이지만 막상 만들려니까 어떻게 해야될지 감이 안잡혀서 고생했다ㅋㅋ 일단 구현하는 로직은 이렇다. 1. 사용자가 input박스에 텍스트를 칠 때마다 서버에 startTyping 이벤트를 보내는데, startTyping이벤트를 거는 동시에 setTimeout()으로 일정시간 뒤에 stopTyping이벤트가 실행되도록 한다. 2. 그런데 input의 onChange 이벤트가 계속된다면 clearTimeout()을 이용하여 setTimeout으로 걸어놓은 stopTyping 이벤트들을 계속해서 clear시켜준다. 3. 그러다가 input에 change 이벤트가 더 이상 일어나지 않으면 그 때서야 비로소 ..

Quick Sort 퀵 정렬은 1960년에 찰스 앤터니 리처드 호어(C.A.R hoare)가 처음 제안한 방법으로 이후 많은 사람들이 수정 보완하여 완성된 정렬 알고리즘이다. 이 알고리즘은 처음 소개된 이후로 반세기가 넘었지만 현존하는 가장 빠른 정렬 알고리즘 중에 하나이다. 퀵 정렬은 in place 방법과 in place가 아닌 방법 2가지가 있는데 실제로 많이 쓰이는 방법은 메모리 사용량이 적은 in place 방법이다. 그러나 in place가 아닌 방법이 더 직관적으로 이해하기 쉬우므로 이 방법을 먼저 정리하고 그 다음 in place 방법을 정리하겠다. Basic Quick Sort - Not In Place 퀵 정렬은 지난번 병합 정렬 포스팅에서 소개한 Divide and Conquer 전략..

Merge Sort 병합 정렬 혹은 합병 정렬이라고 불리는 Merge Sort는 데이터들을 잘게 쪼갠 다음에 하나로 합치는 과정에서 정렬하는 방법이다. 요즘은 데이터를 USB같은 장치로 저장하는 것이 일반적이었으나 아주 옛날에는 테이프를 이용해서 저장했다. 테이프 드라이브에 저장된 데이터를 정렬하는 일은 매우 어려운 일이었다. 왜냐면 테이프 드라이브는 항상 데이터를 처음부터 순차적으로 읽어야 한다는 특징이 있기 때문이다. 이러한 테이프 드라이브의 문제점 때문에 병합 정렬 알고리즘이 탄생하였다. 병합 정렬은 위의 그림처럼 데이터를 절반씩 쪼개는 divide 작업을 먼저 하는데 이 작업은 데이터가 하나만 남을 때까지 반복한다. 그 후에 하나씩 쪼개진 데이터를 정렬을 하면서 다시 그룹화한다. 이런 과정은 아래..

Sorting Algorithm 무작위로 섞여있는 데이터를 어떤 기준에 맞춰 정렬하는 알고리즘은 여러 가지가 있다. 정렬 알고리즘은 다양한 경우에 매우 유용하게 사용된다. 각종 데이터 목록을 정리하고 싶을 때 분포도의 중위값을 알아내고 싶을 때 데이터에서 중복값을 잡아내고 싶을 때 이진 탐색을 하고 싶을 때 사실 내가 공부하는 자바스크립트에 sort()라는 메소드가 이미 존재하듯이, 모든 프로그래밍 언어에는 자체적인 정렬 메소드가 있다. 그럼에도 불구하고 우리가 정렬 알고리즘을 배워야하는 이유는 시스템 정렬이 항상 좋은 퍼포먼스를 보장하지 않기 때문이다. 또한 내가 가진 데이터베이스의 양이나 상황에 따라 어떤 정렬을 사용하는 것이 좋을지 달라지기 때문에 우리는 기본적으로 유명한 정렬 알고리즘들은 반드시 ..

https://im-developer.tistory.com/121?category=828401 [자료 구조] Data Structure - (1) Stack / Queue / Linked List 자료 구조는 코딩과는 별로 상관없는 것처럼 보일 수도 있겠지만 사실 프로그래밍에 있어서 매우 중요한 부분을 차지한다. 내가 어떠한 프로그램을 구현할 때, 혹은 어떤 알고리즘 문제를 해결하거나 새로운 로직.. im-developer.tistory.com 지난번 포스팅에서 정리한 Linked List는 대충 아래와 같이 생겼다. Linked list는 배열과 비교했을때 특정 데이터를 검색하는데 시간이 오래 소요된다. 그 이유는 배열은 각 공간의 주소가 인덱스라는 것으로 정해져있기 때문이다. 따라서 어떤 값의 주소만..

오늘은 바닐라 자바스크립트로 캘린더 구현하는 방법을 포스팅해보려고 한다. 캘린더 모양은 대충 이렇게 생겼고, 오늘 날짜는 노란색 동그라미로 표시된다. 그리고 특정 날짜를 클릭하면 해당 날짜가 다른 색깔로 표시되고 왼쪽 사각형에 있는 날짜와 요일이 클릭한 날짜로 바뀌어야 한다. See the Pen calendar by juyeonH (@JY712) on CodePen. 해당 기능을 구현한 코드는 위에 codepen으로 올렸고, 몇 가지 코드만 어떻게 구현했는지 적으려고 한다. const init = { monList: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novem..

오늘은 자바스크립트로 DOM을 동적 생성하는 방법에 대해서 정리해보려고 한다. 정리를 위해서 간단한(...간단하지만 나름 깔끔하게 만들려고 오랜 시간 고군분투했다.히히) 영화 정보를 출력하는 웹 페이지를 만들어보기로 했다. 영화 정보를 가져오기 위해서 인터넷을 뒤져서 146개의 영화 정보를 담고 있는 JSON 파일을 다운 받았다. JSON 파일을 연결하는 방법은 아직 모르니까 일단은 js 파일에 MOVIES라는 이름의 객체로 만들어 html파일에 연결시켜주었다. const MOVIES = [{ "id": 1, "title": "Beetlejuice", "year": "1988", "runtime": "92", "genres": [ "Comedy", "Fantasy" ], "director": "Tim B..

클로저에 대해서 이해하려고 간단한 툴팁 만들기 연습을 해보았다. 물론 클로저를 이용하지 않아도 그냥 클래스를 조작해서 만들 수 있지만 나는 클로저 이해하는게 목적이니까 굳이 굳이 클로저를 활용하여 만들기ㅋㅋ 초간단 버튼 툴팁! Toggle hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello. hello..

Math.random() 자바스크립트의 Math.random() 메소드가 뭔지 MDN에서 살펴보면 0(포함)보다 크고 1(불포함)보다 작은 랜덤 숫자를 부동 소수점(floating-point)으로 반환하는 함수라고 되어있다. 여기서 부동 소수점이란 무엇일까? 컴퓨터에서 실수를 표현하는 것은 정수를 표현하는 것보다 훨씬 복잡하다. 왜냐면 실수 또한 2진수로 표현해야하기 때문이다. 실수로 표현하는 방식은 두 가지가 있는 데, 바로 고정 소수점(fixed point) 방식과 부동 소수점(floating point) 방식이다. 실수는 정수 부분과 소수 부분으로 나눠진다. 이 때 실수를 표현하는 가장 간단한 방법은 소수부의 자릿수를 미리 정하여 표현하는 방법이다. 이 것이 고정 소수점 방식이다. 고정 소수점 방식..