· FRONT-END(93)
-
[ JavaScript ] 로그인 화면에 폼 이벤트 추가
환경 : Visual Studio Code - 앞서 올린 https://ggingggang05.tistory.com/164, https://ggingggang05.tistory.com/165와 이어지는 내용이다. [ 주요코드 ] [ 전체 코드 ] 회원가입 아이디 멋진 아이디네요! 아이디는 소문자 시작, 숫자 포함 8~20자로 입력하세요 비밀번호 비밀번호가 올바른 형식입니다. 비밀번호는 반드시 영문 대,소문자와 숫자, 특수문자가 포함되어야 합니다. 비밀번호 확인 비밀번호가 일치합니다. 비밀번호가 일치하지 않습니다. 비밀번호를 먼저 입력하세요. 회원가입 개인 공부 기록용입니다:)
2024.05.12 -
[ React ] 아.추하기 (아이콘 추가하기라는 뜻)
환경 : Visual Studio Code 링크 : https://react-icons.github.io/react-icons/ - 아이콘 사용을 원하는 프로젝트에 아래 의존성을 추가 npm install react-icons - 적용 결과 아이콘을 사용하기 위해 import 구문을 사용해야한다. 따라서 간단히 import 구문에 대해 이해해보자! import { a, b } from "c" c에서 a랑 b라는 항목만 불러오겠다 c에는 a랑 b 말고 다른 것도 잇음 naming import [예시] import {useState, useCallback, useEffect} from "react"; - useState() - useCallback() - useEffect() import d from "e"..
2024.05.11 -
[ JavaScript ] onblur 속성 사용해보기
환경 : Visual Studio Code 실행결과 - 바로 전 글에 대해 이어지는 내용이다 (https://ggingggang05.tistory.com/164) onblur 속성으로 함수를 부르는 경우, 함수에 대한 처리를 바로바로 하는 것이 아닌, 사용자가 다 작성한 이후에 결과를 보여준다. 즉, 포커스를 잃을 때 이벤트가 발생하게 됩니다. 아래 내용은 이전 글과 이어지며, 단순히 onclick 속성을 onblur로 바꿔준 것이다. 회원가입 아이디 멋진 아이디네요! 아이디는 소문자 시작, 숫자 포함 8~20자로 입력하세요 비밀번호 비밀번호가 올바른 형식입니다. 비밀번호는 반드시 영문 대,소문자와 숫자, 특수문자가 포함되어야 합니다. 비밀번호 확인 비밀번호가 일치합니다. 비밀번호가 일치하지 않습니다. ..
2024.05.11 -
[ JavaScript ] 회원가입 창 (일부) 만들기, 비밀번호 확인에 대한 심화 공부!
환경 : Visual Studio Code - 전체 코드는 맨 마지막 코드만 있습니다. [ (1)기본 - 일단 되긴 되는 코드 ] - 비밀번호 확인 시 사용할 수 있는 코드 └ 비밀번호 / 비밀번호 확인 부분에 대한 코드만 있음 (+) 비밀번호가 입력되지 않았다는 것을 검사하기 위한 검사식은 아래와 같이 있다. if(memberPw == "") { //자바스크립트는 모든 비교를 ==로 한다 if(memberPw.length == 0) { //글자수 0이면 if(memberPw == false) { //문자열이 부정적인 값이라면 if(!memberPw) //3번째 코드를 가장 간결하게 사용하는 방법 [ (2) nextElementSbling을 사용한 코드 ] └ 아이디 부분에 대한 코드만 있음 (+) 쿼리..
2024.05.10 -
springdoc을 spring boot 3.x 에 적용해보기
- application.properties spring boot 2.x org.springdoc springdoc-openapi-ui 1.8.0 spring boot 3.x org.springdoc springdoc-openapi-starter-webmvc-ui 2.5.0 - pom.xml # springdoc setting : supply data what front-end needs springdoc.packages-to-exclude=com.kh.spring19.restcontroller springdoc.swagger-ui.path=/swagger-ui http://localhost:8080/swagger-ui 접속
2024.05.10 -
[ JavaScript ] 1000자까지만 입력되도록 막아보기
환경 : Visual Studio Code [ 주요 코드 ] (+) 텍스트의 길이가 1000자를 넘은 경우 경고창을 띠워 준다. (+) substring()을 활용하여 사용자가 더 입력을 하더라도 1000자만 보여지게 설정해준다. └ 사용자의 입력을 막기 어렵기 때문에, 사용자는 입력하도록 냅두고 프로그램에서 알아서 잘라 보여준다 (+) return '';을 수행하여 강제 종료 효과를 낸다 (+) lengthTarget.style.color = ""; 를 하면 색상이 제거된다. └ 따로 색상을 정해주지 않고 원래의 색상으로 돌아가게끔 해줘야 한다. (이후 기본 색상이 바뀔 수 있기 때문) [ 전체 코드 ] (Q) 입사 후 20년 뒤에 본인의 모습을 예상해보세요 0 / 1000 - 실행결과 (최대 작성 글..
2024.05.09