개발하는 일상

나는 github copilot이 베타 서비스 할 때 부터 사용하기 시작해서, 지금은 코파일럿 없이 코딩한다는 것은 상상도 못하는 사람이 되었다. 2년 넘게 사용하다 보니 코파일럿이 어떤 것을 잘하고, 어떤 것을 못하는 지 어느정도 감이 생겼다. 그래서 코파일럿에 익숙하지 않은 사람들을 위해 나의 활용법 몇가지를 소개한다. 나는 vscode 환경에서 코파일럿을 사용한다. 코파일럿이 잘 하는 것 1. 유틸 함수 생성 코파일럿은 github의 다른 코드를 기반하여 생성된 모델로 돌아가기 때문에, 단순하고 범용적으로 쓰일 법한 코드일 수록 더 잘 생성해낸다. 유틸 함수가 대표적인 사례이다. 아래 [그림 1]을 보자. [그림 1]에서 밝기를 구한다는 주석을 작성한 뒤 코드를 추천받고 있다. 이 함수는 실무에서 ..

한 줄 요약 select 태그를 커스텀하게 만들고 싶다면 div 태그에 tabIndex="0" 속성을 주고, blur 이벤트리스너를 활용해보자 여러 옵션 중 하나를 선택할 수 있게 해주는 HTML 태그가 있다. select 태그인데, 내부 운영용 툴을 만들다가 이 태그를 쓰게 되었다. select 태그를 쓰게 되면 디폴트로 아래 그림1와 같은 디자인이 따라온다. 이 디자인은 css로 바꿀 수 없다는 것이 문제였다. 아무리 내부용 툴이지만 이렇게 만들고 싶진 않아서, div 태그로 직접 select 태그를 구현하기로 했다. 적절한 style과 클릭 이벤트리스너를 달아서 아래 그림2와 같은 태그를 만들었다. div 태그로 select 태그를 흉내내면서 생긴 하나의 문제가 있었다. select 태그는 선택지를..

왜 Overloading이 필요할까? typescript에서 함수를 정의하다보면 인자를 어떻게 주느냐에 따라 return type이 다르게 잡혔으면 싶을 때가 있습니다. 예를 들면, function read(str?: string) { return str } const word = read('hello world') // string | undefined 여기서 함수 read의 return type은 str에 의해 결정되는 것이 아니라 항상 string|undefined 형태의 union type을 갖습니다. 즉, word의 type은 string | undefined 입니다. 'hello world'의 type은 string인데도 말이죠. 이럴때 함수를 여러번 쌓아서 정의하면(overloading) 문..

브라우저의 히스토리가 아래와 같이 쌓여있다고 해보겠습니다. // ['/', '/post/1', '/post/2'] 여기서 함수 foo를 실행하면 어떻게 될까요? function foo () { history.go(-1) // 1 history.pushState({}, null, '/post/3') // 2 } 1이 먼저 실행되고, 2가 실행되면 히스토리는 아래와 같이 구성됩니다. // ['/', '/post/1', '/post/3'] 하지만 실제로는 2가 먼저 실행되고, 1이 실행되어 아래와 같은 히스토리를 갖게됩니다. // ['/', '/post/1', '/post/2..

아래 코드의 결과를 예측해보세요. const foo = '12,4,15,163,51'.split(','); const bar = foo.map(parseInt); console.log(bar); 아래 코드와는 결과가 다를까요? const foo = '12,4,15,163,51'.split(','); const bar = foo.map((num)=>parseInt(num)); console.log(bar); 첫 번째 코드의 결과는 [ 12, NaN, 1, 1, NaN ] 두 번째 코드의 결과는 [ 12, 4, 15, 163, 51 ] 입니다. 이유는 map과 parseInt가 어떻게 정의되어 있는지를 보면 알 수 있습니다. // map map(cal..

stackoverflow.com/questions/16261635/javascript-split-string-by-space-but-ignore-space-in-quotes-notice-not-to-spli 이 글은 위 질문의 답변을 해석한 내용입니다. 먼저 코드 const command = "git commit -m 'hello world'" const splitedCommand = command.match(/(?:[^\s']+|'[^']*')+/g) console.log(splitedCommand) // ['git', 'commit', '-m', "'hello world'"] CLI스럽게 문자열 나누기..