Code Playground

< h1 > Code Playground </ h1 >

JavaScript: loosely typed or a dynamic language 자바스크립트는 느슨한 타입 언어, 혹은 동적 언어라고 불린다. 즉, 변수의 타입을 미리 선언하지 않아도 코드가 해석될때 자동으로 파악이 된다. 그 말은 같은 변수에 여러 타입을 넣을 수 있다는 뜻이다. 그러니까 var a 라고 변수를 선언하면 그 변수에 숫자든 문자든 배열이든 함수든 원하는 타입을 모두 넣을 수 있다는 뜻이다. var a = 123;// a is now a number a = 'string';// a is now a string a = { b: 1 };// a is now an object 이 부분이 매우 편리할 수도 있겠지만, 반대로 여러가지 버그를 야기하는 경우가 많았다. 개발자가 의도하지 않은 타입..

Codility, CyclicRotation An array A consisting of N integers is given. Rotation of the array means that each element is shifted right by one index, and the last element of the array is moved to the first place. For example, the rotation of array A = [3, 8, 9, 7, 6] is [6, 3, 8, 9, 7] (elements are shifted right by one index and 6 is moved to the first place). The goal is to rotate array A K time..

Codility, OddOccurrencesInArray A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that is left unpaired. For example, in array A such that: A[0] = 9 A[1] = 3 A[2] = 9 A[3] = 3 A[4] = 9 A[5] = 7 A[6] = 9 the elements at indexes 0 and 2..

Codility, Binary Gap A binary gap within a positive integer N is any maximal sequence of consecutive zeros that is surrounded by ones at both ends in the binary representation of N. For example, number 9 has binary representation 1001 and contains a binary gap of length 2. The number 529 has binary representation 1000010001 and contains two binary gaps: one of length 4 and one of length 3. The n..

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

정말 오랜만에 블로그 글을 작성하는 것 같다. 바닐라코딩에서 서버쪽 공부를 시작하면서 할 것도 엄청 많고 과제에 허덕이다보니 도저히 블로그 글을 쓸 여유가 안생겼었다. 이번에 웹소켓을 이용해서 랜덤 채팅을 구현했는데 처음에 이런 저런 버그들로 엄청 고생했어서 만들고 나니까 너무 뿌듯하다ㅜㅜ 실시간으로 소통하는 채팅을 만들기 위해 웹 소켓(WebSocket)을 사용하여 구현하였다. MDN 문서를 보면 웹 소켓은 클라이언트(브라우저)와 서버 사이에서 상호 작용 가능한 통신 세션을 설정할 수 있게 하는 기술이라고 되어있다. 그래서 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다고 되어있다. 여기서 폴링(Poling)이란 ..

지난 번에 Express와 MongoDB로 간단하게 백엔드 서버를 만들었으니 이제 그걸 이용해서 프론트엔드 구현을 마저 해보려고 한다. client/src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter as Router } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; ReactDOM.render( , docume..

https://im-developer.tistory.com/164 [Node.js] Express를 backend로 하는 Create-react-app 시작하기 이번주부터 바닐라코딩에서 백엔드 공부를 시작했다. Node.js와 MongoDB를 이용하여 여러 가지 과제를 해보는 중인데 처음 접하는거라 어렵긴하지만 프론트에서 api 요청을 보내서 데이터 받아오는 것만 해보다가.. im-developer.tistory.com 지난번에 포스팅으로 올렸던 Express와 React 연습 앱을 활용해서 회원가입 / 로그인 구현을 해보기로 했다. 여러가지 방법들이 있겠지만 나는 지난번 바닐라코딩 서버 관련 과제를 하다가 만난 jwt 토큰을 이용해보기로 했다. (Json Web Token이 무엇인지 자세히 알고 싶다면..

이번주부터 바닐라코딩에서 백엔드 공부를 시작했다. Node.js와 MongoDB를 이용하여 여러 가지 과제를 해보는 중인데 처음 접하는거라 어렵긴하지만 프론트에서 api 요청을 보내서 데이터 받아오는 것만 해보다가 직접 백엔드에서 DB에 데이터를 집어넣고 가져오는 작업들을 해보니까 너무 신기하다. 오늘은 Node.js 사용자들이 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트단을 구성하는 아주 간단한 방법에 대해 포스팅해보려고 한다. 이 포스팅은 아래 블로그 글을 참고하여 작성했다. https://daveceddia.com/create-react-app-express-backend/ Create React App with an Express Backe..

Reverse Array 주어진 배열을 뒤집어서 출력한다. 다만 추가 메모리 공간을 만들지 않고 공간복잡도를 고려하여 in-place 방식으로 해보기. (물론 reverse()와 같은 메소드는 사용하지 않고 풀어야한다.) 매우 매우 간단한 몸풀기 문제. 배열의 맨 왼쪽 인덱스와 맨 오른쪽 인덱스를 잡아서 값을 교환하고 왼쪽 인덱스는 오른쪽으로 한 칸 이동하고, 오른쪽 인덱스는 왼쪽으로 한 칸 이동한다. 위 과정을 반복하다가 왼쪽 인덱스가 오른쪽 인덱스보다 크거나 같아지면 반복을 종료하고 배열을 리턴한다. const reverseArray = array => { let left = 0; let right = array.length - 1; while (left < right) { let temp = arr..