데브머리큐

css :hover를 사용해서 간단히 구현할 수 있다고 생각했던 기능이 있습니다. pacakges: React, styled-component 아래의 gif 같이 마우스를 올렸을 때, 마우스가 올라간 컴포넌트만 배경의 색이 바뀌어야 했는데요. css의 :hover를 사용하니 원하는 대로 동작하지 않았습니다. css만 사용해서 원하는 hover 동작을 만드려고 하니 부모 컴포넌트만 배경색이 바뀐다거나, 자식 컴포넌트의 색깔만 바뀌었습니다. 혹은 모든 컴포넌트에 적용이 되었습니다. 자식 컴포넌트에 마우스를 올리면 부모에도 css로 적용한 :hover가 적용이 되었습니다. 이렇게요. css 부모 선택자를 활용해보거나, nth-child를 활용해보려 했지만 원하는 동작을 구현할 수 없었습니다. 더불어, 이후에 ..

젠킨스에 로그인 -> 배포하고자 하는 프로젝트를 찾기 -> 빌드 하기. 이러한 일련의 과정이 너무나 귀찮았다. 푸시하고 인터넷을 켜야 하는 게 말이 되는가? IDE에서 작업을 마무리하고 어떻게 명령어하나로 위의 과정을 스킵할 수 있을까 하고 보니, 두 가지 방법을 찾을 수 있었다. GitLab에 Push가 되면 webhook을 통해 빌드를 유발 원격 스크립트를 활용하여 잦은 Push를 통한 빌드를 피하고자 명령어를 통해 원할 때 빌드하는 것 두 가지의 방법 모두 간단히 설정할 수 있다. 1. GitLab Push시 Jenkins 빌드 젠킨스 접속 -> 프로젝트 -> 구성에 들어간다. 고급 버튼 클릭 후, 시크릿 토큰을 발급 받는다. 토큰을 받으면 GitLab 프로젝트 Settings의 Integratio..

아래와 같은 객체에서 "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..

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

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

이 글은 Timothy Gu의 How to Read the ECMAScript Specification를 번역한 글 입니다. 혼자 번역한 글로 의역과 오역이 있을 수 있습니다. 원문과 함께 읽는 것을 추천드립니다. 수정사항은 댓글이나 somedaycode@gmail.com 으로 알려주시면 감사하겠습니다. This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, which is available at https://creativecommons.org/licenses/by-sa/4.0/. Parts of this work may be from another specification docume..

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

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