나는 평소에 이벤트 핸들러 타입을 작성할 때에는 아래와 같이 작성했었는데, 이벤트 별 핸들러의 타입 이름과 HTMLElement의 이름을 매번 떠올려야 하는 점이 은근히 귀찮았었다.그러던 중 ComponentProps 를 통해 input의 onChange props 타

회사 서비스 내에 단순 정보 제공용 문서 페이지이며 앞으로도 내용 업데이트가 자주 있을 것 같은 페이지가 급하게 필요한 상황이었다. 이런 페이지를 개발자가 직접 하나하나 코드로 구현하기보다는 노션에 문서를 작성 후 해당 노션을 불러오는게 훨씬 더 효율적일 것이라 생각했

github copliot 플러그인을 사용하고 싶어서 WebStrom을 현재 가장 최신버전인 2021.3 버전으로 업데이트 했더니 ESlint fix와 Prettier가 동작을 하지 않는다. 똑같은 프로젝트 환경인데 이전 버전인 2020.3 에서는 정상적으로 동작한다.

회사에서 사용하는 이미지들은 보안이 필요하기 때문에 아무나 접근할 수 없도록 이미지 url에도 인증 절차가 필요하다. 이럴 때 Signed URLs 을 사용하면 된다. Signed URL이란 어떠한 요청을 수행하는 데 필요한 제한된 권한과 시간을 제공하는 URL이다.

나는 회사에서 백오피스 프론트엔드를 개발한다. 백오피스를 사용하시는 실무자 분들이 이미지 파일을 다운로드 받을때 이미지를 하나씩 클릭해서 우클릭 후 다운로드 받는 작업을 하셨었다.이 과정이 상당히 비효율적이라 생각해서 '이미지 다운로드 버튼', '이미지 전체 다운로드

resize 속성은 textarea 에만 적용했었는데 알고보니 textarea 말고도 다른 html 태그들에도 적용이 가능했다.resize 속성을 적용할 수 없는 조건은 다음과 같다.inline 요소overflow 속성이 visible인 Block 요소htmlcss랜더

취업 후 첫 연말정산을 해보면서, 내년에도 참고하기 위해 2021년에 제가 연말정산한 방법을 기록했습니다. 연말정산에서 모든 사람이 기본적으로 제출해야 하는 귀속 소득 · 세액공제증명서류와 공제신고서는 회사 가이드문서를 보고 홈텍스를 통해 진행하였습니다. 이글에선 그외

원래는 VSCode를 사용했었는데 회사에 취직 후 웹스톰을 한번 사용해보니 생각보다 잘 맞아서 웹스톰을 고정적으로 사용하게 되었다. 내가 생각하는 웹스톰의 장점은 다음과 같다. Git에 관련된 UI가 너무 직관적으로 잘 되어 있다. git log를 시각적으로 보여주고

자바스크립트 엔진은 싱글스레드이다. 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 하나의 작업만 처리가 가능하고 동시에 두개 이상의 함수를 병렬적으로 처리할 수 없는것을 뜻한다. 위와같은 코드를 실행했을때 콘솔로그가 찍히는 순서는 1, 2, 3 이 아니라 1, 3, 2

Vue를 입문하시는 백엔드 동료 개발자분께서 Vue의 method computed watch 함수에 대해 언제 어떻게 써야하는가에 대해 고민이 있으시다고 하셔서, 저도 Vue에 대해 잘 아는건 아니지만 도움이 됐으면 하는 마음으로 정리해 보았습니다. 혹시 잘못된 부분이

자식 iframe에서 부모 html로 접근하기 도메인이 같을 경우 도메인이 같을 때 자식 iframe의 html에서 부모 html 로 접근하고 싶을때는 parent 키워드를 사용해서 접근할 수 있다. parent.html child.html 도메인이 다를 경우

개발하다보면 위와 같은 union 타입이 종종 필요하다. 하지만 위와 같은 작성 방식이면 가짓수가 많아질때 가독성이 떨어진다.그래서 아래와 같이 enum을 사용했었다.하지만 enum 을 사용할때는 tree shacking의 문제가 생긴다.또 나중에 코드상에서 사용할때에

github의 기능을 command line 에서 사용해 볼 수 있는 오픈소스이다. pull requests, issues 같은 github의 기능을 터미널에서 바로 실행해 볼 수 있다.먼저 brew로 gh를 설치해준다.github 로그인을 진행한다.위 명령어를 치면

수정하려는 특정 커밋 바로 직전 커밋해쉬로 git rebase --interactive \[커밋해쉬] 진행vim 창에서 수정할 커밋의 pick를 edit으로 변경원하는 코드 내용을 수정git add . && git commit --amend:!q 를 입력하여 커밋 vi

MouseEvent.metaKey 는 주어진 마우스 이벤트가 발생할 때 메타 키가 눌렸는지 여부를 나타내는 boolean 값을 반환합니다.Macintosh 키보드에서, META키는 Command 키 (⌘)에 매핑됩니다 .Windows 키보드에서, META키는 Windo

React의 특정 컴포넌트에서 쓰이는 props 의 타입들을 별도의 타입으로 선언해서 사용하고 싶으면 아래와 같이 작성한다.위 값을 상속받아 다른 값도 추가적으로 더하고 싶으면 아래와 같이 작성한다.타입 T의 모든 프로퍼티를 Optional 형태로 바꾸어준다.오른쪽에서

숫자 입력 키패드숫자 입력을 위해 type을 number로 지정하면 UI 도 다르게 나올 뿐더러, IOS 환경에서는 버그가 있다.전화번호를 입력하는 tel 타입으로 지정하면 IOS Android 환경 둘다 숫자 키패드로 잘 동작한다.이메일 입력 키패드여기에서 더 많은

배포환경이 dev 서버와 실서버가 구분되어 있을 때, 사용 하는 환경변수들을 다르게 설정해야 되는 경우가 있다.예를 들어 Api url 이 prodution 서버는 example.co.kr 이고, dev 서버는 dev.example.co.kr 일 수가 있는데 이럴때는

CRA을 통해 만든 타입스크립트 프로젝트에서 tsconfig.json 을 수정하면 yarn start시 tsconfig.json 초기화 되는 현상이 발생한다. (CRA github issues) 때문에 craco 를 통해 tsconfig.json를 커스터마이징 하는 방

WS(Web Server)웹 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램.주된 기능은 콘텐츠를 제공하는 것이지만 클라이언트로부터 콘텐츠를 전달 받는 것도 웹 서버의 기능에 속한다주로 html c