Time does not change us. It just unfolds us.

Web/Front 5

[JavaScript]IP input mask

IP를 입력받을 때 'xxx.xxx.xxx.xxx'의 형식만 입력이 가능하게 하였다. 이 때 사용한 것이 미리 정의된 형식을 보장하여 사용자가 입력을 할 수 있도록 도와주는 inputmask 라이브러리이다. input mask는 그 외 날짜, 숫자, 전화번호 등의 입력하는데에 유용하다. 1. 내가 사용한 코드는 다음과 같다. $("#ip").inputmask({alias: "ip", greedy: false}); ... $("#ip").inputmask('remove'); 2. 다른 방식의 코드 IP Address //input mask bundle ip address var ipv4_address = $('#ipv4'); ipv4_address.inputmask({ alias: "ip", greedy:..

Web/Front 2021.10.28

[Web]Custom Validator

자바스크립트에서 input 값에 영문,숫자,특수문자 입력만 허용하려고 validation을 작성할 때 사용했던 내용이다. formValidation을 사용하는데 문서 외에는 구글링해도 잘안나온다^___^… name: { validators: { notEmpty: { message: '아무거나 입력하세요.', trim: true }, regexp: { regexp: /^[A-Za-z0-9]*$/, message: '영문, 숫자만 입력해야합니다.' } } } 위 코드와 같이 regexp를 사용할 수도 있지만 커스텀 validator를 만들면 이렇게 정의할 수 있다. var alphabets = /^[a-zA-Z0-9,/,~,!,@,#,$,%,^,&,*,\-,_,+,=,?,>,

Web/Front 2021.10.26

[Web]Freemarker문법

템플릿 엔진으로 Freemarker를 사용하는데 view 내에서의 문법들이 가끔 쓰이고 있어 시간내어 찾아보았다. 문서의 Reference 장 참고하면 문법 확인 가능한데, 특히 #assign이나 반복문, 조건문 위주로 많이 사용하고 있다. https://freemarker.apache.org/docs/ref.html Template Language Reference freemarker.apache.org freemarker는 자바 객체에서 데이터를 생성해서 템플릿에 넣어주면 freemarker에서 템플릿에 맞게 변환하여 HTML 파일을 생성한다. 다른언어도 쓸 수 있지만, JVM 위에서 돌아가므로 주로 자바 서블릿에서 많이 쓴다. Java EE에 종속적이라는 JSP단점을 극복했으며 Thymeleaf나 ..

Web/Front 2021.10.26

[JavaScript]JSON 형식의 문자열과 Encode 함수

Object(객체)를 Json 문자열로 변환할 때 stringify()를 사용한다. 또한 데이터를 인코드하기 위해 btoa() 함수를 사용한다. var val = btoa(encodeURIComponent(JSON.stringify(row))); 반대로 Json 문자열을 Object로 변환할 때는 parse()를 사용하며 디코드하기 위해 atob()를 사용한다. var row = JSON.parse(decodeURIComponent(atob(val))); encodeURIComponent 함수는 모든 문자를 인코딩한다. URI로 데이터를 전달하기 위해서 문자열을 인코딩하는데 사용한다. Encoding 할 때 한글을 포함한 경우에는 정상적으로 변환되지 않기 때문에 데이터를 감싸는 역할을 한다. 인자명 데이..

Web/Front 2021.10.25

[Web]Feign Client

이번 프로젝트에서 FeignClient를 이용하여 개발해서 개념을 이해하고자 공부해보았다. 특히 공통 헤더를 추가하기 위해 커스터마이즈한 Configuration을 설정하는 부분에 대해 정리하였다. Feign Client란? 1) Feign Client는 web service 클라이언트를 보다 쉽게 작성할 수 있도록 도와줌. 2) interface를 작성하고 annotation을 붙여주면 세부적인 내용 없이 사용할 수 있기 때문에 코드 복잡도가 낮아짐. 3) Netflix 에서 만들어진 Http client binder 4) spring-cloud-starter-openfeign으로 스프링 라이브러리에서 사용할 수 있음. feign client 라이브러리 넣기 org.springframework.clou..

Web/Front 2021.10.22