저장소

[ 서론 ] 평소 내가 개발 및 관리하는 대부분의 구조는 Back 단과 Front 단이 나뉘어저 있다. Back 단은 jar 파일로 되어있어 한 글자라도 수정을 해야 하는 경우 서비스를 내렸다가 다시 올려야 하는 불편함이 있다. 이번에는 데이터를 정렬하는 문제가 있어 수정해달라는 간단한 문제가 있었다. 물론 데이터를 정렬하는데 있어 백엔드에서 해야 성능 효율성, 데이터 전송 및 네트워크 효율성, 보안 등 훨씬 좋지만 정렬 데이터가 많아야 10개 뿐인데 백엔드를 수정하기 싫어 그냥 프론트단에서 바꾸자 마자 바로 적용될 수 있는 방법을 수행하였다.  [ 코드 예제 ] 해당 체널값을 출력해주는 프론트 단에서 날짜별로 내림차순 해달라는 간단한 내용이였다. new Date(b.crea..

window.onload와 DOMContentLoaded 이벤트는 웹 페이지의 로딩 상태에 따라 다르게 동작하는 JavaScript 이벤트 이번 문제는 기존에 구현된 내용들을 참고하여 새로운 기능을 구현하면서 직접 짠 자바스크립트 내용을 추가하면서 문제가 발생하게 되었다. 기존 스크립트가 작동을 안하는 문제였다. 코드가 너무 오래되고 지저분한 부분도 있고 내 실력이 부족한 부분도 있어 이 문제를 해결하는데 생각보다 많은 시간이 들어 정리를하게 되었다. 자바스크립트의 실행 시점 때문에 발생하는 문제였다. 페이지 전체가 로드되기 전에 발생해야 하는 내용이였기 때문이다. 그런 이유로 문제의 원인은 DOMContentLoaded방식을 사용하여 해결하였다. window.onload 이벤트: 1. 이 이벤트는 웹 ..

간단한 자바스크립트 파일 용량 제한이다. function fnExcelFileCheck() { // 1. 파일 선택 input 엘리먼트를 가져옵니다. var fileElements = document.getElementById('excelFile'); // 2. 파일이 선택되지 않았을 경우 경고 메시지를 표시하고 업로드를 중단합니다. if (fileElements.value == '') { alert("엑셀 파일이 첨부되지 않았습니다."); return false; } // 3. 파일이 선택된 경우, 첫 번째 파일의 크기를 바이트 단위로 가져옵니다. var fileSize = fileElements.files[0].size; // 4. 최대 파일 크기 (3MB)와 비교하여 크기가 초과하면 경고 메시지를 ..

✔ 전체 화면 ✔ HTML * 회원가입 - 아래 필수 입력사항을 모두 입력해 주십시요. 아이디 최소 3자이상 입력하세요. * 영문자, 숫자,_만 입력 가능, 최소 3자이상 입력하세요 패스워드 패스워드 확인 이름 *공백없이 한글만 입력 가능 별명 *공백없이 한글, 영문, 숫자만 입력가능 (한글2자, 영문자 4자 이상) *별명을 바꾸시면 앞으로 60일 이내에는 변경할 수 없습니다. 이메일 : 생년월일 성별 선택하세요 남자 여자 전화번호 핸드폰번호 주소 -우편번호검색 서명 자기소개 메일링서비스 정보 메일을 받습니다 SMS 수신여부 핸드폰 문자메세지를 받겠습니다. 정보공개 다른 분들이 나의 정보를 볼 수 있도록 합니다. 정보공개를 바꾸시면 앞으로 0일 이내에는 변경이 안됩니다. 추천인아이디 자동등록방지 *왼 쪽..

✔ JSON JSON(JavaScript Object Notation) - 데이터를 저장하거나 전송할 때 사용되는 경량의 DATA 교환 형식 - 사람과 기계 모두 이해하기 쉬우며 용량이 작아서 XML을 대체하여 데이터 전송등에 많이 사용 - 데이터 포멧일 뿐, 통신 방법도 프로그래밍 문법도 아님 ✔ JSON 특징 1 JSON의 특징 - 서버와 클라이언트간의 교류에서 일반적으로 많이 사용 - 자바스크립트를 이용하여 JSON 형식의 문서를 자바스크립트 객체로 변환하기 쉬움 - 자바스크립트 문법과 굉장히 유사하지만 텍스트 형식일 뿐임 - 특정 언어에 종속되지 않으며 대부분 프로그래밍 언어에서 JSON 포멧의 데이터를 핸들링 할 수 있는 라이브러리를 제공 { "name":"루시", "age" : 13, "fam..

✔ Promise ❗❗❗ Promise ❗❗❗ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise - 세부설명 - 프로미스 자바스크립트 비동기 처리에 사용되는 객체 - 주로 서버에서 받아온 데이터를 화면애 표시할 때 사용 프로미스를 리턴받은 객체 .then(정상적으로 프로미스 객체가 리턴되었다면 필요한 일을 수행) .catch(에러객체가 리턴되었다면 에러를 처리) .finally(최종적으로 처리할 일을 수행) ✔ 기본예제 1 function runInDelay(seconds){ // 성공했을 때 실패했을 때 return new Promise((resolve, reject) =>{ if(!seconds |..

✔ 주석 // 한줄짜리 주석 /* */ 여러줄 주석 /** */ JSDoc을 사용하면 좋음! ✔ 주석은 코드 자체를 설명하는 것이 아닌 왜(WHY)와 어떻게(HOW)를 설명하는 것이 좋음 /** * JSDoc * 주어진 두 인자를 더한 값을 반환함 * @param {*} num1 숫자1 * @param {*} num2 숫자2 * @returns num1과 num2를 더한값 */ function add (num1, num2){ return num1+num2; } 예외처리 try { 예외가 발생할 것으로 예상되는 문장; ... }catch(error객체) 예외가 발생했을 떄 처리할 문장; ... }finally{ 예외와 광계없이 무조선 실행할 문장; ... } ✔ 1 function readFile(path..

✔ set //set 순서가 없는 중복되지 않은 집합 const set = new Set([1,2,3,4,5]); console.log(set) // Set(5) { 1, 2, 3, 4, 5 } // 사이즈 확인 console.log(set.size) // 5 // 데이터가 존재하는지 확인 console.log(set.has(2)) //true console.log(set.has(7)) // false // 순회 set.forEach((item) => console.log(item)) // == 위 아래 동일한 문장이다. for(let value of set.values()){ console.log(value) } // set에 있는 데이터를 하나씩 넘겨주는 기능으로 //set에 있는 데이터 수만큼 반복..

✔ 이벤트 전파(Event Propagation) - 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 - document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남 캡처링 전파방식 - 부모에서 자식으로 이벤트를 전파 버블링 전파방식 - 자식에서 부모로 이벤트를 전파 ✔ 이벤트 전파를 막는 방법 이벤트객체명.stopPropagation(); DOCTYPE html> 이벤트전파 #divBox{width :100%; height : 300px; border: 3px solid red;} #pBox{width :70%; height : 150px; border: 3px solid blue;} #spanBox{border:..

✔ 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생 - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 - 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델 --------- -------- -------- 이벤트타겟 이벤트타입 이벤트리스너 이벤트타입(Event Type) - 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함 - 키보드, 마우스, HTML, DOM, window 객체등을 처리하는 이벤트 제공 - https://developer.mozilla.org/ko/docs/Web/Events 이벤트타겟(Event Target) - 이벤트가 일어날 객체를 의미 DOCTYPE html> eventtype window...

✔ Class ✔ 객체를 만드는 켐플릿 1. 생성자 함수 2. 클래스 static : 정적 프로퍼티 및 메서드 class Fruit { // eng = 'noname'; static count_fruits = 0; constructor(name, emoji){ this.name = name; this.emoji = emoji; } display = () => { console.log(`${this.name} : ${this.emoji}`); }; static makeBanana() { // return 'banana';// class이름으로 바로 접근가능 return new Fruit('banana', '🍌'); // 클래스 레벨 메서드에서는 this를 참조할 수 없음 } } // apple은 Fruit..

✔ function //✔ 1. 함수의 기본 - 자바스크립트에서는 함수도 메모리로 인식 function sum(num1, num2){ console.log('sum() 호출!'); return num1 + num2; }// 선언형 // sum() 호출! // 13 const result = sum(10,3); console.log(result); //✔ 2.함수의 메모리 const add = sum; console.log(sum(10,3)); console.log(add(10,3)); // 위와 동일한 결과 값 // sum() 호출! // 13 //✔ 3. 함수 작성법(팁!) function print(num){ if(num a+b; //return도 자동 화살표함수 const calc_multiply ..

✔ 정규식 표현 - MDN 정규식 정리 참고 사이트https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions  정규 표현식 - JavaScript | MDN정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec() (en-US)와 test() 메서드를 사용할 수 있습니다. String의 match()developer.mozilla.org정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴    - /   ~   / 시작과 끝    -  ^ : 패턴의 시작    - [ ] : 안의 문자를 찾음    - [x-..

✔ history 객체 - 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 - 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 접근 방법을 제한 back() - 뒤로 이동 forward)_ : 앞으로 이동 go(0) : 새로고침 location.reload() : 새로고침 DOCTYPE html> history history 뒤로 앞으로 새로고침 ✔ navigator 객체 - 내 위치를 알려쥬눈 역할 정도만 사용한다. 브라우저 공급자 및 버전 정보등을 포함한 브라우저에 대한 정보를 저장하는 객체 geolocation : GPS정보를 수신하는 프러퍼티 DOCTYPE html> navigator const success = function(loc){ console.log(loc.c..

✔ Date 객체 날짜, 시간등을 쉽게 처리할 수 있는 내장 객체 연도(year) - 2자리로 연도를 표기 : 1900 ~ 1999sus - 4자리로 연도를 표기 : 2000 ~ 월(month) - 0(1월) ~ 11(12월) Date 객체를 생성하는 방법 new Date() : 현재 날짜 시간을 저장한 객체가 생성 new Date('날짜 문자열') : 해당 특정 날자와 시간을 저장한 객체가 생성 new Date('밀리초') : 1970년 1월 1일 0시 0분 0초 ~ 해당 밀리초만큼 지난 날짜와 시간을 저장한 객체가 생성 new Date(년, 월, 일 , 시, 분 ,초 ,밀리초) : 해당 특정 날자와 시간을 저장한 객체가 생성 console.log(new Date()); // 내 OS 시간을 가저온다...

✔ 함수 표현식 const hello = function(){ console.log(`안녕하세요 자바!`); } hello(); 화살표 함수 - ECMA Script6에 추가된 문법 - function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현 - 화살표 함수는 항상 익명 const hello() = () => { console.log(`안녕하세요 자바!`); } const hello = () => console.log(`안녕하세요 자바!`); 매개변수가 있는 경우 const sum = function(x, y){ console.log(`두 수의 합 : ${x + y}); } const sum = (x, y) => console.log(`두 수의 합 : ${x + y}); 리턴값이 있는 경우 ..

✔ 배열(Array) - 이름과 index로 참조되는 정렬된 값의 집합(자료구조) - 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함 배열 선언 let 배열명; 배열 초기화 배열명 = [요소1, 요소2, 요소3 ....]; let arr; arr =[ 100, 200, 300]; let arr = [100,2 00, 300]; 배열 객체로 생성 let 배열명 = new Array(요소1, 요소2....) 자바스크립트 배열의 특징 1. 배열 요소의 타입이 고정되어 있지 않음 let arr = [1, 1.5, '김사과', true] // 자바는 요소 타입이 동일해야 하지만 자바스크림트는 아니다. 2. 배열 요소의 인덱스가 연속적이지 않아도 됨 let arr;..

✔ 자바스크립트 대화상자 - alert() //비표준은 내 화면에서만 보이고 다른 사용자에게 안보이는 경우도 있다 사용자에게 메시지를 보여주고, 확인을 기다림 BOM(Browser Object Model) window.alert() alert(); - confirm() 사용자에게 메시지를 보여주고, 확인이나 취소를 누르면 그 결과를 불린값으로 반환(선택창이 2개로 보이는 - 반응형) const result = confirm('확인이나 취소를 누르세요) - prompt() 사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환 // 자바에서의 scanner 역할과 유사하다 ❗ 입력받은 값은 문자형으로 저장된다 const result = prompt('문자를 입력하세요'); ✔ 대화상자 DOCTYPE ..

✔ JAvaScript 들어가기 전 최초의 브라우저(인터넷상에서 웹에 연결시켜 주는 윈도 기반의 소프트웨어) : 모자이크 Netscape - 네비게이터 브라우저 - 브랜드 아이크(Brendan Eich) 영입 - 10일만에 모카라는 언어로 네비게이커에 적용(인터프리터) 모카 -> 라이브 스크립트 -> 자바스크립트 java ---> compiler ---> object JAvaScript ---> interpriter jQuery - 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 하는 라이브러리 - jQuery 문법을 공부해야 하는 단점 V8 자바스크립트 엔진 - 2008년 구글에서 크롬의 베타 버전과 함께 v8엔진 소개 ECMA - 스크립트를 표준화(ECMA International에 ..