Code Playground

< h1 > Code Playground </ h1 >

2월 20일에 발표된 TypeScript 3.8에는 다가오는 새로운 ECMAScript standard features를 포함하여 많은 새로운 기능들이 담겼다. TypeScript에 포함된 새로운 기능들에 대해서 간단하게 정리해보려고 한다. Type-Only Imports and Exports // ./foo.ts interface SampleConfig { // ... } export function doSmth(config: SampleConfig) { // ... } // ./bar.ts import { SampleConfig, doSmth } from './foo.js'; function doSmthMore (config: SampleConfig) { // ... // doSmth(config);..

프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import React from 'react'; import Button from '../button'; import { exampleConfig } from '../../interface'; import { utilFunction } from '../../utils/api'; import someImage from '../../assets/img/image.png'; 게다가 이렇게 상대 경로로 import 하다보면 어디에 있는 어떤 파일을 가져오는건지 명확하게 눈에 안들어온다. 그런데 절대 경로로 바꾸면 다음과 ..

오늘은 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를 사용하는 방식보다 훨..

오늘은 React의 Context에 대해서 공부해보려고 한다. 이 블로그 포스트는 React documents의 Context 챕터를 번역하고 예시를 따라해 본 글이니 굳이 내 블로그 글을 안보고 아래 링크를 봐도 된다. https://reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces reactjs.org Summary Context는 모든 레벨의 컴포넌트 트리에 props를 통하지 않아도 데이터를 전달할 수 있는 방법을 제공해준다. 대부분의 리액트 어플리케이션은 데이터를 위에서부터 아래로 (부모에서 자식까지) props를 통해 전달한다. 그리고 이것을 top-down 방식이라고 부른..

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)이란 ..