본문 바로가기

javascript26

[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.
Ios safari input focus zoom-in 현상 막기 안녕하세요. 제니입니다!사실 해당 기록은, 미리부터 참고했어야 하는데 제가 어느정도 간과한 게 있었던 것 같아요.Ios는 늘 번거로운 css 수정기가 있는데 그 중 가장 귀찮은게 zoom-in 현상이었는데요..!이번에 맡은 프로젝트는 프론트 1인이었기도 하고나름 선배가 돼서 책임감도 있어가지구 조금은 더 세밀하게 보고 있었,,답니다..!    그러다 safari 테스트를 하는데, 로그인 페이지 input이 zoom-in이 되어서 굉장히 별로더라구요.역시 이 걸 체크해야지 하는게 좀 있었고다른 개발자들은 어떻게 하나 찾아보면서 여러가지 잘 정리된 개발자들의 글을 볼 수 있었는데   https://devsoyoung.github.io/posts/ios-input-focus-zoom/ focus 시 자동 zo.. 2024. 6. 7.
[React] 화면 저장, 캡쳐 기능 구현하기(TypeScript) 안녕하세요, 제니입니다! 오늘은 화면 영역을 저장 및 캡쳐하는 기능을 정리해보려고 합니다. 굉장히 간단하고 추후에 계속 사용할 수 있는 영역이라 한 번 정리해두면 유용할 것 같아요! 1-1. 저장 버튼 만들기 어떤 모양으로 만드셔도 상관 없고 일단 버튼 하나 심플하게 만들어주세요. 저는 디자이너님의 icon 이미지로 적용했습니다. 1-2. html2canvas javascript로 canvas 영역을 잡아서 캡쳐하는 방법도 있는데 여러가지 문제점이 발생되더라구요. 영역 width, height를 잘 잡아주어도 잡히지 않거나 화면 영역이 까맣게 나오는 현상들이 발생되어서 제가 정착한 방법은 html2canvas 라이브러리 입니다! 1-2-1. html2canvas 다운 yarn add html2canvas.. 2024. 2. 26.
[JS] 문자열 겹쳐쓰기 안녕하세요. 제니입니다! 프로그래머스로 코딩 테스트를 연습하면서, 꾸준하게 문제를 풀어보고 있었는데 화면 오른쪽에 이런 캘린더가 있더라구요! 어떤 걸 풀어야지 고민할 필요없이 주어진 Day를 할 수 있어서 편했고 꾸준하게 매일 5개를 풀 수 있을 것 같아서 해당 캘린더로 시작하기로 했습니다! 그 중 오늘은 문자열 겹쳐쓰기 부분에 대해 정리가 필요해보였어요. 1-1. 문제 결국, s부터 시작해서 overwrite_string 글자로 덮어 씌우는 문제인데, 여러 가지를 고민하면서 풀었거든요. 그런데 또 다른 풀이를 참고하면서 보니, 제가 자주 사용하던 splice() 문법을 사용해서 풀더라구요! 저랑 가장 적합한 방법인 것 같아서, 정리하려고 합니다. 왜 맨날 사용하던 문법을 잊어버리는가..! 사실 개발을 .. 2024. 1. 9.
[JS] 뒤에서 5등까지 안녕하세요. 제니입니다! 오늘은 일요일~~ 코딩 연습겸 프로그래머스를 풀어보며 또 한 번 놓친 개념을 정리하려고 합니다! 1-1. 오름차순, 내림차순 배열을 arr 이라 하면 오름차순 // arr.sort((a,b) => a-b); 내림차순 // arr.sort((a,b) => b-a); 이렇게 구현할 수 있습니다. 오늘 또 놓친 방법은 sort((a,b) => a-b); 이 방법인데, 알면서 놓치는 건 항상 아쉽네요...! 구글링 없이도 익숙해지도록 연습연습 1-2. 가장 작은 5개의 수 가장 작은 수부터라는 의미가 결국 오름차순이고 5개의 수를 찾는 방법은 slice 를 사용할 수 있습니다. slice(0,5)를 하게 되면 0번째부터 4번째까지 5개를 추출 할 수 있어요! function soluti.. 2024. 1. 7.