Technology/JavaScript 3

정규 표현식을 통해 사용자 입력 데이터(이메일, 전화번호 등) 유효성 검사하기

정규 표현식이란? 정규 표현식(Regular Expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 웹에서는 주로 브라우저 단에서 사용자가 입력한 데이터가 올바르게 입력되었는지 검사(유효성 검사)하기 위해 정규 표현식을 사용한다. 만일 사용자가 회원 가입을 위해 ID, 비밀번호, 이메일, 전화번호 등을 작성하는데 중간에 실수로 데이터를 잘못 입력했다고 가정해보자. 사용자가 최종적으로 "완료" 버튼을 눌렀을 때(서버로 데이터가 전송되었을 때) 잘못된 데이터가 입력되었다면 페이지 리로드가 됨과 동시에 기존 작성했던 정보들이 초기화 되면서 다시 작성해야하는 불편함이 생긴다. 이때 사용자가 특정 항목에 대해 입력을 마치면 그때 그때 정규표현식을 통해 데이터 유효성 검사를..

서버에 이미지 파일 전송하기(feat. FormData, Ajax)

이미지 파일 업로드하기 웹 브라우저단에서 서버로 이미지 파일을 전송하고 싶은 경우에는 어떻게 할까? 우선 당연히 브라우저 단에 이미지 파일이 업로드가 되있어야 한다. 이때 HTML form 태그를 이용하면 되는데, form 태그 내 input 태그의 type을 file로 설정하여 이미지 파일을 업로드 받을 수 있다. 여기서 중요한 것은 form 태그의 속성값 중 enctype(인코딩 타입)을 "multipart/form-data"로 설정해주어야 한다는 것이다. 여기서 multipart란 웹 브라우저가 서버에 요청을 보낼 때 HTTP 프로토콜 바디 부분에 데이터를 여러 부분으로 나눠서 보내겠다는 것이다. 그러면 왜 굳이 데이터를 여러 부분으로 나누는 것일까? 그 이유는 HTTP Request Body에 들..

Ajax의 기본 사용법(Vanilla JavaScript)

웹 개발 트렌드 최근(정확하게는 몇년 전부터) 웹 개발 트렌드는 jsp를 사용하지 않고 프론트엔드 코드와 API 코드를 따로 구성하여 운영하는 추세이다. 서버 코드가 클라이언트 페이지에 존재하면 유지보수도 어렵고 관리도 힘들기 때문이다. 즉, JSP 페이지를 없애고, 스크립트 단에서 API를 통해 HTML 파일로 데이터를 가져오는 경우가 많아진 것이다. 이때 프론트 엔드 주요 SPA 계열의 자바스크립트 프레임워크인 리액트, 앵귤러, 뷰 등이 사용된다. Ajax란? Ajax란 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 말하는데, 자바스크립트에서 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. 이때 JSON, XML, HTML 등 ..