728x90 반응형 자바스크립트5 유효성 검사(?)로 클라이언트를 막아보자 - 1 인풋은 텍스트인데 숫자만 받고싶을 때 (복붙도 막아준다) 인풋은 숫자인데 클라이언트가 직접 입력하길 바라지 않을 때 disabled 처럼 보이는 readonly 를 만들고 싶을 때 영어만 사용가능하게 제한하고 싶을 때 (제출할 때 검사됨) 영어와 숫자까지만 가능하게 제한하고 싶을 때 (제출할 때 검사됨) 영문만 사용가능하게 제한하고 싶을 때 (입력할 때 검사됨) function engOnly() { var objEvent = event.srcElement; var numPattern = /^[A-Za-z]*$/; numPattern = objEvent.value.match(numPattern); if (numPattern == null) { Swal.fire({ text: "영문만 입력 가능합니다.", .. 2022. 10. 20. 자바스크립트를 HTML과 분리했는데 작동하지 않는 경우 보통 HTML과 자바스크립트를 따로 분리하는 게 보기 편하고 보기 편하기 때문에 유지보수가 더 용이한데 그 분리작업이 쉬울 것 같은데? 생각보다는 쉽지 않다. 오늘은 외부로 분리한 나의 자바스크립트 파일이 왜 작동하지 않는지 그 원인을 알아보고 해결책에 대해 소개해보려고 한다. 원인 & 해결책 1. VIEW 단에서 경로를 제대로 설정하지 않아서 컴파일러가 찾지 못하는 경우 ->본인이 사용하는 템플릿 엔진에 맞게 외부 자바스크립트 파일을 놓아야 하고 그 경로를 본인이 사용하는 템플릿 엔진에 맞게 설정해주어야 합니다. EX: 타임리프라는 템플릿 엔진을 사용중이라면 다음과 같은 폴더에 저장하면 됩니다. resources->static->js->html이름->js이름 호출할 때는 2. jQuery 를 사용중이라.. 2022. 10. 14. 체크박스 활용하기 (Multiple Selection 수정or삭제) - 1/2 메일 사이트를 가면 체크박스가 있고 체크한 행의 정보를 수정할 수 있는 기능 또는 로직이 구현되어 있다. 이런식으로 선택해서 이런식으로 버튼 하나로 선택된 모든 행의 정보를 수정할 수 있는 것이다. 물론 바로 삭제 또는 수정 로직을 행하진 않고 아래 처럼 컨펌 모달이 뜨게끔 만드는 것이 더욱 좋다. 자 이제 이러한 로직을 구현하기 위해서는 대략 5가지 로직이 필요하다. 1. 최상단의 체크박스 선택 시 모든 체크박스가 선택되게 하는 로직 2. 삭제 또는 수정 버튼을 눌렀을 때 해당 행의 기준이 되는 정보를 매개변수로 두고 그 매개변수를 반복문을 통해 배열에 넣고 모달에 전달하는 로직 (동기 or 비동기는 선택사항) 3. 그 배열을 반복문에 돌려서 순차적으로 실질적인 연산을 하는 함수에 전달하는 로직. 4... 2022. 9. 30. [JavaScript] 콜백함수 (CallBack)가 도대체 뭐길래? 앞서 자바스크립트의 작동원리 및 비동기와 동기를 설명하면서 어떤 이유에서인지 실행하는데 시간이 걸리는 코드가 생기고 그래서 그걸 잠시 죽이는 비동기화를 진행하게 되면 아래의 코드가 먼저 실행이 되어서 순서가 꼬일 수 있다고 했다. 이제 그 순서를 꼬이지 않게 하기 위해 프로그래머가 임의로 아래의 코드 또한 비동기화시켜서 임시저장소로 보낼 수 있다고 했다. 그러면 어떻게 그게 가능할까? 바로 오늘 설명할 콜백함수를 이용하면 가능하다. Call Back. 문자 그대로 돌아오라고 부르는 것이다. 집나간집 나간 아들을 향해 "집으로 돌아와~!!!" 해서 집 나간 아들이 집에 다시 돌아온다면 그것이야 말로 콜백이다. 뜬금없이 무슨말인가? 비동기화가 진행되게 되면 코드가 임시저장소로 보내지고 그 코드는 거기서 컴퓨.. 2022. 2. 27. [JavaScript] 코드 인터프리터 작동 원리 및 순서 ( 비동기 vs 동기) 기본적으로 컴퓨터는, 그리고 인터프리터는 작성된 코드를 위에서부터 읽고 순차적으로 코드를 실행시킨다. 즉 위에서 아래로 코드 실행 순서가 정해진다는 뜻이다. 하지만! 특정 코드에서 결과를 얻기까지 오랜 시간이 걸리면 어떻게 될까? 예를 들어 1분이 걸린다고 가정해보자. 그러면 아래 줄의 코드는 전혀 실행되지 않는 병목 현상이 생기게 되는 것! 언제 그럴까? 1. 네트워크 통신 2. 복잡한 계산을 실행하는 코드 3. 타이머를 정해두고 그 시간이 만료되면 코드를 실행하는 함수를 쓴 경우 (예: setTimeout(), setInterval() ) 가 대표적인 케이스이다. 위와 같은 상황을 방지하고 빨리빨리 실행할 수 있는 것부터 실행하기 위해서 자바스크립트는 비.동.기 방식을 지원한다. 비동기 방식이란? 어.. 2022. 2. 18. 이전 1 다음 728x90 반응형
