본문 바로가기

분류 전체보기162

[Vue] v-text-field 숫자만 입력하는 법 안녕하세요. 제니입니다!지난 번에 영어만 입력하고 싶어서 한글, 숫자 입력을 막았는데오늘은 반대로 숫자만 입력하는 코드를 작성해야 했어요.   https://jenny0520.tistory.com/167 [Vue] v-text-field 한글, 숫자 입력 막는 법(cf. vee-validate)안녕하세요. 제니입니다!오늘은 vue........... 정리,,React 를 너무 사랑하지만,, 현재 들어가는 프로젝트가 vue 기본 구조가 크게 잡혀 있어서마이그레이션을 하고 리팩토링을 하고 있는 중입니다 ㅠjenny0520.tistory.com   지난 번 정리 내용이구요!오늘 내용은 더 간단합니다.   1. v-text-field   이렇게 v-text-field내에 숫자만 제어해주는 oninput을 추가해.. 2024. 7. 5.
[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.
프론트엔드 README.md 작성 예시 안녕하세요. 제니입니다!오늘은 제가 약 4개월 정도 프론트엔드 개발을 진행한 프로젝트를 마무리하는 날이었는데요!1인 프론트엔드라서 초기셋팅부터 프로젝트 마무리, QA, 테스트 시나리오 작성 등등 많은 걸 마무리하고이후 프로젝트 마무리를 하기 위해 README 작성까지 끝내게 되었습니다.   앞으로도 꾸준히 README 는 작성해두면 좋기도 하고어떻게 써야하지 고민도 되는 파트이긴 하지만, 생각해보면 양식만 정해둬도 금방 쓰는게 README이기도 해서간단하게 정리를 해보려고 합니다!   1. 어떻게 만들어지는지 예시    대략 이러한 모습으로 간단하게 정리해볼 수 있습니다.대외비는 적지 않고 내부에서 공유할 때, 프로젝트 내용을 이해할 수 있을 정도로 적어두었습니다.   2. 작성하기2-1 타이틀 적는 법.. 2024. 6. 24.
[React] 새 창 HTML 미리보기, HTML 데이터를 로드하고 창이 닫힐 때 데이터를 제거하는 로직 구현하기 안녕하세요. 제니입니다!오늘은 새 창 html 미리보기 구현을 한 내용을 정리해보려고 하는데요.쉽게 생각해서, 제목, 내용을 입력하고 이메일을 보내는 양식이 있다고 가정할 때,이런 경우 프론트에서 발송하는게 아니라 서버측에서 발송을 하게 됩니다.백엔드 개발자가 html 양식을 가지고 있을거고그 양식을 받아 미리보기로 보여주는 화면을 만들어야 하는 상황이 발생되어서 정리하게 되었습니다.   원하는 결과는새 창에서 HTML 데이터를 로드하고 창이 닫힐 때, 데이터를 제거하는 로직을 구현하는 것이었습니다!   1. response 는 html을 string 형태로 반환api를 반환하는 걸 html 파일로 받게 되면 다운로드가 되므로,백에서 response 값을 html 그대로 넘겨주면 됩니다.   2. get.. 2024. 6. 14.
[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.