문법 :Object.assign(target, ... sources) 해당 메소드는 타켓 파라미터와, 기타 병합 할 객체를 받습니다. 그리고 리턴값으로는 target object를 반환합니다. 이전 JQuery에서 extends와 유사하게 target이 되는 객체에 새 덧붙여 return 하기 때문에 원본을 해치지 않으려면 빈 {} 객체를 target으로 두고 해당 객체를 받아오면 됩니다. 위의 코드에서 copy1과 copy2는 똑같이 나옵니다. 왜냐하면 copy 와 copy2에 저장된 요소는 a 객체이고 a 객체는 assign에 의해 c까지 합쳐진 상태가 되었기 때문입니다. 이렇게 사용하던 객체를 이용하면 마지막에 합쳐진 결과값으로 나오기 때문에 원본의 훼손이 일어나지 않게 하려면 빈 {}를 targe..

개발속도를 도와주는 개발자도구와 디버거 페이지를 개발하면서 원하는 동작이 아니라 생뚱맞은 결과나 작동을 안하는 경우가 많습니다. 이럴 경우 log나 alert를 찍어보면서 해당 값이 잘못되었는지 전달이 안되는지 확인 할 수도 있지만. 빠르고 쉽게 확인하는 방법은 debugger; 를 사용하면 됩니다. 또한 코드에 debugger; 를 삽입하는 방법 외에도 DevTools를 이용해서 (Ctrl + shift + i) 에서 콘솔을 찍거나 typeof, instanceof 등을 이용할 수도 있습니다. 간단한 예시입니다 위의 코드는 버튼을 클릭했을 때 이벤트안에 debugger를 넣은 것입니다. 웹이 실행되고 해당 debugger;이 실행되는 순간을 만나는 즉시 다음과 같은 창이 됩니다. 버튼을 클릭하니 바로 ..

이전에 만들었던 버튼 이후 text 란과 option 값을 주고 ajax 통신 버튼을 만들었다. 지금 하는 것은 충분히 value로 alert를 할 수 있지만, fetch 함수를 통해 비동기적으로 구성되도록 하였다. 추후 페이지 개발시에는 페이지 이동 없이 로그인 기능을 구현 할 수 있다. text에 입력 받은 값을 비교 후 alert를 하고, 나이가 10대일 경우 입장이 불가하다는 alert를 구현해보았다. jsp 코드] 먼저 jsp 코드를 보면 result 라는 객체(Object 를 값으로 전달한다. 값을 text필드의 값과 select의 value를 넣고 추후 구분을 위한 rule과 auth를 선언하였다. body: JSON.stringify(result) fetch api가 전달하는 파라미터중 b..

JQuery 사용을 안하려고 하다가 결국 사용을 해야할거같아서 기본 개념과 사용한 함수를 정리합니다. 제이쿼리(jQuery)란? 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 제이쿼리 문법] 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다. $(선택자).동작함수(); 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. html 문서가 먼저 로드되고 이후에 script 문서가 로드되야 오류가 나지 않기 때문에 하단부에 보통 아래와 같은 형식으로 선언을 한다. JS 에서는 보통 ..

저번에 공부한 Ajax기법은 XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주게 하는 기법이다. 요즘 XML은 거의 사용 안하고 JSON을 많이 사용하기 때문에 Fetch를 많이 사용한다. 게다가 Fetch는 Promise로 구성되어 있기 때문에 비동기적기고 then과 catch 등을 이용해 가독성이 뛰어나다 게다가 기본 API라 바로 사용 가능한 잇점도 있다. 기본 문법] default : GET CRUD 의 READ와 비슷하다 fetch 는 HTTP 요청을 전송한 URL, HTTP 요청 메소드 (GET POST PUT DELETE 등), HTTP 요청 헤더 등을 파라미터로 받아 전달한다.fetch() 에서 요청 메소드를 지정하지 ..

AJAX : Asynchronous JavaScript And XML -서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 - 대표적으로 JSON, XML, HTML 과 같은 다양한 포맷을 주고받을 수 있다. -Ajax의 강력한 특징은 페이지 전체를 리프레시 하지 않고 기능을 수행하는 비동기성 이다. - 서버로부터 데이터를 받고 작업을 수행한다. 1] HTTP Request JavaScript를 이용하여 서버로보내는 HTTP Request를 만들기 위해서는 객체의 인스턴스가 필요하다. XMLHttpRequest가 그러한 Object의 예입니다. 서버에 무엇인가를 요청하기에 앞서, 서버로 보낸 요청에 대한 응답을 정해야 합니다. httpRequest의 onreadystatechange pr..

1] 현재 날짜, 시간 구하기. 변수를 선언하고 그 값에 querySelector로 편하게 객체에 접근한다. 새로운 변수를 각각 선언하고 그 값을 new 생성자를 통해 Date 함수를 통해 각각 값을 지정한다 getFullYear의 값은 4자리 수를 반환 (number) getMonth의 값은 2자리 수를 반환 (number) 아래의 컨트롤러 함수를 따로 지정해서 컨트롤 하였다 index 를 받아서 처리한다. new Date()안에 각각의 파라미터를 넣어주게 되면 해당 년, 월, 일 에 맞춰서 나오는데 2021년 12월 0일은 없다. 이 값은 해당 월의 마지막날을 알려주게 된다. 만약 그 달의 마지막날로부터 1일 전이라면 -1 이런식으로 변경해서 사용 할 수도 있다. substring 과 비슷한건 sub..

1] li 안의 Template 를 만들고 그 안을 for문으로 원하는 만큼 반복문으로 만들기 시작점을 지정하고 현재의 년도를 함수를 통해 받아온다. for문을 통해 시작점부터 현재의 년도까지 반복하게 된다. 해당하는 html 태그를 만든다음에 template tag에 맞는 값을 생성하고 그 안의 html을 내가 지정한 방식으로 만들게 됩니다. 그리고 node라는 곳에 저장하고 그 값은 true 로 보여지게 됩니다. 그리고 yearList.append(node) 를 적어두면 잘 작동하게 됩니다. 2] 위의 방법으로 만든 template를 어떠한 액션 리스너에 의해 지우고 원하는 값으로 다시 만들 때 사용하는 방법 #안의 값은 querySelector로 떠 온 값을 변수에 지정하고 그값을 넣어준 것입니다...

substring(start: number, end?: number): string; String 개체 내의 지정된 위치에 있는 부분 문자열을 반환합니다. * @param start 부분 문자열의 시작을 나타내는 0부터 시작하는 인덱스 번호입니다. * @param end 부분 문자열의 끝을 나타내는 0부터 시작하는 인덱스 번호입니다. 하위 문자열은 end로 표시된 문자까지의 문자를 포함하지만 포함하지 않습니다. * end가 생략되면 원래 문자열의 처음부터 끝까지의 문자가 반환됩니다. --- split(separator: string | RegExp, limit?: number): string[]; 지정된 구분 기호를 사용하여 문자열을 부분 문자열로 분할하고 배열로 반환합니다. * @param separa..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 이전에 공부한 콜백과 프로미스를 이용해서 콜백 지옥을 프로미스를 이용해서 간략하게 바꾸는 연습을 하고 메모한다. 콜백함수 원본 바꾸게 되면 다음과 같다. 살짝만 보아도 간결해진것을 알 수 있다. promise에서는 상태가 중요하다고 하였다. 콜백함수에서 성공case와 실패시 case를 각각 resolve와 reject로 이해하고 해당 부분을 적용시키면 된다. 우선 Promise는 생성자로 생성을 해줘야 하며, 해당 함수가 선언되고 resolve든 reject든 반환해줘야 하기 때문에 return을 사용해준다. yoon이라는 이름 또는 coder 라는 이름이 각각 id와 password가 지정된 값이 맞으면 r..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 1. Promise 이론 자바스크립트 안에 내장되어 있는 object 비동기적인 함수를 구현할 때 사용하게 된다. 무자비한 콜백 지옥대신 간결하게 사용할 수 있다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하게 된다. 시간이 걸리는 것들은 동기식 방법을 사용하게 되면 시작과 함께 로딩시간이 길어질 것이기 때문이 이러한 네트워크 처리, 파일 다운로드 ,Api 처리등은 프로미스를 많이 사용하게 된다. 만약 사용자가 요청했을 때만 해야 하는 경우라면 자칫하다가는 불필요한 함수가 실행 될 수 있다. 그 이유는 promise 가 만들어지는 순간 전달한 executor 함수가 바로 실행이 된다. 이..