어제 React로 사고하기 – React 문서를 단위 테스트를 작성하며 실습해보았다. 레이아웃 스팩도 테스트에 기술했지만 아래에서 설명할 이유로 한 두 커밋 이후 지워버렸다. Remove unnecessary Test suit · x86chi/thinking-in-react@b004b87 · GitHub 테스트는 어느 정도까지 작성해야 될까 고정된 <td/>의 문자 확인 props에 따라 스타일이 변화되는지 체크 onChange 이벤트가 제대로 발생하는가 3개 다 아니다. 위 세가지 테스트 수트는 리엑트를 믿지 못한다는 의미라고 생각한다. 그러면 무엇을 테스트해야 되나? Props 와 state 의 조합에 따라 기대하는 뷰가 나오는지 확인...

유저 스크립트 소개 유저 스크립트는 모던 브라우저 확장browser extension과 비슷한 기능을 갖춘 자바스크립트 코드 스니펫snippet입니다. 브라우저 확장이 광고 차단이나, 다크모드 프로그램 처럼 특정 웹 서비스의 UI를 수정하는 소프트웨어라면, 유저스크립트는 이보다 작은 규모로 1~2줄 정도의 복잡하지 않은 가벼운 수정을 위해 주로 쓰입니다. 본 글은 유저스크립트 사용에 대해서 실제 사례와 함께 예시 코드를 소개합니다. 유저 스크립트를 사용하려면 유저 스크립트 매니저라는 브라우저 확장의 도움이 필요합니다. 하지만 브라우저마다 다른 설치와 사용 방법에 대해서는 약간 주제에 벗어난 내용으로 자세히 다루지 않습니다....

FormEvent는 입력 요소의 상태를 직접 관리하지 않으면서 입력 요소의 값을 얻는 편리한 방법이지만, 처음 TS를 React와 함께 사용할 때 폼 이벤트의 타입을 어떻게 확장할 것인가 고민했다. 타이핑이 안되어 있는 경우 제너릭으로 flag라는 상태의 타입을 명시하는 것처럼, 폼 요소로 감싸진 입력 요소의 타입을 정의하는 법을 알고 싶었다. 타이핑 된 경우 굳이 HTMLFormElement를 두 번 써야 되나..? 라고 의문이 들지만 FormTarget.target이 덮어 씌워지는 상황이다. “그러면 FormEvent<HTMLFormElement>는 필요 없지 않는가요?” 무척이나 엄격한 TS의 타입 규칙 때문에 FormEvent는 HTMLFormElement를 제너릭 타입으로 갖고 있어야 하고, 그 하위의 개체인 target은 HTMLFormElement를 상속받으면서 그 아래 입력 요소 타입을 가져야 되어야 하는 상황입니다....

나는 소프트웨어 디자인 분야에서 “바퀴를 재 발명하라, 혹은 하지 말라” 라는 말을 종종 들어봤다. 코드를 적절하게 재 사용하는 것이 중요하다는 교훈이다. 반면에 내가 부딛히고 있는 웹 프런트 엔드 분야에선 매번 다시 만드는 경우가 꽤 자주 보인다. 그렇다면 바퀴를 재사용하지 않는다는 이야기로 오해받을 수 있다. 반은 사실이고, 나머지는 거짓인 것 같다. 첫번째, 웹 프론트 엔드 분야는 전례 없는 성장 곡선을 나타내고 있다. 다른 분야보다 더 빠르고 꾸준히 변하는 이유인데, 나는 환경적인 면에서 그 이유가 있다고 생각한다....

AWS CLI 설치 Lambda에 코드를 배포할 용도로 AWS CLI를 설치해주자 pip3 install awscli --upgrade --user AWS CLI에 사용할 사용자 권한 설정 Lambda에 코드를 배포하기 위한 권한으로 AWSCodeDeployRoleForLambda가 필요하다. 옵션으로 AWSLambdaFullAccess 가 있는데, 향후 람다 외의 서비스에 접근할 경우에 추가해뒀다. “IAM 서비스 -> 사용자 -> 사용자 추가 -> 권한 추가” 순서를 따르면 권한 설정 페이지를 찾을 수 있다. # ~/.aws/credentials [default] aws_access_key_id = KEY_ID aws_secret_access_key = SECRET_KEY # ~/.aws/config [default] region = ap-northeast-2 KEY_ID와 SECRET_KEY 에 사용자 생성 시 제공하는 키 값을 넣어주자....