분류 전체보기
-
editorconfig vs eslint vs prettier :: 마이구미개발 설정 2022. 10. 22. 21:50
이 글은 editorconfig, eslint, prettier 를 비교한다. 대부분의 프로젝트를 보면, 3가지 모두 공존하고 있는 경우가 많다. eslint, prettier 를 사용한다면, editorconfig 는 굳이 필요없지않나? 라고 혹시 생각하고 있다면 이 글은 도움이 될 것이다. 3가지 파일 모두 존재하는 프로젝트 예제 - https://github.com/facebook/react EditorConfig - https://editorconfig.org/ Eslint - https://eslint.org/ Prettier - https://prettier.io/ 우선 EditorConfig, Eslint, Prettier 각각 무엇인지 살펴보자. EditorConfig 우리가 사용하는 에디..
-
이펙티브 엔지니어 리뷰 :: 마이구미책 리뷰 2022. 10. 19. 20:43
이 책은 "이펙티브 엔지니어" 라는 책을 리뷰한다. 본인은 평범한 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다. 책 링크 - http://www.yes24.com/Product/Goods/110243880 어떻게 하면 더 효율적인 개발자가 될 수 있을까? 라는 질문에 어떻게 생각하는가? 사실 본인은 이런 질문을 좋아하지는 않는다. 질문의 답은 개발 분야 뿐만 아니라, 모든 분야에서 비슷한 답이 나오지 않을까... 생각한다. 그럼에도 이 책을 읽게 된 이유는 무엇인가? 회고 느낌으로 스스로를 리뷰를 하려는 목적으로 읽게 되었다. 우선 이 책에 대한 리뷰를 간단하게 표현하면 다음과 같다. 대부분의 내용은 이미 우리가 알고 있는 내용이다. 이 책을 통해 스스로 대화하면서 공감하고 반성하는 시간이 ..
-
[color] 색상 변환하기 :: 마이구미알아두면 좋은 라이브러리 2022. 10. 9. 15:29
이 글은 color 이라는 라이브러리를 다룬다. 색상의 투명도, 밝기, raw data 등 색상을 활용하는 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 color 라이브러리는 색상을 변환하고 조작할 수 있게 도와준다. 2가지 키워드(변환, 조작)를 이해하기 위해서는 색상 모델에 대해 이해하고 있어야한다. 색상 모델을 표현하는 RGB, HEX, HSL, HSB(HSV) 를 간략히 설명한다. RGB 는 빛의 삼원색(빨강,녹색,파랑)으로 0~255 의 값으로 표현하고, 컴퓨터에게 직관적인 모델이다. CSS 를 사용한다면, 다음과 같다. color: rgb(255,0,0); // 빨강 color: rgb(0,255,0)..
-
[웹 접근성] 명암비(Contrast Ratio) :: 마이구미HTML, CSS 2022. 10. 8. 11:41
이 글은 웹 접근성 지침중에서 "명암" 에 대해 다룬다. 한 문장으로 설명하면, 두 개의 색상의 명암비가 적합한지에 대한 지침이다. 이것이 무엇인지 알아보고, 실제 코드로 활용되고 있는 사례들을 확인해보자. WCAG - https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast WCAG(Web Content Accessibility Guidelines) 는 웹 콘텐츠 접근성 지침을 나타낸다. 많은 웹 접근성 가이드의 일부인 명암(Contrast) 에 대해 살펴본다. 명암 관련 지침은 두 개의 색상의 명암비 기준을 설명한다. 버튼을 예로 들어보자. 왼쪽 버튼의 백그라운드 색상과 텍스트 색상은 비슷한 색상으로 시각적 장애를 가진 사람에게는 불편함을 초래한다...
-
[@use-gesture] 제스처 이벤트 제어 :: 마이구미알아두면 좋은 라이브러리 2022. 9. 28. 20:59
이 글은 @use-gesture 이라는 라이브러리를 다룬다. @use-gesture 은 마우스나 터치와 같은 이벤트를 활용하는 로직에 큰 도움을 줄 수 있다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 라이브러리는 굉장히 심플하고 사용하기 쉽다. 문서도 잘 되어있고, 예제도 풍부하여 친절한 라이브러리이다. 바닐라 자바스크립트도 지원하지만, react 도 지원하고 있다. (여기서는 react 기준) import { useDrag } from '@use-gesture/react' function Component() { useDrag(({ first, last, movement: [mx, my] }) => { // first - 첫 이벤트 여부,..
-
[CSS] transform: translate 활용 예제(1) :: 마이구미HTML, CSS 2022. 9. 17. 23:25
이 글은 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..
-
[monorepo] hot reload 적용 :: 마이구미React 2022. 9. 13. 20:16
이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다. 모노레포에 대해서는 다루지 않는다. 예제는 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 속성 :: 마이구미HTML, CSS 2022. 8. 20. 12:04
이 글은 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) 를 표현하기 위해 사용하게 된다. 하지만..