Phot_o_matic Programming

react에서 비동기를 다루는 방법은 다양하다. javascript 언어니까 당연히 Promise, async & await으로 처리가 가능하다. redux를 사용하고 있다면, redux saga, thunk 등 다양한 미들웨어가 제공된다. 하지만 이런 것들로 서버의 상태를 관리하기란 여간 어려운 일이 아니다. 아래의 이유들로 앱과 서버 간의 관계 및 상태를 말할 수 있을 것이다. 원격에 위치한 곳에 저장. 앱이 소유하거나 제어하지 않음. 데이터 가져오기 및 업데이트를 위해서는 비동기 API가 필요. 다른 사람들과 함께 사용해서, 나도 모르는 순간에 업데이트 될 수 있음. 앱에서 사용하는 데이터가 OUTDATED 상태가 될 가능성 가짐. 기본적인 React Query 형태 함수형 컴포넌트 내에서 Hook..

Programming/React 2021. 5. 24. 23:13

포켓서베이 서비스가 지나온 길 포켓서베이는 대한민국 사람이라면 누구나 한번은 이용해보았고, 또 이용하고 있는 카카오톡이라는 앱을 이용하여 설문 진행이 가능하다. 덕분에 포켓서베이 이용자는 익숙한 인터페이스를 제공하면서 많은 사람들을 설문에 참여하도록 유도할 수 있다. 챗봇과 대화를 하듯이 메시지를 주고 받다 보면 어느 새 설문이 완료됐다는 메시지를 볼 수 있으니 말이다. 더불어 카카오톡은 이미 한국 사회에서 범용적이고 대중적인 이미지를 가지고 있어, 대부분의 기업에서도 큰 거부감 없이 서비스를 이용할 수 있다. 하지만, 설문 조사라는 서비스 본연의 목적에 맞추어 다양한 인터페이스를 구축하고 제공하기에는 카카오톡 챗봇이라는 시스템이 주는 한계가 분명 존재한다. 자유도가 높지 않다는 것은 앞으로의 서비스 편..

Programming 2020. 7. 21. 18:37

어떤 정렬된 array가 주어졌을 때, array는 오른쪽 혹은 왼쪽으로 rotate 될 수 있다. ex) sorted array [0, 1, 2, 3, 4, 5, 6, 7] => rotated array [4, 5, 6, 7, 0, 1, 2, 3] rotated array 내에서 target이 되는 숫자를 찾으려면 어떻게 해야 효율적으로 할 수 있을까? 주어진 array의 길이를 n이라고 하였을 때, O(n)이 아닌 O(log n)의 복잡도로 해당하는 숫자와 일치하는 자리의 index를 반환하여라. 해당하는 숫자가 array 내에 없을 경우는 null을 반환하여라. For instance: rotatedArraySearch([4, 5, 6, 0, 1, 2, 3], 2) === 5 rotatedArray..

Programming/Algorithm 2019. 10. 7. 15:43

유사난수(pseudorandom number)는 난수를 흉내내기 위해 알고리즘으로 생성되는 값을 가리킨다. 이 때 유사난수를 생성하는 알고리즘을유사난수 생성기(pseudorandom number generator,PRNG)라고 부른다. 유사난수는 알고리즘의 상태에 의해 값이 정해지므로 생성된 수열은 일정한 주기를 가지며, 따라서 난수의 예측 불가능성을 가질 수 없다. 예측 불가능성이 필요한 경우 하드웨어와 같이 외부 신호를 이용하는 하드웨어 난수 생성기를 사용한다. (Technically, a computer-shuffled deck will usually be "pseudorandom", not "truly" random. However, the difference between the two is t..

Programming/Algorithm 2019. 7. 10. 09:57

균형 잡힌 괄호 치기 괄호의 짝이 제대로 이뤄져있는지 판별하고 boolean 값을 리턴 *e.g balancedParens('('); // false balancedParens('()'); // true balancedParens(')('); // false balancedParens('(())'); // true balancedParens('{}'); // true balancedParens('[({})]'); // true balancedParens('[(]{)}'); // false balancedParens(' var wow = { yo: thisIsAwesome() }'); // t..

Programming/Algorithm 2019. 6. 27. 09:48

Ajax는 불필요한 리소스 전달을 최소화하여, 클라이언트 및 서버 간의 작업 속도를 최소화시켜주는 기술 중 하나이다. 수 많은 방법이 있겠지만, 이번에는 Fetch API를 사용하여 구현을 해 보았다. //보내고자 하는 메시지의 형태 var message = { username: 'sangwookim', text: 'hello!', roomname: 'IM13' }; const serverURL = 'http://52.78.213.9:3000/messages' //연결하여 사용할 서버 url window.fetch(serverURL, { method: 'POST', body: JSON.stringify(message), headers: { "Content-Type": "application/json", ..

Programming/Concept 2019. 6. 10. 20:11

기존의 ES5와는 달리, ES6에서 subclassing을 하는 방법을 알아본다. class Human { //function으로 생성자 함수를 만들지 않고, class 라는 명령어로 만든다. constructor(x,y) { //class 명령어로 생성될 것의 property를 지정해준다. this.x = x; this.y = y; } move(){ //prototype이 지닐 method를 생성해준다. this.x++; this.y++; } } class rumee extends Human { // extends를 통하여 Human이 가진 prototype 객체를 복사 붙여넣기 해준다. constructor는 rumee로 유지된다. constructor(x,y) { super(x,y) //super를..

Programming/Concept 2019. 6. 9. 18:22

재귀 함수 없이 n번째 피보나치 수를 찾아라! 흔히들 피보나치 수를 찾을 때에 recursion을 이용하여 해당 숫자를 찾는다. 하지만 모든 재귀함수는 모두 반복문으로 구현이 가능하고, 모든 반복문은 모두 재귀함수로 구현이 가능하다고 한다. 그러므로 이번에는 재귀함수의 적용 없이 피보나치 수를 찾아 보았다. /** * A Fibonacci sequence is a list of numbers that begins with 0 and 1, and each * subsequent number is the sum of the previous two. * * For example, the first five Fibonacci numbers are: * * 0 1 1 2 3 * * If n were 4, your..

Programming/Algorithm 2019. 6. 9. 00:53