Language 229

클로저(Closure)

- 주변 상태에 대한 참조와 함께 묶인 함수의 조합, 내부 함수에서 외부 함수의 범위에 대한 접근 제공js에서 클로저는 함수가 생성될 때마다 생성됨 - 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있음어휘적 범위 지정 (Lexical scopeing)function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수 function displayName() { // displayName() 은 내부 함수이며, 클로저 console.log(name); // 부모 함수에서 선언된 변수를 사용 } displayName();}init();ex2function outerFunction() { l..

Typescript 개요 to javascript

타입스크립트는 자바스크립트 위에 레이어로서 자리잡고 있음자바스크립트의 기능들을 제공하면서 그 위에 자체 레이어를 추가 - 이 레이어가 타입스크립트 자바스크립트는 이미 string, number, object, undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게할당되었는지는 미리 확인해 주지 않음이는 이미 존재하고 잘 동작하는 자바스크립트 코드는 동시에 타입스크립트 코드라는 의미지만,타입스크립트의 타입 검사기는 사용자가 생각한 일과 자바스크립트가 실제로 하는 일 사이의 불일치를 강조하지 못함 타입 추론타입스크립트는 자바스크립트 언어를 알고 있으며 대부분의 경우 타입을 생성변수를 생성하면서 동시에 특정 값에 할당하는 경우, 타입스크립트는 그 값을 해당 변수의 타입으로 사용 타입 정..

Language/TypeScript 2024.07.02

PHP 개요

서버 사이드에서 자주 사용하는 언어 브라우저의 요청 HTML 문서에 서버 사이드 스크립트 언어의 코드가 포함되어 있으면, 서버는 이 부분을 처리하고 결과를 브라우저로 반환. 동적 웹 페이지: 서버에 미리 저장된 파일이 아닌 서버에 있는 데이터들을 서버 사이드 스크립트 언어로 가공하여 생성되는 페이지 PHP 의 특징 1. 대부분의 웹 서버에서 지원 1. 작성해야하는 코드의 양이 적다(?) 1. 텍스트 처리에 특화 - HTML 문서 처리에 적합(?) PHP 의 단점 1. 간단한 사이트 제작을 위한 언어로써 복잡한 사이트에 효율이 떨어진다. 1. 보안에 안전하지 않다. 버전별 주요 특징 5 -> 객체 지향 프로그래밍의 개념이 많이 추가 5.3 -> 네임스페이스가 추가 5.4 -> 단일 상속의 한계를 없앤 트레..

Language/PHP 2024.04.21

스트림의 중개 연산

스트림 API에 의해 생성된 초기 스트림은 중개 연산을 통해 또 다른 스트림으로 변환 중개 연산은 스트림을 전달받아 스트림을 반환하므로, 중개 연산은 연속으로 연결해서 사용 가능 스트림의 중개 연산은 필터-맵(filter-map) 기반의 API를 사용함으로 지연(lazy) 연산을 통해 성능 최적화 대표적인 메소드 1. 스트림 필터링 : filter(), distinct() 2. 스트림 변환 : map(), flatMap() 3. 스트림 제한 : limit(), skip() 4. 스트림 정렬 : sorted() 5. 스트림 연산 결과 확인 : peek() 스트림 필터링 // 스트림 필터링 IntStream st1 = IntStream.of(7,5,5,2,1,2,3,4,5,6); IntStream st2 =..

Language/Java 2022.11.07

Stream

스트림 API의 동작 흐름 스트림 생성 -> 스트림 중개 연산 (변환) -> 스트림 최종 연산(사용) 컬렉션 자바에서 제공하는 모든 컬렉션의 최고 상위 조상인 Collection 인터페이스에는 stream() 메소드가 정의 되어 있음 따라서 Collection 인터페이스를 구현한 모든 List 와 Set 컬렉션 클래스에서도 stream() 메소드로 스트림 생성 가능 // 컬렉션 ArrayList list = new ArrayList(); for (int i = 0; i < 10; i++) { list.add(i); } Stream stream = list.stream(); stream.forEach(System.out::println); 배열 전체 배열 뿐만 아니라 특정 부분의 스트림을 생성 가능 // ..

Language/Java 2022.11.07

프로토타입과 클래스

객체 생성자 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있음 객체 생성자를 사용 할 때에는 보통 함수의 이름을 대문자로 시작, 새로운 객체를 생성 할 때에는 new 를 붙여준다 function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function () { console.log(this.sound); } } const dog = new Animal('개', '댕댕이', '멍멍'); const cat = new Animal('고양이', '냥냥이', '야옹'); dog.say(); cat.say(); // result : 멍멍 // re..

배열 내장함수

indexOf => 원하는 항목이 몇 번째 원소인지 찾아주는 함수 // indexOf const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; const index = superheroes.indexOf('토르'); console.log(index); // result : 2 findIndex 배열 안에 있는 값이 숫자, 문자열, 또는 불리언일때 찾고 싶은 항목이 몇번쨰 원소인지 ? indexOf 배열 안의 값이 객체, 배열이면 ? findIndex const memu = [ { id: 1, text: '모듬회', done: true }, { id: 2, text: '삼겹살', done: true }, { id: 3, text: '탕수육', done: tr..

reduce

reduce reduce 는 잘 사용하면 정말 유용한 내장 함수임 배열의 총합을 구한다고 해보자 변수 sumEx 는 그냥 대충지은거임 현재 열어놓은 크롬창에 sum이 선언되어있어서..ㅇㅇㅋ const numbers = [1, 2, 3, 4, 5]; let sumEx = 0; numbers.forEach(n => { sumEx += n; }); console.log(sumEx); 결과는 15 여기서 sumEx 를 계산하려고 선언을 하고, forEach 를 사용해서 계속해서 덧셈 해줬음 근데 reduce 를 사용하면 아래와 같다. const numbers = [1, 2, 3, 4, 5]; let sumEx = numbers.reduce((acc, current) => acc + current, 0); con..

spread 와 rest

spread spread 의 의미 : 펼치다, 퍼뜨리다. 예를 들어 이런 객체들이 있고 새 객체를 만들 때 마다 앞의 객체의 속성을 그대로 가지고 만들어 줬다. 그러면서 속성은 하나씩 추가가 되었는데 이런 식으로 기존의 것을 건들이지 않고 새로운 객체를 만드는 함수가 spread 놀랍다 매우... 그리고 spread 연산자는 배열에도 사용 할 수 있따. 또한 배열에서 spread 함수를 여러번 사용도 가능! ㅗㅜㅑ... rest 객체에서의 rest rest 안에 head 값을 제외한 값이 들어있다. rest 는 객체와 배열에서 사용 할 때는 이런식의 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때에는 rest 라는 키워드를 사용, 그치만 추출 값한 값의 이름이 꼭 rest 일 필욘없다. 이어서 bo..

localStorage / sessionStorage

localStorage = 창을 닫아도 계속 유지 탭 여러개 공유 명시적으로 삭제 될 때 까지 유지 sessionStorage = 창을 닫으면 삭제 세션 기간 동안 사용가능 사용법은 동일하다. 가끔 js 에서 js 로값을 보내려고 할때 사용해보자 상황 ) 어떤 input 에서 이메일을 가져와서 다른 곳에 넣으려 할 때 전송 $("#getEmail").on('click', function () { var getEmail1 = $("#managementId").val(); console.log("getEmail1 : " + getEmail1); var getEmail2 = { "email" : getEmail1 } //스토리지에 저장 key, value localStorage.setItem("getEmail..

Input 값 실시간 감지

원래는 change 를 써서 input에서 값을 다 입력한 후 변동사항을 체크했는데 이런방법이 있다. var emptyMg = $("#" + d.objectName + " input[name=" + d.field + "]"); // 아래는 input값을 다 입력 후 떠날 때 체크 emptyMg.change(function () { $("span").remove('#vout_'+ d.field + ''); }) // 값이 입력되자마자 체크 emptyMg.on("propertychange change keyup paste input",function () { $("span").remove('#vout_'+ d.field + ''); }) 좀 조잡해 보일수 있지만 내용은 .on("propertychange c..

javascript:void(0)

단 한마디로 javascript:void(0) 는 링크이동을 무력화 시킨다. 예제 네이버로 가자! 이러면 네이버로 갈 거임 이러면 해당 ramen 값을 가지고 있는 div 요소로 스크롤이 향함 javascript:void(0) 는 태그는 그대로 쓰고 url, id 를 사용하지 않을 경우에 쓴다. ( ) 안에는 숫자 아무거나 영어 아무거나 넣어도 사용 가능하다. 그리고 void 는 undefined 를 리턴함 ㅇㅇ

moment.js 를 사용하여 시간 차이 구하기

js 항상 시간을 다루는건 까다롭다고 생각하던중 moment.js 라는걸 알게 되었따 moment.js 는 js에서 시간을 다루기 위한 것이고, 깔끔하고 간결하게 표시할 수 있다. 아래는 특정 시간에 예약을 할 경우의 코드 현재 시간보다 이전의 시간을 예약할 수 없게 만들어보자 // 입력 받아올 날짜 var t1 = moment("입력받아올날짜").format( "YYYY-MM-DD HH:mm"); // 현재 날짜와 시간을 출력 let t2 = moment().format("YYYY-MM-DD HH:mm"); console.log(t1 + "----->t1"); console.log(t2 + "----->t2"); // 현재시간과 t1가 몇분이 차이가 나느냐를 출력 console.log("분차이", mo..

js 파일을 수정해도 적용이 안될 때

진짜 js 파일을 몇번을 수정해도 적용이 안되길래 나는 항상 강력새로고침을 하는 편이라 그거도 안먹히기에.. 마음속으로 모니터 진심펀치 30번 날리고 내가 지금 파일을 잘못찾아서 하고 있나? 이쯤 되면 내가 잘못한건가?하며 내 자신의 사고방식을 바꾸려 나와의 싸움을 할 때 알게 되었다. 그 방법을... ?v= 자바 내부함수를 이용해서 js 파일을 저장 후 출력하는 방식이 아닌 그냥 새로이 호출해서 보여주는거라 바로 반영이 된다. 시간함수를 넣은 이유는 시간은 계속 흐르기 때문에 굳이 내가 숫자를 넣지 않아줘도 시간은 자동으로 바뀌기 때문. 위의 저걸 이런식으로 넣어주고 실행해보자 하핳ㅎ핳ㅎ하하핳ㅎㅎ 당신은 성공을 했다. 그리고 난.. 틀리지 않았다...

Element.closest()

closest() 는 특정한 문자열과 일치하는 노드에서 가장 가까운 자신 또는 조상엘리먼트를 반환한다. 값이 없다면 null 을 반환한다. 문법 var closestElement = targetElement.closest(selectors); selectors 에는 id, class, div 등을 넣으면 된다. 예시 여기는 div-01 여기는 div-02 여기는 div-03 var el = document.getElementById('div-03'); var r1 = el.closest("#div-02"); // id=div-02로 요소를 반환. var r2 = el.closest("div div"); // div에 있는 div인 가장 가까운 상위 항목을 반환. div-03 자체 var r3 = el.c..

subList

subList 는 어떤 리스트의 fromIndex 와 toIndex 를 정해서 해당 리스트를 잘라서 서브리스트로 다시 보이게 하는것이다. 특정 리스트를 잘라서 사용할 때가 생길 때 사용하자. 구글링을 해보면 메모리 누수 이슈가 있는것 같은데... 뭐 알아서 판단하고 사용하자! list.subList(fromIndex, toIndex); 해당 리스트에서 시작할 인덱스와 끝날 인덱스의 값을 넣어주면 된다. 참고 만약 toIndex의 값이 5라고 치면 5번의 인덱스의 값은 나오지 않는다. 만약 특정 부분에서 마지막 인덱스 까지를 subList로 뽑고 싶다면 해당 list.size를 구한다음 list.size - 10 이런식으로 fromIndex를 정해주고 toIndex는 list.size로 설정하자. 그럼 끝..

Language/Java 2022.02.22

Double.isInfinite

증감 퍼센트나 연산을 하다보면 의도치 않게 값이 NaN 이나 Infinity 가 출력이 되는 경우가 있는데, 해당 값으로 화면에 보여주게 된다면 제대로 된 그래프가 되지 않을 것이다. 그걸 처리해보자. 사용법 Double.isInfinite(체크할 변수) double은 실수형이다. Double.isInfinite :: 해당 double 값이 Infinity 라면 true 아니라면 false 를 출력한다. Double.isNaN :: 해당 double 값이 NaN 이면 true 아니라면 false 를 출력한다. 예) 아래의 result 수식은 증감퍼센트를 구하는 수식이다. double startCount = 0.0; double endCount = 11; double result = (endCount - ..

Language/Java 2022.02.18

window.location

현재 페이지의 URL을 가져오기위해 window.location 을 사용하자! // 'https://210one2.tistory.com/374' window.location.href // 'https:' window.location.protocol // '210one2.tistory.com' window.location.host // '210one2.tistory.com' window.location.hostname // '' window.location.port // '/374' window.location.pathname // ?category=14157" window.location.search window.location.href 전체 url 문자열을 가져온다. window.location.pro..

spring message properties 2탄

요로코롬 메뉴바가 있다. 허졉하지만 메뉴바임ㅇㅇ/.. 앞에 했던 spring message로 변경을 한다고 치면 아마 url에 param이 붙어서 엉망이될 것이다.. 아마도 예를들어 현재 영어인상태에서 영어를 한번 더 누른다면 praram에 lang=en이 하나 더 붙어버리는 끔찍한 상황이 발생한다.. 그걸 고쳐보자 ㅇㅇ 여기서는 js로 처리를 할것이다. 해당 링크를 클릭하면, 해당 id 값을 가져오고 현재의 url을 가져와서 해당 param이 있는지 없는지 검사를 한 후 없다면? > append로 해당 param을 추가시키도록 설정했다. 있다면? > set으로 해당 param vlaue를 수정하도록 설정했다. 그후 해당 창을 열기 $(".nav-link").click(function (){ let la..

확장 for 문

일반 for 문 for (i = 0; i < tableName.length; i++) { if (menu === tableName[i]) { location.href = '/' + tableName[i] +'?pageName=' + tableName[i] + '' } } 자 이렇게 일반적인 for 문 이있다. 이걸 섹시하게 확장 for 문으로 바꿔보자. 바꾸는 이유? 섹시하니까 ㅋ 인덱스바운드 에러가 절대 일어날 수 없단다 :: i는 위에 선언 해둔거라 따로 선언하길 바람 확장 for 문 for (i in tableName) { if (menu === tableName[i]) { location.href = '/' + tableName[i] +'?pageName=' + tableName[i] + '' }..

Language/Java 2022.01.05