매우 열받는 상황 '@radix-ui/react-slider' 라이브러리를 이용하던 중 일어난 일입니다. radix가 제공해주는 slider primitive를 이용하여 슬라이더를 구현하던 중 이런 상황을 마주했습니다. 굉장히 열받는 원이 생겨있는것을 확인할 수 있었는데요 이걸 대체 어떻게 지울 수 있을까 공식문서를 찾아봐도 전혀 안내가 없어서 절망했습니다만.. 자세하게 예제코드를 들여다보면서 내 코드에 빠진 게 뭘까 찾아본 결과 알아냈습니다. import React from 'react'; import * as Slider from '@radix-ui/react-slider'; const SliderDemo = () => ( ); export default SliderDemo; 슬라이더에서 제가 거슬리..
🐶 기존 시스템의 문제 기존 시스템의 경우 next.js의 pages router 내부에 컴포넌트 폴더가 존재하는 형태였습니다. next.js는 폴더/파일 기반 라우팅을 수행하기 때문에 pages, app과 같은 약속된 폴더명 내부에는 라우팅을 위한 파일들만 두는 것이 좋다고 생각합니다. 다만 이러한 라우팅을 회피하는 기법도 존재하는데요 예컨대 underbar를 폴더명에 붙여주는 것을 통하여 해당 파일, 폴더들이 라우팅되지 않아도 된다는 것을 알려줄 수 있습니다. 하지만 연픽의 기존 시스템은 컴포넌트들 역시 모두 페이지로 취급되어 빌드타임에 SSG 되고 있는 상태였으며 이는 건강한 구조가 아니라고 생각했습니다. 1. 파라미터 조작을 통해 외부인도 너무 쉽게 컴포넌트의 구현에 접근할 수 있습니다. 2. 개..
TypeScript의 interface 보강 Typescript에서 인터페이스는 "보강" 기법을 적용할 수 있습니다. interface Namnamman { eat: () => void } interface Namnamman { coding: () => void } const person:Namnamman = { eat: () => {}, coding: () => {} } 주로 보강기법은 이런식으로 표현되곤 합니다. 동일한 이름의 인터페이스를 같은 네임스페이스에서 여러번 선언하게되면 프로퍼티들이 말그대로 "보강" 되는 형식인것입니다. 이러한 보강기법은 Global 하게 적용해줄 수도 있습니다. 바로 declare 키워드를 이용하는 것인데요 index.d.ts export declare global { i..
🐵 왜 리팩토링을... 쿼카크루에 입사하고 코드베이스를 흝어보면서 수많은 문제점들을 발견했다. 특정 문제들은 간단한 수정만으로 고칠 수 있었지만 아키텍처적인 문제, 레거시에 의존하고 있는 부분들이 너무 많아 함부로 고칠 수 없는 문제들도 많았다. "린하게 하자"라는 명목하에 코드들은 체계없이 누더기처럼 붙어있었고 수많은 안티패턴들을 발견할 수 있었다. 개발자가 "지금 우리 코드는 쓰레기같아요. 고칠 시간이 필요해요" 라고 말하는 것에 대해서 개발자 이외에는 누구도 공감해주지 않는다. 하지만 개발자 입장에서 정돈되지 않은 코드들은 장기적으로 보았을 때 생산성을 크게 떨어뜨리고 임계점에 도달하게 되면 개인의 초과근무 정도로는 해결할 수 없는 지경까지 가고 만다. 결국 결론은 이거다. 역설적이게 느껴질 수 있..
왜 필요했냐면.. 최근 며칠동안 프로덕션 배포 일정을 위해 개발 브랜치에 이미 많은 변경사항들이 반영되어 있는 상태였는데 프로덕션에서 긴급하게 수정해야할 버그가 발생하는 일이 있었습니다. 따라서 핫픽스 브랜치가 필요하다고 판단했지만 실제로 핫픽스 브랜치 전략을 사용해본적은 없어 시행착오를 조금 겪었습니다. hotfix branch는 왜 필요한가? 실제로 일을 하다보면 흔히 개발 브랜치와 프로덕션 브랜치가 나뉘어지기 마련입니다. 개발중인 코드가 실제 프로덕션에 올라가게되면 안되는 경우가 빈번합니다. 유저가 없는 서비스라면 마음편하게 개발해도 상관 없지만 만약 유저가 있는 서비스라면 실제 프로덕션에 문제가 생겼을 때 이를 빠르게 조치해주어야합니다. 그렇게하기 위해 hotfix branch를 통하여 해당 문제..
🐶어떻게 해야할까요? 이렇게 여러가지 종류의 스크롤바를 만드는 것이 요구사항입니다. 쉽게 생각해보자구요 스크롤바만드는 css 검색해보면 되죠 ::-webkit-scrollbar 같은 속성들 건드리면 되는거아닐까요? ::-webkit-scrollbar-thumb { background-color: #4568dc border-radius: 10px } ::-webkit-scrollbar-thumb는 스크롤바의 막대 자체의 스타일링을 지정합니다. 그러니 막대 자체를 파랑색으로 지정하고 border-radius를 10px로 줘서 둥글둥글하게 만드는 코드입니다. 그러나 동작하지 않습니다. ::-webkit-scrollbar 에도 background-color를 설정해주면 동작합니다. ::-webkit-scroll..
웹뷰 웹뷰는 네이티브앱에 내재되어 있는 웹 브라우저입니다. 웹뷰를 사용하면 웹 콘텐츠를 네이티브 앱 뷰와 같이 사용자에게 보여줄 수 있습니다. 그리고 특징적인 부분이 하나 있는데 웹뷰는 주소창, 새로고침, 즐겨찾기와 같은 브라우저의 기능이 없고 단순히 웹페이지만 보여준다는 특징이 있습니다. Google은 Android WebView 클래스를 아래와 같이 정의합니다. WebView 클래스는 안드로이드의 view 클래스의 확장이며 웹페이지를 활동 레이아웃의 일부로 표시할 수 있게 해줍니다. 탐색 컨트롤, 주소 표시줄 등의 웹브라우저 기능은 전혀 포함되지 ㅇ낳습니다. WebView의 모든 작업은 기본적으로 웹페이지를 표시하는 것입니다. 웹뷰 왜 사용할까? 웹뷰는 여러 플랫폼에서 사용할 수 있다 이는 정말 큰 ..
👱♂️간헐적 회고 나오늘 뭐했냐 생각보다 이사와 출근을 위해 준비할 게 많은 것을 느꼈습니다. 그래서 블로그도 약 일주일 가량을 쉬게되었네요 전부 다 처음 해보는 것이다 보니 알아보는게 꽤 오래걸리더라구요 문제는 그렇게 열심히 알아봐도 아직 잘 모르겠다는 것 ㅇㅅㅇ.. 1. 급여통장 만들기 급여통장은 신용, 대출, 우대금리, 실적등과 연관이 있어 만드는 편이 좋습니다. 다만 재직증명서가 필요해서 아직 못만듬 여러 은행에서 급여통장을 만들 수 있는데 저는 그냥 원래 쓰던 은행을 이용할 것 같네요 50만원 이상만 급여라는 명목으로 넣으면 급여통장으로 인정받을 수 있으니 급여통장을 여러개 만들어 혜택을 받는 것도 할 수 있다는데 저는 귀찮으니까 하나만 만들 예정 2. 이사를 위한 짐싸기 옷, 이불, 전자기..
