본문 바로가기

제니의 개발일지/도움이 되었던 것 정리46

[Vue] vs code extension 플러그인 다운 추천(code highlight 포함) 안녕하세요. 제니입니다!그 동안 React 프로젝트로 계속 사용하다보니, 다른 프레임워크를 사용했을 때의 불편함을 몰랐었는데Vue를 사용해보니       이런 기존 화이트 색상이 너무 싫어서,셋팅을 다시 해주고자 여러 구글링을 해보았는데요.괜찮은 extension 을 정리해보려고 합니다(나중에 집에서도 설정해야지)   1. Vetur   첫 번째는 Vetur 플러그인 입니다!위 사진 처럼 화이트 기본 색상이 아니라      이렇게 이쁘게 코드 하이라이트를 주는 extension이라 필수로 다운로드 해야하는 것 같아요!   2. Vue 3 Snippets   두 번째는 Vue 3 Snippets 입니다!       vueinit 을 입력하면 React 프로젝트를 만들었던 것처럼 처음 입력해야 하는 코드를 .. 2024. 7. 3.
[Vue] v-text-field 한글, 숫자 입력 막는 법(cf. vee-validate) 안녕하세요. 제니입니다!오늘은 vue........... 정리,,React 를 너무 사랑하지만,, 현재 들어가는 프로젝트가 vue 기본 구조가 크게 잡혀 있어서마이그레이션을 하고 리팩토링을 하고 있는 중입니다 ㅠㅡㅠ단순 input 고치는 것도 굉장히 헷갈리고 많은 구글링을 안겨 주네요..!   1. v-text-field 한글 입력 막기   일단, 일반 성명과 영문명을 같이 사용해야 하는 곳이 있는 ui 입니다.영문명을 제어하려고 하는데, 기존 서버 코드에서도 에러 핸들링이 크게 들어가 있는 곳이 아니었더라구요.양쪽에서 핸들링을 잘 잡아주고자 한글 입력을 막는 코드를 구현하였습니다.   여러 구글링을 해보니, 함수를 적용하거나, @input, rule 등 다양한 방법을 사용했는데모두 제 기존 코드에선 적.. 2024. 7. 2.
[React] router 페이지 이동 시 스크롤 최상단 이동 안녕하세요. 제니입니다!오늘 정리할 내용은 전 프로젝트에서도 사용했는데, 놓쳤었던 것 같아서정리해보려고 합니다!   일단, 페이지를 이동할 때 useNavigate를 사용하고 있는데, navigate 함수로 이동할 때, 스크롤이 하단에 있으면 이동하는 페이지도 하단에 위치한 상태로이동되는 것을 확인하실 수 있으실 거에요.   지난 번 프로젝트 때는, 해당 내용을 방지하기 위해서 navigate를 사용하는 함수마다 사용해줬는데, 더 효율적인 방식이 있더라구요!   1. util 함수 만들어주기일단, scroll-to-top.ts util 파일을 생성해주었습니다.   import React, { useEffect } from 'react';import { useLocation } from 'react-rou.. 2024. 6. 7.
svg data url 형식 변환 base64 인코딩 적용법(cf. 이미지 경로 오류) 안녕하세요. 제니입니다!오늘은 svg를 data url 형식으로 변환했던 기록을 남기려고 하는데요.html에 적용을 해야하는 페이지가 있어서, img 태그에 적용을 해야 하는데이미지 경로를 어떻게 해야할지 고민되는 분들께서 참고하시면 좋을 것 같아요!   1. encoder for SVG먼저, url로 바꾸는 작업부터 진행하게 될 텐데, 이걸 가능하게 해주는 좋은 사이트가 있습니다!   https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io   무료 사이트구요!      해당 사이트에 가지고 계신 svg 파일을 끌어서 업로드 해주면      Ready for CSS에 data 형식으로 변환이 되는 것을 확인하실 수 있어요.  .. 2024. 5. 24.
[코드 블럭] highlight 라이브러리 사용해서 code block 적용하기 (React, Typescript) 안녕하세요, 제니입니다! 오늘은 코드블럭을 구현하는 법에 대해 정리하려고 합니다. 요즘에 프로젝트에 1인 프론트엔드 개발자로 투입되어 있어서 (벌써 2번째,,,) 여러모로 해야하는 기능과 UI가 많아져서 좋네용,,,,,! 코드블럭 구현을 위해 오늘은 highlight라는 라이브러리를 사용하려고 합니다. 제 개발 환경은 React, TypeScript, yarn 입니다! 1. highlight 설치 https://highlightjs.org/ yarn add highlight.js 위 링크를 통해 공식문서도 확인하실 수 있습니다. 1-1. import import hljs from 'highlight.js'; import 'highlight.js/styles/a11y-dark.css'; css 파일도 동시.. 2024. 4. 4.
[React] TOAST UI Editor 셋팅 + 커스텀 하는 법 안녕하세요. 제니입니다! 오늘은 Editor를 구현하게 되어서 해당 기록을 남겨보려고 합니다! NHN 사의 TOAST-UI 라이브러리를 사용했고 프로젝트 환경은 React, TypeScript, yarn 입니다 1. TOAST-UI 설치 yarn add @toast-ui/react-editor 1-1. TOAST-UI 셋팅 import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/toastui-editor.css'; 먼저 import를 해주세요. 코드의 전체 모습은 위와 같습니다. import React from 'react'; import { Editor } from '@toast-ui/react-editor'; import '.. 2024. 3. 27.

티스토리툴바