javascript
-
📌 클로저 함수 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 JS가 어떻게 변수의 유효범위를 지정하는지를 이해해야한다. 📌 어휘적 범위 지정(Lexical scoping) function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); 📌 let과 const를 사용한 범위 지정 if (Math.random() > 0.5) { var x = 1; } else { var x = 2; } consol..
JavaScript | 클로저 함수📌 클로저 함수 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 JS가 어떻게 변수의 유효범위를 지정하는지를 이해해야한다. 📌 어휘적 범위 지정(Lexical scoping) function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); 📌 let과 const를 사용한 범위 지정 if (Math.random() > 0.5) { var x = 1; } else { var x = 2; } consol..
2023.05.26 -
File Upload 다중 파일을 선택하여 업로드하는 기능 구현 중요 기능 - 업로드 - 업로드 경로 - 업로드 저장 세부 기능 - 업로드 진행바 - 업로드 파일 형식 제한(검증) - 업로드 미리보기 - 업로드된 파일 다운로드 기술스텍 Java, Spring, JavaScript, JQuery, Ajax, HTML Apache Tomcat v9.0 업로드 | 화면 화면에서 업로드할 파일을 구성하고 서버에서 받을 파일 형식을 설정해 지정된 경로로 저장 multiple: 파일 선택시 다중 파일을 선택할 수 있다. accept: 파일 확장자를 지정해서 원하는 확장자만 보이게 한다. FormData: Ajax로 폼 전송을 가능하게 하게 함 - JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전..
Spring | File UploadFile Upload 다중 파일을 선택하여 업로드하는 기능 구현 중요 기능 - 업로드 - 업로드 경로 - 업로드 저장 세부 기능 - 업로드 진행바 - 업로드 파일 형식 제한(검증) - 업로드 미리보기 - 업로드된 파일 다운로드 기술스텍 Java, Spring, JavaScript, JQuery, Ajax, HTML Apache Tomcat v9.0 업로드 | 화면 화면에서 업로드할 파일을 구성하고 서버에서 받을 파일 형식을 설정해 지정된 경로로 저장 multiple: 파일 선택시 다중 파일을 선택할 수 있다. accept: 파일 확장자를 지정해서 원하는 확장자만 보이게 한다. FormData: Ajax로 폼 전송을 가능하게 하게 함 - JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전..
2023.02.06 -
에러 내용 JSP의 자바스크립트 코드 작성 중 템플릿 리터럴(Template literals) 을 사용해서 빽틱 (back tick) 안의 ${} 값을 사용하던 중에 발생한 에러이다. ... para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`; ... 해결 과정 구글링을 하면서 여러 에러 내용을 확인했지만, 비슷했을 뿐이지 같은 내용도 아니였다. 근데 하나같이 에러 해결 방법은 동일했다. 구글링 예상원인 유효하지 않은 식별자를 사용 Java 버전업에 따른 식별자 제약사항 변경(구축 Java 1.6 -> 현재 Java 1.8) Eclipse/Tomcat 기반의 개발환경에서 발생 javax.el.ELExcep..
Java/JSP | javax.el.ELException: Failed to parse the expression에러 내용 JSP의 자바스크립트 코드 작성 중 템플릿 리터럴(Template literals) 을 사용해서 빽틱 (back tick) 안의 ${} 값을 사용하던 중에 발생한 에러이다. ... para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`; ... 해결 과정 구글링을 하면서 여러 에러 내용을 확인했지만, 비슷했을 뿐이지 같은 내용도 아니였다. 근데 하나같이 에러 해결 방법은 동일했다. 구글링 예상원인 유효하지 않은 식별자를 사용 Java 버전업에 따른 식별자 제약사항 변경(구축 Java 1.6 -> 현재 Java 1.8) Eclipse/Tomcat 기반의 개발환경에서 발생 javax.el.ELExcep..
2023.01.30 -
서버 우선 서버 쪽 기능을 먼저 생각해봅시다. 하트를 누르면 1) 어떤 포스트를 2) 누가 눌렀고 3) 좋아요인지 좋아요 취소인지를 알아야겠죠? 숙제로 만들 다른 반응들(⭐, 👍)을 생각하면 어느 아이콘을 눌렀는지도 알아야겠네요. DB에 저장할 때는 1) 누가 2) 어떤 포스트에 3) 어떤 반응을 남겼는지 세 정보만 넣으면 되고, 좋아요인지, 취소인지에 따라 해당 도큐먼트를 insert_one()을 할지 delete_one()을 할지 결정해주어야합니다. if action_receive =="like": db.likes.insert_one(doc) else: db.likes.delete_one(doc) 좋아요 컬렉션을 업데이트한 이후에는 해당 포스트에 해당 타입의 반응이 몇 개인지를 세서 보내주어야합니다...
Ajax/JQuery | 좋아요 기능서버 우선 서버 쪽 기능을 먼저 생각해봅시다. 하트를 누르면 1) 어떤 포스트를 2) 누가 눌렀고 3) 좋아요인지 좋아요 취소인지를 알아야겠죠? 숙제로 만들 다른 반응들(⭐, 👍)을 생각하면 어느 아이콘을 눌렀는지도 알아야겠네요. DB에 저장할 때는 1) 누가 2) 어떤 포스트에 3) 어떤 반응을 남겼는지 세 정보만 넣으면 되고, 좋아요인지, 취소인지에 따라 해당 도큐먼트를 insert_one()을 할지 delete_one()을 할지 결정해주어야합니다. if action_receive =="like": db.likes.insert_one(doc) else: db.likes.delete_one(doc) 좋아요 컬렉션을 업데이트한 이후에는 해당 포스트에 해당 타입의 반응이 몇 개인지를 세서 보내주어야합니다...
2023.01.02 -
파일 업로드 라이브러리 파일 업로드 scripts $(document).ready(function () { bsCustomFileInput.init() listing() }) AJax /* POST 요청 ajax 코드 */ function post_posting() { // 고유 id let 함수로 정의 let picture = $('#post_picture').val() let comment = $('#post_comment').val() let pic = $('#pic')[0].files[0] let form_data = new FormData() form_data.append("picture_give", picture) form_data.append("pic_give", pic) form_data...
Ajax/JQuery | 사진 업로드파일 업로드 라이브러리 파일 업로드 scripts $(document).ready(function () { bsCustomFileInput.init() listing() }) AJax /* POST 요청 ajax 코드 */ function post_posting() { // 고유 id let 함수로 정의 let picture = $('#post_picture').val() let comment = $('#post_comment').val() let pic = $('#pic')[0].files[0] let form_data = new FormData() form_data.append("picture_give", picture) form_data.append("pic_give", pic) form_data...
2023.01.02 -
Element select input text나 textarea 요소를 드래그한 듯이 선택하기 위해 사용 select | selectAll 시각화할 요소 선택 d3.select("body") .selectAll("p") // 실행 selectAll 의 결과값
Element select();Element select input text나 textarea 요소를 드래그한 듯이 선택하기 위해 사용 select | selectAll 시각화할 요소 선택 d3.select("body") .selectAll("p") // 실행 selectAll 의 결과값
2023.01.02 -
HTML의 event 종류 개요 Javascript의 Module Pattern을 사용하여 해당 스크립트를 재사용 할 수 있는 장점 다른 소스와 섞이지 않고, 해당 모듈을 통해서 완전한 기능을 제공 종류 onabort 이미지 로딩에서 이탈하였을 때(다른 연결로 이동) onactivate 개체의 activeElement 속성을 설정하였을 때 onafterprint 관련된 문서를 인쇄하거나 인쇄 미리보기를 후 즉시 onbeforeactivate 개체의 activeElement 속성이 설정되기 바로 전에 onbeforecopy 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에 onbeforecut 선택된 내용이 시스템 클립보드(clipboard)로 잘라내기 바로 전에 onbeforedea..
Event | HTML의 event 종류HTML의 event 종류 개요 Javascript의 Module Pattern을 사용하여 해당 스크립트를 재사용 할 수 있는 장점 다른 소스와 섞이지 않고, 해당 모듈을 통해서 완전한 기능을 제공 종류 onabort 이미지 로딩에서 이탈하였을 때(다른 연결로 이동) onactivate 개체의 activeElement 속성을 설정하였을 때 onafterprint 관련된 문서를 인쇄하거나 인쇄 미리보기를 후 즉시 onbeforeactivate 개체의 activeElement 속성이 설정되기 바로 전에 onbeforecopy 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에 onbeforecut 선택된 내용이 시스템 클립보드(clipboard)로 잘라내기 바로 전에 onbeforedea..
2023.01.02 -
HTML / JavaScript form 태그 중에서 event 를 설정 할 때 onsubmit : form의 값을 전송하기 전에 어떤 작업을 하게 할 수 있음 onsubmit="return 함수()" return을 추가하면 submit을 하기 전에 함수를 먼저 실행하고, 결과(true, false)에 따라 submit이 발생 return을 사용하지 않으면 유효성 결과에 상관없이 함수를 실행 : form태그를 지칭하는 this를 이용해 object로 정의하고, 각 input의 name별로 해당하는 값 등의 정보를 이용할 수 있다.
Event | onsubmit returnHTML / JavaScript form 태그 중에서 event 를 설정 할 때 onsubmit : form의 값을 전송하기 전에 어떤 작업을 하게 할 수 있음 onsubmit="return 함수()" return을 추가하면 submit을 하기 전에 함수를 먼저 실행하고, 결과(true, false)에 따라 submit이 발생 return을 사용하지 않으면 유효성 결과에 상관없이 함수를 실행 : form태그를 지칭하는 this를 이용해 object로 정의하고, 각 input의 name별로 해당하는 값 등의 정보를 이용할 수 있다.
2023.01.02