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 이 부분이 매우 편리할 수도 있겠지만, 반대로 여러가지 버그를 야기하는 경우가 많았다. 개발자가 의도하지 않은 타입..

회사에서 Git을 사용해서 형상 관리를 하고 있다. 그 동안 내가 개인 repository branch에 commit, push등을 해본 적은 많지만 다른 사람과 협업을 하면서 branch를 생성하고 master에 merge를 해본 적은 없어서 처음에 매우 당황했었다. 그래서 오늘은 많이 비교가 되는 merge와 rebase에 대해서 알아보려고 한다! 먼저 Merge와 Rebase는 다음과 같은 상황에서 사용된다. 여러 명이 공동으로 작업하는 repository를 clone 받아 작업을 한다고 생각해보자. master라는 공동의 브랜치가 존재하고 나는 my-branch라는 이름의 브랜치를 만들어서 코드 작업을 한다. $ git checkout -b my-branch 위 명령어는 아래 명령어를 한 줄로 축..

정말 오랜만에 블로그에 글을 쓴다. 부트캠프를 수료하자마자 면접을 보러다녔고 최종 입사 결정을 하고나서 2주~3주 정도 쉬는 동안에는 정말 아무것도 하지 않고 휴식하는 시간을 가졌다. 그리고 입사하고 나서 첫 주는 회사에 적응하느라 힘들어서 퇴근하고 집에 와서 아무것도 못 했었다. 이제 회사에 입사한지 2주가 되었는데 어느정도 회사의 분위기도 익히고 작은 업무를 맡아서 하고 있지만 아직도 얼떨떨하다. 부트캠프를 11월 중순에 수료하고 11월 말부터 본격적으로 취업 준비를 했었다. 아직도 부족한 것이 많고 모르는게 산더미인데 회사에서 면접이나 제대로 볼 수 있을지 두려움이 앞섰다. 이력서를 고치고 또 고치고 면접 예상 질문 연습도 열심히 하면서 이력서를 한 20군데 넣어보았다. 이력서를 처음 넣었을때는 당..

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..