frontend
-
[Testing] React + Testing Library + Styled Components 환경에서 ThemeProvider 적용 방법frontend/react&next 2022. 10. 11. 10:11
오늘은 Styled Components + React 기반에서 testing-library/@react를 이용한 테스트 환경 구축 시 공통 theme 등의 사용으로 인한 에러 등을 피하기 위해서는 어떤 방식으로 셋팅 하여야 되는지 알아보도록 하겠습니다. 1. TestTemplate 작성 import { ThemeProvider } from "styled-components"; import useTheme from "@/libs/hooks/useTheme"; interface Props { children: JSX.Element | JSX.Element[]; } const TestTemplate = ({ children }: Props) => { const [theme] = useTheme(); retur..
-
[자바스크립트 꿀팁] 브라우저 다크모드 감지 (Detect DarkMode Using JavaScript)frontend/꿀팁 2022. 10. 7. 10:24
오늘은 다크모드를 지원하는 앱을 만들 때 자바스크립트를 활용하여 다크모드를 감지 하는 방법에 대해서 알아 보겠습니다. 다크모드 지원을 위한 글로벌 theme를 적용하려고 분기처리할 때 많이 사용하게 됩니다. JavaScript const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; 이렇게 간단한 방법으로 우리는 다크모드에 대해서 감지해볼 수 있습니다. 물론 CSS의 media query를 통한 분기 처리도 가능합니다. CSS @media (prefers-color-scheme: dark) { .scheme { background: #000; color: #fff; } } @media ..
-
[Testing] react + webpack + typescript 프로젝트 간단한 테스트 환경 구성 및 실습(feat. Jest , Testing-library, without CRA)frontend/react&next 2022. 10. 6. 12:48
오늘은 리액트 + 타입스크립트 + 웹팩 조합에서 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다. 사실 CRA안에 이미 다 준비가 되어 있지만, CRA를 즐겨 사용하지 않는 저는 직접 구성을 하여야 되었습니다. 오늘은 간단하게 프로젝트에 테스트 환경을 부어보도록 하겠습니다. 선수 지식이 필요 합니다. 우측 링크를 확인해주세요. (https://ryuhojin.tistory.com/19) 1. 패키지 설치 //npm npm i -D jest jest-environment-jsdom ts-jest @testing-library/react @types/jest //yarn yarn add -D jest jest-environment-jsdom ts-jest @testing-library/react ..
-
[VS Code] 자주 쓰는 비주얼 스튜디오 코드(VS CODE) 확장 프로그램 모음frontend/꿀팁 2022. 10. 5. 17:00
오늘은 저가 프론트엔드 개발을 할 때 비주얼 스튜디오에 꼭 설치하여 사용하는 확장 프로그램들에 대해서 알아보도록 하겠습니다. 저가 개인적으로 사용하는 것이니 꼭 이것이 정답은 아닙니다. 1. ES-LINT & PRETTIER lint는 소스코드의 문제를 찾는 작업이고, 이러한 작업을 행하는 것이 linter입니다. 대표적으로 많이 사용하는 javascript linter는 eslint입니다. 해당 익스텐션을 깔아두면 밑줄 등을 통해 우리에게 에디터 내에서 잘못된 코드를 알려줍니다. 필수적으로 사용하는 확장프로그램입니다. code formatter는 개발자가 작성한 코드를 약속된 코딩 스타일로 변환해주는 도구 입니다. 이중 대표적으로 많이 사용되는게 prettier입니다. 대다수의 오픈소스(ex: reac..
-
[DOM Hack] 특정 DOM element의 이벤트 모두 없애기(HTML Event remove)frontend/꿀팁 2022. 9. 29. 08:52
오늘은 이벤트 덮어 쓰기에 대해서 알아보려고 합니다. 가끔 웹사이트를 이용하다 보면 스크립트 공격과 다양한 취약점들을 해결하기 위해 브라우저에서부터 폼 내부에 특수문자가 들어오지 않게 막는 경우가 있습니다. 이럴때 우리는 한자키를 이용한 특수문자로 대체하거나 아니면 해당 돔의 keyup이벤트에 걸려 있는 치환 이벤트를 지우고 입력해야됩니다. //TAG let tagEle = document.getElementsByTagName('input'); for(let i = 0, len = tagEle.length i < tagEle ; i++){ tagEle[i].outerHTML = tagEle[i].outerHTML; } //ID let idEle = document.getElementById('test')..
-
[웹 최적화] 이미지 로딩 최적화(Image loading Optimzation)frontend/javascript&web 2022. 9. 13. 15:15
오늘은 웹 개발시에 자주 접하게 되는 이미지 로딩에 대해서 알아보겠습니다. 그 중에서도 이미지와 관련된 성능 최적화에 대해서 한번 알아보도록 하겠습니다. 우리는 개발을 하다 보면 이미지를 아주 많이 접하게 됩니다. 배경이 될 수 도 있고, 아이콘이 될 수도 있고, 사람의 프로필 등으로 다양한 모습으로 접하게 될 겁니다. 이렇게 자주 만나는 이미지는 웹 성능에 큰 영향을 미치는 요소 중 하나입니다. 실제로 lighthouse에서 검사 시에도 이와 관련된 작업을 따로 하지않는다면 매우 많이 검출되는 것을 볼 수 있습니다. 제가 아는 한도내에서 어떻게 이미지를 효율적으로 다뤄야 될지에 대해 알아보겠습니다. 1. preconnect 옵션 이 옵션은 말 그대로 사전연결 옵션입니다. 특정 주소에서 리소스들을 불러올..
-
[VueJS] 컴포넌트간 통신을 위한 이벤트 버스 개념과 활용frontend/vue&nuxt 2022. 9. 5. 14:21
오늘은 Vue 개발할 때 자주 사용되는 것 중 하나인 컴포넌트 간 통신을 위한 이벤트버스(EventBus)에 대해서 알아보도록 하겠습니다. 보통 컴포넌트간의 통신을 위해서는 refs를 이용하여 상위컴포넌트에서 하위컴포넌트를 호출하거나 내장 이벤트버스(this.$emit)를 이용하여 하위컴포넌트에서 상위컴포넌트를 호출합니다. 개발을 진행하다보면 상위 또는 하위로 드릴링하여 들어가여 호출하고 받는 것이 아니라 직접적으로 컴포넌트의 이벤트를 실행하고 싶은 경우가 있습니다. 이럴 경우 우리는 EventBus라는 것을 사용하게 됩니다. 자세한 내부 코드가 궁금하면 vue 공식 github 링크에 들어가셔서 확인하실 수 있습니다. github 코어 코드를 보다보면 배우는게 많으니 시간날때 core부터 찬찬히 보면 ..
-
[VueJS] Vue2 업데이트 시작 Vue2.7 Naruto 공식 릴리즈frontend/vue&nuxt 2022. 9. 2. 09:54
오늘은 멈춰있던 Vue2를 다시 움직이게 할 Vue 2.7 공식 릴리즈 Naruto에 대해서 알아보겠습니다. 기존의 Vue 2.6에서의 변경점과 Vue3와의 차이점에 대해서 알아 보겠습니다. Vue3로 넘어가기 위해서 파격적으로 공식적으로 Vue3를 지원하기도 하고 많은 변화들이 있었는데 Vue2에서도 Vue3의 기능을 사용할 수 있게 2.7 릴리즈가 된다고 알고 있었는데 드디어 되었습니다. 사내에선 Vue2 기반으로 프로젝트가 진행되었었는데 Vue3로 마이그레이션을 진행해야될지 고민하던 찰나에 2022 7월에 Naruto가 나와서 일단은 Vue2에서 최신버전으로 올리겠습니다. 올리면서 알게된 변경점들에 대해서 말씀드리겠습니다. 바뀐점(2.7 release) 어차피 vue3를 사용하신분이라면 다들 아실 ..