본문 바로가기

Javascript

 (12)
javascript 익명 함수 정리 1. 익명 함수란? 더보기 익명 함수는 람다 대수로부터 영향을 받아 만들어진 프로그래밍에서 함수를 표현하는 방식의 일종이다. 비교적 최근부터 대부분의 프로그래밍 언어가 익명 함수를 지원한다. 흔히 Java가 8버전 부터 람다를 지원하게 되었다고 하는데 이때 람다가 익명 함수(Lambda abstraction) 를 말한다. 각 언어별로 익명 함수를 표현하는 법은 제각기 다르지만, 공통적으로 가지는 특징이 있다. 바로 일급 객체(First-class citizen) 라는 점이다. 일급 객체는 함수의 인자로 넘겨받을 수도 있으며, 함수의 결과값으로 리턴할 수도 있고, 변수에 값을 할당할 수도 있다는 것을 말한다. 프로그래밍 언어에서 익명 함수는 애초에 다른 함수에 인자로 넘기거나 함수의 결과 값으로 리턴할 용..
Javascript 스코프(scope) / 클로저(closure) 정리 1. 클로저를 들어가기 전에 알아야 할 개념 1-1) 스코프란? 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것 function add(x,y) { console.log(x,y); return x + y; } add(3,6); console.log(x,y); 더보기 실행결과 3,6 ReferenceError: x in not defined 어쩌고.. 함수의 중첩 스코프 var x = "나는 전역 X"; function outer() { var y = "나는 outer함수의 지역 Y"; console.log(x); console.log(y); function inner() { var x = "나는 inner함수의 지..
javascript xlsx ecxel 모든 cell에 style 적용 주석을 봐주세요... for (const i in ws) { // 모든 cell을 돌겠다 if (typeof (ws[i]) !== 'object') continue; // object가 아니면 style 적용 안됨 ws[i].s = { // 모든 cell 에 style을 적용 alignment: { horizontal: 'center', }, border: { right: { style: 'thin', color: '000000', }, left: { style: 'thin', color: '000000', }, top: { style: 'thin', color: '000000', }, bottom: { style: 'thin', color: '000000', }, }, } 여기서 i는 number가 아..
javascript sheetjs , xlsx cell value에 따라 cell style 적용하기 주석에 설명이 있습니다! 추가적으로 설명이 필요하시면 댓글 남겨주세요... if (data[0][A] !== '') { // sheet에 뿌려질 전체데이터 배열 for (let i = 0; i < data.length; i++) { const tmp1 = i + 1; tmp = ws[`A${tmp1}`].v; //ws 는 excel sheet를 말함 if (tmp === 'testvalue') { // cell의 값이 'testvalue' 랑 같으면 밑의 style을 적용 ws[`A${tmp1}`].s = { // style 적용할 cell 지정 font: { bold: true, }, }; ws[`B${tmp1}`].s = { font: { bold: true, }, }; } } }
Ajax를 이용한 file upload & download 설명은 코드의 주석을 달아놨습니당. thymeleaf로 file upload & download 구현 할 때와 Controller는 거의 바뀐 게 없다... uploadAjax.html Ajax를 이용한 파일 업로드 업로드 // AjaxController.java @CrossOrigin("*") @RequiredArgsConstructor @Slf4j @Controller public class AjaxController { @Value("${spring.servlet.multipart.location}") // yml 파일 설정 가져오기 private String path; @GetMapping("/uploadAjax") public String uploadAjaxForm() { return "uplo..
바닐라 자바스크립트와 ES6 자바스크립트 차이점 1. 바닐라 자바스크립트(Vanilla JS) 프레임워크와 라이브러리가 적용되지 않은 날 것의 자바스크립트 장점 ① 단순한 구조 : 순수 자바스크립트로 구성돼 단순한 구조로 프로젝트 진행 가능 ② 가벼운 구성 : 별도 라이브러리나 프레임워크를 사용하지 않아 가벼운 스크립트로 구성 가능 ③ 개발자 스킬 향상 : 별도 기반기술에 종속적이지 않고 순수 자바스크립트에 대해 개발 스킬 향상 가능 단점 ① 낮은 개발 생산성 : 필요한 기능에 대해 자체개발이 필요 ② 브라우저 파편화 : 지원하고자 하는 브라우저에 대한 파편화 처리를 자체 해결 필요 ③ 개발 품질 유지 어려움 : 개발자의 개발 수준에 따른 품질 차이 발생 ④ 낮은 수준의 결과물 : 라이브러리나 프레임워크 대비 일정 수준의 품질을 유지하기 어려움 특징 ..
Java Script # 회원가입 폼 유효성 검사(빈 칸이 있으면 알림 띄우기) /*변수 선언 생략*/ function checkfield(){ if(id.value==""){ //변수 값이 없을 경우 alert("아이디를 입력하세요."); //메세지 경고창을 띄운 후 id.focus(); // 해당 변수의 텍스트박스에 커서를 위치 exit; }else if(pw1.value==""){ alert("비밀번호를 입력하세요."); pw1.focus(); exit; }else if(pw2.value==""){ alert("비밀번호를 확인하세요."); pw2.focus(); exit; }else if(userName.value==""){ alert("이름을 입력하세요."); userName.focus(); exit; }else if(yy.value==""){ alert("생년월일을 확인하세..
Java Script # 회원가입 폼에서 유효성 검사(비밀 번호 재확인, 필수 입력) 후 에러(메세지) 출력하기 /*변수 선언하기*/ var id = document.querySelector('#id'); var pw1 = document.querySelector('#pswd1'); var pw2 = document.querySelector('#pswd2'); /*이벤트 핸들러 연결하기*/ id.addEventListener("focusout", checkId); pw1.addEventListener("focusout", checkPw); pw2.addEventListener("focusout", check2Pw); /* 콜백함수 */ function checkId() { var idPattern = /[a-zA-Z0-9_-]{5,20}/; if(id.value === "") { error[0].innerHTML ..

티스토리툴바