개발하는 일상

나는 왜 웹 페이지를 커스텀 해야 했을까?나는 요즘 원티드에서 채용공고를 아주 많이 확인한다.하지만 문제는 특히 지원하지 않기로 결정한 공고가 계속 같은 화면에 표시된다는 것이었다.이런 공고를 반복적으로 확인하는 건 번거로웠고, 이를 해결할 방법이 필요했다. 어떤 웹 사이트를 커스텀하는데 크롬 익스텐션이 가장 좋은 선택지라고 생각한다. 특히나 데스크탑 환경이라면 더욱더.나는 크롬 익스텐션을 통해 공고에 따로 표시를 만들기로 결정했다.  먼저 알아보는 크롬 확장프로그램의 구조크롬 익스텐션은 다양한 파일들로 구성할 수 있지만, 그중 manifest.json은 필수로 포함되어야 한다. 나머지 popup, background, content-script 등은 필요에 따라 선택적으로 추가할 수 있다.각 파일의 역..

문제의 발견Fake review 라는 ai가 만든 리뷰를 맞춰보는 사이트를 배포한 뒤, 사람들이 제출한 답변 데이터를 보다가 이상한 점을 하나 발견했다. 1~2초 정도의 짧은 시간 동안 같은 답변이 중복 제출되고 있는 것을 발견한 것. 로컬 서버에서 확인하려 했을 땐 문제를 재현할 수 없었는데, 배포 환경에서 확인하니 문제가 쉽게 재현되었다(아래 그림 2). "다음" 버튼이 비활성화 되었다가, 페이지가 바뀌기 전에 활성화 되는 것이었다. 불친절한 UI 때문인지 사람들이 페이지가 바뀌기 전에 몇번씩 버튼을 눌렀나보다.그림 2. 페이지 변경 전 다음 버튼이 다시 활성화  문제의 원인 찾기위 그림 3은 답변을 제출할 때 실행되는 코드이다. 버튼은 상태 isSubmitting으로 제출 중에 중복 클릭되어도 제출..

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