공부 자료 : 드림코딩 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..

간단하게 버튼을 클릭하면 리스너를 달고 지정한 폴더안에 있는 파일을 다운로드하는 코드를 연습하면서 사용한 메소드를 정리한다. getElementById(elementId: string): HTMLElement | null; : 지정된 ID에 값을 가진 첫번째 개체에 대한 참조를 반환 파라미터로는 String을 받는다. createElement(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]; : 지정된 태그에 대한 요소의 인스턴스를 만듭니다. HTMLElementTagNameMap 안에 정의되어 있음. 이는 인터페이스로 선언되어 있음 appendChild(newChild: T): T; Node.appendChild() 메소드..

WEB Service Web Service의 기본적인 동작 과정은 다음과 같다 HTML Form -> Servlet -> HTML Page 1. 사용자가 웹 페이지(HTML Form)를 통해 값을 입력 (Input) 2. Servlet 의 메소드는 입력한 데이터 form data 에 맞게 관련된 정보를 검색 3. 사용자의 요청에 맞는 동적 컨텐츠를 제공한다 (Output) -Form Tag 속성- 1. action : form을 전송할 서버 쪽 스크립트 파일 지정 2. name : form을 식별하기 위한 이름 3. accept-charset : 어떤 문자 인코딩을 적용할지 지정 4. target : action에서 지정한 스크립트 파일을 다른 위체에서 열리도록 지정 5. method : form을 서버..

Js 파일을 변경하고 was 서버에 반영이 안되는 현상이 날때 해결 해당 파일은 Jquery를 담고있는 js를 script 해옵니다. 만약 제가 그 파일을 수정하고 다시 시작한다고 해도 js 파일을 수정한 부분이 적용이 안될 수도 있습니다. 그 이유는 브라우저는 캐쉬를 사용하게 되고 이 캐시로 js 나 css 문서가 처리가 되기 때문입니다. jsp파일의 경우는 설정을 해 놓고 새로고침만 해도 변경점이 바로 적용됩니다. 여러번 f5를 눌러 갱신할 경우 될 수도 있지만. 이러면 좋지 않습니다. 브라우저가 캐쉬에 있는 파일을 사용하지 않고 바로 변경된 파일을 사용하는 법은 위의 사진에서와 같이 파일명 뒤에 ?ver= 를 붙이는 것입니다. 숫자는 뭐든 상관이 없습니다. 버전정보가 들어감으로써 캐쉬에 들어간 정보..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 자료구조 : Array 연습 // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; //join 사용 const result = fruits.join("") console.log(result); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; // split(separator: string | RegExp, limit?: number): string[]; const result = fruits.split(',',2); //split은 구분..

공부 자료 : 드림코딩 by 엘리 개발 환경 : visual studio code 언어 : js 자료구조 : Array 1. 배열 선언 위와 같이 선언할 수 있다. 배열은 안에 들어간 값을 index로 참조할 수 있다. 2. Array APIs lib.es5.d.ts 에 정의되어 있는 함수를 알아보았다. 2-1 반복문 배열 안에 있는 value 들 마다 내가 전달할 함수를 출력하는데 용이하다. 2-2 Addtion, Deletion, copy pop 과 push 의 경우 마지막 인덱스를 조작하기 때문에 빠르게 실행된다. 하지만 shift나 unshift 의 경우 앞을 조작하다보니 뒤의 index를 당기거나 밀어야 한다. 배열이 커질수록 걸리는 시간이 증가한다. 2-3 splice : index 번호로 추..

개발을 하다 보면 한 페이지에서만 사용하는 함수가 아니라 여러곳에서 사용하는 함수들이 있습니다. 이를 각각 페이지에 적게 되면 시간도 오래걸리고 유지보수가 어려워 한 파일에 넣어서 관리하고 참조하여 사용합니다. 간단하게 예제를 만들어 보았습니다. 해당하는 경로에 common.js를 만들고 자기 자신을 리턴하는 함수로 구현합니다. 그리고 그 안에 ui가 있고 그안에는 download 라는 함수가 있습니다. 맨 하단부는 다음과 같이 const로 $commons -> 불려질 이름 으로 지정합니다. 사용할 페이지에 이런식으로 선언합니다 (Android 에서의 import라고 이해하였습니다) 사용시에는 이런식으로 접근하여 해당 함수를 불러옵니다.