Validation Check(유효성 검사) 이게 뭐지..싶은 사람들을 위해 유효성 검사란 이런것이다 설명하자면, 비밀번호를 영문대소문자, 숫자, 특수문자 포함해서 입력해주세요! 연락처를 '000-0000-0000' 이런 형식으로 입력해 주세요! select box에다가 '하나는 필수로 선택해 주세요!' 이런 문구를 띄워서 사용자가 필수로 입력하거나 선택하게 하는것이다. 처리는 자바스크립트로 유효성 검사해서 알림창 띄우거나 텍스트로 띄워주는 것으로 제일 쉽게 할 수 있단. 예시는 구글에 찾으면 잘 나와있으니 찾아보도록 하기. 이런 유효성 검사에서 정규식이 사용되는데, 정규식이란 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴인데 예시는 아래 참고! 이메일 정규식: var regExp = ..

JavaScript Null check Null체크에 대해 알아보기 전에, 먼저 JS의 null이랑 undefined에 대해 설명하고 넘어가는 게 맞을 것 같다. null이란 변수를 선언하고 빈 값을 할당한 상태로 즉 빈 객체 상태를 말하는 것이고, undefined는 변수를 선언하고 값을 할당하지 않은 상태를 말하는 것이다. 크롬 개발자도구 키고 콘솔에다가 임시로 빠르게 변수 두개 만들어서, 하나는 null 값 넣고 하나는 변수만 만들어서 값이랑 type 찍어보면서 한번 더 확인! 이제 그럼 이 아이들을 null인지 아닌지 undefined인지 아닌지는 어케 체크하냐믄,,, 바로바로바로오오오 if문으로 간단히 체크해 줄 수 있단! 코드 풀이는 어어어 null이거나 ""이거나 undefined이면 tes..

Loadsh란 JavaScript의 유틸리티 라이브러리 중 하나이다. 보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있도록 하는데에 사용된다. 나 역시 업무를 하면서 컨트롤러단에서 넘겨준 데이터를 바인딩시켜서 JSP로 화면에 뿌려줄 때 사용해봤다. 공식 document 사이트는 https://lodash.com/docs/4.17.15 Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and..

동아리 활동이나 졸작할땐 필수적으로 들어갈 기능 대충 생각하고 구글링하거나 책같은거 참고해서 오류만 안나면 오케이였는데, 맡겨진 업무를 하면서 코딩하다보면 line by line으로 모르는거 물어보거나 이전보다 많이 찾아보게 되고, 조금 더 사용자의 입장에서 생각하고 이게 더 편할까 저게 더 편할까 이렇게 보여주는 것이 더 나을까 생각하게 되는 것 같당. 아무튼 그럼 본론으로 들어가서 이번 포스팅에서는 제이쿼리 이벤트 처리에 대해 알아보자! 먼저 이벤트란 무엇일까??? 클릭을 하는 것, 마우스로 드래그하는 것, 타닥타닥해서 작성하는 것 등등 웹 페이지에서 일어나는 동작들이 다 이벤트이다. 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다...

Display 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹브라우저에 언제 어떻게 보이는지 결정. 대부분의 요소들은 속성의 기본값으로 block, inline, none 을 사용. Visibility visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정. 따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재. visibility 속성을 자바스크립트와 함께 사용해서 레이아웃을 만들 수 있음. 속성값으로는 visible, hidden, collapse를 사용. collapse의 경우 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줌. display: 'none' v..

.attr() : 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute) 값을 반환. .prop() : 선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property) 값을 반환. 글로만 봐서는 속성과 프로퍼티에 대한 개념이 뭔 차이지...이럴 테니 이걸 그래도 이해하기 쉬운 체크박스를 예로 들어보자. 우선 input으로 간단히 체크박스 하나 만들어주고 id값도 지정해주고 check상태로 만들어준다. 그 다음은 개발자도구를 켜서 콘솔창에 가서 attr()이랑 prop()을 해보쟈. 프론트단 만질때는 특히나 개발자도구 켜놓는거 추천!! 자스랑 제이쿼리 테스트해보고 디버깅해볼때 정말정말 유용한데 이것도 한번 나도 정리할겸 담에 포스팅해야겠다. 암튼 다시 돌아와서, 우리가 checked="c..

Ajax란 Asynchronous JavaScript and XML의 약자. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음. Ajax의 장점으로는, 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있고, 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음. 주로 사용했던 건 jquery ajax인데 대략적인 기본 형태는 아래와 같이 쓸 수 있다. url에다가는 연결해 줄 경로를 적어주고 타입에다가는 get방식인지 post 방식인지 적어주면 된다. dataType은 서버 측에서 전송한 데이터를 어떤..