개발/Today I Learned 15

TypeScript: NestedKeysType 만들어 사용하기

아래와 같은 객체에서 "B" | "C" | "D" | "G" | "H" | "A" | "E" 와 같은 Union Type을 추출하려면 어떻게 해야 할까요? 원하는 값을 얻기 위해서 꽤 긴 시간을 삽질을 한 것 같아요. 저는 단순히 TypeScript에서 제공하는 keyof 라는 값과 ValueOf 라는 제네릭 타입을 만들어서 조합하면 원하는 결과가 나올 것이라 생각했습니다. "B" | "C" | "D" | "G" | "H" | "A" | "E" 타입을 추출하는 것은 쉽지 않더군요. 먼저 fisrt와 second 객체를 뽑아내기 위하여 아래와 같은 ValueOf 라는 제네릭 타입을 만들어 주었습니다. type ValueOf = T[keyof T]; 해당 타입을 활용하면 결과는 이렇습니다. 이제 Exampl..

husky와 commitlint를 사용하여 commit 규칙을 지키며 협업하기

작업을 하다 보면 commit 규칙이 있음에도 불구하고 의도치 않게 실수하여 commit을 되돌리거나 모르는 채로 push까지 하게 될 수 있다. 페어 프로그래밍을 진행하면서 페어와 commit이 다를 수 있다는 것을 인지하게 되었다. 어떻게 하면 서로가 규칙을 지키면서, 또 실수를 방지하며 commit 메시지를 작성할 수 있을지 고민하게 되었다. 알아보니 githooks 혹은 husky 그리고 commitlint를 사용하여 이러한 부분들을 해결할 수 있다는 것을 알게 되었고 레포지토리를 만들어 실습해보았다. 실습 레포는 하단 링크에서 볼 수 있다. GitHub - somedaycode/husky_commitlint_test: test git commit and push with lint test git..

cypress e2e 테스트 - Failed to connect to Chrome, retrying in 1 second 문제 해결

E2E 테스트를 위해 Cypress를 설치 및 스크립트 추가 { "scripts": { "cypress:open": "cypress open" } } 아래와 같은 문제가 발생 cypress 창에서는 다음과 같은 경고창을 보여준다. 간단히 메시지를 해석하자면, 50초 동안 재시도했지만 크롬 브라우저를 여는 과정에서 어떤 문제가 있는 것 같다고 말해준다. CDP 포트는 61664 에 요청되었음 1. 첫번째 해결책 이 문제를 해결하기 위해 구글링, 스택오버플로우를 열심히 찾아봤다. 나와 같은 문제를 겪었던 많은 사람들의 질문을 발견. Cypress run won’t finish, stuck while making connection to Chrome · Issue #6540 · cypress-io/cypres..

Bunbler::GemNotFound 에러 해결하기

Ruby, 혹은 다른 버전의 Jekyll을 사용해서 프로젝트를 진행하거나 블로그를 만들 때 패키지 의존성들을 관리할 필요성이 있다. 이때 bundler를 사용하여 버전을 관리할 수 있다. package.lock.json이나 yarn.lock과 같은 역할을 하는 Gemfile.lock을 만들 수 있다. 이렇게 사용되는 bundler를 설치하고 jekyll serve를 통해 서버를 실행했을때, Bunbler::GemNotFound 와 같은 문제가 발생할 때가 있다. 이것을 해결하기 위해서는 해당 프로젝트 터미널에 bundler라는 명령어를 입력함으로써 해결할 수 있다. 이를 통해 충돌나는 버전들을 정리해주게된다. 이후 bundle exec jekyll serve 명령어를 통해 서버 실행

Vuex에서 각 사용자가 독립된 저장소를 가지려면?

시나리오 두 명의 사용자가 들어왔을 때 각각 독립적인 상태를 가지고, 유저의 클릭 이벤트에 따라 로그인 모달 창이 열리거나 닫혀야 한다. 만약 모달 상태를 저장하는 store를 단순히 객체로 구성했다면 이런 식이다. 이 상태로 빌드가 된 다음 배포가 되었을 때 문제는 무엇일까? const modalStoreModule = { namespaced: true, state: { isOn: { login: false, }, }, mutations, actions, }; export default modalStoreModule 문제는 바로 두 명의 사용자가 각각 독립된 모달 상태 저장소를 가지고 있지 않다는 것이다. 첫 번째 사용자가 로그인을 하기 위해 로그인 모달창을 열었을 때, login의 상태는 true로 ..