마이구미의 HelloWorld 마이구미의 HelloWorld

이 책은 "이펙티브 엔지니어" 라는 책을 리뷰한다. 본인은 평범한 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다. 책 링크 - http://www.yes24.com/Product/Goods/110243880 어떻게 하면 더 효율적인 개발자가 될 수 있을까? 라는 질문에 어떻게 생각하는가? 사실 본인은 이런 질문을 좋아하지는 않는다. 질문의 답은 개발 분야 뿐만 아니라, 모든 분야에서 비슷한 답이 나오지 않을까... 생각한다. 그럼에도 이 책을 읽게 된 이유는 무엇인가? 회고 느낌으로 스스로를 리뷰를 하려는 목적으로 읽게 되었다. 우선 이 책에 대한 리뷰를 간단하게 표현하면 다음과 같다. 대부분의 내용은 이미 우리가 알고 있는 내용이다. 이 책을 통해 스스로 대화하면서 공감하고 반성하는 시간이 ..

이 글은 color 이라는 라이브러리를 다룬다. 색상의 투명도, 밝기, raw data 등 색상을 활용하는 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 color 라이브러리는 색상을 변환하고 조작할 수 있게 도와준다. 2가지 키워드(변환, 조작)를 이해하기 위해서는 색상 모델에 대해 이해하고 있어야한다. 색상 모델을 표현하는 RGB, HEX, HSL, HSB(HSV) 를 간략히 설명한다. RGB 는 빛의 삼원색(빨강,녹색,파랑)으로 0~255 의 값으로 표현하고, 컴퓨터에게 직관적인 모델이다. CSS 를 사용한다면, 다음과 같다. color: rgb(255,0,0); // 빨강 color: rgb(0,255,0)..

이 글은 웹 접근성 지침중에서 "명암" 에 대해 다룬다. 한 문장으로 설명하면, 두 개의 색상의 명암비가 적합한지에 대한 지침이다. 이것이 무엇인지 알아보고, 실제 코드로 활용되고 있는 사례들을 확인해보자. WCAG - https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast WCAG(Web Content Accessibility Guidelines) 는 웹 콘텐츠 접근성 지침을 나타낸다. 많은 웹 접근성 가이드의 일부인 명암(Contrast) 에 대해 살펴본다. 명암 관련 지침은 두 개의 색상의 명암비 기준을 설명한다. 버튼을 예로 들어보자. 왼쪽 버튼의 백그라운드 색상과 텍스트 색상은 비슷한 색상으로 시각적 장애를 가진 사람에게는 불편함을 초래한다...

이 글은 @use-gesture 이라는 라이브러리를 다룬다. @use-gesture 은 마우스나 터치와 같은 이벤트를 활용하는 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 라이브러리는 굉장히 심플하고 사용하기 쉽다. 문서도 잘 되어있고, 예제도 풍부하여 친절한 라이브러리이다. 바닐라 자바스크립트도 지원하지만, react 도 지원하고 있다. (여기서는 react 기준) import { useDrag } from '@use-gesture/react' function Component() { useDrag(({ first, last, movement: [mx, my] }) => { // first - 첫 이벤트 여부,..

이 글은 CSS 속성 중 transform: translate 를 활용한 예제를 살펴본다. translate 사용 사례의 하나를 설명한다. 속성의 설명보다는 이 속성을 활용하여 어떻게 적용할 수 있는지에 대한 아이디어라고 생각하면된다. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX 활용 예제 - https://codesandbox.io/s/horizontal-scroll-list-wddzp4 사실 어떻게 보면 translate 를 활용한 예시는 크게 도움이 되지 않을 수 있다. 하지만 이 글을 남기게 된 이유는 UX 적으로도 남기고 싶은 내용이 있어서다. 끝까지 읽어보길 바란다. CSS transfo..

이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다. 모노레포에 대해서는 다루지 않는다. 예제는 CRA 를 기준으로 작성된다. CRA 를 사용하지 않더라도, 도움을 얻을 수 있는 정보가 있을 것이라 생각한다. 예제 코드 - https://github.com/hotehrud/monorepo-react 참고 자료 - https://muguku.medium.com/fix-go-to-definition-and-hot-reload-in-a-react-typescript-monorepo-362908716d0e 개발 환경을 모노레포로 구성하는 경우에 핫 리로드 기능의 확장을 원할 수 있다. 기본적으로 CRA 로 환경을 구성하면 핫 리로드는 기본적으로 적용되어있다. 코드를 수정하고 저장하면 자동적으로 업데이트..

이 글은 CSS 속성 중 하나로 display: table 에 대해 다룬다. https://developer.mozilla.org/en-US/docs/Web/CSS/display display: table 속성은 간단하다. 태그처럼 동작하도록 정의하는 것이다. 그렇다면, 몇가지 의문이 들 수 있다. table 태그가 있는데 이걸 왜 사용해? table 태그를 지양하고 div 태그에 display: table 을 정의해서 사용해야하는건가? table tag vs display: table 을 말하고자 하는건가? 그렇다면 왜?... 결론은 2개를 비교하는 것도 아니고, 서로의 장단점을 비교하는 것은 아니다. 실질적으로 table 의 의미는 표(tabular data) 를 표현하기 위해 사용하게 된다. 하지만..

이 글은 CSS 속성 중 overscroll-behavior 에 대해 다룬다. CSS 속성에 대한 공식 문서보다는 크롬 개발자 사이트에 존재하는 관련 글이 오히려 큰 도움이 된다. 이번 포스팅은 관련 글을 기반으로 정리한 내용이라고 볼 수 있다. 참고 자료 - https://developer.chrome.com/blog/overscroll-behavior/ overscroll-behavior 는 이름을 토대로 추측하면 다음과 같다. "스크롤에 대한 행동" 을 제어하는 속성으로 추정된다. 스크롤 관련 속성으로 추정할 수 있지만, 아직 정확히 무엇인지 파악하기 힘들다. 흔한 스크롤 이슈를 먼저 파악해보자. 우리가 많이 스크롤에서 겪을 수 있는 이슈는 무엇일까? 가장 흔한 경우는 스크롤 영역이 2개 이상이면서..