프론트엔드 개발자가 될거야.
-
[React-i18next] 웹페이지에 다국어 적용하기 (with: typescript)프론트엔드 개발자가 될거야./라이브러리 2023. 3. 2. 21:17
현재 개발중인 웹페이지는 한국은 물론이고 영어권, 중국, 일본까지 사용자를 가지고 있다. 한국어, 영어, 중국어, 일본어를 모두 웹페이지에 그려내야한다. 어떻게 할 수 있을까? React-i18next 다국어 처리를 해주는 라이브러리이다. react-i18next는 React 애플리케이션에서 다국어 지원을 제공하는 i18next 라이브러리의 React 바인딩이다. https://react.i18next.com/ Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com React-i18next 사용법 1. initReactI18n..
-
[이미지 업로드, 이미지 프리뷰] FileReader객체란? reader.onload 함수란? (feat. chatGPT 너 진짜 똑똑하다..)프론트엔드 개발자가 될거야./react 2023. 2. 16. 18:09
이미지를 업로드하고 그 업로드 한 이미지를 프리뷰하는 기능을 구현하고 있다. const [previewImage, setPreviewImage] = useState(""); const [file, setFile] = useState(null); const inputRef = useRef(null); const handleImageUpload = (e: React.ChangeEvent) => { const selectedFile = e.target.files?.[0]; if (selectedFile) { if (selectedFile?.size > MAX_FILE_SIZE) { alert("파일 크기가 너무 큽니다."); return; } const reader = new FileReader(); read..
-
[react][react-modal][typeScript] react-modal typeScript 환경에서 style 적용하기프론트엔드 개발자가 될거야./ts 2023. 2. 8. 23:44
나는 모달을 띄울 때 react-modal 라이브러리를 사용한다. https://reactcommunity.org/react-modal/ react-modal documentation react-modal Accessible modal dialog component for React.JS We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web. reactcommunity.org react-modal typescr..
-
[react][typeScript][styled-component] hover시 svg 이미지 색깔 바꾸기프론트엔드 개발자가 될거야./css 라이브러리 2023. 2. 8. 15:32
이미지는 png, jpg, svg 등 여러 확장자를 가진다. 나는 그동안 png를 많이 썼는데 header의 icon 이미지를 hover 했을 때 hover 이벤트로 색상을 변경해 주어야 할 때 png를 쓰면 color를 변경할 수 없어서 이미지를 바꿔줘야하는데 이 방법은 매우 비효율적이라는 생각이 들었다. 예를들어 이런 상황이다. 바이낸스의 헤더 그래서 header의 이미지 중 hover 이벤트로 색상을 변경해주어야 하는 이미지는 svg로 바꾸어 주었다. SVG ? svg 파일은 픽셀로 이루어진 png 파일과는 다르게 라인과 곡선들로 이루어져 있다. 이런 점에서 파일을 확대하거나 줄였을때 이미지가 깨지지 않고 그대로 선명함을 유지한다. svg 파일은 값을 조작 할 수 있기 때문에 js를 이용해서 svg..
-
[react] react-router-dom Outlet으로 Tab메뉴 구현하기프론트엔드 개발자가 될거야./react 2023. 2. 8. 13:45
이러한 메뉴를 Tab 메뉴라고 하는데 react-router-dom Outlet으로 구현하는 방법에 대해 포스팅하려고 한다. 예를들어 마이페이지를 탭메뉴로 구성한다면 1. Router.tsx function Router() { return ( ); } export default Router; 먼저 Router에서 MyPage 컴포넌트의 자식들로 메뉴들을 넣어준다. 2. MyPage.tsx function MyPage() { const profilesMatch = useMatch("/mypage/profile"); const logoutMatch = useMatch("/mypage/logout"); const settingMatch = useMatch("/mypage/googleOTP"); return (..
-
[typeScript 오류] li tag : onMouseOver must be accompanied by onFocus for accessibility프론트엔드 개발자가 될거야./ts 2023. 2. 7. 15:39
setIsListHover(true)} onMouseOut={() => setIsListHover(false)} > li tag에 onMouseOver, onMouseOut 이벤트를 추가했더니 eslint typeScript 오류가 났다. onMouseOver must be accompanied by onFocus for accessibility. onMouseOut must be accompanied by onBlur for accessibility. 라는데.. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/mouse-events-have-key-even..
-
로그인페이지에 헤더 안보이게 하기 (with. useLocation)프론트엔드 개발자가 될거야./react 2023. 2. 4. 15:40
로그인 페이지나 회원가입 페이지에만 헤더를 안보이게 해야하는 경우가 있다. 이미 Router에서 Header가 모든 페이지에 보이게 해두었는데 이런경우에는 어떻게 해야할까? 나는 react-router-dom의 useLocation으로 구현했다. 구현기 1. Router.tsx function Router() { return ( ); } 예를들어 Router의 구조가 이렇게 되어있다고 하자. Header는 모든 페이지에서 보여질 것이다. Header.tsx import React, { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; function Header() { const location = use..
-
[MUI Table 커스텀하기] React, Styled-Componet, Material-UI, TypeScript에서 테이블 커스텀하기프론트엔드 개발자가 될거야./react 2023. 2. 4. 14:31
위 사진은 가상화폐 거래소 코빗에 있는 테이블이다. 회사에서 프로젝트를 하면서 이런식으로 테이블을 그려내야했는데 테이블을 내가 원하는 레이아웃으로 커스텀하기에 꽤 복잡했기에.. 그 부분에 대해 블로깅을 해보려고 한다. 우선 나는 css는 Styled-Componet로 스타일을 주고 있고 css라이브러리로는 material ui를 쓴다. Styled-Componet는 material ui를 쉽게 overloading 할 수 있어서 내가 좋아하는 조합이다 : ) https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..