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 함수가 바로 실행이 된다. 이..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 1. 콜백함수의 개념 자바스크립트 언어는 동기적 언어이다. 순차적 언어이지만 뒤에 서술하여도 hoisting 되는 부분이 먼저 맨 위로 자동적으로 올라가고 그 뒤 순차적을 진행한다. hoisting의 대표적 예로는 var 변수나 함수선언이 있다. 다음과 같은 setTimeout 이라는 함수가 있다 이 함수는 파라미터로 함수를 받아올수 있다. 자바스크립트는 위에서부터 아래로 읽는다. 1을 바로 출력하고 setTimeout 를 만나면 브라우저에게 다음과 같은 function을 해당하는 2000(2초) 뒤에 실행해달라는 메시지를 남기고 그다음줄로 이동하여 3,4를 출력한다. 2초뒤 2를 출력하여 로그는 1 ,3 ,..

지금 하고있는 함수가 json을 이용해서 fetch 함수로 페이지의 값을 받아오는것을 시도 중 입니다. 하면서 다른 파일 경로를 받아오는데 햇갈려서 기록합니다. test.jsp 에서 yoonweb-menu.json을 참조하려면 어떻게 해야 할까요 이런식으로 사용하면 됩니다. fetch 뒤에는 상대경로가 위치하였고 각각의 뜻은 다음과 같습니다. / : 루트 ./ : 현재 위치 ../ : 현재 위치의 상단 폴더 - 3가지를 간단히 정리하자면, 1 '/' -> 가장 최상의 디렉토리로 이동한다.(Web root) 2 './' -> 파일이 현재 디렉토리를 의미한다. 3 '../' -> 상위 디렉토리로 이동한다. 입니다. 시작점은 test.jsp가 아니라 webapp에서 시행됩니다.

http에서 json 통신에서 사용중인 함수를 정리한다. stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string; JavaScript 값을 JSON(JavaScript Object Notation) 문자열로 변환합니다. * @param value 변환할 JavaScript 값, 일반적으로 개체 또는 배열입니다. * @param replacer 결과를 변환하는 함수. * @param space 들여쓰기, 공백 및 줄 바꿈 문자를 반환 값 JSON 텍스트에 추가하여 읽기 쉽도록 합니다. assign(target: T, source: U): T & U; * 하나 이상의..

css CSS 란? : HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어. 과거에는 HTML에 디자인적 요소도 같이 넣어서 작업했다면 HTML의 본연의 목적인 구조화된 문서를 작성하고 디자인은 css파일로 입히는 형태로 프로젝트를 진행해야한다. 효과] 구조화된 HTML은 알아보기 쉬우며 문서의 해독 속도가 빨라진다 웹 디자이너와 웹 프로그래머 간의 협업이 용이하고 유지보수와 일관성 유지에 획기적이다. 트래픽도 줄여 모바일 환경에서의 요금관련도 줄이고 로딩도 빨라지는 효과가 있다. 연습하고 있는 페이지에 css 적용을 좀더 현업에서 사용되는 식으로 적용해 보았다. 우선 header, 네비게이션 바, 내용물(추후 SPA 로 구현) 만 해놓은 상태이다. common.c..

HTML 속성 Attributes 속성은 요소에는 실제로 나타내지 않고 내용을 담고 싶을 때 사용합니다. 1. 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다. 2. 속성 이름 다음엔 등호(=)가 붙습니다. 3. 속성 값은 열고 닫는 따옴표로 감싸야 합니다. [1] a 요소 href : 연결하고자 하는 웹 주소 title : 마우스 커서를 올릴 때 나오는 텍스트 target : 링크가 어떻게 열릴지 지정 ex) target="_blank"는 링크를 새탭에서 열게 합니다. [2] 참과 거짓 속성 disabled : 허용 ex) text의 경우 입력이 불가함 [3] 전체적 요소 : 문서형식 : 전체 페이지의..

메소드 정리중 정말 이해가 안되는 부분이 있어서 다시 공부해보았다 response.setContentType("application/octet;charset=utf-8"); 해당 메소드 뒤에 octet은 왜 붙는지 또한 이건 어디에 명시되어있는지 찾기가 너무 힘들어서 메모합니다. setContentType 메소드는 html의 표준 MIME 타입인 "text/html" 의 변경이나 캐릭터의 인코딩을 재 지정하고자 할때 사용합니다 기본적으로는 text/html을 표준으로 지정하고 필요에 의해서 변경할 수 있습니ㅏㄷ. 웹은 이런 MIME 타입을 확인하고 어떤 파일의 스트림인지 알게 됩니다. [MIME 타입] text/html audio/mpeg image/bmp image/jpeg application/pdf..