분류 전체보기
-
쿼리스트링 복수값 전달하기 :: 마이구미Javascript 2022. 12. 11. 19:24
이 글은 쿼리스트링(querystring) 을 사용하는 사례 중 하나를 다뤄본다. 정확히는 하나의 필드에 여러개의 값을 넣는 경우에 대한 내용이다. 글의 예제들은 URLSearchParams API 와 qs 라는 모듈을 기반으로 작성되었다. 예제 코드 - https://codesandbox.io/s/multi-querystring-gopv63 URLSearchParams - https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams qs - https://github.com/ljharb/qs 쿼리스트링을 활용하는 대표 사례는 검색 필터 조건을 들 수 있다. 이미 URL 에 포함된 쿼리스트링의 값을 기반으로 검색 조건의 값들을 셋팅하여 사용자에게 더 나은..
-
프론트엔드 성능 최적화 가이드 리뷰 :: 마이구미책 리뷰 2022. 11. 27. 19:57
이 글은 "프론트엔드 성능 최적화 가이드" 라는 책을 리뷰한다. 본인은 평범한 프론트엔드 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다. 책 링크 - http://www.yes24.com/Product/Goods/115209526 "성능 최적화" 라는 용어는 모두가 관심을 가질 수 밖에 없다고 생각한다. 이 책도 관심을 끌 수 밖에 없는 제목이었고... 표지도 너무 아기자기해서 마음에 들었다. 우선 책의 목차 구성을 통해 대략적인 내용을 미리 파악할 수 있었다. 이미지, 폰트, 캐시, 로딩, 코드 분할 등 흔히 접할 수 있는 기본적인 문제들로 구성되어있다. 모든 것이 그렇듯... 성능 최적화도 trade-off 가 존재한다. 최적화라고 무조건 다 좋은 것은 아니기 때문에, 그것들을 어떻게 설명..
-
[cspell] Spell Checker(오타 검사) :: 마이구미알아두면 좋은 라이브러리 2022. 10. 23. 17:20
이 글은 cspell 이라는 라이브러리를 다룬다. 코드를 작성하는 과정에 오타가 발생할 수 있고, 잘못된 단어일 수도 있다. 이러한 휴먼 에러를 방지할 수 있게 도움을 준다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 우리는 한국사람인데도 한국말 맞춤법도 자주 틀린다. 당연히 영어는 훨씬 많이 틀릴 수밖에 없다. 코드 작성 과정에서 스펠링을 잘못 작성하거나 이미 잘못 작성된 경우를 많이 접할 수 있다. IDE 에서 어색한 단어들은 알려주지만, 그냥 넘어가거나 무시하는 경우도 많다. 잘못된 표기된 스펠링은 마이너한 이슈라고 볼 수도 있지만, 치명적일 수도 있다. 우리는 개발하는 과정에서 신규 개발, 유지보수, 버그 수정 등을 위해 히스토리를 찾..
-
.gitattributes 는 무엇인가? :: 마이구미개발 설정 2022. 10. 22. 22:00
이 글은 .gitattributes 파일에 대해 다룬다. 참고 자료 - https://www.aleksandrhovhannisyan.com/blog/crlf-vs-lf-normalizing-line-endings-in-git/#a-simple-gitattributes-config Github 의 오픈 소스들을 보다보면, 루트 단위에서 .gitattributes 파일을 흔히 볼 수 있다. Git 설정 관련 파일로 추정할 수 있는데, 대부분 다음과 같은 코드로 작성되어있다. * text=auto 위 코드를 이해하기 위해서는 줄바꿈(Line Ending) 을 이해해야한다. 줄바꿈은 Newline, EOL(End of Line), Line Break 등 같은 용어라고 볼 수 있다. 줄바꿈 방식은 크게 LF(Li..
-
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) 에 대해 살펴본다. 명암 관련 지침은 두 개의 색상의 명암비 기준을 설명한다. 버튼을 예로 들어보자. 왼쪽 버튼의 백그라운드 색상과 텍스트 색상은 비슷한 색상으로 시각적 장애를 가진 사람에게는 불편함을 초래한다...