전체 글43 padding값에 따라 요소의 크기가 변하는 이슈 해결 padding-top 30px을 기준으로 보다 높아지면 배경 애니메이션이 안 보이고, 30px보다 낮아지면 애니메이션이 보이는 문제가 발생했다. 먼저 배경의 height를 확인해 봤다. 그리고 배경 안의 컨텐츠의 height를 확인했다. padding 30px을 기준으로 버그가 발생하고 있었는데, 884px - 854px = 30px과 연관이 있을 것이라는 생각이 들었다. 그리고 pdding 값의 변화에 따라 star의 크기가 달라지고 있었다. star의 크기를 고정시켜 줘야겠다는 생각이 들었다. div로 감싸준 후 height에 100%를 줬다. padding값을 아무리 늘려도, star의 크기가 변하지 않게 되었다. 2023. 7. 19. 리액트에서 터치 이벤트로 스와이프 구현 서비스에 휠 이벤트를 이용해 데이터를 바꿔주는 로직이 있었다 데스크탑에서는 wheel 이벤트를 사용하고, 모바일에서는 touch 이벤트를 사용했는데, 그중 onTouchMove에 이벤트 핸들러를 등록해 사용했다. 그리고 event객체에서 touches[0].clientY와 changedTouches[0].clientY를 받아 둘을 비교한 결과에 따라 위로 스와이프 했는지, 아래로 스와이프 했는지 판단했다. //터치의 시작이 끝보다 위면 up, 아래면 down if (e.touches[0].clientY e.changedTouches[0].clientY) { setDra.. 2023. 7. 17. 모바일에서 브라우저 주소창을 고려한 css height 설정 - svh 서비스 이용 시 위아래 스크롤이 되지 않도록 하고 싶었다. 하지만 별이 떠다니는 애니메이션이 상당한 height를 차지하고 있었다. 이것들을 정리하기엔 쉽지 않다고 생각하여 레이아웃의 크기를 viewport에 맞추기로 결정했다. height: calc(100vh - 55px); // 55px은 헤더의 높이 위 코드를 적용한 후 데스크탑에서는 더 이상 스크롤이 생기지 않았지만, IOS 사파리에서 동일한 증상이 반복되었다. (네이버 브라우저에서 정상 작동하는 것을 확인하고, 다른 브라우저를 확인해보지는 않았다.) 하단의 주소창 때문에 의도대로 동작하지 않고 있다. 주소창을 고려한 높이 설정을 위해 구글링하다 발견한 아래 방법도 사용해 봤지만 해결되지 않았다. const vh = window.innerHeig.. 2023. 7. 11. Git 작업시 personal access token 에러 Fine-grained personal access token (Beta) 어느 날 갑자기 특정 repository에 push가 되지 않았다. 기존에 사용하던 personal access token에 문제가 생겼다고 판단하여, 여러 번 재설정해봤지만 결과는 똑같았다. 그러다 문득 Generate new token에서 이상함을 느꼈다. Generate new token Beta과 Generate new token classic 그리고 에러 메시지에서의 Personal access tokens (classic) 별생각 없이 Generate new token classic을 사용했었는데, PAT(classic)는 이 레포지토리에 액세스 할 수 없다는 에러 메시지가 이해가 가기 시작했다. Generate new.. 2023. 6. 20. Git 작업 복구 git flow 전략으로 브랜치를 관리하고 있었다. develop 브랜치에서 release 브랜치를 만들었고, 수정 사항을 커밋 히스토리 변경 없이 합치고자하여 develop 브랜치에서 rebase 했다. 로컬에서 rebase 후 develop브랜치의 히스토리는 깃허브의 히스토리와 달라졌고, 깃허브에 push 되지 않았다. 그러자 별 생각 없이 force fush했고 위와 같은 참사가 벌어졌다. 위 결과를 보고 역대급으로 아찔했는데, 다행히도 해결 방법을 쉽게 찾을 수 있었다. git reflog 브랜치명 git reflog를 입력하면 위와 같은 로그들이 나오는데, 브랜치에서 작업했던 사항들을 모두 알 수 있게 되있다. 돌아가고 싶은 지점을 확인한 후 해당 로그 id 혹은 HEAD@{0-9} 값으.. 2023. 5. 1. Webpack 5 Module Federation을 통한 Micro-Frontend 모놀리식(Monolithic)이냐 마이크로(Micro) 서비스냐 하는 애플리케이션 아키텍처 스타일은 팀의 컨벤션과 애플리케이션의 요구 사항에 따라 달라진다. 그럼에도 마이크로서비스 아키텍처가 대세로 떠오르고, 사용이 증가하고 있는데 그 이유가 무엇일까? 모놀리식 아키텍처는 하나의 패키지안에 여러 서비스(기능)가 포함된 구조를 말한다. 대부분의 개발자가 모놀리식 아키텍처에서 작업을 시작하곤 하지만, 이러한 구조에는 몇 가지 문제점이 있다. 피쳐 간 의존성 문제 1. 특정 피쳐에 버그 발생 시 다른 피쳐에도 문제가 발생할 수 있다. 2. 서로 의존하고 있는 피쳐들 사이에 발생한 문제의 원인이 어디에 있는지 파악하기 힘들 수 있다.3. 특정 피쳐가 수정되었을 때 다른 피쳐에서 문제가 발생할 수 있다. 비효율.. 2023. 3. 1. 이전 1 2 3 4 5 6 7 8 다음
